Inheritance - The Big Picture

Summary: Learn how to use inheritance to create custom components.  Also learn how to use ActionScript skins to change the appearance of a standard component.

Preface

General

NOTE: 

Note that all references to ActionScript in this lesson are references to version 3 or later.

This tutorial lesson is part of a continuing series of lessons dedicated to object-oriented programming (OOP) with ActionScript.

The three main characteristics of an object-oriented program

Object-oriented programs exhibit three main characteristics:

• Encapsulation
• Inheritance
• Polymorphism

I explained encapsulation from a big-picture viewpoint in the previous lesson. (See Baldwin's ActionScript programming website .) In this lesson and the next, I will explain and illustrate inheritance and polymorphism from a big-picture viewpoint. Following that, I will get down in the weeds and start explaining in detail how to use ActionScript for object-oriented programming (OOP) .

Several ways to create and launch ActionScript programs

There are several ways to create and launch programs written in the ActionScript programming language. Most of the lessons in this series will use Adobe Flex as the launch pad for the sample ActionScript programs.

An earlier lesson titled The Default Application Container provided information on how to get started programming with Adobe's Flex Builder 3. (See Baldwin's Flex programming website .) You should study that lesson before embarking on the lessons in this series.

Some understanding of Flex MXML will be required

I also recommend that you study all of the lessons on Baldwin's Flex programming website in parallel with your study of these ActionScript lessons. Eventually you will probably need to understand both ActionScript and Flex and the relationships that exist between them in order to become a successful ActionScript programmer.

Will emphasize ActionScript code

It is often possible to use either ActionScript code or Flex MXML code to achieve the same result. Insofar as this series of lessons is concerned, the emphasis will be on ActionScript code even in those cases where Flex MXML code may be a suitable alternative.

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

Figures

• Figure 1 . Images used as skins for the buttons.
• Figure 2 . Program output at startup.
• Figure 3 . Mouse pointer hovering over the rightmost button.
• Figure 4 . Mouse pointer pressed on the rightmost button.
• Figure 5 . Mouse pointer hovering over the leftmost button.
• Figure 6 . Mouse pointer pressed on the leftmost button.
• Figure 7 . Skins01 project file structure.

Listings

• Listing 1 . Complete listing for Skins01.mxml.
• Listing 2 . Beginning of the class named Driver.
• Listing 3 . The constructor for the Driver class.
• Listing 4 . The method named buttonHandler.
• Listing 5 . Beginning of the FancyButton class.
• Listing 6 . Constructor for the FancyButton class.
• Listing 7 . The toggleSkin method.
• Listing 8 . Source code for the file named Skins01.mxml.
• Listing 9 . Source code for the class named Driver.
• Listing 10 . Source code for the class named FancyButton.
• Listing 11 . Source code for the class named ButterflyButton.
• Listing 12 . Source code for the class named FrogButton.

Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

General background information

The first major characteristic of an object-oriented program is encapsulation, which I explained in the previous lesson. The second of the three major characteristics is inheritance , followed bypolymorphism . I will explain inheritance from a big-picture viewpoint in this lesson and will explain polymorphism in the next lesson.

A new class can extend an existing class

A class can be defined to inherit the properties, events, and methods of another class. From a syntax viewpoint, this is accomplished using the extends keyword.

The class being extended is often called the base class or the superclass , and the new class is often called the derived class or the subclass .

What is inherited?

The subclass inherits the data representation and behavior of the superclass (and all of its superclasses) . However, the subclass can modify the behavior of inherited methods by overriding them. (That will be one of the topics in the next lesson on polymorphism.) The subclass can also add new data representation and behavior that is unique to its own purposes.

The superclass remains viable

A program can instantiate objects of a superclass as well as from its subclass. From a practical viewpoint, the superclass doesn't even know that it has been extended.

A hierarchy of classes

Inheritance is hierarchical. In other words, a class may be the subclass of one (and only one) other class and may be the superclass of one or more other classes.

For example, the ActionScript 3 Button class is a subclass of the UIComponent class, and is the superclass of the following classes:

• AccordianHeader
• CheckBox
• LinkButton
• PopUpButton
• RadioButton
• ScrollThumb
• SliderThumb

An orderly hierarchy

Inheritance mechanisms allow you build an orderly hierarchy of classes.

When several of your abstract data types have characteristics in common, you can design their commonalities into a single superclass and separate their unique characteristics into unique subclasses. This is one of the purposes of inheritance. (This purpose is illustrated by the program that I will explain later in this lesson.)

The airship hierarchy

For example, suppose you are building a program dealing with airships. All airships have altitude and range parameters in common. Therefore, you could build a base Airship class containing data and methods having to do with range and altitude.

