Today's New Content
Search CMX

Advanced Search

Latest Free Content
View All
Free Content
Accessibility

Extending the AS3 FLVPlayback Component in Flash CS3: Part 1 - Adding a Background Color

By: Robert Reinhardt

Page 1 of 2

Set for printing

Next

In this FLVPlayback component series, you will learn how to enhance the capabilities of the AS3 FLVPlayback component that ships with Adobe Flash CS3 Professional. Over the next several tutorials, you'll learn how to create an arbitrary class called FLVPlaybackPro and add custom methods and properties to accomplish common Flash Video tasks. The FLVPlaybackPro class extends the FLVPlayback class. In this tutorial, you'll learn how to create the FLVPlaybackPro class and build a background and backgroundColor property.

NOTE: This series augments the material discussed in my book, Adobe Flash CS3 Professional Video Studio Techniques (Adobe Press). Some of the ActionScript 3.0 (AS3) custom classes I built and included on the book's DVD-ROM are discussed and expanded in this series.

Why extend the FLVPlayback component?

Let's start this series by tackling the 800 lb. gorilla in the room. On the Flash conference circuit and at user group meetings I've managed, I hear the same questions about the FLVPlayback component all the time: "Why do you use the FLVPlayback component? Isn't better to just make your own video player?" My usual reply is, "It's a solid component, and it can do so much more than most people know it can." For the record, here are my thoughts on the FLVPlayback component:

As this tutorial series will demonstrate, one of the biggest advantages with using the FLVPlayback component is that it's easy to modify for your own purposes. The base class of the FLVPlayback component is the VideoPlayer API. There are over 32 custom classes for the FLVPlayback component. Most of these are quite small in file size, but the VideoPlayer class accounts for 13KB, just over 25% of the overall size of the FLVPlayback component! Customizing your own version of the FLVPlayback component may mean cutting out functionality you don't require for a particular implementation, or it may mean adding more properties, methods, and events to the component.

Creating a New FLVPlaybackPro Class with Inheritance

The first task for this tutorial series is to build a custom class named FLVPlaybackPro. I'm making this class part of the com.flashsupport.video package I built for my recent Flash Video book.

  1. Create a new folder on your computer, wherever you prefer. Name this folder FLVPlaybackPro. (This name is arbitrary, and simply means you're going to save all of your files related to this tutorial series in this folder.)
  2. Within this new folder, create a new folder named com. Within the com folder, create a folder named flashsupport. Within the flashsupport folder, create a folder named video. You should now have a directory tree of com/flashsupport/video in the FLVPlaybackPro folder.
  3. Launch Flash CS3, and create a new ActionScript file. Save this file as FLVPlaybackPro.as inside the video folder. Leave the new ActionScript file open for the remainder of this tutorial.
  4. Create a new Flash file (ActionScript 3.0), and save it as FLVPlaybackPro.fla at the root of the FLVPlaybackPro folder.
  5. Open the Components panel (Ctrl/Cmd+F7), and from the Video grouping, drag an instance of the FLVPlayback component to the stage. After the instance has been placed on the stage, delete the instance. You only need a copy of the FLVPlayback component in the FLA file's library. You can open the Library panel (Ctrl/Cmd+L) to verify that the component is there.
  6. Switch back to the FLVPlaybackPro.as file, and add the following code. This code creates a new class named FLVPlaybackPro which extends, or inherits, all of the functionality of the FLVPlayback component.

    package com.flashsupport.video {

        import fl.video.FLVPlayback;

        public class FLVPlaybackPro extends FLVPlayback {

           public function FLVPlaybackPro(){
              super();
           }
        }
    }

  7. Save the FLVPlaybackPro.as file.
  8. Switch back to the FLVPlaybackPro.fla file. Rename Layer 1 to actions. Select frame 1 of this layer, and open the Actions panel (F9, or Option+F9 on Mac). Add the following code to the script pane. This code imports the new FLVPlaybackPro class, creates a new instance, positions it at an X,Y coordinate of 20, 20, sets the source property to a sample video on the FlashSupport.com web site, and adds the instance to the display list:

    import com.flashsupport.video.FLVPlaybackPro;

    var fpp:FLVPlaybackPro = new FLVPlaybackPro();

    fpp.x = 20;
    fpp.y = 20;
    fpp.source = "http://www.flashsupport.com/video/lizardVP6_768K_Stream.flv";

    addChild(fpp);

  9. Save the Flash file, and test the movie (Ctrl/Cmd+Enter). You should see the sample FLV file load and play into a new custom wrapper for the FLVPlayback component.
  10. Because the instance was added with a script, there is no default skin SWF file applied to the instance. Locate the SkinUnderPlaySeekMute.swf from the Configuration/FLVPlayback Skins/ActionScript 3.0 folder of your Flash CS3 application folder, and make of a copy of the SWF file to the FLVPlaybackPro folder you created in step 1.
  11. Add the following code just before the fpp.source line of code in frame 1 of the actions layer. This code tells the FLVPlaybackPro component to load the skin SWF file you copied in step 10, and to set the background color of the skin to a dark gray:

    fpp.skin = "SkinUnderPlaySeekMute.swf";
    fpp.skinBackgroundColor = 0x666666;

  12. Save the Flash file, and retest the movie. You should now see the sample FLV file load and play, along with the skin SWF file.

Page 1 of 2 1 2 Next


download
Download Support Files


Keywords
Flash CS3, ActionScript 3.0, AS3, Flash Video, FLVPlayback component, FLVPlaybackPro class

All content ©CommunityMX 2002-2010. All rights reserved.