VBCPS+Webmaster+Video+Workshop+P-MEDA-0044-09-001+Week+Two

**Presenter: Stephen Orr, CRS, Bettie F. Williams Elementary School stephen.orr@vbschools.com** http://stevebfw.wikispaces.com [|Follow me on Twitter - SteveBFW]
 * Webmaster Video Workshop P-MEDA-0044-09-001** **Week Two**

A two-day, four-hour workshop in the fundamentals of preparing short video clips for posting on VBCPS school websites. Students will bring a short video clip (1-2 minutes) on CD for use in the workshop. > >
 * Topics include:**
 * Tips on shooting effective video clips for the Web
 * Types of video formats and which are most effective on the Web
 * Overview of Windows Movie Maker
 * Converting and exporting WMV files to Flash (flv) files that are optimized for the Web
 * How to embed Flash video on a Web page using Dreamweaver
 * Permission Form to Post a Student Image on a School Website
 * SESSION II - February 10, 2010**


 * 1. REVIEW:** Last week we talked about general guidelines for shooting for the web, some tips when using cameras like the Flip, and discussed the most web friendly formats. We also spent time importing and editing a short video piece in Windows Movie Maker. We saved the project settings for Windows Movie Maker, as well. For a complete review of what we covered last week and the associated resources, please see the wiki for the first session.

Once you have finished editing your video, it is time to save it into a high resolution .wmv. We will worry about the actual frame size once it is time to convert the file. 1. With your project open in Windows Movie Maker, go to **3. Finish Movie>Save to my computer**. 2. Enter a file name for your saved movie, and chose a place to save your movie. for the purpose of today's exercise, save it to **My Documents>My Videos**. 3. In the Movie Setting window, select **Other settings**, and chose **Video for LAN (768 Kbps)**. You may want to experiment with different sizes with your own videos. 4. When you click Next, Windows Movie Maker will begin processing your video. When it is finished, click Finish.
 * 2. WINDOWS MOVIE MAKER - SAVING YOUR VIDEO -**

As we discussed last week, Flash video is the most prevalent web video format on the web today. All browsers supports Flash, the files are generally smaller, and depending on how it is embedded, viewers can control the video and audio.
 * 3. CONVERTING YOUR VIDEO TO FLASH**

Windows Movie Maker does not allow us to save our video in the Flash (.flv) format, which is why we had to saved our initial edited video file as a higher resolution .wmv file. We will be walking through how to convert your .wmv file with AnyVideoConverter. I have found the free version to be the quickest and easiest way to most videos to .flv with a minimum of fuss.

After downloading and installing AnyVideoConverter: 1. Open AnyVideoConverter. Click on **Add Video** and navigate to where you saved your .wmv file. 2. Under **Edit**, go to **Options>General and Set Output Folder**. Browse to where your flash video will be stored. In my case, I have a folder set up in my web files called "flash". Click **OK** 3. In the upper right corner, go to **Profile**, and select **Flash Video Movie (*.flv)**. This will be the format we are converting to. Notice all the choices you have under this menu. 4. Under **Video Options**, go to **Frame Size** and select the size (in pixels) you want your video to be. I am leaving it at **320x240** as the default for now. 5. Click the **Convert** button. Your video is now converting to a Flash file.

A good player to just play Flash on your computer without using a browser is Adobe Media Player.

For this session, I will be demonstrating how to embed a converted .flv file into a web page in Dreamweaver 8. I realize that you do not have the program loaded on the lab computer where you are sitting, but the steps are fairly straight forward. I have also included links to online resources at the end of this section.
 * 4. EMBEDDING FLASH VIDEO INTO A WEB PAGE**
 * 1) Launch Dreamweaver 8. Choose File > New to create a new web page. Because of the properties of the templates we use for our school websites, these codes built into our templates conflict with the code Dreamweaver creates. If I find a solution on how to get around this so we can embed directly into our existing templates, I will update this wiki.
 * 2) I am going to insert a table, which is where I will embed my video.
 * 3) Select Insert > Media > Flash Video from the main menu to launch the Flash Video Component.
 * 4) Select Progressive Download Video, not streaming, from the Select video type pop-up menu, and the appearance of the Flash Video dialog box changes to show the following options for this format:
 * **URL:** Specifies the URL of the FLV file to embed in your HTML document.
 * **Skin:** Specifies the URL of the skin to load.
 * **Width:** Specifies the width of FLV display.
 * **Height:** Specifies the height of FLV display.
 * **Constrain:** Maintains the aspect ration of the video if the width or height text boxes change the corresponding value.
 * **Detect Size:** Detects the dimensions of the FLV file and automatically populates the Width and Height text boxes.
 * **Auto play:** Specifies whether you play the video when the web page opens.
 * **Auto rewind:** Specifies whether the playback control returns to the starting position after the video finishes playing.
 * **Prompt users to download Flash Player if necessary:** When selected, this option embeds the required JavaScript code to detect users’ Flash Player version and prompts them to download a newer version, if necessary. If this option is not selected, the Message text box is disabled.
 * **Message:** A message displays if a user’s current Flash Player version isn’t high enough to view the Flash content.
 * 1) In URL, browse to the folder where your flash video is stored.
 * 2) For Skin, select the types of controls that you wish the view to have.
 * 3) For Width/Height, click Detect Size, and video dimensions will automatically be detected.
 * 4) You can also click to auto play, which means the video will begin as soon as the viewers open the page.
 * 5) Click OK. The video will show as a grayed out box. From here you can add a caption or additional text to the page.. Save As the page and give it a distinctive name.
 * 6) To check to see if the flash file works before uploading, click on the green globe at the top of the workspace window, and open IE7. The page will open and you can run and control the video.
 * 7) If you create tables, it is possible to embed multiple videos on the same page, just do not set them to auto-play.
 * 8) If you are satisfied with the embedding and the way your page looks, you can create a link on your home page to the new video page, then upload them as you would any other web component. Dreamweaver creates other flash related items that must be uploaded at the same time.


 * [|5. Parental Release for Interviewing, Photographing, Videotaping/Audio-recording, and Web Postings of Students]**

Resources Adding Flash Video to Dreamweaver 8 Two kinds of Flash Video: Movies (SWF) and Flash Video (FLV) Adobe Tutorials: Embedding Flash Video into a Web Page