Flash - Video Using the AS3 FLVPlayback

Playing Flash Video Using the AS3 FLVPlayback Component

This tutorial will teach you how to play video in Flash using the AS3 FLVPlayback component. This tutorial will explain the process for preparing the files and applying basic customizations to the player. We will end the tutorial with a brief description of the most common methods, properties and events available for the FLVPlayback component. This example below shows the sort of video that can be played in Flash:

This tutorial is divided into the following sections:

• Preparing the Files and Encoding the video into FLV format.
• Basic Usage of the FLVPlayback Component.
• Applying a Skin to the FLVPlayback Component.
• Selected Methods, Properties, and Events.

Preparing the Files and Encoding Video in the FLV Format

In order to have everything organized, I suggest that you create a new folder on your computer and have all the relevant files we are going to have in this tutorial in it. By the end of this tutorial we are going to have an FLA file, the end SWF, a skin SWF and a video file encoded in FLV format.

Before we start doing anything in Flash we need to convert our video in the FLV video format. This can be done using the Flash Video Encoder that comes with the Flash authoring tool. This tool will convert various formats such as .mov, .mp4, .mpeg, .wmv and some others ones as well into FLV. If you do not have a video to use to follow this tutorial then you might want to download the sample video we are using. Download this file, unzip it, and put the video in your project folder.

The video we gave you is saved in Quicktime format. We are going to convert it to FLV. Do that by opening the Flash Video Encoder (Called Media Encoder in CS4) and click Add to add the video you just downloaded.

You can click on Settings... to configure issues such as quality, resizing, and codec type. Using the default settings will suffice for this tutorial. To start encoding your file simply click on Start Queue. The new .flv file should be found in the same folder as your original video (In this case our project folder).

Our video is now ready. Close the Video Encoder and launch Flash. Create a new FLA in AS3 Format, settings such as dimensions, background color, and frame rate do not really matter for this tutorial. You just have to save your file in the same directory as the video in order to easily play it. Do that and then we will proceed with the rest of the tutorial.

Basic Usage of the FLVPlayback Component

Back to the FLA now. We are going to play our video using the FLVPlayback Component. Components are readymade movie clips with built-in functionality. The FLVPlayback Component is the one to be used when you want to play a video. We are going to create our entire project using ActionScript code, however, we need the graphical elements of the component to be stored in our Library in order to use it.

To import the component from to Library will require us to access the Components Panel by going through Window>Component , look for the FLVPlayback Component under the Video category and then drag and drop an instance of it on stage and then delete it! That should store an instance of the component in the Library, access the Library (Ctrl+L) to see that you have it in there.

We are now going to use ActionScript to play our video using this component. Right-Click the only frame you have on stage and select Actions to open up the Actions Panel.

The code we need to create will do the following tasks:

1. Import the video class package.
2. Create an instance of the FLVPlayback component.
3. Set the video we want to play as its source.
4. Add the video to the display list.

We will code these one by one. In order to have access to the ActionScript class of our playback component we need to start our code by importing the video package. Simply type the following line to do just that:

Like the majority of ActionScript classes, you must create an instance of the class using the new keyword in order to use it. We are going to do that and then set the source of this instance as our video.

Even though our instance has been created and its video has been specified, in order for us to see it on the screen we need to add it to the Display List using the addChild() method:

In order to make our component visible on the screen we just need to add it to the Display List using the addChild() method:

You can now test your movie (Ctrl+Enter) to see your video playing on the screen!

You should not be able to play any video you want using this code, however, if you want to have some user functionality added to the player you might want to use a skin along with it. This will be explained in the next section.

Applying a Skin to The FLVPlayback Component

Skins are playback controllers that let you stop, pause, change the volume and do other things as well depending on the skin you choose. We have used on in the example movie shown above. It looks like this:

The graphical elements of skin are actually saved in a separate SWF file that is loaded at run time by the main SWF movie. If you have the skin SWF file available you simply set its URL as the value for a property called .skin, as shown in the example below:

