Create Content Management System with Dreamweaver CS4, PHP, MySQL and FCK Editor. This series of the tutorials will guide you through the process of developing your very own Content Management System using well known tools and technologies such as: Dreamweaver CS4, PHP, MySQL and FCK Editor.

Flash tutorials

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

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).

Flash tutorial image illustrating how to create new file in Adobe Flash Professional CS3
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.

Flash tutorial image illustrating how to open Components panel in Adobe Flash Professional CS3
Fig. 02

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

Flash tutorial image illustrating how to drag and drop Media Controller onto the stage in Adobe Flash Professional CS3
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.

Flash tutorial image illustrating how to apply the instance name to the MediaController in Adobe Flash Professional CS3
Fig. 04

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

Flash tutorial image illustrating how to bring Media Display component onto the stage in Adobe Flash Professional CS3
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.

Flash tutorial image illustrating how to name the MediaDisplay component in Adobe Flash Professional CS3
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).

Flash tutorial image illustrating how to associate MediaController with MediaDisplay in Adobe Flash Professional CS3
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).

Flash tutorial image illustrating how to associate MediaController with MediaDisplay in Adobe Flash Professional CS3
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.

Flash tutorial image illustrating how to setup Component Inspector in Adobe Flash Professional CS3
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).

Flash tutorial image illustrating how to show MediaController in Adobe Flash Professional CS3
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.

 
  • Thank you for subscribing to our newsletter.
  • To complete registration please click on the link in the email which has been sent to you.
  • Invalid first name
  • Invalid last name
  • Invalid email address

Website Design Company | Website Design Company Sussex | Website Design Company Chichester | Website Design Packages | Tutorials Resources | Articles
© Web Design Tutorials – Sebastian Sulinski