Thursday, August 23, 2007

Getting back the hand cursor in AS3

As I migrate from Flash ActionScript 2 (AS2) to ActionScript 3 (AS3), I'm always finding little differences. In AS2, if you set the onPress event of a MovieClip to a value, your MovieClip will then cause the cursor to switch to the hand cursor when you mose over it. I found in AS3, you need to manually set two properties to get this effect (thanks Colin!):
myClip_mc.buttonMode = true;
myClip_mc.useHandCursor = true;
That's kind of a drag if you have already created a movie with dozens (or more!) of clickable MovieClip instances. I'd done just that so I was hoping I was missing some global way getting back this functionality easily. There wasn't... so I made one :)

Below is a class that extends from MovieClip, and in its constructor it sets the two properties I'm looking to be set:
package {
import flash.display.MovieClip;
class ClickableMovieClip extends MovieClip {
function ClickableMovieClip():void {
this.buttonMode = true;
this.useHandCursor = true;
}
}
}
So all I had to do was go into my library and set the Base Class of each of the Symbols I knew I wanted clickable in my movie. One weird thing I found: after typing that in to the base class field, I needed to click the check mark next to it, it you just clicked "OK" then it'd give you an error.

11 comments:

  1. Not sure why, but I kept thinking it would have been a property of Mouse, but it wasn't this. Helped. Thank you. Simple fix, but searching it, I couldn't come up with the right terms.

    ReplyDelete
  2. Great, I'm glad the blog helped! :)

    ReplyDelete
  3. If you have text in the movieclip you have to add buttonName.mouseChildren = false; This will allows anything contained in the main movieclip to allow the hand cursor as well.

    ReplyDelete
  4. Disabling the mouseChildren is a good solution if you only want that symbol instance to be getting the mouse events as a whole, but might cause you trouble if you wanted the items within the symbol getting mouse events. That will prevent the TextField from getting mouse events. For example, if you had it as selectable text, it no longer will be selectable. Or if it was an input field, you won't be able to click in it anymore.

    ReplyDelete
  5. Thanks!!! This was driving me crazy and my button has text, and even the adobe site doesn't tell you to add .mouseChildren = false;

    ReplyDelete
  6. Thanks! I was searching this tip. :)

    ReplyDelete
  7. Awesome! I'd been adding "myClip_mc.useHandCursor = true" and it still wasn't working, didn't realise I needed to add "myClip_mc.buttonMode = true" as well. Thanks!

    ReplyDelete
  8. Small correction: mc.useHandCursor defaults to true, so really you only need the mc.buttonMode=true line.

    The useHandCursor property only exists in case you want mc.buttonMode=true with mc.useHandCursor=false.

    ReplyDelete
  9. David, you are correct in that the useHandCursor property defaults to true. But in order to successfully see the hand cursor, both useHandCursor and buttonMode must have the value of true. Just setting buttonMode alone to true won't do it, nor will just setting useHandCursor. Since my example is in the constructor which subclasses MovieCip, I could have relied on the default value and only set buttonMode. But since my intent was to insure the display of it, setting both values to true is a safe way to go to clearly show my intent in the code and prevent breaking it later (like if I changed it later to extend from another class that messed with the useHandCursor property).

    ReplyDelete
  10. John. Thank you so much for this very useful tip!

    ReplyDelete