Adding a Poster Frame to Flash Video

January 16th, 2008 | Posted in Flash & ActionScript, Tutorials

One of the new features of the video playback component in Flash CS3 is the ability to assign a preview image, or a poster frame, to an FLV to make it easier to position and adjust. However, this new feature comes with a footnote that reads, “The preview image is displayed at authoring time only. To generate a runtime preview image, use the export button and load the image back by writing your own ActionScript.” Unfortunately, the missing ActionScript is not included in the documentation. In this tutorial, I will show you one way to include a poster frame in front of a Flash video.

What’s the plan?

I’m going to add a video to my site using the Flash CS3 video playback component and one of the default skins. I want to create a preview, or poster, image that appears when the video is first loaded. The video should wait until the user clicks on either the poster image itself, or on the play button in the component controls to start playing. Then, the preview image should disappear while the video plays. Finally, once the video is complete, I’d like the preview image to reappear so that the process can be repeated.

To start you’ll need an FLV file. Any video will do, but I’ve included one in the example files to get you started. I’ve also included the finished file in case you’d like to refer to it later.

Download the example files

Getting started

1. Begin by creating a new Flash document.

For this tutorial, begin by creating a new Flash ActionScript 3.0 document. Set the dimensions to 320 x 280 pixels by clicking the Size button in the Properties Inspector. The included sample FLV is 320×240, and I’m leaving an extra 40 pixels for the playback controls. Save this file as player.fla in the same folder as your FLV file.

2. Import the FLV video file into Flash.

Import the video by choosing File > Import > Import Video. Click the Browse button, locate your FLV, and click Open. Click Next. Under the Deployment screen, keep the default setting and click Next. On the Skinning screen, select a playback skin and a color. I chose “SkinUnderPlaySeekMute.swf” and a dark gray color. Click Next, and then click Finish.

Select a playback skin and color.

Note: For a little more information about the Video Import wizard, as well as an easy way to make your Flash video play in full-screen mode, see the previous tutorial, Full-Screen Video in Flash CS3.

You should now see the video in the stage. In fact, if you test the movie (press Ctrl-Enter) you can watch the video play. You’ll notice that the video begins playing immediately. We’ll change that and create our preview image next.

3. Give the video component an instance name of myVideo.

Click on the video on the stage to select it, and then give it an instance name of myVideo in the Properties inspector at the bottom of the screen. Don’t forget this step, or our code won’t be able to talk to the video later.

Adding an instance name in the Property inspector.

4. Change the video component’s autoPlay value to false.

Click the Parameters tab in the Properties Inspector at the bottom of the screen. You’ll see several parameters specific to the playback component. To prevent the video from playing on its own, click to the right of autoPlay and set it to false.

Change the autoPlay value to false.

Creating the preview image

5. Select the preview frame from the video.

To select a preview frame from the video, double-click next to the preview parameter, where it says, “None.” A small version of the video will begin to play, and time code will be displayed underneath it. You’ll also see the note below the video reminding us that a preview image selected here will only be available in authoring mode. Yep, that’s why we’re here.

If you move the cursor over the video, small playback controls will appear that will allow you to move through the video. Press Pause, and then use the controls to choose a suitable frame to become the preview image.

Selecting a preview frame.

6. Export the frame as a PNG image file.

Click Export to save the frame as a PNG file. Save the image as poster.png in the same folder as your FLV. Close the “Select Preview Frame” window.

Importing the PNG and setting up the preview

7. Import the preview image PNG file to the stage.

Select File > Import > Import to Stage… Browse to the poster.png image, and click Open. Importing the image into the Flash file ensures that it will be loaded within the SWF file, ready to display.

8. Convert the image to a movie clip.

Click on the image and press F8 to convert it to a symbol. Name the symbol “PosterFrame” and choose Movie clip as the type. Click OK. Converting the bitmap image to a movie clip will allow us to customize its appearance to indicate to the user that they can click the image to start the video.

Converting the image bitmap into a movie clip named “PosterFrame.”

Optionally, you can edit the movie clip to include a button or any other visual cues that you’d like. I’m going to add large play button to make it obvious that this is a video waiting to be played.

9. Add a play button or icon to the movie clip.

Double-click on the poster frame clip on the stage to edit it. From here, I’m going to add one of Flash’s pre-built buttons for simplicity, but of course you can create a button of your own to use here as well.

Choose Window > Common Libraries > Buttons. Open the “playback rounded” folder, and drag an instance of the “rounded green play” button onto the stage. You can use the Free Transform tool to resize the button and position it over the image. Close the “Library – Buttons.fla” panel.

Adding a button to the poster frame movie clip.

10. Give the movie clip an instance name of “myPoster”.

Return to the main stage by clicking “Scene 1” underneath the timeline. Click on the PosterFrame movie clip on the stage, and in the Properties inspector, give it an instance name of “myPoster.”

Adding an instance name in the Property inspector.

Adding the ActionScript to make it work

Ok, the busy work is over. Now it’s time to add the elusive ActionScript to make the poster frame show up. I’m sure there are several ways to do this, and maybe some even more efficient, but I’m going to show you what has worked reliably for me.

11. Create a new actions layer.

Create a new layer in the timeline, and rename it “actions“. Click the first frame of the actions layer, and press F9 to open the Actions panel.

12. Create a function called playMovie.

The playMovie function is very simple. It will run when the user clicks on the poster frame, and will start the video. Add this code underneath the previous line:

function playMovie(event:MouseEvent):void {
    myVideo.play();
}

13. Create two functions to turn the preview image on or off.

The easiest way to hide the preview movie clip is to change its visible property to false. This not only hides the movie clip from the display, but it also prevents the user clicking on the same clip again, essentially disabling the clip until we need it again. To bring the clip back, return its visible property to true. Add two more functions below the existing code:

function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
 
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}

14. Add a CLICK event listener to the poster frame movie clip.

Enter the following in the Actions panel:

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

This will create an event listener that tells Flash to run the playMovie() function when the user clicks anywhere on the poster frame.

15. Toggle the visiblity of the poster frame by listening for video events.

Now we need to turn the preview image on or off at the right time. The most reliable way to do this is to listen for a specific type of event called a video event that will be triggered by the playing FLV file. When the FLV begins to play, it will trigger a PLAYING_STATE_ENTERED event, and we should then remove the poster frame. When the FLV is finished, it will trigger a COMPLETE video event, and we will make the poster frame visible again.

Before we can use the Video Event class, we must import it. Add the following line AT THE TOP of the rest of the code:

import fl.video.VideoEvent;

Then, add event listeners to toggle the poster frame when the video plays and ends. Add these two lines at the bottom of the code:

myVideo.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
myVideo.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

16. Test the movie, and correct any errors.

Test the movie now by pressing Ctrl-Enter. You should see your preview picture on the stage. When you click on the poster frame (or the play button in the video component) the poster frame will disappear and the FLV will begin to play, and when the video ends, the poster frame will reappear!

If you have any ActionScript errors, please carefully review the code and correct any typos.

If you have JavaScript enabled, you will see the example here.

That’s it! You’ve created a very functional preview image, or a poster frame, using just a little ActionScript and the built-in Flash video components. Here’s a look at the completed code:

import fl.video.VideoEvent;
 
function showPosterFrame(event:Event):void {
    myPoster.visible = true;
}
 
function hidePosterFrame(event:Event):void {
    myPoster.visible = false;
}
 
function playMovie(event:MouseEvent):void {
    myVideo.play();
}
 
myPoster.addEventListener(MouseEvent.CLICK, playMovie);
myVideo.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
myVideo.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

Download the example files