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.
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.