<< Chapter < Page Chapter >> Page >

If not, meaning that it is currently exposing butterfly images, it uses the setStyle method to switch all four skin styles to the frog images.

Run the program and see for yourself

If you run this program and click repeatedly on the rightmost button in Figure 2, you will see the skins forthe button toggle between frog images and butterfly images. This demonstrates that ActionScript skins can be changed at runtime.

The end of the FancyButton class

Listing 7 also signals the end of the FancyButton class. As I mentioned earlier, you will find the complete source code for this class inListing 10 near the end of the lesson. You will also find the source code for the somewhat simpler classes named ButterflyButton and FrogButton in Listing 11 and Listing 12.

Run the program

I encourage you to run this program from the web. Then copy the code from Listing 8 through Listing12. Use that code, along with some image files of your own to create a Flex project. Compile and run the project. Experiment with the code,making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.

Resources

I will publish a list containing links to ActionScript resources as a separate document. Search for ActionScript Resources in theConnexions search box.

Complete program listings

Complete listings of the source code for the files used in this Flex application are provided in Listing 8 through Listing 12 below.

Source code for the file named skins01.mxml.

<?xml version="1.0" encoding="utf-8"?><!--The purpose of this application is twofold: 1. To illustrate the use of inheritance to createcustom components. 2. To illustrate the use of skins to change theappearance of the standard ActionScript components.Four custom classes are defined. One uses butterflyimages to create a ButterflyButton. Another uses images of a frog to create a FrogButton. A thirduses both butterfly and frog images to toggle the skins between the two at runtime.The fourth class is a driver class that is designedto exercise the other three classes and to demonstrate their use.All three classes define the following styles but thedisabledSkin style is not illustrated by the code.upSkin overSkindownSkin disabledSkinMxml code is used to instantiate an object of theDriver class. --><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cc="CustomClasses.*"><cc:Driver/></mx:Application>

Source code for the class named driver.

//The purpose of this class is to serve as a driver to // exercise the following custom classes:// ButterflyButton // FrogButton// FancyButton //A click event handler is registered on an object of the// FancyButton class. Each time the object is clicked // with the mouse, the toggleSkin method is called on// the object causing it to toggle its skin between // butterfly images and frog images.package CustomClasses{ import flash.events.*;import mx.containers.HBox;public class Driver extends HBox{private var bFlyButton:ButterflyButton = new ButterflyButton();private var frogButton:FrogButton = new FrogButton(); private var fancyButton:FancyButton =new FancyButton();public function Driver(){//constructor addChild(bFlyButton);addChild(frogButton); addChild(fancyButton);fancyButton.addEventListener(MouseEvent.CLICK,buttonHandler); }//end constructorprivate function buttonHandler(event:MouseEvent):void{ fancyButton.toggleSkin();}//end buttonHandler }//end class}//end package

Source code for the class named fancybutton.

//This class defines a custom button using skins. When // the program starts, frog images are used to define// the button's skin. Each time the toggleSkin method is // called, the skin switches between frog images and// butterfly images. package CustomClasses{import mx.controls.Button;public class FancyButton extends Button{ [Embed("/Images/frogup.jpg")]private var frogUp:Class; [Embed("/Images/frogover.jpg")]private var frogOver:Class;[Embed("/Images/frogdown.jpg")] private var frogDown:Class;[Embed("/Images/frogdisabled.jpg")]private var frogDisabled:Class;[Embed("/Images/bflyup.jpg")] private var bFlyUp:Class;[Embed("/Images/bflyover.jpg")]private var bFlyOver:Class;[Embed("/Images/bflydown.jpg")] private var bFlyDown:Class;[Embed("/Images/bflydisabled.jpg")]private var bFlyDisabled:Class;public function FancyButton(){//constructorthis.setStyle("upSkin", frogUp); this.setStyle("overSkin", frogOver);this.setStyle("downSkin", frogDown); this.setStyle("disabledSkin", frogDisabled);}//end constructorpublic 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

Source code for the class named butterflybutton.

//This class defines a custom button using skins. The // normal or up position shows an image of a butterfly.// When the mouse is over the button, the image takes on // a blue tint. When the mouse is pressed on the button,// the image is negated. When the button is disabled, // the image turns to gray scale.package CustomClasses{ import mx.controls.Button;public class ButterflyButton extends Button{public function ButterflyButton(){[Embed("/Images/bflyup.jpg")] var up:Class;[Embed("/Images/bflyover.jpg")] var over:Class;[Embed("/Images/bflydown.jpg")] var down:Class;[Embed("/Images/bflydisabled.jpg")] var disabled:Class;this.setStyle("upSkin", up); this.setStyle("overSkin", over);this.setStyle("downSkin", down); this.setStyle("disabledSkin", disabled);//Can do this to demo the disabled skin.//this.enabled=false; }//end constructor}//end class }//end package

Source code for the class named frogbutton.

//This class defines a custom button using skins. The // normal or up position shows an image of a frog.// When the mouse is over the button, the image takes on // a blue tint. When the mouse is pressed on the button,// the image is negated. When the button is disabled, // the image turns to gray scale.package CustomClasses{ import mx.controls.Button;public class FrogButton extends Button{public function FrogButton(){[Embed("/Images/frogup.jpg")] var up:Class;[Embed("/Images/frogover.jpg")] var over:Class;[Embed("/Images/frogdown.jpg")] var down:Class;[Embed("/Images/frogdisabled.jpg")] var disabled:Class;this.setStyle("upSkin", up); this.setStyle("overSkin", over);this.setStyle("downSkin", down); this.setStyle("disabledSkin", disabled);//Can do this to demo the disabled skin.//this.enabled=false; }//end constructor}//end class }//end package

Miscellaneous

This section contains a variety of miscellaneous materials.

Housekeeping material
  • Module name: Inheritance - The Big Picture
  • Files:
    • ActionScript0108\ActionScript0108.htm
    • ActionScript0108\Connexions\ActionScriptXhtml0108.htm
PDF disclaimer: Although the Connexions site makes it possible for you to download a PDF file for thismodule at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into PDF.

-end-

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Object-oriented programming (oop) with actionscript. OpenStax CNX. Jun 04, 2010 Download for free at http://cnx.org/content/col11202/1.19
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?

Ask