Week 13 Topics

Chapter 15 - Video

Flash MX was the first version of Flash to include video in .swf files; these capabilities have apparently been extended in the most recent version of Flash (Flash 8). Flash MX can import a variety of types of files -- which ones depends on whether you are using a Windows or Macintosh machine, and whether you have QuickTime or DirectX installed (see chart on p. 571). Flash MX uses Sorenson Spark encoder and decoder which utilizes both spatial and temporal compression but primarily temporal. Spatial compression compresses the amount of data in a particular frame; frames compressed this way are called intraframes. Temporal compression compares data between frames and stores only the difference between the two; frames compressed this way are called interframes

Exercise 1 - Importing Video (using importVideo.fla)

  1. Open the file and insert a new layer, naming it video and putting it above the other layers. Choose File>Import and select the jumps.mov file. Click open. Choose the "embed video in Macromedia Flash document" option -- you see this box only when you import a Quicktime (.mov) file; all other types are automatically embedded.
  2. The Import Video Settings box will appear. For Quality, move the slider to 100, for keyframe interval, move the slide to 12 -- this means play every 12th frame, no matter what; for scale, choose 100%, check the "Synchronize video to Macromedia Flash document frame rate" box and leave the Number of video frames to encode per number of Macromedia Flash frames at the default 1:1. Click OK. You will then be asked whether Flash should automatically expand the timeline to accomodate the length of the video file -- say yes.
  3. Click on the video clip on the Stage to select it and move it slightly higher to center it vertically. Move the Playhead to Frame 259 -- notice that the video layer extends this far but that the buttons and background frames do not extend this far -- so click and drag down to select the buttons and background layer in this frame and press F5 to add frames to these layers up to Frame 259.
  4. Press F11 to open the Library and select the jumps.mov file and click on the Properties button. Click OK when you are finished. Choose Control>Play to preview the video. If your video contains sound, you must use Control>Test Movie to test the sound. Choose Control>Test Movie and notice that the buttons don't work. Save the file for the next exercise.

