Creating and Playing FLV Videos in Flash

By Blue_Chi | Flash CS3 Professional | Beginner

This tutorial will teach you how create and play videos in the popular Flash video format (FLV), the same format used in YouTube, Google Video, and all other websites all over the web. We are going to use Flash video import wizard and the FLVPlayback component to do this.

The Flash authoring tool comes with an encoder for converting videos into FLV, the FLV file generated is usually separately loaded through a SWF flash file during playback and is not included in the SWF file itself. The button controllers on the movie above are also loaded from an external file. This means that the Flash player is loading three different files at the same time, the base SWF that has the information of the other two, the FLV video, and the SWF containing the controller details.

There are several ways for deploying video for the delivery through the Flash player, we are going to use the most basic ones that does not require the installation of any special service (e.g. Flash Video Streaming Service). However, Flash can only convert a certain number of video formats, namely .mov, .mpg, .wmv, .asf, .div, .3gp, and .avi. Make sure that you have a video in one of these formats that you can use for Flash before attempting this tutorial.

Starting off

Use the Flash authoring tool, Flash CS3 Professional in our example, to create a new Flash File (ActionScript 2 or ActionScript 3, it does not matter). Save the file in a new empty folder and name it myPlayer.fla. Playing a video in Flash will involve loading multiple files at runtime to play the video and it will be much easier to have all these files in a single folder by themselves.

Flash File

Now in your empty Flash movie, go through File>Import>Import Video to open up the video import wizard.

File>Import>Import Video

You will be prompted to locate your video file, you can directly link to a video on an internet server if you have it in FLV format, otherwise you would have to import the file from your local drive and convert it to FLV as we will do in the next step. Locate the file on your computer using the upper option, the location of the original video does not matter, when you find your video click on Next>.

File Browser

The Deployment window is next, if we exclude the QuickTime options, there are four other options:

  1. Progressive download from a web server - This is what we are going to use for this tutorial, the SWF file will load the video from an external FLV file at runtime and will not embed anything in the SWF file itself. No special server is required to do this.
  2. Stream from Flash Video Streaming Service - The file will be stored on a FVSS server and will be streamed at runtime, this requires an account at a special FVSS server.
  3. Stream from Flash Communication Server - The file will be stored on a FCS and will be streamed at runtime, this requires an account at a special FCS.
  4. As mobile device video embedded in SWF - You must change the publish settings to Flash Lite 2 or higher FL version to be able to use this option, the video will be embedded in the SWF file itself to be played on a mobile device.
  5. Embed video in SWF and play in timeline - The video will be embedded in the SWF directly and no external data will be loaded, this does not require using any special server, but it is not recommended as the video will not be properly in sync with the video. However, using this makes it possible to create special effects positioned on the timeline such as hotspots.

Select the first command and click on Next>.

Deployment

The Encoding options let you configure the quality of the video, the higher the bitrate the better the quality. It is also possible to crop the video, resize it, assign a new starting and ending point, and cue points for advanced functionality. You can use all the default settings for this tutorial, click on Next> to move the final options window.

Encoding

The Skinning options window lets you choose the controller for your video player, different skins have different functionalities, for example, some have the play/stop button and a mute/unmute button while other ones have advanced rewind, fastforward and captions buttons. You can also change the colour of the controller. The skin of the controller will be saved as a separate file which will be loaded when the movie is played. Select the skin you like and click on Next>. This was the last step, you will now see a confirmation window showing the details of what is going to happen, two files will be created at this stage, the FLV file that will contain the video and a SWF file that will contain the skin of the player. Click on Finish to start encoding your file.

Skinning

Once the encoding process is done you will be able to test the movie by going through Control>Test Movie. You should see the movie playing. If you check the folder in which you saved the FLA movie we are editing now you should see three more files, the myPlayer.swf, the .flv video, and the skin .swf file. If you would like to play this video on the Internet you will have to load the two SWF files and the FLV file together in the same directory.

SWF, FLA, and FLV

This concludes our tutorial, feel free to post your questions at the Oman3D Forum. You might be interested in reading our tutorial on how to create an interactive FLV video player that lets the user select which video to load at run time.

- End of Tutorial.