From this superclass, you might derive a Balloon class and an Airplane class.

The Balloon class

The Balloon class might add variables and methods dealing with passenger capacity and what makes it go up (helium, hydrogen, or hot air) . Objects of the Balloon class would then be able to deal with altitude, range, passenger capacity, and what makes it go up.

The Airplane class

The Airplane class might add variables and methods dealing with engine type (jet or propeller) and cargo capacity. Objects of the Airplane class could then deal with altitude, range, engine type, and cargo capacity.

Three types of objects

Having created this hierarchy of classes, you could instantiate objects of type Airship , Balloon , and Airplane with the objects of each type having variables and methods to deal with those special characteristics of the flying machine indicated by the name of the class.

From the general to the specialized

You may have noticed that in this hierarchical class structure, inheritance causes the structure to grow in a direction from most general to more specialized. This is typical.

Single and multiple inheritance

C++ and some other object-oriented programming languages allow for multiple inheritance. This means that a new class can extend more than one superclass. This has advantages in some cases, but can lead to difficulties in other cases.

ActionScript 3 does not support multiple inheritance. Instead it supports a different mechanism called an interface that provides most of the benefits of multiple inheritance without most of the problems. I will explain the ActionScript interface in a future lesson.

The ISA relationship

You will sometimes hear people speak of the ISA relationship when discussing OOP. The source of this terminology is more fundamental than you may at first suspect.

Object-oriented designers often strive to use inheritance to model relationships where a subclass "is a kind of" the superclass. For example, a car "is a kind of" vehicle. A programmer "is a kind of" employee which in turn "is a kind of" person.

This relationship is called the ISA relationship. It's that simple.

Preview

Assume that you are working on children's games. You probably don't want to use buttons that cause your game program to look like a business program. Instead, you might prefer to use bright-colored buttons that look like animals, flowers, or other child-pleasing objects such as butterflies and frogs. (See Figure 1 for example.)

Characteristics in common

On the other hand, you want your buttons to exhibit all of the functionality of the standard ActionScript Button class. In other words, you want your new buttons to have many characteristics in common with the ActionScript Button class.

NOTE: 

A new class may not be required. -- It is probably also possible to accomplish this using embedded ActionScript code, but I will go the class definition route to illustrate inheritance and to produce a "cleaner" solution.

Inheritance to the rescue

As it turns out, this is easy to accomplish by defining an ActionScript class for each of your new button types.

The folks who defined the Button class have already designed the desired characteristics into the Button class and its superclasses. We can use inheritance to take advantage of the existing characteristics and to add new characteristics by defining unique subclasses of the Button class.

Three new button classes

The program named Skins01 that I will explain in this lesson defines three new button classes named ButterflyButton , FrogButton , and FancyButton . Each of these classes extends the Button class and inherits all of the characteristics of a standard Button object. However, the visual elements of the standard button are modified in the subclasses through the use of the ActionScript skinning capability.

What is skinning?

According to About skinning ,

"Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements. These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that define vector images.

Skins can define the entire appearance, or only a part of the appearance, of a component in various states. For example, a Button control has eight possible states, and eight associated skin properties."

Will extend the Button class

In this lesson, I will extend the Button class into three new classes and will modify four of the eight skin properties for objects instantiated from the three new classes. I will also define a fourth class named Driver that is designed to exercise and show how to use the new buttons.

Images used as skins for the buttons

Figure 1 shows the images used to define new skins for the three buttons.

Figure 1: Images used as skins for the buttons.

Images used as skins for the buttons.

The button class named ButterflyButton was skinned with the four butterfly images in the top row. The button class named FrogButton was skinned with the four frog images in the bottom row. The button class named FancyButton was skinned with both butterfly images and frog images and was given the ability to toggle back and forth between butterflies and frogs.

The toggleSkin method

The FancyButton class exposes a public method named toggleSkin . The rightmost button in Figure 2 is an object of the FancyButton class. Whenever this button is clicked, a click event handler registered on the button calls the toggleSkin method. Each time this method is called, the button's skins toggle from butterfly to frog or vice versa. (See the rightmost button in Figure 5.) This illustrates the capability to change skins on an ActionScript component at runtime.

NOTE: 

Spacebar -- Even though this text concentrates on the manipulation of the buttons with the mouse, a button can also be manipulated with the space bar when it has the focus. Note, however, that this lesson doesn't address the topic of focus.

Skins versus button styles

The different skins on the buttons are exposed by associating the images in Figure 1 with various button styles.

The upSkin style

The two images in the first column in Figure 1 show what the buttons look like when the mouse is not hovering over or pointing at the button. This corresponds to the button style named"upSkin" ,

