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

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
what does nano mean?
Anassong Reply
nano basically means 10^(-9). nanometer is a unit to measure length.
Bharti
do you think it's worthwhile in the long term to study the effects and possibilities of nanotechnology on viral treatment?
Damian Reply
absolutely yes
Daniel
how to know photocatalytic properties of tio2 nanoparticles...what to do now
Akash Reply
it is a goid question and i want to know the answer as well
Maciej
characteristics of micro business
Abigail
for teaching engĺish at school how nano technology help us
Anassong
Do somebody tell me a best nano engineering book for beginners?
s. Reply
there is no specific books for beginners but there is book called principle of nanotechnology
NANO
what is fullerene does it is used to make bukky balls
Devang Reply
are you nano engineer ?
s.
fullerene is a bucky ball aka Carbon 60 molecule. It was name by the architect Fuller. He design the geodesic dome. it resembles a soccer ball.
Tarell
what is the actual application of fullerenes nowadays?
Damian
That is a great question Damian. best way to answer that question is to Google it. there are hundreds of applications for buck minister fullerenes, from medical to aerospace. you can also find plenty of research papers that will give you great detail on the potential applications of fullerenes.
Tarell
what is the Synthesis, properties,and applications of carbon nano chemistry
Abhijith Reply
Mostly, they use nano carbon for electronics and for materials to be strengthened.
Virgil
is Bucky paper clear?
CYNTHIA
carbon nanotubes has various application in fuel cells membrane, current research on cancer drug,and in electronics MEMS and NEMS etc
NANO
so some one know about replacing silicon atom with phosphorous in semiconductors device?
s. Reply
Yeah, it is a pain to say the least. You basically have to heat the substarte up to around 1000 degrees celcius then pass phosphene gas over top of it, which is explosive and toxic by the way, under very low pressure.
Harper
Do you know which machine is used to that process?
s.
how to fabricate graphene ink ?
SUYASH Reply
for screen printed electrodes ?
SUYASH
What is lattice structure?
s. Reply
of graphene you mean?
Ebrahim
or in general
Ebrahim
in general
s.
Graphene has a hexagonal structure
tahir
On having this app for quite a bit time, Haven't realised there's a chat room in it.
Cied
what is biological synthesis of nanoparticles
Sanket Reply
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