Flash

In Part One of this two-part article ("Skinning the V2 ProgressBar component " MXDJ vol 3 issue 4) we did what we set out to do, but I just can't bear to leave the skinning-a-Button issue unresolved.

The warning at the beginning of last month's article pointed out that the Button component is surprisingly difficult to skin because its skin is made up of code, not graphics. As a last exercise, then, let's take a quick look at an alternative approach: skinning SimpleButton instead of Button.

The SimpleButton class is the superclass of Button, and is accordingly less complex. Specifically, SimpleButton instances cannot be resized and do not have text labels - which makes them easy to skin. Follow these steps to skin a SimpleButton instance:

1. Create a new Flash document (.fla file).
2. Drag a Button instance to the stage and then delete it. This adds the Button component to the document Library.
3. Create four movie clips, named up, over, down, and icon, with Linkage Identifiers set to "up", "over", "down", and "icon", respectively.
4. In the up movie clip, create a graphic that represents the button in an idle state.
5. In the over movie clip, create a graphic that represents the button when the mouse pointer is above it.
6. In the down movie clip, create a graphic that represents the button when it is pressed.
7. In the icon movie clip, create a graphic that will appear in the middle of the button in all states.
8. Select Frame 1, Layer 1.
9. Add the following code to the Actions panel:

   
   import mx.controls.*;
   
   var initObj = {falseUpSkin:"up",
                  falseDownSkin:"down",
                  falseOverSkin:"over"};
   
   initObj.falseUpIcon   = "icon";
   initObj.falseDownIcon = "icon";
   initObj.falseOverIcon = "icon";
   initObj.trueUpIcon    = "icon";
   initObj.trueDownIcon  = "icon";
   initObj.trueOverIcon  = "icon";
   
   // Cast the object returned by createClassObject() to SimpleButton.
   var sButton:SimpleButton = SimpleButton(
       this.createClassObject(SimpleButton,
   	     "sButtonInstance",
   		 0,
   		 initObj));
   sButton.move(250, 200);
   

10. To export the movie, choose Control > Test Movie.

In the preceding steps, we created the SimpleButton instance with code (via createClassObject()) because there is no SimpleButton visual component included in the Flash MX 2004 Components panel. It is theoretically possible to subclass SimpleButton and use the subclass to create a component that could be added to the Components panel, but doing so is outside the scope of this article. For information on creating components, see "Further Study," below.

The SimpleButton class is not the only alternative to the Button component. The CustomButton class can also be skinned with graphical movie clips. CustomButton offers the additional features of resizability and a text label. Note, however, that a CustomButton instance can be resized along one axis only - either horizontally or vertically. Accordingly, the CustomButton skin is structured much like the ProgressBar skin; it has two end caps for the edges of the button and a middle section that is stretched between the caps. You can use the SimpleButton skinning technique described above to skin a CustomButton instance. Of course, you'll have to use the CustomButton skin properties instead of the SimpleButton skin properties. For reference, here is a list of CustomButton's skin properties:

• falseUpSkinL
• falseUpSkinM
• falseUpSkinR
• falseDownSkinL
• falseDownSkinM
• falseDownSkinR
• falseOverSkinL
• falseOverSkinM
• falseOverSkinR
• trueUpSkinL
• trueUpSkinM
• trueUpSkinR
• trueDownSkinL
• trueDownSkinM
• trueDownSkinR
• trueOverSkinL
• trueOverSkinM
• trueOverSkinR
• falseDisabledSkinL
• falseDisabledSkinM
• falseDisabledSkinR
• trueDisabledSkinL
• trueDisabledSkinM
• trueDisabledSkinR

In the preceding property names, "false" means that the button is not in a "toggled on" state, while "true" means that the button is in a "toggled on" state. Non-toggle buttons (i.e., normal buttons) use the "false" skins only. The letter "L" means left cap, "M" means middle, stretching section, and "R" means right cap.

Note, however, that rather than relying on the above list of CustomButton skin properties you should always consult the actual source code for the CustomButton class to verify which skin properties it supports. Different versions of the class may support different properties. The source code also contains a brief description for each skin element. The source file for CustomButton is located here:

• Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\First Run\Classes\mx\controls\CustomButton.as
• Macintosh: HD/Applications/Macromedia Flash MX 2004/First Run/Classes/mx/controls/CustomButton.as