<< 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-

Questions & Answers

Application of nanotechnology in medicine
what is variations in raman spectra for nanomaterials
Jyoti Reply
I only see partial conversation and what's the question here!
Crow Reply
what about nanotechnology for water purification
RAW Reply
please someone correct me if I'm wrong but I think one can use nanoparticles, specially silver nanoparticles for water treatment.
Damian
yes that's correct
Professor
I think
Professor
what is the stm
Brian Reply
is there industrial application of fullrenes. What is the method to prepare fullrene on large scale.?
Rafiq
industrial application...? mmm I think on the medical side as drug carrier, but you should go deeper on your research, I may be wrong
Damian
How we are making nano material?
LITNING Reply
what is a peer
LITNING Reply
What is meant by 'nano scale'?
LITNING Reply
What is STMs full form?
LITNING
scanning tunneling microscope
Sahil
how nano science is used for hydrophobicity
Santosh
Do u think that Graphene and Fullrene fiber can be used to make Air Plane body structure the lightest and strongest. Rafiq
Rafiq
what is differents between GO and RGO?
Mahi
what is simplest way to understand the applications of nano robots used to detect the cancer affected cell of human body.? How this robot is carried to required site of body cell.? what will be the carrier material and how can be detected that correct delivery of drug is done Rafiq
Rafiq
if virus is killing to make ARTIFICIAL DNA OF GRAPHENE FOR KILLED THE VIRUS .THIS IS OUR ASSUMPTION
Anam
analytical skills graphene is prepared to kill any type viruses .
Anam
what is Nano technology ?
Bob Reply
write examples of Nano molecule?
Bob
The nanotechnology is as new science, to scale nanometric
brayan
nanotechnology is the study, desing, synthesis, manipulation and application of materials and functional systems through control of matter at nanoscale
Damian
Is there any normative that regulates the use of silver nanoparticles?
Damian Reply
what king of growth are you checking .?
Renato
What fields keep nano created devices from performing or assimulating ? Magnetic fields ? Are do they assimilate ?
Stoney Reply
why we need to study biomolecules, molecular biology in nanotechnology?
Adin Reply
?
Kyle
yes I'm doing my masters in nanotechnology, we are being studying all these domains as well..
Adin
why?
Adin
what school?
Kyle
biomolecules are e building blocks of every organics and inorganic materials.
Joe
anyone know any internet site where one can find nanotechnology papers?
Damian Reply
research.net
kanaga
sciencedirect big data base
Ernesto
Introduction about quantum dots in nanotechnology
Praveena Reply
hi
Loga
what does nano mean?
Anassong Reply
nano basically means 10^(-9). nanometer is a unit to measure length.
Bharti
how did you get the value of 2000N.What calculations are needed to arrive at it
Smarajit Reply
Privacy Information Security Software Version 1.1a
Good
Got questions? Join the online conversation and get instant answers!
Jobilize.com Reply

Get the best Algebra and trigonometry course in your pocket!





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