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.