In this tutorial you will see how easy it is to bring video and graphics together for a seamless, custom experience using Flash Professional CS5. You’ll learn how to import video, apply a custom skin, and create your own video buttons without writing any ActionScript code. Then you’ll learn how to add cue points, making synchronization between video and graphics a snap. Let’s take a tour of these capabilities.

1 OPEN STARTER FILES
Download the exercise file for this tutorial here and unzip it onto your desktop or another location of your choosing. Inside of the ZIP file you’ll find files named “video.fla” and “intro.mov,” as well as a “final” folder that contains the completed files for reference. Open video.fla in Flash CS5. Notice that in the Library panel (Window>Library) there are already graphics created that will be used in this tutorial.

2 CONVERT VIDEO FOR USE IN FLASH
The most common video file format used in Flash is the FLV format. To convert a video file to FLV, launch Adobe Media Encoder CS5 (found in the Applications folder on a Mac, the Program Files folder on a PC). Click the Add button on the right, locate the Intro.mov file that you downloaded, and then select Open. Select FLV | F4V from the Format column, then select FLV – Match Source Attributes (High Quality) from the Preset column.

3 CUSTOMIZE FLV EXPORT SETTINGS
To customize the export settings for a video, click FLV – Match Source Attributes (High Quality), which you just selected in the Preset column. Notice how you can trim the video, resize it, and even adjust the bitrate settings for both audio and video. In this case, you need to ensure that the alpha channel from the original video gets encoded into the exported video. Under the Video tab on the right, select Encode Alpha Channel, then select OK. Lastly, in the Output File column, save the file as “intro.flv” in the same location as the original intro.mov (set by default), and then click Start Queue.

4 IMPORT VIDEO INTO FLASH
Now it’s time to import the intro.flv into the video.fla. Choose File>Import>Import Video. When you’re asked where the video file is, select On Your Computer, click Browse, locate the intro.flv, and click Open. Select Load External Video with Playback Component; keeping the video external will keep the SWF that loads it small in file size. Click Continue and you’ll then be able to select a custom skin for the video. Choose the second skin, MinimaFlatCustomColorAll.swf, and then click the Color swatch to open the Color Picker and select a red to tint the skin. Click Continue.

5 FINISH IMPORTING VIDEO
The final import screen notes that a Flash Video component will be created on the Stage while an SWF file for the skin will be placed in the same location as the FLA file once you publish the SWF. If you’re going to upload this project to a Web server, than both the intro.flv and the skin SWF need to be uploaded once the project is published. Click Finish and the video with the selected skin will appear on the Stage. Test the movie (Control>Test Movie>Test) to watch the video. Close the playback window after watching the video.

6 EDIT VIDEO PARAMETERS
All of the video controls for the imported video are active on the Stage. Click the play button (or press the Spacebar) to play the video. With the video selected, open the Properties panel (Window>Properties) and notice how you can modify various video parameters. Confirm that autoPlay is selected, and note that both skinBackgroundAlpha and Volume are set to 1, which is 100% in Flash. Change the volume to 0.5 so it will be set to 50%.

7 ADD SPECIFIC VIDEO CONTROLS
In the Properties panel, click the pencil icon next to the name of the Skin to modify it. Select None for the skin and click OK. In the Timeline panel (Window>Timeline) select the video controls layer. Open the Components panel (Window>Components) and expand the Video folder. Click-and-drag the PlayPauseButton and the VolumeBar to the lower-left corner of the Stage.

8 CUSTOMIZE VIDEO CONTROLS
Double-click the Play/Pause button on the Stage to enter its symbol. Double-click it again to enter the PlayButton symbol. Notice how a Normal, Over, Down, and Disabled Play button appear. Each one of these buttons can be customized to your liking. Change the green outline to red in the Over and Down buttons. (To change the color, double-click a button twice, click the green outline to select it, and then change the Fill color to red.) Click on Scene 1 at the top-left to go back to the Stage.

9 ADD A CUE POINT
In order to sync up graphics with video, you’ll need to add cue points in the video. With the video selected, go to the Properties panel and near the bottom you’ll find the Cue Points section. Using the Add ActionScript Cue Point icon (+, plus sign) you’re able to add cue points to the video at certain times. Play the video, and when the presenter says “John,” add a cue point. Notice that “Cue Point 1” was added at about one second. Click on the name of the cue point and rename it “john.” Notice you can also edit the cue point time if needed.

10 ADD MULTIPLE CUE POINTS
Next, play the video and when the presenter says “agencies” (about nine seconds in) add another cue point. Rename “Cue Point 2” to “agencies.” Around 15 seconds in, when the presenter says “nonprofit,” add another cue point. Rename this one as “nonprofit.” Your cue points should look like the image above.

11 ADD A CUE POINT EVENT
Now you need to have Flash “listen” for these cue points that were added. But first you need to give the video an instance name. Select the video and at the top of the Properties panel, name the video “intro.” Now, open the Code Snippets panel (Window>Code Snippets) and expand the Audio and Video folder. With the video still selected, double-click on the On Cue Point Event. This will add the ActionScript shown above which will basically show the names of the cue points in the Output panel. Test the video to see it in action.

12 ADD GRAPHICS
Next, you need to add the graphics that will be displayed based on the three cue points. Open the Library panel and notice the john, agencies, and nonprofit movie clips. Select the john layer in the Timeline and then click-and-drag the john movie clip to the Stage. Use the Properties panel to set both the x and y position to 0. Next, drag the agencies and nonprofit movie clips to their appropriate layers and make sure their x and y position are set to 0. Test the movie and note that all the movie clips have animation and play at the same time.

13 SET UP GRAPHICS
Since you don’t want all the movie clips to appear at the beginning of the movie, you need to set their visibility to false using ActionScript. In order to control the movie clips with ActionScript, they first need instance names. Select the john movie clip and in the Properties panel give it an instance name of “john.” Give the agencies movie clip an instance name of “agencies” and the nonprofit movie clip an instance name of “nonprofit.” Select the first frame of the Actions layer and open the Actions panel (Window>Actions). Using those instance names, set the visibility of each movie clip to false as shown above.

14 DISPLAY GRAPHICS BASED ON CUE POINTS
Now you can modify the cue point event listener. Change the trace statement to a conditional statement that will listen for a cue point. If a cue point is “heard,” the appropriate movie clip will become visible and the animation will play. Type in the ActionScript shown above and test your movie.

ALL IMAGES BY PAUL TRANI UNLESS OTHERWISE NOTED