Maya VPS

Creating a Basic Flash Video Player

8 months ago on December 15th

adobe, components, disney, flash, flv, oceans, playback, tutorial, video

Flash Logo Wide

So now that we have our video we can open up Flash and start working on the player. Flash makes creating components easy with the Components and Component Inspector panels. We could write the ActionScript to generate these components from scratch or we could take advantage of these and drag and drop them to the stage.

The Stage

My stage will be 700 x 400 pixels to keep as close as possible to the 16:9 wide-screen ratio. In future discussions this will not have as much importance as I will use JavaScript to communicate with ActionScript to resize the video accordingly without excess stage in either direction. Keep a tight video!

Drag FLV Component to Stage

The Simple Way

For a basic player, simply edit the information in the Component Inspector panel. To begin, double click the empty field next to source for a popup to select the location of the video. FYI: FLVPlayback also accepts MOV files.

If you selected Match Source Dimensions then the FLV instance on the stage should resize to the original video file dimensions. This is ideal if you do not want distortion, which you can always scale down. Unless you know what you are doing, I do not recommend leaving this off.

Aligning the Instance

Using the Align panel, align the FLV instance to the top right of the stage.

Align FLV Instance to Top Left

Tighten the Stage

Tighten the Stage to Fit the FLV Instance

Select Your Skin

If you'd like a skin, which includes the controls, select skin from the Component Inspector

Skin Selector

The Files

After publishing your work (File > Publish), you should have these five files:

oceans-tsr1_h640w.f4v - The FLV File
SkinOverAll.swf - The Skin File
video.fla - Your Source File
video.html - The Display Page (Not Necessary)
video.swf - The Player

All Oceans Files

The Result

After playing around with the Component Inspector a bit we get something like below.

Disneynature presents Oceans

Thoughts

There is still so much that can be done to customize this player. For one, you could change the default skin to your own skin by making your own or downloading an FLA file from online. This is a little more advanced, but it can be done.

Secondly, this player is not dynamic. This means that if you want to play a different video, you would have to republish you SWF file to change the FLV file it looks for.

Additionally, this player does not accept any external meta data, say, from an XML file. External meta data can be very useful and informative to a viewer when he or she is viewing external host videos, such as YouTube or Vimeo, on your web site. Meta data can also help when you'd like to have a still image appear before the user pushes play. All of these topics are under development for future discussions.

Short URL: http://mayavps.com/a3
If you enjoyed this post, please subscribe to new ones via e-mail, RSS, or Twitter.

1 0 0

Preparing a Video for FLV Playback

Are You a Squatter?

Creating a Basic Flash Video Player

The Stage

The Simple Way

Aligning the Instance

Tighten the Stage

Select Your Skin

The Files

The Result

Thoughts

No comments yet

What's on your mind?

Gravatar

About the Author

Cool Tools

Latest Tweets

@omayas:

Latest on Flickr

Search

Top Articles Browse

Tags Browse