Creating a Newscast

Purpose: This tutorial will help you create a cross-platform newscast in Adobe Flash that you can put on your school website.

You could put a video on the website in Windows Media or Quicktime, but it could take some time for the video to download. You also have to worry about the people having the proper codecs installed. Converting it to flash and embedding it ensures that people can see the video in most cases. People with computers up to about 8 years old should be able to see the video, but it may require a faster connection depending on the size of the video produced. Many people have flash 7 or newer on their computer and should be able to see the video. You should always evaluate whether the people in your community will be able to see the content that you are providing. And you should let them know when you are using a technology that is not HTML, the markup language used in making web pages.

The tutorial assumes the following:

• You have a local folder on your computer that has all of your web pages in it that mirrors the structure of your website as it exists on the Washington County Webserver that hosts your site.
• You have a graphics manipulation program such as Adobe Photoshop or Photoshop Elements, Paintshop Pro, or something else that you are familiar with that will let you scale images and crop.
• You can enter text into a file with Notepad or a Text .
• You have file extensions turned on if you are using Windows. To be sure:
  1. Open My Computer or any folder view in Windows
  2. Click Tools from the menubar
  3. Select Folder Options
  4. Select the View tab
  5. Find Hide extension for known file types and make sure it is unchecked and click OK

Now, on to the meat of the project:

1. Save the file mediaplayer-3-16.zip to your desktop or some other place that you can find it.
2. Create a folder in your web site folder called newscast.
3. In this folder, create another folder called media. In this folder you will put the videos and some small screenshots of the start of the video.
4. Open the mediaplayer-3-16.zip file and navigate into the mediaplayer-3-16 folder.
5. Drag the mediaplayer.swf and swfobject.js file into the newscast folder.

Next, we will convert the video to a format usable by flash.

1. Save the file avanti-0.2.4.zip
2. Open this file and drag the folder to the desktop or another location that you know where to find it.
3. Open the folder avanti-0.2.4
4. Double-click the file Avanti-GUI.exe
5. Click the Folder Icon beside Source 1 and locate the file you want to convert.
6. Click the Folder Icon beside Destination and locate the file you want to convert. This will name the new file with the proper extension (.flv) for you. I recommend a date based name such as 20080204 for February 04, 2008. The year is first because a alphabetic ordering will put the most recent at the end of the list. It also identifies the file clearly. Do not put spaces in filenames. It will cause you no end of grief.
7. Under Destination Audio settings change Bitrate (kbit/s) to 32
8. Under Destination Audio settings change Sample Frequency to 22050
9. Under Destination Video settings click the Codec drop down and type in Flash Video and in the drop down box to the right of this, select Default
10. Under Destination Video settings change Frame size to 320x240
11. Under Destination Video settings change Bitrate (kbit/s) to 200
12. Click Start Process
13. When the progress bar is done, you will see the file in the place you set for the destination. Copy this file to the media folder in the newscast folder.

1. Download ffmpegX
2. Instructions will be added here after they are tested.

Next, we take a screenshot of the video.

1. Open up the original video file in the player that it uses (Quicktime, Windows Media Player, etc.) and pause the video.
2. Press the Print Screen key on your keyboard to take a screen shot.
3. Open up your photo editing software and paste the screenshot in a new photo.
4. Crop the photo to the size of the video screen.
5. Scale the photo to 200x150
6. Save it as a JPEG using the same name as your filename except use jpg as the extension (e.g. 200803.jpg)
7. Copy this photo to the media folder in the newscast folder of your website folder.

1. Instructions will be added here after they are tested.

Now, we will create a playlist for the video player that we will embed in the webpage.

1. First, make sure that you are showing
2. Open up notepad (Start Menu → Programs → Accessories).
3. Paste the following text into the file:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
  </trackList>
</playlist>

1. Go to the File menu and select Save As . Browse to the folder where the netcast folder is.
2. In the field labeled File name: type playlist.xml
3. The basics of the player are done now.

Let me explain the lines in order in the playlist above.

1. This line declares the document to be an xml file.
2. This line says that we are creating a playlist document.
3. This line starts the track list.
4. This line ends the track list.
5. This line ends the playlist.

Simple, no? Now we need to add the video to the playlist. In between the start and end of the track list, we want to add a track. Here is the format:

    <track>
      <creator>Newscast</creator>
      <title>March</title>
      <location>/newscast/media/200803.flv</location>
      <image>/newscast/media/200803.jpg</image>
    </track>

Just as before, the lines are mostly self explanatory:

1. This starts a track
2. This defines the creator of the track. Here I am just using it as part of the title of the track.
3. This is the title of the track.
4. This is the location ¹⁾ of the video file that you want to add to the playlist.
5. This is the location (from the top of the site) of the image file that is displayed as a preview of the clip.
6. This is the end of the track.

We take this track and put it in between the start and end of the track list like this:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>Newscast</creator>
      <title>February</title>
      <location>/newscast/media/200802.flv</location>
      <image>/newscast/media/200802.jpg</image>
    </track>
  </trackList>
</playlist>

New tracks should be put at the top of the list and older ones should follow like this:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>Newscast</creator>
      <title>March</title>
      <location>/newscast/media/200803.flv</location>
      <image>/newscast/media/200803.jpg</image>
    </track>
    <track>
      <creator>Newscast</creator>
      <title>February</title>
      <location>/newscast/media/200802.flv</location>
      <image>/newscast/media/200802.jpg</image>
    </track>
  </trackList>
</playlist>

You are nearly finished! The final part is adding the flash object to your page. You will need to edit the HTML of the document you want the flash to appear directly in the desired location.

<object type="application/x-shockwave-flash" data="/newscast/mediaplayer.swf" width="500" height="240" id="mediaplayer">
  <param name="allowScriptAccess" value="sameDomain"/>
 
  <param name="movie" value="/newscast/mediaplayer.swf"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noScale"/>
  <param name="wmode" value="transparent"/>
  <param name="flashvars" value="file=/newscast/playlist.xml&displayheight=200&displaywidth=320&autoscroll=true"/>
</object>

Once the page has been saved, publish the page and also make sure that the newscast folder is uploaded to your site. You should see the flash object in your new page after it is published.

If you have any questions or problems with the instructions above, please email me at cedwards@wcs.k12.va.us