• Feb 15, 2012

• Making Video Clips Interactive in Adobe Flash CS5

• by David Smith in Flash

• Genre: Web
• Level: Intermediate
• Time to Complete: 15-30 minutes
• 0 comments — Start Discussion

Flash has been a popular conduit for video delivery over the web for quite some time, and in-spite of the rumblings about Flash's future as a web delivery tool, with the growth of HTML5 and mobile devices it will continue to be popular for some time yet I think.

Most people's experience of Flash delivered video is with using on-screen controls like play and pause that might be sitting under the video window or perhaps superimposed over the video, slightly transparent and perhaps only appearing when the video is rolled over. This is all well and good if you intend to offer this level of user control from the outset. There are other options for how the user interacts with video however, and in this article I will explore what I think is one of the best.

Step 1 - Import Video into Flash

With your Flash project open, choose File > Import Video. A dialogue box opens asking you details about your video.

The Import video window

Lets look at tackling each option one at a time.

Step 2 - Find the video Clip

Click on the browse button and locate the video file on your system. If the video clip is a Flash Video file (.flv) then you are ready to move on to the next step. It's just as likely that the file you intend to use is a Quicktime .Mov file or similar. Unfortunately, Flash won't accept it. So let's convert it to a .flv file.

Step 3 - Use Media Encoder

In the Flash Import Video menu there is an option at the bottom of the window to Launch Adobe Media Encoder, click this. 

Media Encoder

Media Encoder opens with your .Mov file or similar already loaded. Each column sets a different parameter for your video conversion, such as what type of file to encode to and where to save the converted copy to. 

In the Format column choose to convert to FLV/F4V. In the presets choose FLV - Match Source Attributes (Medium Quality) and then set the Output File to your desktop so this file is easy to find again. 

Click the Start Queue button and wait until Media Encoder finished its task. Then close Media Encoder and return to Flash. Finally browse to the desktop and select the new FLV file for import. 

Step 4 - Add a Component Skin

To really help understand the difference between the 2 methods of adding and controlling video in Flash first we are going to create a video movie contained in a Component Skin. This is probably how most users experience Flash Movies online.

Pick the Load external video with playback component option from the video import window and click Continue. 

The Flash skin menu

A choice of skin options are available, some that hover over the video clip and some that will position themselves under it. Some include Play/Pause, Volume/Mute and Navigation and some contain simply play and pause. 

Use the drop down menu and preview a few to see what ones you like. There are also tint and opacity options to help complete the look. Once you have the style of your choice press next. A window appears with a summary of your request for you to check over. Assuming everything is ok click Finish.

Step 5 - Place Component on Scene 1

A video component appears back in the Library panel. Grab the component and drag it onto Scene 1. Resize the video using the W and H parameters in the Properties panel or use the re-size handles on Scene 1 if required. 

The component on screen

Add the instance name componentMovie_mc because it's good practice and save and test the scene (press Command-Return). The movie appears with your skin applied, press play and pause etc to test the component. Nice and simple, however also perhaps a little dull? 

Step 6 - Import Video Again

This time let's try a more interesting option. Before you import, create a new Movie Clip Symbol in the Library and name it VideoPlay_mc. Then Import the same movie again, only this time choose to embed the video into the timeline in the import options. 

Import to timeline

And click next.

Step 7 - Embed Video as a MC

A second menu will appear, this time asking how to embed the video. Keep the Options set to 'Place instance on Stage and Expand Timeline' if needed. These options will place the embedded movie into the symbol named VideoPlay_mc and expand the timeline to include every frame.

Embed to MC options

Click Continue and as with the Component Skin version a summary appears detailing your request. Check for errors now as there is no way back to these options once you have imported the video. Then click Finish. 

Step 8 - Place the Embedded Movie Clip

In the Library two things happen. Firstly, the imported video clip appears with a small movie camera icon. Don't try and use this in your project, it just needs to be there to be embedded into the SWF. Secondly the Movie Clip named VideoPlay_mc now contains frames of your imported video clip.

MC in library

This movie clip contains the video file you just imported stretched out across however many frames are require by the video based on its length. 

Tip: Double Click on the Movie Clip Icon to open it up and have a look at how many frames are being used. There could be hundreds.

Step 9 - Add to Scene 1

Drag the Movie Clip with the embedded video file onto Scene 1 and place it near the Video  Component placed in Step 5.

The placed movie clip

In the properties panel name this Movie Clip instance videoPlay_mc (note the lower case v for the instance name)

Step 10 - Stop the Clip

If you test the Scene now, the movie that was just placed would autoplay on a loop, with no way of controlling it. So to add some user controls we are first going to stop the movie at the source. 

Open the Movie Clip that contains the embedded video in the Library so you can see all the hundreds of video frames in Layer 1. Right-Click on the Keyframe on Frame 1 and from the menu choose Actions. 

Right click frame 1

In the actions panel type stop();   

This will hold this movies playhead on frame 1 until otherwise instructed. 

Step 11 - Write this Code

Return to the Scene 1 window and open the Actions Panel once more. Type the following code:

The code

This code will turn the video clip into a button that will play itself.  

Step 12 - Test Scene

Try it out, press Command-Return to see the SWF with both movies and click on the second movie clip to start it playing.

Step 13 - Edit the Code

Instead of clicking the button, lets change it so that the movie plays when its rolled over! That can be a cool way to add user interaction. 

Change the CLICK code in the Actions Panel to MOUSE_OVER. This changes the event from a click to a rollover to start the movie playing.

The new code

Step 14 - Test Scene

Press Command-Return again and see for yourself.

If it's not working make sure to check the following:

• Did you spell the instance name correctly, it needs to be the exact same spelling as the first word in the code.
  
• Have you put any , where there should be .? Or visa versa?
  
• Check the spelling, case and grammar of all your code compared with the code here. One error will kill it dead.  
  

Otherwise have fun!