Home > Cursor hand when mouse over images, Actionscript 3-Flash

DirectorySync is a directory synchronizing and backup utility providing automated, real-time syncing and scheduled, configurable backups at an affordable price.

Cursor hand when mouse over images, Actionscript 3-Flash

Funny, I couldn’t find the answer to this anywhere, either the answers are unrelated or they are overly complicated. So here is what I did:

         var imageLoader:Loader     = new Loader();
	imageLoader.load(new URLRequest("path to your image/some image.png"));
	var button:Sprite    = new Sprite();
	button.addChild(imageLoader);
	button.buttonMode    = true;
	button.useHandCursor = true;
	addChild(button);

THAT’S IT!!!

UPDATE:
There is a useful comment bellow by Dan and I thought I should include it in this post so it’s easier for everyone to get the info:

Dan:
To get it to work with a Movieclip you need to set the movieclip as button mode true.

If its the entire stage that needs the hand icon you can add to your script layer.

myMc.buttonMode = true;
myMc.useHandCursor = true;

I use it with an Event listener to only use hand cursor on specific movieclips.

myMc.addEventListener(MouseEvent.ROLL_OVER,myMcOver);
 
function myMcOver (e:MouseEvent):void {
   myMc.buttonMode = true;
   myMc.useHandCursor = true;
}

Filed under: Actionscript,Flash Posted by: Codehead

Do you have any questions? ask here.

Follow me on Twitter.

31 Comments »

Robin:

Thank you! I have been lookinf for this info and there was ANYWHERE ELSE! I think many people want to use the hand cursor in their link images, but it seems no one wants to tell.

Thanks for sharing this!!

XOXOOX

Comment
Codehead:

Hey, thanks, it’s funny, I also feel the same when I search for Actionscript resources, it feels like no one wants to share

Comment
Jeff:

Another way to do this is:

myBtn.useHandCursor = true;
myBtn.addEventListener(MouseEvent.MOUSE_UP, myBtnHandler);
function myBtnHandler(e:Event) {
trace(“Button Pressed”);
};

myBtn is a “Button” under the properties panel. Doesn’t seem to work if it’s a “Movie Clip”. I simply made a square and converted it to a “Button”

Comment
Noel:

Thanks! Just what I needed.

Comment
John:

Wow!…
Almost 1 year to the date and this little bit of code has help tremendously.

Thanks

Comment
Codehead:

John, thanks, that is very nice to hear

Comment
V3NOM:

Excellent, it was really helpful!

Comment
LMIH:

You don’t need the line:

button.useHandCursor = true;

Comment
Denis:

That is what I needed! Thanks)

Comment
Dan:

To get it to work with a Movieclip you need to set the movieclip as button mode true.

If its the entire stage that needs the hand icon you can add to your script layer.

myMc.buttonMode = true;
myMc.useHandCursor = true;

I use it with an Event listener to only use hand cursor on specific movieclips.

myMc.addEventListener(MouseEvent.ROLL_OVER,myMcOver);

function myMcOver (e:MouseEvent):void {
myMc.buttonMode = true;
myMc.useHandCursor = true;
}

Comment
Liz:

YES! I have seriously been looking for this solution for two hours. I had a swf movie that needed to animate on rollover AND make the cursor turn into the pointer hand.

Perfection, Dan. Sweetness!

Comment
Johnson:

Thanks, you’re a life saver!

Comment
dash:

How would you get a hand cursor when using a text element?

Comment
dan_panagsagan:

you can use the following script if you intend to use it on multiple items.

myMc1.addEventListener(MouseEvent.MOUSE_OVER, hoverMouseHand);
myMc2.addEventListener(MouseEvent.MOUSE_OVER, hoverMouseHand);

function hoverMouseHand(e:Event)
{
e.currentTarget.buttonMode = true;
e.currentTarget.useHandCursor = true;
}

Comment
dan_panagsagan:

by that I mean if you want to use it on multiple mc’s without doing a lot of similar functions per mc. cheers.

Comment
Laura:

