| << 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.
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.
I will publish a list containing links to ActionScript resources as a separate document. Search for ActionScript Resources in theConnexions search box.
Complete listings of the source code for the files used in this Flex application are provided in Listing 8 through Listing 12 below.
<?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> //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 //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 //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 //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 This section contains a variety of miscellaneous materials.
-end-
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|