Create a new skin



The best way to create a skin SWF file is to copy one of the skin files that come with Flash, and use it as a starting point. You can find the FLA files for these skins in the Flash application folder in Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. To make your finished skin SWF file available as an option in the Select Skin dialog box, put it in the Configuration/FLVPlayback Skins/ActionScript 3.0 folder, either in the Flash application folder or in a user’s local Configuration/FLVPlayback Skins/ActionScript 3.0 folder.

Because you can set the color of a skin independently of choosing the skin, you do not need to edit the FLA file to modify the color. If you create a skin that has a specific color and you do not want it to be editable in the Select Skin dialog box, set this.border_mc.colorMe = false; in the skin FLA file ActionScript code. For information on setting a skin’s color, see Select a predesigned skin.

When looking at the installed Flash skin FLA files, it might seem that certain things on the Stage are unnecessary, but many of these things are put into guide layers. With live preview using scale 9, you can quickly see what will actually appear in the SWF file.

The following sections cover more complex customizations and changes to the SeekBar, BufferingBar, and VolumeBar movie clips.

Use 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 Modify 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 and skin layout

The following ActionScript code generally applies to all controls. 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:

Property

Description

anchorLeft

Boolean. Positions the control relative to the left side of the FLVPlayback instance. Defaults to true unless anchorRight is explicitly set to true, and then it defaults to false.

anchorRight

Boolean. Positions the control relative to the right side of the FLVPlayback instance. Defaults to false.

anchorBottom

Boolean. Positions the control relative to the bottom of the FLVPlayback instance. Defaults to true, unless anchorTop is explicitly set to true, and then it defaults to false.

anchorTop

Boolean. Positions the control relative to the top of the FLVPlayback instance. Defaults to false.

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.

Buffering bar

The buffering bar has two movie clips: bufferingBar_mc and bufferingBarFill_mc. Each clip’s position on the Stage relative to the other clip is important because this relative positioning is maintained. The buffering bar uses two separate clips because the component scales bufferingBar_mc but not bufferingBarFill_mc.

The bufferingBar_mc clip has 9-slice scaling applied to it, so the borders won’t distort when it scales. The bufferingBarFill_mc clip is extremely wide, so that it will always be wide enough without needing to be scaled. It is automatically masked at run time to show only the portion above the stretched bufferingBar_mc. By default, the exact dimensions of the mask will maintain an equal margin on the left and right within the bufferingBar_mc, based on the difference between the x (horizontal) positions of bufferingBar_mc and bufferingBarFill_mc. You can customize the positioning with ActionScript code.

If your buffering bar does not need to scale or does not use 9-slice scaling, you could set it up like the FLV Playback Custom UI BufferingBar component. For more information, see BufferingBar component.

The buffering bar has the following additional property:

Property

Description

fill_mc:MovieClip

Specifies the instance name of the buffering bar fill. Defaults to bufferingBarFill_mc.

Seek bar and volume bar

The seek bar also has two movie clips: seekBar_mc and seekBarProgess_mc. Each clip’s position on the Layout layer relative to the other clip is important because this relative positioning is maintained. Although both clips scale, the seekBarProgress_mc cannot be nested within seekBar_mc because seekBar_mc uses 9-slice scaling, which does not work well with nested movie clips.

The seekBar_mc clip has 9-slice scaling applied to it, so the borders won’t distort when it scales. The seekBarProgress_mc clip also scales, but it does distort. It does not use 9-slice scaling because it is a fill, which looks fine when distorted.

The seekBarProgress_mc clip works without a fill_mc, much like the way a progress_mc clip works in FLV Playback Custom UI components. In other words, it is not masked and is scaled horizontally. The exact dimensions of the seekBarProgress_mc at 100% are defined by left and right margins within the seekBarProgress_mc clip. These dimensions are, by default, equal and based on the difference between the x (horizontal) positions of seekBar_mc and seekBarProgress_mc. You can customize the dimensions with ActionScript in the seek bar movie clip, as shown in the following example:

this.seekBar_mc.progressLeftMargin = 2; 
this.seekBar_mc.progressRightMargin = 2; 
this.seekBar_mc.progressY = 11; 
this.seekBar_mc.fullnessLeftMargin = 2; 
this.seekBar_mc.fullnessRightMargin = 2; 
this.seekBar_mc.fullnessY = 11;

You can put this code either in the SeekBar movie clip Timeline or you could put it with the other ActionScript code on the main Timeline. If you customize with code instead of modifying the layout, the fill doesn't need to be on the Stage. It just needs to be in the library, set to export for ActionScript on Frame 1 with the correct class name.

As with the FLV Playback Custom UI SeekBar component, it is possible to create a fullness movie clip for the seek bar. If your seek bar does not need to scale, or if it does scale but does not use 9-slice scaling, you could set up your progress_mc or fullness_mc using any of the methods used for FLV Playback Custom UI components. For more information, see Progress and fullness movie clips.

Because the volume bar in the Flash skins does not scale, it is constructed the same way as the VolumeBar FLV Playback Custom UI component. For more information, see SeekBar and VolumeBar components. The exception is that the handle is implemented differently.

Seekbar and VolumeBar handles

The SeekBar and VolumeBar handles are placed on the Layout layer next to the bar. By default, the handle’s left margin, right margin, and y-axis values are set by its position relative to the bar movie clip. The left margin is set by the difference between the handle’s x (horizontal) location and the bar’s x (horizontal) location, and the right margin is equal to the left margin. You can customize these values through ActionScript in the SeekBar or VolumeBar movie clip. The following example is the same ActionScript code that is used with the FLV Playback Custom UI components:

this.seekBar_mc.handleLeftMargin = 2; 
this.seekBar_mc.handleRightMargin = 2; 
this.seekBar_mc.handleY = 11;

You can put this code either in the SeekBar movie clip Timeline or you could put it with the other ActionScript code on the main Timeline. If you customize with code instead of modifying the layout, the handle doesn’t need to be on the Stage. It just needs to be in the library, set to export for ActionScript on Frame 1 with the correct class name.

Beyond these properties, the handles are simple movie clips, set up the same way as they are in the FLV Playback Custom UI components. Both have rectangle backgrounds with the alpha property set to 0. These are present only to increase the hit region and are not required.

Background and foreground clips

The movie clips chrome_mc and forwardBackBorder_mc are implemented as background clips.

Of the ForwardBackBorder, ForwardBorder, and BackBorder movie clips on the Stage and the placeholder Forward and Back buttons, the only one that is not on a guide layer is ForwardBackBorder. It is only in the skins that actually use the Forward and Back buttons.

The only requirement for these clips is that they need to be exported for ActionScript on Frame 1 in the library.