0.3 Inheritance - the big picture  (Page 4/9)

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 toadd 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 thesubclasses 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 ofbitmap 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 controlhas 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 fromthe 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

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 classnamed 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 tofrog or vice versa. (See the rightmost button in Figure 5.) This illustrates the capability to change skins on an ActionScript component atruntime.

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. Thiscorresponds to the button style named "upSkin" ,