Thank you thank you thank you!

Comment
Benjamin_dk:

I am trying to use the following code in my mouseover eventhandler

e.currentTarget.buttonMode = true;
e.currentTarget.useHandCursor = true;

But I get the error message

ReferenceError: Error #1056: Cannot create property useHandCursor on flash.display.Loader.
at core::HeadMenu/headOverListener()
14
ReferenceError: Error #1056: Cannot create property useHandCursor on flash.display.Loader.
at core::HeadMenu/headOverListener()

I have a hunch that I should do some typecasting, but my first attempt failed

var e_mc = MovieClip(e);
e_mc.currentTarget.buttonMode = true;
e_mc.currentTarget.useHandCursor = true;

TypeError: Error #1034: Type Coercion failed: cannot convert flash.events::MouseEvent@4b3e661 to flash.display.MovieClip.

I am not sure how to do it. Any help is greatly appreciated…

Comment
jim:

Hi guys looked at the code above but not sure which part to use.

at the moment i have this code:

but i get no mouse over with the hand symbol where should i insert the text that you have created above?

Comment
Welington Cruz:

p = “people happy with this article”;
p ++

=)

Comment
Anna:

Thank you so much!!! You are genious!

Comment
Alexander:

Many thanks for this recipe. You saved mea lot of time.

Comment
Martin:

Thanks, straight to the point !

Comment
Denny:

Thanks!

Comment
eBay Agent:

Seems like it doesn’t work on TextField

Any idea how can i do it for TextField?

This TextField is included in the MovieClip that is using Hand mouse cursor, but when you mouse over the TextField, the mouse cursor becomes default arrow.

Comment
eBay Agent:

I just found the solution to this issue that I posted a minute ago. Here is the code:

mcListItem.buttonMode = true;
mcListItem.useHandCursor = true;

mcListItem.mouseChildren = false;

Setting this property to a MovieClip makes all TextField elements inside this MovieClip to use the same cursor that the MovieClip object uses. In this case it’s a hand.

Another, not a good, solution is to detect a mouse over/our events for a TextField or any other object, and set the Mouse Cursor to what ever you like:

clipHand.addEventListener(MouseEvent.ROLL_OVER,overHand);
clipHand.addEventListener(MouseEvent.ROLL_OUT,outClip);
clipIbeam.addEventListener(MouseEvent.ROLL_OVER,overIbeam);
clipIbeam.addEventListener(MouseEvent.ROLL_OUT,outClip);
clipButton.addEventListener(MouseEvent.ROLL_OVER,overButton);
clipButton.addEventListener(MouseEvent.ROLL_OUT,outClip);
clipArrow.addEventListener(MouseEvent.ROLL_OVER,overArrow);
clipArrow.addEventListener(MouseEvent.ROLL_OUT,outClip);
clipAuto.addEventListener(MouseEvent.ROLL_OVER,overAuto);
clipAuto.addEventListener(MouseEvent.ROLL_OUT,outClip);

function overHand(e:MouseEvent):void {
Mouse.cursor=”hand”;
}

function overIbeam(e:MouseEvent):void {
Mouse.cursor=”ibeam”;
}

function overButton(e:MouseEvent):void {
Mouse.cursor=”button”;
}

function overAuto(e:MouseEvent):void {
Mouse.cursor=”auto”;
}

function overArrow(e:MouseEvent):void {
Mouse.cursor=”arrow”;
}

function outClip(e:MouseEvent):void {
Mouse.cursor=”auto”;
}

Comment
Sav:

Thanks a bunch! The buttonMode=true statement did the trick

Comment
程海明:

thanks！

Comment
hugo:

THX Dude!!

Comment
mevi:

million thanks

Comment
CaptainBinary:

Thankyou, quite a simple solution yet so difficult to master. Helped with adding more user friendliness with my cloudbar.

Comment
Cyn:

You really need dates on your posts and comments

How does:
myMc.buttonMode = true;

set things for the entire stage? Seems that’s setting it for a movie clip. Is there some step missing?

Comment