| << Chapter < Page | Chapter >> Page > |
A FancyButton object ISA Button object
The FancyButton class extends the Button class. Therefore, an object of the FancyButton class is also a Button object, possessing all of the characteristics of a Button . (See the earlier section titled The ISA relationship .) One of the characteristics of a Button object is the ability to have its appearance changed through the use of skinning.
Different ways to create skins
There are several different ways to create skins for ActionScript objects, including the use of images to create graphical skins . According to About Skinning ,
"When using graphical skins, you must embed the image file for the skin in your application. To specify your skin, you can use the setStyle() method,set it inline, or use Cascading Style Sheets (CSS)"
Embedding image files
There is more than one way to embed an image file in your application and I won't attempt to explain the details. (I suggest that you go to Google and search for ActionScript embed metadata tag for more information.)
The embedding syntax
The syntax that you see in Listing 5 "Imports JPEG, GIF, PNG, SVG, and SWF files at compile time."
The syntax also makes those images accessible by way of the variables that are declared immediately following each Embed tag. Therefore, the images from each of the eight image files imported in Listing 5 can bereferenced later using the eight variables declared in Listing 5.
Constructor for the FancyButton class
The constructor for the FancyButton class is shown in Listing 6.
public function FancyButton(){//constructor
this.setStyle("upSkin", frogUp);this.setStyle("overSkin", frogOver);
this.setStyle("downSkin", frogDown);this.setStyle("disabledSkin", frogDisabled);
}//end constructor The constructor calls the setStyle method four times in succession to set the four styles described earlier to the frog images imported in Listing 5. This causes the button instantiatedfrom the FancyButton class to exhibit frog skins at startup as shown in Figure 2.
The toggleSkin method
The toggleSkin method is shown in Listing 7.
public function toggleSkin():void{
if(this.getStyle("upSkin") == frogUp){this.setStyle("upSkin", bFlyUp);
this.setStyle("overSkin", bFlyOver);this.setStyle("downSkin", bFlyDown);
this.setStyle("disabledSkin", bFlyDisabled);}else{
this.setStyle("upSkin", frogUp);this.setStyle("overSkin", frogOver);
this.setStyle("downSkin", frogDown);this.setStyle("disabledSkin", frogDisabled);
}//end else}//end toggleSkin
}//end class}//end package Called by a click event handler method
This method is called whenever the FancyButton object that was instantiated in Listing 2 fires a click event. This call results from the registration of the event handler method on the button in Listing 3 andthe definition of the event handler method in Listing 4.
Skin toggling algorithm
Listing 7 tests to determine if the button is currently exposing skins based on the frog images. If so, it uses the setStyle method to switch all four skin styles to the butterfly images.
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|