Create flash video player using Flash Components in Adobe Flash Professional CS3

• Web Designer
• Skills
• Portfolio
• Tutorials
• Contact

Create flash video player using Flash Components

In this tutorial I will show you how to create flash video player for your website using flash components.
See the demo.

Open Adobe Flash Professional CS3 and on the welcome screen select Flash File (ActionScript 2.0) (Fig. 01).

Fig. 01

Open the Components panel (Fig. 02). If you can´t find Components panel go to Window and select Components or simply press Ctrl + F7 on your keyboard.

Fig. 02

From the Components panel drag and drop the MediaController onto the stage (Fig. 03).

Fig. 03

With the MediaController still selected go to the Properties panel and define the name for it – I called mine vcontr (Fig. 04).
Also, make sure that the width is the same as the width of the video you will be later loading to the player.

Fig. 04

Now, from the Components panel drag and drop the MediaDisplay component onto the stage (Fig. 05).

Fig. 05

With the MediaDisplay component still selected, go to the Properties panel and give it a name – I called mine vdisp (Fig. 06).
Also, make sure that the dimentions of the MediaDisplay component match your video dimentions, which in my case are 300px / 240px.

Fig. 06

Open the Behaviors panel – if you can´t see it, go to Window and select Behaviors or press Shift + F4 on your keyboard.
With the MediaDisplay component still selected click on the plus sign in the Behaviors panel and choose Media > Associate Controller (Fig. 07).

Fig. 07

In the Associate Controller dialog window select our controller (vcontr) and click the OK button to associate it with our MediaDisplay component (Fig. 08).

Fig. 08

Open Component Inspector panel – if you can´t find it go to Window and select Component Inspector or press Shift + F7 on your keyboard.
With your MediaDisplay component still selected define the path to your video file (in .flv format) together with the name of the file (Fig. 09). If you don´t know how to convert your video to .flv format you can watch my video tutorial which explains step by step how to do it using Adobe Flash CS3 Video Encoder.
If you don´t want your video to start playing automatically, simply uncheck the Automatically Play checkbox. Also, if your video uses cue points you can define them in the bottom section of the Component Inspector by providing Name and Position of each cue point in your video.

Fig. 09

If you want your MediaController to be displayed permanently rather than hide and show when you mouse hover it, select the MediaController and in the Component Inspector choose on for the controllerPolicy (Fig. 10).

Fig. 10

Once you´ve done all this you can save your file and publish your video player by pressing Ctrl + F12 on your keyboard.