<< Chapter < Page Chapter >> Page >

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 beenpressed. 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 thebutton 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.

Program output at startup.

Missing image
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 frogsand 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 firstcolumn 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.

Mouse pointer hovering over the rightmost button.

Missing image
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 beexposed.

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.

Mouse pointer pressed on the rightmost button.

Missing image
Mouse pointer pressed on the rightmost button.
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

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




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