P-MEDA-0044-10-002-+Video+Workshop+Week+II


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

A two-day, four-hour workshop in the fundamentals of preparing short video clips for posting on VBCPS school websites. Students are encouraged to bring a short video clip (1-2 minutes) on CD or flash drive for use in the workshop. " 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, including Windows Movie Maker Live (Windows 7) " Converting and exporting video in various web-optimized formats, including flash and mp4 " How to embed a video on a Web page using Dreamweaver " Permission Form to Post a Student Image on a School Website VBCPS school webmasters will learn the correct methods of preparing and posting optimized video clips on their websites.
 * Topics include:**

As we get started, please download and install AnyVideoConverter on the computer where you are sitting.
 * SESSION II - March 16, 2011**


 * 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, click the Home tab, and go to the right to Save Movie. **Select either "Recommended for this Project or For Computer**. 2. Navigate to where you want to save the wmv, and give it a name. For the purpose of today's exercise, save it to **Libraries>Videos**, or to your H Drive, if you desire 3. When you click Next, Windows Movie Maker will begin processing your video. When it is finished, click Finish.Windows will begin saving your video. We will work with the actual file size once we begin converting it to Flash.
 * 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.

Another good video converter I have used is **Hamster Free Video Converter** - Install and easily drag and drop video files for conversion from one format to another. Windows [|Video]

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 type 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