(Note: I’m converting my Flash game “Spin City” from AS2 to AS3 so it can be re-skinned for another project. I’ve decided to document this activity in a series of tutorials so they might benefit anyone else who is going through the same development process)

OK, this one drove me crazy today, but I finally discovered the answer. I try as hard as possible to keep all actions related to my Flash code in my classes and not place any code on the time line. this includes buttons and their related code for handling events. I got it to work in AS3, but I could not get the hand cursor to show-up when hovering over buttons. Here is what I found out.

Flash AS2

In AS2, handling button actions in a class that is associated with a MovieClip that contained that button (i.e. A TitleScreen class that includes a [PLAY] button) was done like this:

1. Define a variable for the button in your class so you can set its properties. The name must be the same name as you named the button in your MovieClip. Even though you never define the variable, at run-time it will be associated with the button because they have the same name.
2. Set the onRelease handler of the button to a function in your class
3. Have the button handler call _parent[function] so that you can operate within the scope of your class (and not the button) (Note: You can eliminate this by using a delegate)
4. Perform action

[cc lang=”javascript” width=”550″] class TitleScreen extends MovieClip { var button_play:MovieClip; function TitleScreen() { button_play.onRelease = play_button_release; } function play_button_release() { _parent.playagainButtonRelease(); } function playagainButtonRelease() { //Do Play Action } } [/cc]

AS2 considers the MovieClip defined by button_play as a “button” because we have assigned a call-back function to its onRelease handler. This means that when hovering over the button, the cursor will change to the “hand” that instantly informs the user that this is a button than can be pressed.

Flash AS3

In AS3, there are few more steps you have to take to simulate the same functionality. In some ways it is much simpler than AS2, and in some ways, a bit more involved. At any rate, it is different than AS2, and that is why I’m covering it in this blog. Here are the steps you need to perform to make it work:

Easier:

AS3 is easier for two reasons:

1. The event handler you assign to your button is called in the context of where that function exists. This means you no longer have to call _parent[function] or use a delegate to get back into the context of your class.
2. You do not have to define a MovieClip that exists in the MovieClip associated with your class as a variable in your class. These MovieClips are already defined for you.

However, there are a couple complications with AS3:

1. There are no longer onRelease and onPress events to handle. You use MouseEvent.CLICK, MouseEvent.MOUSE_DOWN, MouseEvent.MOUSE_UP and MouseEvent.DOUBLE_CLICK (among others) for this purpose.
2. You need to set the useHandCursor property to true so the cute little useful hand will show-up when the cursor hovers over the button.
3. You need to set the buttonMode property to true so the MovieClip that defines the button will act like one (i.e. the useHandCursor property will actually have an effect)

Here is what the code looks like:

[cc lang=”javascript” width=”550″] package fashiondash { import flash.events.MouseEvent; public class TitleScreen extends flash.display.MovieClip { public function TitleScreen() { button_play.addEventListener(MouseEvent.CLICK, playagainButtonRelease); button_play.useHandCursor = true; button_play.buttonMode = true; } function playagainButtonRelease(e:MouseEvent) { //Do Play Action } } } [/cc]

 

So there goes another short lesson. I had no idea that little things I took for granted such as the hand cursor would pose problems like this in AS3. There certainly is a lot to re-learn with this generation of ActionScript.