Using layout

When you open a skin FLA file, you will find a movie clip named layout_mc in the upper-left corner of the Stage. This clip must be named layout_mc. The layout_mc clip and the ActionScript code that you find on the same frame define how the controls will be laid out at runtime.

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

Within layout_mc 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 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, back_mc, bufferingBar_mc, seekBar_mc, volumeMute_mc, and volumeBar_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 background and foreground clips as you want besides the standard controls. You must use the following naming convention, however: bg1_mc, bg2_mc, and so on for background clips; and fg1_mc, fg2_mc, and so on for foreground clips. You cannot skip numbers. For example, if you have bg1_mc and bg3_mc but no bg2_mc, bg3_mc will not be used. This scheme is designed to put background clips behind the controls, with bg1_mc on the bottom and bg2_mc above it, and the foreground clips above the controls, with fg1_mc first and fg2_mc above fg1_mc, and so on. However, the layered relationship of the clips is actually determined by the ordering of the corresponding controls on the Stage, so make sure that is correct.

The bg1_mc clip is special. If you set the FlvPlayback.skinAutoHide property to true, the skin shows when the mouse is over the bg1_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 FLA files, bg1_mc is used for the chrome, and some use bg2_mc for the border around the Forward and Back buttons.

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 code defines the minimum width and height for the skin. The Select Skin dialog box shows these values and they are used at runtime 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
layout_mc.minWidth = 270;
layout_mc.minHeight = 60;

Each placeholder can have the following properties applied to it:

Property	Description
`mc:MovieClip`	The instance on the Stage for this control. If not set, `layout_mc.foo_mc.mc` would default to `foo_mc`.
`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 will be scaled horizontally at runtime. If both the anchorTop and anchorBottom properties are true, the control will be scaled vertically at runtime.

To see the effects of these properties, see how they are used in the 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 layout_mc movie clip 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.

Using layout_mc

ActionScript