Exercise 2 - Controlling Video with Stop and Go Actions

  1. Move the Playhead back to Frame 1 and lock the video layer and unlock the buttons layer. Select the play button and open the Actions panel (F9). Choose Actions>Movie Control and doubleclick on play. Select the stop button and choose Actions>Movie Control and double click on the stop action. Choose Control>Test Movie to test the buttons.
  2. Notice how the movie starts playing as soon as the file loads -- we will change this. Insert a New Layer, naming it actions and putting it above the other layers in the timeline. Select Frame 1 on the actions layer and double-click on the stop action (Actions>Movie Control>stop. Preview the file, save and close the file.

Exercise 3 - Controllling Video Targetting Frame Labels (using targetVideo.fla and catchingAir.mov)

  1. Open the .fla file and insert a layer, naming it video and position it above the other layers. Choose File>Import and select the .mov file. Select the "embed video" option and use the following settings: quality:85, keyframe interval:24, Scale:100, Synchronize video to Macromedia document frame rate and choose 1:1 for Number of video frames to encode per number of macromedia Flash frames. Click OK and click Yes to add the number of frames necessary to accomodate the video.
  2. The video clip will be centered on the Stage - click on the video clip to select it and move it to center it inside the background window. Move the Playhead to Frame 225 and scrub the playhead back and forth between frame 225 and frame 237 -- notice that the video fades out about frame 233. Click on Frame 237 in the video layer and drag backwards to select frames 233-237 and then right click and select Remove Frames. The reason to eliminate these frames is to reduce the file size of the movie.
  3. Click and drag down in the buttons and background layer to select Frame 232 in both layers. Press F5 to add frames up to Frame 232 so that you can see the background and the buttons throughout the video.
  4. Move the Playhead back to frame 1 and add a new layer, naming it labels, and moving it above the other layers. Select frame 1 on the labels layer and in the Property Inspector, give it a frame label of boarder1. Scrub the playhead to see where a transition occurs; click on Frame 47 in the labels layer and press F7 to add a blank keyframe and give this frame a name of boarder2. Repeat this step for three more snowboards (boarder3=frame 96, boarder4= frame 118, and boarder5 = frame 146.
  5. Move the Playhead to frame 1 and unlock the buttons layer, clicking on button 1 at the top at the right side of the Stage to select it. In the Actions panel (F9), choose Actions>Movie Control and double click on goto. In the Parameters panel for type, select Frame Label and for Frame, select boarder1. Repeat these steps for the other buttons, choose the appropriate frame label for each button. Choose Control>Test Movie to test the buttons.
  6. In the labels layer, click on the boarder1 frame label to select that frame (frame 1). In the Property Inspector, check the Named Anchor box below the Frame Label text box. Notice that the icon next to the frame label in the Timeline changes. When a user clicks the Back button in a browser window, the browser will play the previously named anchor position in the Timeline.
  7. Repeat this step for each of the remaining four frame labels. Insert a new layer, naming it actions and put it on top of the other layers. Select Frame 232 on the actions layer and press F7 to add a blank keyframe. In the Actions panel, double click on the stop action.
  8. Choose File>Publish Settings and click on the HTML tab. In the Template drop-down list at the top, choose Flash with Named Anchors. This will add JavaScript to the HTML document that will catch the named anchors as they play in the browser. Choose File>Publish Preview>HTML. As the video plays, the end of the URL will change to reflect the Named Anchor. When the movie stops playing, test the Back button in the Browser and see that it goes back to boarder4. Click it again and it will go back to boarder3. Note: since your users will not be expecting this functionality, you could add a note in the movie to explain it to them. You can used Named Anchors with any content on the Main Timeline. This permits you to have functionality for the Back and Forward button in a Flash movie -- which you normally don't have. Save and close the file.

Exercise 4 - Applying Effects to Video (using videoMC.fla and shortJump.mov) - You can place video inside of a Movie Clip and add multiple instances of the Movie Clip to the Stage without signficantly increasing the size of the .swf file. Once inside the movie clip, you can transform the video.

  1. Open the fla file and choose File>Import to Library and select the .mov file and choose the embed option. Choose Quality:100, Keyframe Interval:8, Scale:100, Synchronize video to Flash document frame rate, and 1:1 for number of video frames to encode per frame of Flash. Click OK
  2. Press F11 to open the library and choose Insert>New Symbol, naming it mcVideoHolder. For Behavior, choose Movie Clip. From the Library, drag the shortJump.mov onto the Stage and choose Yes about extending the Timeline.
  3. Click on Scene 1 and insert a new layer named video, placing it on top of the other layers. Slect Frame 1 of the video layer and drag 4 instances of the mcVideoHolder Movie Clip onto the Stage.
  4. Shift+click to select the two Movie Clip instances on the left. Open the Align panel (Window>Align) and choose Align left edge. Click off the stage to deselect everything. Repeat this step for the two instances on the right, choosing Align right edge. Next, select the two on the top and select Align top edge and the two on the bottom and choose Align bottom edge. You can also select two of the Movie Clips once they are aligned and use the arrow keys to move them.
  5. Choose Control>Test Movie. The Movie Clips will all play in unison since they are all instances of the same movie clip.
  6. Click on the Movie Clip instance at the top left and in the Property Inspector, choose Tint from the Color Styles drop down box -- select a blue with a tint amount of 60. Click on the movie clip at the upper right, and choose Brightness, and move the slider to 80. Apply effects to the other two instances. Choose Control>Test Movie.
  7. Select the Free Transform tool and rotate the instance at the upper left by moving the cursor over a corner handle and then dragging it. For the upper right, move the cursor between the corner and middle handles until it turns into a double arrow and then drag to skew. On the lower right, take the top middle handle and drag to the other side of the instance to flip it. For the lower left, drag inwards from a corner. Choose Control>Test Movie. Save and close the file.

Note: to do the transformation, the video has to be inside a movie clip or graphic symbol; however to start playing right away (streaming) the video must be on the main Timeline and not inside a symbol.

Exercise 5 - Linking to Quicktime Video (using linkingToQT.fla) - as an alternative to embedding

  1. Open the fla file and insert a layer, naming it video and placing it above the other layers. Select Frame 1 of the video layer and choose File>Import. Select the linking.mov file and click Open. Choose the linking option and to expand the timeline to accomodate the length of the video file.
  2. Click on the linked video clip on the Stage to select it and move it up. Move the Playhead to Frame 108 and click and drag down on the buttons and background layers to select Frame 108 in both layers. Press F5 to add frames up to Frame 108 so that you can see the background and the buttons throughout the video.
  3. Scrub the Playhead to see the Quicktime content playing. Move the Playhead to frame 1 and choose Control>Play to preview the movie. You cannot preview linked QuickTime video files using Control>Test Movie because you can't export a linked Quicktime movie as a .swf
  4. Move the Playhead to Frame 1 and lock the video layer and unlock the buttons layer. Select the button on the left and open the Actions Panel (F9). Select Actions>Movie Control and double click on the play action. Because you are adding this to a button, the event handler (on release) will be added as well. Select the button and the right and choose Actions>Movie Control and double click on the stop action.
  5. Choose File>Publish Settings and click on the Flash tab at the top and in the Version drop down list, choose Flash Player 4. This is because the then-current version of the QuickTime Player will only play Flash 4 content. Choose File>Export Movie and name the movie flashQT.mov and select QuickTime as the format. Select Paused at Start and then click OK. To check the results, in Windows Explorer double click on the flashQT.mov file and note the movie is paused at the start and that the buttons work. Thus we are using Flash controllers (buttons) for our QuickTime movie.

Linking vs. embedding - If you want a .swf file at the end, you must embed. When you embed the file, you compress it. When you link to it, you don't compress the native file at all

Compression alternatives - You can compress using different alternatives than the Flash MX built-in program (Sorenson Spark Standard Edition), e.g. you can use Sorenson Squeeze which is available at www.sorenson.com

Macromedia touts video as the area of biggest improvement in Flash 8 over previous editions of Flash so Flash 8 likely offers some other alternatives.

 

Revised: April 22, 2006. Comments to William Pegram, wpegram@nvcc.edu