Using ActionScript 3.0 Components
Using the FLVPlayback Component > Customizing the FLVPlayback component > Creating a new skin > Using the skin layout

Using the skin layout

When you open a Flash skin FLA file, you will find the skin's movie clips laid out on the main Timeline. These clips and the ActionScript code that you find on the same frame define how the controls will be laid out at run time.

Although the Layout layer looks a lot like how the skin will look like at run time, the contents of this layer are not visible at run time. It is used only to calculate where to place the controls. The other controls on the Stage are used at run time.

Within the Layout layer is a placeholder for the FLVPlayback component named video_mc. All the other controls are laid out relative to video_mc. If you start with one of the Flash FLA files and change the size of the controls, you can probably fix the layout by moving these placeholder clips.

Each of the placeholder clips has a specific instance name. The names of the placeholder clips are playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc, and volumeBarHandle_mc. The piece that is recolored when you choose a skin color is called border_mc.

Which clip is used for a control is not important. Generally, for buttons the normal state clip is used. For other controls the clip for that control is used, but this is only for convenience. All that is important are the x (horizontal) and y (vertical) location and the height and the width of the placeholder.

You can also have as many additional clips as you want beside the standard controls. The only requirement for these clips is that their library symbols have Export for ActionScript checked in the Linkage dialog box. The custom clips in the Layout layer can have any instance name, other than the reserved instance names listed above. An instance name is only needed to set ActionScript on the clips to determine the layout.

The border_mc clip is special. If you set the FlvPlayback.skinAutoHide property to true, the skin shows when the mouse is over the border_mc clip. This is important for skins that appear outside the bounds of the video player. For information on the skinAutoHide property, see Modifying skin behavior.

In the Flash FLA files, border_mc is used for the chrome and for the border around the Forward and Back buttons.

The border_mc clip is also the part of the skin that has its alpha and color changed by the skinBackgroundAlpha and skinBackgroundColor properties. To allow customizable color and alpha, the ActionScript in the skin FLA file must include the following:

border_mc.colorMe = true;

ActionScript

The following ActionScript code applies to all controls generally. Some controls have specific ActionScript that defines additional behavior, and that is explained in the section for that control.

The initial ActionScript is a large section that specifies the class names for each state of each component. You can see all of these class names in the SkinOverAll.fla file. The code looks like this for the Pause and Play buttons, for example:

this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled";
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown";
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal";
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver";
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled";
this.playButtonDownState = "fl.video.skin.PlayButtonDown";
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal";
this.playButtonOverState = "fl.video.skin.PlayButtonOver";

The class names do not have actual external class files; they are just specified in the Linkage dialog box for all the movie clips in the library.

In the ActionScript 2.0 component, there were movie clips on Stage that were actually used at run time. In the ActionScript 3.0 component, those movie clips are still in the FLA file, but just to make editing convenient. Now, they are all in guide layers and are not exported. All of the skin assets in the library are set to export on the first frame and they are created dynamically with code like this, for example.

new fl.video.skin.PauseButtonDisabled()

Following that section is ActionScript code that defines the minimum width and height for the skin. The Select Skin dialog box shows these values and they are used at run time to prevent the skin from scaling below its minimum size. If you do not want to specify a minimum size, leave it as undefined or less than or equal to zero.

// minimum width and height of video recommended to use this skin,
// leave as undefined or <= 0 if there is no minimum
this.minWidth = 270;
this.minHeight = 60;

Each placeholder can have the following properties applied to it:

If both the anchorLeft and anchorRight properties are true, the control is scaled horizontally at run time. If both the anchorTop and anchorBottom properties are true, the control is scaled vertically at run time.

To see the effects of these properties, see how they are used in the Flash skins. The BufferingBar and SeekBar controls are the only ones that scale, and they are laid on top of one another and have both the anchorLeft and anchorRight properties set to true. All controls to the left of the BufferingBar and SeekBar have anchorLeft set to true, and all controls to their right have anchorRight set to true. All controls have anchorBottom set to true.

You can try editing the movie clips on the Layout layer to make a skin where the controls sit at the top rather than at the bottom. You simply need to move the controls to the top, relative to video_mc, and set anchorTop equal to true for all controls.

View comments on LiveDocs