The overSkin style

The two images in the second column show what the buttons look like when the mouse pointer is hovering over the button but the left mouse button has not been pressed. This corresponds to the button style named "overSkin" .

The downSkin style

The two images in the third column show what the buttons look like when the mouse pointer is over the button and the left mouse button is pressed. This corresponds to the button style named "downSkin" .

The disabledSkin style

The two images in the fourth column show what the buttons look like when the enabled property of the button is set to false. This corresponds to the button style named "disabledSkin" . Note, however, that this program does not expose the disabled state of the buttons.

Program output at startup

Figure 2 shows the three buttons at startup.

Figure 2: Program output at startup.

Program output at startup.

Button skins at startup

As you can see, all three buttons show the images from the first column in Figure 1 at startup.

An object of the ButterflyButton class

The leftmost button in Figure 2, which is an object of the ButterflyButton class, always shows one of the images in the top row of Figure 1, depending on the interaction with the mouse.

An object of the FrogButton class

The middle button in Figure 2, which is an object of the FrogButton class, always shows one of the images in the bottom row of Figure 1 depending on the interaction with the mouse.

An object of the FancyButton class

The rightmost button in Figure 2 is an object of the FancyButton class. As mentioned earlier, the object of the Driver class registers a click event handler this button. Whenever the rightmost button is clicked with the left mouse button, the toggleSkin method belonging to the rightmost button is called causing the skin images to toggle between frogs and butterflies.

At startup, this button shows the frog image from the first column in Figure 1. After it has been toggled, it shows the butterfly image from the first column in Figure 1 as the upSkin style.

Mouse pointer hovering over the rightmost button

Figure 3 shows the result of allowing the mouse pointer to hover over the rightmost button without pressing the left mouse button.

Figure 3: Mouse pointer hovering over the rightmost button.

Mouse pointer hovering over the rightmost button.

This action causes the button to switch to the overSkin style, which in turn causes one of the two images in the second column in Figure 1 to be exposed.

Mouse pointer pressed on the rightmost button

Figure 4 shows the result of pointing to the rightmost button with the mouse pointer and pressing the left mouse button.

Figure 4: Mouse pointer pressed on the rightmost button.

Mouse pointer pressed on the rightmost button.

NOTE: 

A negative image -- In case you are interested, the images in the third column in Figure 1 are the negative of the images in the first column.

This causes the button to switch to the downSkin style, which in turn causes one of the images from the third column in Figure 1 to be exposed.

Mouse pointer hovering over the leftmost button

Figure 5 shows the result of allowing the mouse pointer to hover over the leftmost button.

Figure 5: Mouse pointer hovering over the leftmost button.

Mouse pointer hovering over the leftmost button.

Hovering over the button with the mouse pointer causes the button to switch to the overSkin style exposing the top image in the second column in Figure 1.

Note that the rightmost button has been toggled from frog skins to butterfly skins in Figure 5.

Mouse pointer pressed on the leftmost button

Figure 6 shows the result of pointing to the leftmost button and pressing the left mouse button.

Figure 6: Mouse pointer pressed on the leftmost button.

Mouse pointer pressed on the leftmost button.

This causes the button to switch to the downSkin style exposing the top image in the third column in Figure 1.

Discussion and sample code

Skins01 project file structure

Figure 7 shows the project file structure for the Flex project named Skins01.

Figure 7: Skins01 project file structure.

Skins01 project file structure.

The image in Figure 7 was captured from the Flex Navigator panel in the Flex Builder 3 IDE.

Eight images

The eight images shown in Figure 1 are listed in the Images folder in Figure 7.

Three custom button classes

The three custom button classes and the driver class illustrated by Figure 2 through Figure 6 are listed in the CustomClasses folder in Figure 7.

The MXML application file

And of course, the Flex MXML file is shown as Skins01.mxml in Figure 7.

Custom button classes are very similar

The three custom button classes are very similar. The class named FancyButton is the most complex of the three. Therefore, I will explain the class named FancyButton in detail but I won't explain the other two custom button classes.

In addition, I will explain the MXML file named Skins01.mxml and the class file named Driver.as .

Will explain in fragments

I will explain the code in fragments. Complete listings of all of the source code files are provided in Listing 8 through Listing 12 near the end of the lesson.

The file named Skins01.mxml

A complete listing of this file is shown in Listing 1. In addition, a complete listing is also provided in Listing 8 near the end of the lesson along with the code for all of the other files in this application.

LISTING 1: Complete listing for Skins01.mxml.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:cc="CustomClasses.*">
  
  <cc:Driver/>

</mx:Application>

