Introduction: Working With FP 8 FLVPlayback Component

Flash 8 has added an awesome new component for FLV (Flash Video) playback that is super easy to use, sinkable, and can be used and controlled either in the ‘traditional’ way in the Flash Authoring tool, or can be added to your movies and controlled using ActionScript.

The API for the FLVPlayback component is HUGE and beyond the scope of this tutorial, but I would suggest that once you are familiar with the component, you should explore all of the methods and properties available to it. For now, we are going to deal with the basics of getting the FLVPlayback component into a Flash movie and playing some video.

Then we are going to look at handling multiple video files and using some xml to set up a library of thumbnails that the user can choose from. Let’s get started!


1. Getting the FLVPlayback Component Into Your Movie

There are many different approaches to authoring a flash movie. Depending on your background (whether you are more of a developer or a designer), you will either create this flash movie by moving elements onto the stage and position them using ‘your hand’ OR you will use ActionScript to do your page layout.

We are going to take a look at these two different approaches of getting an FLVPlayback component into you movie, skinning the component, and then getting some content (movie) assigned to the component. The two approaches are ‘Designer Approach’ and ‘Developer Approach’;


2. Designer Approach

2.1 Adding Video to your project

Designers often don’t need the hassle of relying on ActionScript code to do a lot of their work for them. Designers are more aligned to layout and design ‘by hand’ and require a method of doing things that is intuitive and has a good workflow. Flash has just such a method of adding video playback to a flash movie for Designers.

Start by opening the component library (CTRL-F7 on windows) and drag the FLVPlayback component either the stage or the library of your Flash movie. Make sure that the one you have selected indicates that it is for Flash Player 8 (see image below).



In the Property Inspector give it an instance name such as ‘myVideo’. The instance name allows you to reference the component using ActionScript.


2.3 Skin

Now that your FLVPlayback component is on the stage, we should probably use a skin whose appearance will suit the overlook and feel of the project.

With the FLVPlayback component selected, open the Property Inspector and select the “Parameter” and then scroll down to find the skin property area (see image below).


 
Clicking on the value area (where it says “none”), and then clicking on the magnifying glass will launch the Skin Wizard. Here you can choose from a variety of different looks and styles of skins that will suit your project (see image below).

They are all very slick (and functional!) –take some time to look at the different skins available. Essentially, what this wizard does is allow you to pick a skin.

The wizard then populates the area in the Property Inspector with the skin name and in the background, a copy of the skin is moved from the Flash “Configuration/Skins” folder into your working directory.

2.4 Assigning Video

Assuming that in your project you have a directory (folder) called “flv” which contains some flv files, from the Property Inspector select the property that says “contentPath”. You will then have a window that you can either type the path or use the browse function to find your FLV video (see image below).



When you click “okay”, the path to your movie is now the value of the contentPath property, and when you “Test Movie” in the Flash Authoring Environment, you should see your video automatically play in the FLVPlayback component.

When you import an FLV file using this method, you have the option to “Match source FLV dimensions”. What this does is make the FLVPlayback component to automatically size itself to the dimensions of the movie that you have just imported.

As an interesting experiment, you may want to enter the following URL into the content path:

http://www.helpexamples.com/flash/video/water.flv

This will demonstrate how video files located on any remote web server can deliver video content to your flash movie.

3. Developer Approach

Developers are different bests than designers and approach layout and design in a much more ‘logical’ rather than ‘creative’ way. ActionScript 2.0 is very powerful and has some great features for working with video, specifically the FLVPlayback component. Even though this is a code-centric approach, it is quite straightforward, and not too complex.

3.1 Adding Video to your project

To begin with, there will need to be an FLVPlayback component in your library. This can be achieved by dragging the component from the component library window to your stage or to the library for the flash project (see image below).



Please note that the component has a linkage name of “FLVPlayback”. This linkage name is important as it allows you to attach the component to the stage, or a movie clip, at runtime using ActionScript” (see image below).

You should begin by importing the video Class Library:

   import mx.video.*;

Now, you don’t need to have an instance of the FLVPlayback component on the stage. As long as the component is in your library, you can attach it to the Stage, or into another movie clip or class by using the following:

   var Player:FLVPlayback = attachMovie 
   ("FLVPlayback", "Player", getNextHighestDepth());
      

Here we have added a FLVPlayback component to the movie, and we can access it by the variable name “Player”. We are going to follow the same path of adding a skin and loading some content as we did in the Designer Approach.


3.2 Skin

You should first make yourself familiar with the library of skins available. They are located in the Flash “Configuration/Skins” directory. On a windows machine, the directory can be found here: “C:\Program Files\Macromedia\Flash 8\en\Configuration\Skins”.

When you choose a skin you will want to make a copy of it and paste it into the directory of the Flash movie that you are working on. For our purposes we made a copy of “SteelExternalAll.swf” and placed it in our working directory.

We have already written code to add an FLVPlayback component to our movie and give it a name, “Player”. To ‘skin’ the component, use the following line of code:

   Player.skin = "SteelExternalAll.swf";
      

At runtime, the “Player” instance of the FLVPlayback component will be skinned with the “SteelExternalAll.swf” skin located in your project directory.

You can position the instance of the component by setting the _x and _y properties:

   Player._x=Stage.width-Player._width-10;;
   Player._y=10
      

NOTE: It is important you will also need to move or copy the skin swf to wherever you deploy your video on a remote server.)

The FLVPlayback component will now sit on the top right side of the movie. I have also chosen to NOT allow the component to resize its dimensions to match the dimensions of the playing FLV file. This accomplished with this line of code:

   Player.autoSize=false;

3.3 Assigning Video

Telling the FLVPlayback component is achieved simply by assigning the contentPath property using ActionScript as such:

   Player.contentPath =  "flv/movieName.flv";

You may want to try the remote video path test here as well:

   Player.contentPath =  "http://www.helpexamples.com/flash/video/water.flv