Using my Hit Class for Buttons

Looking for a quick way to manage mouse interactions with movie clip buttons? I’ve got just the thing for you.

I’ve created a MovieClip with these four frames:

The idea is that when the button is idle, it’s on frame 1. When the mouse is over the button, it goes to frame 2. When the mouse is down and over the button, it goes to frame 3. When it’s not possible to click the button it goes to frame 4.

This is the way it will look if we use the actual movie clip for event listeners (without the use of frame 4).

It looks to be working okay, but it’s not! Try clicking in the marked rectangle, and you will see it fail!

(when you press the mouse button, it will go to frame 3. This shape is smaller, and therefore an MouseEvent.MOUSE_OUT will be called. When this happens it will go back to frame 1, where it figures out you’ve pressed the mouse, and go to frame 3.)

Fixing it

The idea is to create an overlay Sprite that will catch all the events, instead of the actual MovieClip.

So, create a new MovieClip with an rectangle in it. Color the rectangle pink (or an other color you easily can distinguish) and set the alpha to around 40%. Set it’s class to “Hit”.

Then drag them out to the stage, and use the free transform tool to make it the desired size. This is how it looks for my example:

Download my file Hit.as here.

To use it, you need to call this function when the stage is available:

Hit.init ( this.stage ) ;

Labels

I would like to add that I’ve added labels in my fla as well. Frame 1 = idle , Frame 2 = over , Frame 3 = down , Frame 4 = pause. If you add these labels you can put the frames in any order you’d like, and it will still work. So if the label on your first frame is over , this frame will be used for over.

But you do NOT need to add these frame labels. If you don’t, it will simply just use the order I have used.

If you by some reason don’t want to use the same name for the labels as I have used, you can also change them. Like this:

Hit.IDLE = "your own label";
Hit.OVER = "your own label";
Hit.DOWN = "your own label";
Hit.PAUSE = "your own label";

The Magic

When you want to associate a hit instance with a movie clip, you need to pass a reference to the movie clip, but there are two other optional parameters. These decide how the down state will be handled.

The default way is to scale down the “down” frame. You can specify the scaling value as the second parameter.

If you instead created the down frame yourself, set the third parameter useDownFrameInsteadto true (it will not matter what you set scaleUpDown to)

This is the code I used for my example:

var leftMc:MovieClip;
var leftHit:Hit;
var rightMc:MovieClip;
var rightHit:Hit;
 
leftHit.addInteractivity( leftMc ) ;
rightHit.addInteractivity( rightMc, 0, true ) ;

This is the result:

I would like you to notice that the cursor acts as it should! (which it normally wouldn’t).

If you press down the mouse and have the pointer over a button, it will show the button pressing hand. If you then move outside the button, it will change back into the arrow. If you then move it back again, it will be button pressing hand again. Usually this won’t happen! It will stay in the form it was when the mouse button was pressed. You can go back to the “bad” button and teste this out.

Pausing and Unpausing

Yes! If you at some point want to “pause” the button, meaning it won’t accept mouse events, you can do that. If you added a MouseEvent.CLICK or MouseEvent.MOUSE_UP listener in a parent class, it will NOT receive an event while the hit instance is paused.

There are three options for appearance here:

1. Use the idle frame (no changes)
2. Use the idle frame, with decreased alpha
3. Use a pause frame

I have only done 2 and 3 in my example, but here is the code for all methods:

//leftHit.pauseInteractivity ( ) ; // use idle frame, no changes
leftHit.pauseInteractivity ( 0.5 ) ; // use idle frame, 50% opacity
rightHit.pauseInteractivity ( 0, true ) ; // use pause frame

When you need to use the hit instance again, simply call:

leftHit.unpauseInteractivity ( ) ;

If you changed the alpha, it will set it back to the value it was then you called pauseInteractivity.

Here’s a demo of it. After two seconds, the active button will become paused, and the paused button will become active.

Again, I would like you to notice that the cursor actually acts as it should!

And guess what? You can even use it without associating a movie clip! It has all the technical features as well (hand cursor when over (also when down), arrow cursor when out (even when down), pausing and unpausing) which probably can be very useful.

Here’s an other download link.

If you desperately need to have an animation in a state, you can hit me up and we can talk about it. As I haven’t needed this so far, I haven’t included it.

I have also added a function for completely removing the interactivity, but I don’t really think it will come in handy. But you can call it this way:

leftHit.removeInteractivity( ) ;

Posted on October 7th, 2010
Filed under ActionScript 3, Flash, Tutorial, User Interface |

Leave a Reply