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.
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.
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.
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 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.
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.
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?
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.
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.
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.
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)
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.
Return to the Scene 1 window and open the Actions Panel once more. Type the following code:
This code will turn the video clip into a button that will play itself.
Try it out, press Command-Return to see the SWF with both movies and click on the second movie clip to start it playing.
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
Press Command-Return again and see for yourself.
If it's not working make sure to check the following:
Otherwise have fun!