Creating a Video Portfolio (FLV Video Player) in Flash

By Blue_Chi | Flash CS3 | Intermediate

This tutorial will teach you how to create an interactive FLV video player that lets the user select which video to load at run time. All the video data will be saved outside the SWF file and will be streamed upon selection only. We will create this scene by making use of the FLVPlayback Component. Here is an example of a movie that uses this technique:

Click on one of the thumbnails to play a video.

Our Flash movie will load two separate FLV videos that were created outside the Flash authoring tool. This tutorial will not cover the process of converting your videos into the FLV format. You can use the standalone Flash Video Encoder to do this, you can view our tutorial on Creating and Playing FLV Videos in Flash to learn more about this topic.

In order to follow this tutorial you will need a couple of FLV files to play in the movie. I will provide you with a zip file that contains two FLVs and two thumbnails to use to follow this tutorial. Download the files here.

Get All Your Files in One Place

Our SWF file will load the videos externally, that process will be much easier if all the files are saved in the same directory. So create a new Flash movie (ActionScript 1 or 2 using the default dimensions, etc.) and save it in an empty folder. Now unzip the contents of the zip files you downloaded earlier and place the two FLV videos in the same folder as your FLA file.

Put all the files in the same directory

Setting Up The Stage

Back in Flash, you should have one layer on the timeline, this layer will have all the visual contents of our movie, ie the FLV Playback Component and the thumbnail buttons, so rename this layer Player and Buttons. That done, go through Window>Components to open up the Component Panel. You can find the FLVPlayback component under the Video category. Drag a copy of it onto the stage.

Drag an instance of the FLVPlayback component onto stage

Access the Properties Inspector and assign the instance name myPlayer to the FLVPlayback component.

Assign the instance name myPlayer

Our player is ready, we have to get our buttons on the stage now. Go through File>Import>Import to Stage and import both of the thumbnail GIFs that were included in the zip file. Position them on the stage below the FLVPlayback component, then select one of them only and convert it to a button symbol (Press F8 to do this). Name the symbol Button1. Once ready, access the Properties Inspector and assign the instance name my1_btn to it.

Convert the First Button to a Symbol

Assign the instance name 'my1_btn' to your button

Select the second button, convert it to a button symbol named Button2, then assign the instance name my2_btn to it. You should end up with the stage looking something similar to the image below.

All objects are set!


All the objects we need for our portfolio are now present on the stage, all we have to do is just write our ActionScript. Create an additional layer on the timeline and name it ActionScript. Now right-click the only frame on that layer and select Actions to open up the ActionScript panel. Paste the following code to the do the trick:

my1_btn.onRelease = function (){
myPlayer.contentPath = "video1.flv";
my2_btn.onRelease = function (){
myPlayer.contentPath = "video2.flv";

Our code is very simple, the first button sets the path for the video (contentPath) to be played as video1.flv, and the second button sets the path for the video as video2.flv. You can easily create new buttons that play additional videos if you please by duplicating the code.

This concludes our tutorial, if you have any questions feel free to post at the Oman3D Forum.

- End of Tutorial.