Customizing Video and Syncing Graphics in Flash CS5

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.  Learn how to import video, apply a custom skin, or create your own video buttons without writing any ActionScript code. Then learn how to add cue points, making synchronization between video and graphics a snap.

Open the Starter Files

Download the exercise file for this tutorial here and unzip it onto your desktop or an other 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.

ˆ

Converting a 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 Add, locate the intro.mov file that you downloaded, and then select Open. Select “FLV | F4V” from the Format column, and then select “FLV — Match Source Attributes (High Quality)” from the Preset column. To customize the export settings for a video select “FLV — Match Source Attributes (High Quality)” from 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, select Encode Alpha Channel, and then click 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), then select Start Queue.

Importing a Video

Now it’s time to import the intro.flv into the video.fla. Choose “File > Import > Import Video”. When you are 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 file size of the SWF that loads it small. Click Continue and you’ll then be able to select a custom skin for the video. Choose the second skin “MinimaFlatCustomColorPlayBackSeekCounterVolMute.swf”, and then select red using the color picker to tint the skin red. Click Continue.

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 are going to upload this project to a web server, 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.

Editing Video Parameters

Note that all of the video controls for the imported video are active.  Click the play button (or press the spacebar) to play the video on the stage. With the video selected, open the Properties panel (Window > Properties) and notice how you can modify various video parameters.  Confirm that Autoplay is selected.  Note that for skinBackgroundAlpha and volume the value is set to 1.  This is 100% in Flash.  Change the volume to .5 so it will be set to 50%.

Adding And Customizing Video Controls

Open the Properties panel (Window > Properties) and click the pencil icon next to “skin” to modify the skin.  Select “none” for the skin. In the Timeline panel (Window > Timeline) select the “video controls” layer.  Open the Component panel (Window > Components) and expand the video folder.  Click and drag the Play/Pause button and the VolumeBar to the lower left corner of the stage.

Customizing Video Controls

Double-click the Play/ Pause button on the stage to enter its symbol.  Double-click the Play button to enter its symbol. Notice how a Normal, Over, Down, and Disabled Play button appears.  Each one of these buttons can be customized to your liking.  Change the green outline to red in the Over and Down buttons.  Click on Scene 1 to go to the stage.

Adding Cue Points

In order to sync up graphics with video you will first need to add cue points at certain points in the video. With the video selected, go to the Properties panel and near the bottom you will find the Cue Points section. Using the Add ActionScript Cue Point (+ icon) you are able to add cue points to the

video at certain times.  Play the video, and when the presenter says “John”, add a cue point (+ sign).  Notice that “Cue Point 1” was added at about 1 second.

Rename “Cue Point 1” to “john”.  Notice you can also edit the cue point time if needed. Next, Play the video and when the presenter says “agencies” (about 9 seconds in) then add another cue point.  Rename “Cue Point 2” to “agencies”.  Around 15 seconds in when the presenter says “non-profit”, add another cue point.  Rename this one as “nonprofit”.  Your cue points should look like the image above.

Adding 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 in 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 below which will basically show the names of the cue points in the Output panel.  Test the video to see it in action.

Adding Graphics

Next, you need to add the graphics that will be displayed based on the three cue points added.  Open the Library panel and notice the movieclips “john”, “agencies” and “nonprofit”.  Select the “john” layer and then click and drag the john movieclip to the stage.  Use the Properties panel to set both the x and y position to 0.  Next, drag the agencies and nonprofit movieclips to their appropriate layers and make sure their x and y position are set to 0. Test the movie and note that all the movieclips have animation and play at the same time.

Since you don’t want all the movieclips to appear at the beginning of the movie, you need to set their visibility to false using ActionScript. In order to control the movieclips with ActionScript they first need instance names.  Select the john movieclip and in the Properties panel give it an instance name of “john”.  Select the agencies movieclip and give it an instance name of “agencies” and the nonprofit movieclip an instance name of “nonprofit”. Select the first frame of the Actions layer and open the Actions panel. Using those instance names set the visibility of each movieclip to false.

Displaying Graphics Based on Cue Points

Now you can modify the cue point event listener. Select the first frame of the Actions layer and open the Actions panel. Change the trace statement to a conditional statement that will listen for a cue point. If a cue point is “heard” the appropriate movieclip will become visible and the animation will play. Type in the ActionScript shown below.