California Career and Technical Education Standards

• AME.A.A2.2 Know the component steps and skills required to design, edit, and produce a prod...
• AME.A.A2.3 Use technology to create a variety of audio, visual, written, and electronic pro...

• The Hook - Hooks / Set

  The "Hook"

  The video player

  Students will begin by observing simple video players at http://www.flashskins.co.uk/flash_video_player1.html.

  Explain to the students that the video players displayed on that site are all the same player, but they are "skinned" differently.

  Skins are the visual elements (buttons, sliders, graphics, borders, etc.) that comprise the look of a flash video or sound player. The players displayed on the site display various player skins. 

  Then, the teacher will display the final video player that the students are to make…

  Have each student download this .ZIP file titled " Example Site"

  Once downloaded, have the students unzip (extracted to Example site)

   

  

  Then have the students find the new folder titled "ExampleSite" (not the zip folder, but the standard folder) then double-click the file titled "index.html"

  By double-clicking the file, the students will be able to view the file in their browser

  Explain that the file they are looking at is an example of a homepage on a website.

  The students will need to scroll down the website to view the final flash video player they will be making.

  Have the students click the video to play it.

  Students will observe the various buttons, their locations, the player color and other visual elements. Explain that they will be given options in flash as to what they want their player skin to look like.

  Note to the teacher: here is the final player and its resorces files for your records
• Lecture Introduction - Lecture

  Lecture Introduction:

  This Lesson you will learn how create and play videos in the popular Flash video format (FLV), this is the same format used by YouTube, Google Video, and almost all other "video" websites on the web.

  We are going to use Flash video import wizard, Adobe Media Encoder and the Playback component to do this. In this lesson we will actually be using the newer Flash video format (F4V).

  Before we delve into the lesson, lets take the time to discuss some key terms and phrases that we will need to know before hand.

  Terms:

  F4V

  As the de facto standard for dynamic media on the web, Adobe Flash supports a number of media formats. These include two core open container formats for delivering synchronized audio and video streams: F4V and FLV. F4V has a flexible structure.

  FLV

  Flash Video is a container file format used to deliver video over the Internet using Adobe Flash Player versions 6–10. Flash Video content may also be embedded within SWF files. There are two different video file formats known as Flash Video: FLV and F4V.

  FLV Player

  A FLV player is a type of media player that is used for playing Flash video from PC as well as from Internet websites. A FLV player can be used standalone, without the need of the Adobe Flash authoring or developmental tools. It can also be embedded in the website using Flash component or embeddable version of FLV player.

  SWF

  SWF (pronounced swif) is the output format for Flash. SWF files can contain animations or applets of varying degrees of interactivity and function.
  
  Currently, SWF functions as the dominant format for displaying "animated" vector graphics on the Web. It may also be used for programs, commonly browser games, using ActionScript.

  Flash video import wizard

  The Flash Video Import wizard encodes video clips into the Flash Video (FLV) format when you import them. However, you can only encode one video clip at a time, and the process of encoding can be both time- and computing-intensive.

  Adobe Media Encoder

  Adobe Flash comes with an encoder for converting videos into F4V.

  The Flash Video Encoder ( Adobe Media Encoder) batches process video clips, allowing you to encode several clips at a time without having to interrupt your workflow. In addition to selecting encoding options for video and audio content, the Flash Video Encoder can also embed cue points into video clips you encode, and edit the video using crop-and-trim controls.

  The encoder is handy for converting videos into F4V.

  The F4V file generated is usually separately loaded through a SWF flash file during playback and is not included in the SWF file itself (i.e. the f4v video file is loaded externally and not embeded in the SWF).

  Playback component

  The playback Component is the built in library of components that Adobe engineers created so that Flash can play video...The playback component was invented so that the Flash developer himself/herself doesnt have to worry about figuring out the tons of code to use to display/play the video.

  The buttons that control video playback are also loaded from an external file. This means that the Flash player is loading three different files at the same time, the base SWF that has the information of the other two, the F4V video, and the SWF containing the controller details.

   