The code in Listing 1 couldn't be simpler. It declares a namespace for the folder containing the four class files in Figure 7 and instantiates an object of the class named Driver . In this case, the Flex application is simply serving as a launch pad for the ActionScript program.

The file named Driver.as

The class named Driver begins in Listing 2. A complete listing of this class file is provided in Listing 9 near the end of the lesson.

LISTING 2: Beginning of the class named Driver.

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();

Purpose of the class

The purpose of this class is to define the characteristics of an object that will serve as a driver to exercise and to illustrate the behavior of objects of the following custom classes:

• ButterflyButton
• FrogButton
• FancyButton

Inheritance in action

Note that this class extends the standard Flex/ActionScript class named HBox . Thus, an object of the Driver class inherits all of the characteristics defined into the HBox class and adds more characteristics that are unique to an object of the Driver class.

For example, one of the important characteristics inherited from the HBox class is the ability to arrange child components horizontally as shown in Figure 2.

Instantiate custom button objects

Listing 2 instantiates objects of the three custom classes listed above and stores references to those objects in private instance variables with the following names:

• bFlyButton
• frogButton
• fancyButton

Storing the references as private instance variables makes them accessible to the constructor and to methods defined within the Driver class, but makes them inaccessible otherwise.

The constructor for the Driver class

Listing 3 defines the constructor for the Driver class.

LISTING 3: The constructor for the Driver class.

    public function Driver(){//constructor
      addChild(bFlyButton);
      addChild(frogButton);
      addChild(fancyButton);
      
      fancyButton.addEventListener(
                         MouseEvent.CLICK,buttonHandler);
    }//end constructor

Listing 3 begins by adding the three objects instantiated in Listing 2 to the object being constructed, which is possible because an object of the Driver class is an HBox container. (See the earlier section titled The ISA relationship .)

Then Listing 3 registers a click event handler method named buttonHandler on the FancyButton object.

The method named buttonHandler

The click event handler method named buttonHandler is shown in Listing 4.

LISTING 4: The method named buttonHandler .

    private function buttonHandler(
                                  event:MouseEvent):void{
      fancyButton.toggleSkin();
    }//end buttonHandler

  }//end class
}//end package

This method is executed each time the FancyButton object fires a click event. When the method is executed, it calls the toggleSkin method on the FancyButton object. As you will see later, the toggleSkin method causes the FancyButton object to toggle its skins between butterfly images and frog images.

The end of the Driver class

Listing 4 also signals the end of the class named Driver .

The file named FancyButton.as

The FancyButton class begins in Listing 5. A complete listing of the class file is provided in Listing 10 near the end of the lesson.

Define a custom button using skins

This class defines a custom button using skins. When the program starts, frog images are used to define the button's skins as shown by the rightmost button in Figure 2. Each time thetoggleSkin method is called, the skin switches between frog images and butterfly images.

LISTING 5: Beginning of the FancyButton class.

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;

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 be referenced 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.

LISTING 6: Constructor for the FancyButton class.

    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 instantiated from 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.

LISTING 7: The toggleSkin method.

    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 and the 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.

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 for the 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 in Listing 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 Listing 12. 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 the Connexions 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.

LISTING 8: 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 create 
    custom components.
    2.  To illustrate the use of skins to change the 
    appearance of the standard ActionScript 
    components.
    
    Four custom classes are defined. One uses butterfly
    images to create a ButterflyButton. Another uses
    images of a frog to create a FrogButton. A third
    uses both butterfly and frog images to toggle the
    skins between the two at runtime.
    
    The fourth class is a driver class that is designed
    to exercise the other three classes and to 
    demonstrate their use.
        
    All three classes define the following styles but the
    disabledSkin style is not illustrated by the code.
    
    upSkin
    overSkin
    downSkin
    disabledSkin
    
    Mxml code is used to instantiate an object of the
    Driver class.
     -->

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  xmlns:cc="CustomClasses.*">
  
  <cc:Driver/>

</mx:Application>

LISTING 9: 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 constructor
    
    private function buttonHandler(
                                  event:MouseEvent):void{
      fancyButton.toggleSkin();
    }//end buttonHandler

  }//end class
}//end package

LISTING 10: 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(){//constructor

      this.setStyle("upSkin", frogUp);
      this.setStyle("overSkin", frogOver);
      this.setStyle("downSkin", frogDown);
      this.setStyle("disabledSkin", frogDisabled);

    }//end constructor
    
    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

LISTING 11: 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

LISTING 12: 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.

NOTE: 

Housekeeping material

• Module name: Inheritance - The Big Picture
• Files:
  • ActionScript0108\ActionScript0108.htm
  • ActionScript0108\Connexions\ActionScriptXhtml0108.htm