Knowledge Base

User Tools

Site Tools

You are here: Knowledge Base » Web Site Information » Creating a Newscast
web:newscasts

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision 		Previous revision
web:newscasts [2008/04/28 15:55]
cedwards created 		web:newscasts [2009/02/20 13:58]
cedwards The xml should be trackList not tracklist
Line 1: Line 1:
-This walkthrough will help you create a cross-platform newscast that you can put on your school website.  The tutorial assumes the following:+====== 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. 
 + 
 +===== Background ===== 
 + 
 +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 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 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.+  * 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: 
 +    - Open My Computer or any folder view in Windows 
 +    - Click ** Tools ** from the menubar 
 +    - Select ** Folder Options ** 
 +    - Select the ** View ** tab 
 +    - Find ** Hide extension for known file types** and make sure it is // unchecked // and click ** OK **
  
 Now, on to the meat of the project: Now, on to the meat of the project:
  
-  - Save the file [[ftp://ftp.wcs.k12.va.us/pub/web/mediaplayer-3-16.zip|mediaplayer-3-16.zip]] to your desktop or someother place that you can find it.+===== Setting up the Video Player ===== 
 + 
 +  - Save the file [[ftp://ftp.wcs.k12.va.us/pub/web/mediaplayer-3-16.zip|mediaplayer-3-16.zip]] to your desktop or some other place that you can find it.
   - Create a folder in your web site folder called newscast.   - Create a folder in your web site folder called newscast.
   - 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.   - 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.
   - Open the mediaplayer-3-16.zip file and navigate into the mediaplayer-3-16 folder.   - Open the mediaplayer-3-16.zip file and navigate into the mediaplayer-3-16 folder.
   - Drag the  mediaplayer.swf and swfobject.js file into the newscast folder.   - Drag the  mediaplayer.swf and swfobject.js file into the newscast folder.
 +
 +===== Converting the Video =====
 +
 +Next, we will convert the video to a format usable by flash.
 +
 +==== Windows ====
  
   - Save the file [[ftp://ftp.wcs.k12.va.us/pub/web/avanti-0.2.4.zip|avanti-0.2.4.zip]]   - Save the file [[ftp://ftp.wcs.k12.va.us/pub/web/avanti-0.2.4.zip|avanti-0.2.4.zip]]
Line 18: Line 40:
   - Double-click the file Avanti-GUI.exe   - Double-click the file Avanti-GUI.exe
   - Click the Folder Icon beside **Source 1** and locate the file you want to convert.   - Click the Folder Icon beside **Source 1** and locate the file you want to convert.
-  - 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 spaces in filenames**.  It will cause you no end of grief.+  - 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.
   - Under ** Destination Audio settings ** change ** Bitrate (kbit/s) ** to 32   - Under ** Destination Audio settings ** change ** Bitrate (kbit/s) ** to 32
   - Under ** Destination Audio settings ** change ** Sample Frequency ** to 22050   - Under ** Destination Audio settings ** change ** Sample Frequency ** to 22050
Line 25: Line 47:
   - Under ** Destination Video settings ** change ** Bitrate (kbit/s) ** to 200   - Under ** Destination Video settings ** change ** Bitrate (kbit/s) ** to 200
   - Click ** Start Process **   - Click ** Start Process **
 +  - 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.
 +
 +==== OS X ====
 +
 +  - Download  [[http://ffmpegx.com/download.html | ffmpegX]]
 +  - FIXME Instructions will be added here after they are tested.
 +
 +
 +===== Creating Screenshots of the Video =====
 +
 +Next, we take a screenshot of the video.
 +
 +==== Windows ====
 +
 +  - Open up the original video file in the player that it uses (Quicktime, Windows Media Player, etc.) and pause the video.
 +  - Press the ** Print Screen ** key on your keyboard to take a screen shot.
 +  - Open up your photo editing software and paste the screenshot in a new photo.
 +  - Crop the photo to the size of the video screen.
 +  - Scale the photo to 200x150
 +  - Save it as a JPEG using the same name as your filename except use jpg as the extension (e.g. 200803.jpg)
 +  - Copy this photo to the media folder in the newscast folder of your website folder.
 +
 +==== OS X ====
 +
 +  - FIXME Instructions will be added here after they are tested.
 +
 +===== Creating the Playlist =====
 +
 +Now, we will create a playlist for the video player that we will embed in the webpage.
 +
 +  - First, make sure that you are showing
 +  - Open up notepad (Start Menu -> Programs -> Accessories).
 +  - Paste the following text into the file:
 +<code xml>
 +<?xml version="1.0" encoding="UTF-8"?>
 +<playlist version="1" xmlns="http://xspf.org/ns/0/">
 +  <trackList>
 +  </trackList>
 +</playlist>
 +</code>
 +  - Go to the ** File ** menu and select ** Save As **.  Browse to the folder where the netcast folder is.
 +  - In the field labeled **File name:** type playlist.xml
 +  - The basics of the player are done now.
 +
 +
 +Let me explain the lines in order in the playlist above.
 +  - This line declares the document to be an xml file.
 +  - This line says that we are creating a playlist document.
 +  - This line starts the track list.
 +  - This line ends the track list.
 +  - 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:
 +<code xml>
 +    <track>
 +      <creator>Newscast</creator>
 +      <title>March</title>
 +      <location>/newscast/media/200803.flv</location>
 +      <image>/newscast/media/200803.jpg</image>
 +    </track>
 +</code>
 +
 +Just as before, the lines are mostly self explanatory:
 +
 +  - This starts a track
 +  - This defines the creator of the track.  Here I am just using it as part of the title of the track.
 +  - This is the title of the track.
 +  - This is the location ((The location from the top of the site.  The first slash is the top of the site and each / is separated by folder names deeper in the site.  In this example you can see the newscast folder and the media folder.)) of the video file that you want to add to the playlist.
 +  - This is the location (from the top of the site) of the image file that is displayed as a preview of the clip.
 +  - 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:
 +<code xml>
 +<?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>
 +</code>
 +
 +New tracks should be put at the top of the list and older ones should follow like this:
 +<code xml>
 +<?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>
 +</code>
 +
 +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.
 +
 +<code html>
 +<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>
 +</code>
 +
 +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**.
  
-When the progress bar is done, you will see the file in the place you set for the destination. Move this file to the media folder in the newscast folder. +If you have any questions or problems with the instructions above, please email me at cedwards@wcs.k12.va.us
-   +
-** More to come **+
web/newscasts.txt · Last modified: 2009/02/20 13:58 by cedwards

Page Tools

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki