Flash Article

Note: This tutorial is a legacy tutorial for Flash MX users only; it does not describe best practices for using video in Macromedia Flash MX 2004. At this point, we only recommend embedding video within the Flash while using very small video files. In general, you should use progressive download (placing an FLV external to the movie), which Macromedia introduced in Flash MX 2004 and Flash Player 7, or streaming (placing the FLV on a Flash Communication Server).

Here are some additional resources to help you get started with the much-improved video features in Flash MX 2004:

• Flash Video Developer Center
• Flash Video Learning Guide
• Getting Started with Flash Video

Macromedia Flash MX comes with an extremely exciting new feature: embedded video. To make this possible, Macromedia teamed up with video compression technology leader Sorenson Media to develop an exclusive Macromedia Flash video codec called Sorenson Spark. Because the Sorenson Spark codec is built into Macromedia Flash Player 6, Web surfers don't need to download any additional plug-ins or software to view digital video in Macromedia Flash movies. The Spark codec comes in a Basic and Pro edition. Macromedia Flash MX allows you to encode video files with the Basic edition codec. In this tutorial, you will learn how to import video files into Macromedia Flash MX, as well as how to control playback of embedded video. Additionally, you'll find a few pointers for clean video compression.

Sample files

Before you begin, download the sample files for this tutorial:

Windows

• flashmx_video.zip (40.7 MB)

Macintosh

• flashmx_video.sit (40.4 MB)

Preparing video for the web

You can't get something from nothing. Ever tried making a soup with week-old ingredients and hoped it would still taste good? The same principle holds true for video production. Four primary factors influence the quality of your video footage: source format, image, sound, and subject matter. If you already have the video files that you want to import into Macromedia Flash MX, then you can skip this section. If you're planning to shoot video specifically to use in a Macromedia Flash movie, you may want to review the following tips.

Recording medium: The recording medium is the container in which the video is stored, whether it's a digital recording encoded on miniDV or DVCAM tape, an analog recording on VHS or Hi8 tape, or a direct MPEG file recorded on your digital camera. Each recording medium has inherent resolution limitations. Some formats can store more information than others; the more information that the medium stores, the higher quality the recording will be.

Recorded image quality: Regardless of the source format you use for your video recording, the recording device may have other limitations. The recorded resolution of your camera may be significantly lower than the upper limit of your recording format's line resolution. For example, the DV format is capable of storing 525 lines of resolution. However, your specific DV camcorder may have an effective resolution of 490 lines. Whenever possible, shoot and record video with a camcorder that has a superior optical system with three CCD (charge-coupled device) chips and use high-quality tapes while properly controlling your exposure. Avoid shooting in low levels of light, unless you have a particular effect in mind.

Recorded sound quality: Every videographer should consider how audio is recorded during production. Most video camcorders have a decent built-in stereo microphone, but professional videographers equip themselves with accessories beyond those shipped with the camera. Position the microphone as close as possible to the source of the sound and monitor the audio feed with headphones connected to the camera. For most video recording, either a 32 kHz or 48 kHz sampling rate will yield superior audio reproduction.

If you want to create a QuickTime Flash movie, you should choose to link the file. However, if you want to play the video within your Flash movie using Macromedia Flash Player 6, you should embed the file. The remainder of this tutorial focuses on embedding video using the provided sample files you can download above. To follow along, open the two QuickTime MOV sample files you downloaded, named videosamples_high.mov and videosamples_low.mov. These clips were shot with various cameras and microphones, as identified in the audio track. The two files contain identical video clips using different levels of compression, so that you can experiment and compare the performances.

Once you have opened the two QuickTime files, create a new document in Macromedia Flash MX. Retime the video to the Macromedia Flash document's frame rate using the video's frame rate (15 fps) in this Macromedia Flash document. Choose Modify > Document and change the Frame Rate field to 15.

Now you are ready to import a video file. Choose File > Import and select one of the two QuickTime files you just opened. Macromedia Flash MX will immediately ask you if you want to embed or link the QuickTime file. Choose the Embed Video in Macromedia Flash Document option and click OK. The Import Video Settings dialog box appears, as shown below:

You can set the following attributes:

• Source movie properties: To the right of the movie preview icon, you will find information about your source import movie. The movie's frame size (that is, width and height dimensions), file size, duration and frame rate are displayed.
• Quality: This slider and text field allow you to enter a value from 0 to 100. This scale is similar to JPEG quality, where 100 is maximum quality and 0 is least quality. For most video, you will find that 60 is the minimum acceptable quality. Anything lower than this may be too compressed and appear blocky.
• Keyframe interval: This slider and text field control how often the Spark codec creates keyframes in the video. A value of 0 inserts no keyframes. Lower values (except 0) insert more keyframes, while higher values insert fewer keyframes. For example, one sample file set to use 0 as a keyframe interval (with all other settings equal) compressed to 42K, while the same file set to use 1 as a keyframe interval compressed to 219K. The same file set to use 48 as a keyframe interval compressed to 45K.
• Scale: This slider and text field control the frame size of the imported video file as it appears on the Macromedia Flash Stage. As you change the Scale value, the Output properties in the lower right shows the new size of the video frame. You can use the Scale control to effectively resize larger full-frame video files (that is, with frame sizes of 640 x 480 or larger) to more web-friendly sizes like 320 x 240 or 160 x 120. You cannot independently resize the width from the height to correct the pixel aspect ratio of DV format video files—you need to manually transform the width by a factor of 0.9 in the Transform panel after the video has been imported.
• Synchronize video to Macromedia Flash document frame rate: When this check box is selected, Macromedia Flash MX adjusts the source video file's frame rate to match the frame rate of the current Macromedia Flash document. For example, if a source file has a frame rate of 15 fps and the Macromedia Flash document has a rate of 12 fps, this selected option will drop three frames from each second of the imported video. If you clear this option, then Macromedia Flash MX assigns each frame of video to one frame of the Macromedia Flash timeline. As such, the video may play slower than real time, because it is keeping the same number of frames but being played back at a slower frame rate. You can see this "delay" effect by watching the Length value change in the Output properties area as you clear the check box or select it.
• Number of video frames to encode per number of Macromedia Flash frames: This selection box controls the ratio of video frames to Flash frames. This option works hand-in-hand with the Synchronize option to reduce the number of frames that are actually imported into the Macromedia Flash document. By default, a 1:1 ratio is selected, which preserves the original frame rate of the source video. You can use this control to reduce the frame rate of your source video by choosing an appropriate ratio. I recommend that your final video frame rate be at least 12 fps for smooth video playback.
• Import audio: With this check box, you can choose to either import (selected check box) or ignore (cleared check box) the audio track of the source video.
• Output properties: The lower-right corner of this dialog box updates itself to reflect the current values of the options discussed above.

When importing the video files you downloaded for this exercise, use a Quality setting of 80, a Keyframe interval setting of 48, and a Scale setting of 50. Choose the Synchronize option, with a ratio of 1:1, and select the Import Audio check box. Click OK. Macromedia Flash MX will now compress the video with the Sorenson Spark Basic edition codec. As you'll see later in this tutorial, we're keeping the video as small as possible so that it can stream over a 56 Kbps modem connection.

When the video file compression is finished, Macromedia Flash MX displays a message box, asking if frames should be added to the current timeline to show the entire video:

Click Yes. Macromedia Flash MX adds enough frames to the current layer to display the video file. The video appears on the Stage centered vertically and horizontally. You can "scrub" the video by dragging the playhead in the Timeline window. The image quality you see in the authoring environment is exactly what you will see in Macromedia Flash Player. Let's test the Macromedia Flash document to see how large the Flash movie (SWF file) is. Choose Control > Test Movie to play the video in the Test Movie window. Open the Bandwidth Profiler by choosing View > Bandwidth Profiler. The Macromedia Flash movie is just over 100K, which isn't bad for a video file that's almost 20 seconds long.

You can continue to optimize the file size of the Macromedia Flash movie by choosing a different audio compression for the embedded video. Go back to the Macromedia Flash MX authoring environment and choose File > Publish Settings. Click the Flash tab and click the Set button for the Audio Stream option. The audio track of an embedded video is treated as Stream audio. Therefore, any changes you make to this option in the Publish Settings will be applied to the audio track of the video. By default, Macromedia Flash MX uses MP3 compression at a 16 Kbps bit rate. Try using 8 Kbps with a Quality setting of Best. Retest your Macromedia Flash movie, and you'll notice that the file size drops below 90K. Because the audio for this video track is narration, this extremely low bit rate for MP3 is fairly acceptable.

When you're finished experimenting with the audio track, save your Macromedia Flash document as videosample_test.fla.

Controlling video playback

You can control embedded video in a Macromedia Flash movie just as you would any timeline playback. Let's add play and stop controls to the Macromedia Flash document (videosample_test.fla) you created in the last section:

