Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Understanding Custom Video Controllers

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.

Comments