• Guided Practice - Guided Practice

  Guided Practice Intro:

  There are several ways to deploy video for delivery through the Flash player, we are going to use the most basic one that does not require a special service/server (e.g. Flash Video Streaming Service). However, Flash can only directly play flv, f4v, and mpeg formats. All other formats will need to be converted first.

  Setup

  1. Make a folder titled "myVideo", somewhere on your computer
  2. Download and place the file: sample.mov into the "myVideo" folder
  3. Open Flash and create a new Flash File (ActionScript 3).
  4. Save the file in your newly-created "myVideo" folder and name the file videoPlayer.fla.
  5. Playing a video in Flash will involve loading multiple files at runtime (when the application starts) so it will be easier if we have all these files in a single folder...the "myVideo" folder.
  6. Now in your empty Flash movie, go through File>Import>Import Video to open up the video import wizard.
  7. 
  8. The "Select Video" window appears, and prompts you to locate your video file.
  9. You can directly link to an existing FLV video file on a server or choose to import an FLV file (or other supported format) from your local computer.
  10. If your video file is already in FLV format click the "Browse..." button and locate the file.
  11. The video file included as a resource for this lesson (titled "sample.mov") is in Quicktime format (.mov) which is not directly supported by flash. In order to use this file we must convert it to the .flv format. Lets do this now. Click the "Launch Adobe Media Encoder" button at the bottom of the window.
  12. 
  13. This will launch a the seperate Adobe Media Encoder Application (AME). We can use AME to convert our .mov to an .flv.
  14. Click the "Add..." button and select the video clip you would like to convert. In our case, this is "Sample.mov".
  15. This will add that clip the the "Render Queue".
  16. Once our clip is added, we need to change the render "Format" and "Preset" to one that is compatible with Flash.
  17. For this lesson, click the down arrow under "format" and choose " FLV | F4V". Click the down arrow under "preset" and choose "F4V - Match Source Attributes (High Quality).
  18. Match Source Attributes means : Do not change the video's qualities in any way
  19. Click the "output file" path and navigate to the same directory that your flash project is in, give your file a New name of "sample.f4v" and click save.
  20. Finally click "Start Queue" to convert your video. When the process completes, you should have a new .f4v file in the same directory as your flash project.
  21. 
  22. Now that our video is converted, we can use Flash to play it.
  23. Close the Adobe Media Encoder and switch back to Flash.
  24. The "Select Video" window should still be open. Click "Browse..." and navigate to your newly created F4V file. Click open.  Be sure "Load external video with playback component" is selected. Then click next.
  25. 
  26. Choose a skin and color then click next.
  27. 
  28. A summary page will be displayed outlining what will happen. Click finish.
  29. Once the encoding process is done your stage should have a video player sitting on it.
  30. If the player is larger than your current stage, you'll need to enlarge the stage or the video will be cropped. To do this click a blank area on the stage then edit its size in the properties pannel. You may need to reposition the player to center it on the stage.
  31. Now, make a new layer in flash and title it "actions"
  32. 
  33. Right-click the first keyframe of the "actions" layer and choose "actions"
  34. 
  35. when the actions panel appears, type the following code into the panel.
  36. 
  37. This code will stop the video from playing automatically in a webpage
  38. Exit out of the actions panel
  39. you will be able to test the movie by going through Control>Test Movie.
  40. You should see the movie playing. If you check the folder in which you saved the F4V movie you should see three more files, the videoPlayer.swf, the .f4v video, and the skin .swf file.
  41. If you would like to play this video on the Internet you will have to upload the two SWF files and the FLV file together in the same directory.

  
  
  
  
  
  
  • import_video.gif [ View Image ] [ Download Original ]
  • select_video.gif [ View Image ] [ Download Original ]
  • ame.gif [ View Image ] [ Download Original ]
  • skinning.gif [ View Image ] [ Download Original ]
  • extract [ View Image ] [ Download Original ]
  • sample.mov [ Watch Video ] [ Download Original Video ]
  • FinishedPlayer [ Download ]
  • Example Site [ Download ]
  • imageA [ View Image ] [ Download Original ]
  • imageB [ View Image ] [ Download Original ]
  • new layer [ View Image ] [ Download Original ]
  • this is for the creator of the lesson:Courtney Paulos and has nothing to do with the lesson itself [ Download ]