1. Add a new layer and name it buttons.
2. Open the Buttons library (Window > Common Libraries > Buttons). From the library's Circle Buttons folder, drag instances of the Play and Stop buttons to the Stage. Position them under the video, as shown below:
   
   

   

3. Select the Play button and open the Actions panel (F9). In the panel's options menu, switch to Expert mode and type the following actions into the Script pane:

   on (release){
  play();
}

4. Select the Stop button and open the Actions panel (F9). In Expert mode, type the following actions into the Script pane:

   on (release) {
  stop();
}

5. Resave your Macromedia Flash document and test it (Ctrl+Enter for Windows or Cmd+Return for Macintosh). Click the Stop button to stop the video and click the Play button to resume play.

   To see the completed Macromedia Flash document with video controllers, open the sample file named videosample.fla.

   You can continue to add other controls too, like rewind, step forward and step backward buttons. You'll find these buttons in the same Common Libraries you used earlier.

Adding named anchors to video

Another exciting new feature of Macromedia Flash MX is the capability to make Flash movies that work with the Forward and Back buttons of the web browser. This feature works with any browser that recognizes fscommand actions via JavaScript, like Internet Explorer for Windows or Netscape 3.x through 4.x on either Windows or Macintosh.

How does this feature work? For any Macromedia Flash movie that's loaded into the default level (_level0) of the Macromedia Flash Player, you can place named anchors on the Main Timeline (that is, any Scene timeline). When a named anchor is played, the web browser registers the previous named anchor in the browser history. When you click the Back button, the browser redirects the window to the last named anchor position on the timeline.

Let's add some named anchors to the Macromedia Flash document (videosample_test.fla) you created in the last section:

1. Create a new layer in the Macromedia Flash document and name the layer labels.
2. Insert a keyframe on frame 2 of the labels layer. In the Property inspector, assign the frame label marker_1 to this keyframe and select the Named Anchor checkbox:
   
   

   

3. Place more keyframes and named anchors along the Main Timeline. Place them wherever you'd like to tag an area of the video. For example, you can add frame labels marker_2 and marker_3 at frames 92 and 160, respectively. Again, make sure you select the Named Anchor check box for each label.
4. Create a new layer and name it actions. On frame 1 of the actions layer, add a "stop();" action in the Actions panel. Also add a "stop();" action to frame 267 of the actions layer. These are the first and last keyframes of the movie, respectively.
5. Open the Publish Settings (File > Publish Settings) and click the HTML tab. In the Template menu, choose Flash with Named Anchors. This template inserts a JavaScript function into the HTML document that catches the named anchors as they play in the browser. Close the Publish Settings dialog box and save your Macromedia Flash document as videosample_anchors_test.fla.

6. Preview the Macromedia Flash movie within an HTML document by choosing File > Publish Preview > HTML. When the Macromedia Flash movie loads into the web browser, the video clip will be paused. Click the Play button to play the video. As the video plays, the URL of the HTML document will change. For example, when the marker_1 frame plays, you'll see the document URL change to video_anchors.html#marker_1. When you reach the end of the movie, press the browser's Back button. If the last anchor that played was marker_3, then pressing the Back button will take you to the marker_2 label.

   To see the completed Macromedia Flash document, open the sample file named videosample_anchors.fla.

Additional online resources

For more details about embedding video into Macromedia Flash MX, see the following documents:

Add a Video Controller for Macromedia Flash MX

"Squeeze" Your Video for Macromedia Flash MX

Using the Local Video Object in Macromedia Flash MX

Macromedia Flash MX: Video testimonials

---

About the author

Robert Reinhardt is the lead co-author of the "Flash Bible" series from Hungry Minds and the forthcoming Flash MX ActionScript Bible. He is also co-principal of [theMAKERS], a multimedia company based in Los Angeles. He has developed multimedia courses for educational facilities in Canada and the United States, was a speaker at the FlashForward conferences, and presented some of the exciting new features of Macromedia Flash MX at the first-ever Canadian Flash festival, FlashintheCan 2002, as well as the first Web Graphics program at SIGGRAPH 2002 in San Antonio. With a degree in photographic arts, Robert takes a holistic approach to computer applications for the creation of provocative multimedia. Recent projects have included screen graphics for Sean Penn's film The Pledge (2000) and a Flash website for the Warner Bros. feature film Training Day (2001). This tutorial is a condensed version of the Embedding Video chapter from the Flash MX Bible, co-written with Snow Dowd. Check out FlashSupport.com for more tutorials and Flash resources created by [theMAKERS].