These skin files can be generated by Flash through a relatively lengthy process, which will require you to create an instance of the FLVPlayback component on stage, apply a skin to it, and then test the movie to generate the skin file. We are going to walk you through this process.

Start off by opening your Library (Ctrl+L) and then drag and copy of the FLVPlayback Component onto the stage.

We will now configure which skin to use by accessing the Component Inspector. Select your component on the stage and then go through Window>Components Inspector to open the needed panel. Look for the skin option under ParametersChoose the one you want and click OK. and click on it. You can choose the skin you wish to use from here. Different skins have different functionality and some of them appear on the component itself while other ones are placed right below it.

You have applied the skin to an instance of the FLVPlayback component that is placed on the stage. This is not the one which we are using through ActionScript. However, to get the skin file you need we have to manually generate it by applying it to an instance and then testing the movie. Test the movie now (Ctrl+Enter) to see your ActionScript generated video playing and this new one positioned on stage with no content on it.

What we just did created the skin file we need for our other video. If you check your project folder you will find a new skin SWF file. You need to get the name of this file to use as your skin.

The name of this file is the value we need for our skin property. Copy the name of this file and go back to your FLA. Delete the FLVPlayback component instance from the stage because we no longer need that one. Open the Actions panel to continue coding.

We can now simply set our component skin by using the .skin property as the name of the new file we have. Do not forget to put the .swf at the end:

Test your movie now to see your skin attached to your component!

You can further customize the color and transparency level of the skin by using the .skinBackgroundColor and .skinBackgroundAlpha properties which are both pretty self-explanatory:

You can test your movie again to see the effect of this change on your component skin:

That should do it for this part, in order to try a different skin you will have to create an instance of your component on stage and then test the movie after applying the skin to generate the necessary skin file.

This ended the main part of the tutorial, the next section will have a very brief explanation of some properties and methods available for this component. The tutorial will end with a brief explanation on how to use the events of this component.

Selected Properties and Methods

In addition to the controls available via the player skins, it is possible to manually pass commands to an instance of the FLVPlayback component using its available methods and properties. These are to be called directly through the instance:

• stop() - This method stops the video and resets the playback position to the start.
• pause() - This method pauses the video at its current position.
• play() - This method resumes playback.
• load() - This method can be used to load another FLV video. (Unlike the .source property which will make the video start playing automatically if the .autoplay property is set to true).

Example code on how to use the .load() method:

In addition to the methods mentioned above, below are a number of commonly used properties:

• source - This property is used to set the source video for the player. It was used in our tutorial example code.
• autoplay - This property determines whether the source video will start playing automatically or not. It is set to true by default. If you would not like your video to play automatically set this property to false.
• state - This is a read-only property used to retrieve the current state of the video. The possible states are "buffering", "connectionError", "disconnected", "loading", "paused", "playing", "rewinding", "seeking", and "stopped".
• playheadTime - This is used to retrieve or set the current playback position in seconds. If you want to go to the 30s second of the video instantly simply set this property to 30.
• skin - This property is used to set the skin of the player as illustrated in the tutorial.
• skinBackgroundColor - This property is used to set the background color of the skin.
• skinBackgroundAlpha - This property is used to set the transparency level of the skin.

These are only SOME of the available methods and properties available for the FLVPlayback component, make sure you check out the ActionScript reference if you would like learn about all the available ones.

The VideoEvent.COMPLETE Event

Events let us take specific actions when they are triggered, so that for example, we can remove a video when it finishes playback or make it transparent when it is paused. The FLVPlayback component has a number of events, the one which is most commonly used is the COMPLETE event which is triggered when a video finishes playing. In order for this event to be used it must be registered with the FLVPlayback instance using the .addEventListener() method just like all other events.

The example below will set the .alpha property of the video to 0.5 when the playback completes.

This concludes our tutorial. I hope that you've learnt something new from it. Please feel free to post any questions or suggestions you have on the Republic of Code Forum.

- End of Tutorial