Flash Article

Creating Custom Video Controller Skins for the Flash Video Component in Dreamweaver 8

Understanding Custom Video Controllers

While the default skins supplied with the Flash Video component are top quality and rather attractive, you might have a project that requires a custom skin. You can easily integrate a custom skin into your existing site design, customize the color of your custom skin, or even create the graphics from scratch.

A skin file consists of two parts: a set of movie clips or assets placed on the Stage, and some simple ActionScript. Each movie clip requires a specific instance name so the ActionScript code can target each instance.

The following list shows the nesting and naming scheme for your skin file:

volumeMute_mc
     on_mc
           up_mc
           over_mc
           down_mc
     off_mc
           up_mc
           over_mc
           down_mc
play_mc
     up_mc
     over_mc
     down_mc
     disabled_mc
pause_mc
     up_mc
     over_mc
     down_mc
     disabled_mc
stop_mc
     up_mc
     over_mc
     down_mc
     disabled_mc
cover_mc
     nw_mc
     n_mc
     ne_mc
     w_mc
     e_mc
     sw_mc
     s_mc
     se_mc
buffering_mc
volumeBar_mc
     bar_mc
     handle_mc
           up_mc
           over_mc
           down_mc
seekBar_mc
     middle_mc
     handle_mc
           up_mc
           over_mc
           down_mc

You do not require every movie clip that is listed previously; however, the list includes all of the assets you include in the first custom skin you create in this tutorial. You can use the list to help you create the skin. The skin reacts differently depending on the assets available in the SWF file. For example, if the Flash Video component doesn't find the movie clip volumeMute_mc within the skin file, then the skin doesn't contain a mute button.

You would place the following code snippet on Frame 1 of the skin file's main Timeline. The code shows an example of ActionScript required to position the elements within this specific skin:

function getSkinInfo():Object {
     var res:Object = new Object();
     res.video = {x:10, y:10, w:-20, h:-47};
     res.mode = "disable"; //or "hide"
     res.playBtn = {x:10, y:-30};
     res.pauseBtn = {x:50, y:-30};
     res.stopBtn = {x:90, y:-30};
     res.seekBar = {x:135, y:-33, w:-229};
     res.buffering = {x:136, y:-27, w:-231};
     res.volumeMute = {x:-88, y:-31};
     res.volumeBar = {x:-66, y:-33, l:51, type:"horizontal"};
     res.autoHide = false;
     res.bgColor = 0xFFFFFF;
     res.uiMode = "stretch"; // or "center", "TL"
     return res;
}

Note: The negative values specified for x, y, w, h, or l indicate that the value should be the dimensions of the SWF file, minus the number of pixels you specify.

For example, the video property in the res object contains an object with the following properties and values: x:10, y:10, w:-20, and h:-47. This code positions the video object at x and y coordinates of 10 pixels. The width of the video object is 20 pixels less than the size of the skin file. Because the x coordinate of the video is set to 10, this centers the video within the skin. The final property is h (height). The height of the video object is set to -47 (or, the height of the size of the skin file minus 47 pixels). Because the y coordinate is set to 10 pixels, it leaves a 37-pixel-wide gap below the video object where the other buttons display.

Note: The skins for the FLVPlayback component in Flash Professional 8, and the skins for the Flash Video component in Dreamweaver 8 are not interchangeable, because the instance names and code above are not the same between the two components.

Page 2 of 6

Previous Page

Next Page