Eyes following mouse cursor AS3
A simple and easy tutorial for you to know how to use the mouse interactivity in Actionscript 3. We’ll create the eyes for an alien character that will follow the mouse. Also we’ll hide the mouse and change it with something else. All this is done in a general Movie Clip so you can drag it in your project.
Here’s the final result:
1. To create an alien eye draw a white circle that will represent the cornea. Convert it to a Movie Clip that has the registration point centered. Inside this clip draw 2 circles that will represent the iris and convert them to a Movie Clip. Position it right over the cornea. Give an instance name of eye1 for the parent Movie Clip. Drag other two eyes (instance name of eye2 and eye3) and position them on the alien’s body.
2. Now that we have obtained the eye let’s create the interactivity. The basic idea is that we’ll have to rotate the eye according to the mouse position. To do so we’ll calculate the angle from the eye position to the mouse position and rotate it. To obtain the angle we’ll use the atan2 function from Flash, that will have as parameters the Y and X position of the mouse.
radians1 = Math.atan2(a1, b1);
3. The angle obtained from the atan2 function is in radians. To convert it in degrees paste this line.
degrees1 = radians1 / (Math.PI / 180);
4. Now rotate the eye by the angle obtained in degrees.
eye1.rotation = degrees1;
5. In order to change the mouse with something else use this code:
Mouse.hide();
cookie.x = mouseX;
cookie.y = mouseY;
6. All code:
stage.addEventListener("mouseMove", eyesFollow);
cookie.visible = false;
function eyesFollow(e:MouseEvent):void {
var a1 = mouseY - eye1.y;
var b1 = mouseX - eye1.x;
var radians1 = Math.atan2(a1,b1);
var degrees1 = radians1 / (Math.PI / 180);
eye1.rotation = degrees1;
var a2 = mouseY - eye2.y;
var b2 = mouseX - eye2.x;
var radians2 = Math.atan2(a2,b2);
var degrees2 = radians2 / (Math.PI / 180);
eye2.rotation = degrees2;
var a3 = mouseY - eye3.y;
var b3 = mouseX - eye3.x;
var radians3 = Math.atan2(a3,b3);
var degrees3 = radians3 / (Math.PI / 180);
eye3.rotation = degrees3;
Mouse.hide();
cookie.visible = true;
cookie.x = mouseX;
cookie.y = mouseY;
}
Recent Posts
Related Posts
-
35 Professional Photoshop Retouching Tutorials
-
Best Adobe Illustrator Character Tutorials
-
CSS3: box-shadow and text-shadow properties
-
20 Photoshop Tutorials for Cool Text Effect
-
30 Photoshop Tutorials for Stunning Photo Effects
-
30 CSS Menu Tutorials to Build Attractive Menus
20 Comments
- Eyes following mouse cursor AS3
- tripwire magazine | tripwire magazine
- Eyes following mouse cursor AS3 | favSHARE.net
- 80+ Stunning Articles for Designers and Developers | tripwire magazine
- The week in links 25/09/09 - Craig Baldwin's Blog
- 80+ Stunning Articles for Designers and Developers | huibit05.com
Trackbacks
Leave a Reply
-
30 Creative 404 Error Pages
in Inspiration
-
30 Best Free WordPress Themes 2011
in Wordpress
-
Free Flash Template – Carbon
-
Freebie: Scrolling Image Menu
-
Eyes following mouse cursor AS3
-
30+ Awesome Agency Flash Websites
-
35+ Twitter AIR Applications
in Inspiration
-
Web design trends in 2012. What’s new?
in Inspiration
-
25 Outstanding Flash Website Templates
-
XML Image Scroller Gallery AS2
nice tutorial i like, thanks..
This article has been shared on favSHARE.net. Go and vote it!
Wow! Very nice tutorial on actionscipt 3. Great post buddy.
Wow, fantastic post, thanks for the share.
really like your work.
thanks you
nice alien. eheheha
Hey brilliant tutorial! I have a question:
I am making a platform game and want to know if there is any way of making the eyes follow a character as it moves around the level?
Thanks in advance
Anyone has script that human faces follow the mouse. It will have nine direction or points or graphic face which has the following view point: front, left, right, down, up, left-up, left-down, right-up and right-down. It will have nine images of one person and one of these nine image will show-up in front wherever the mouse is.
I thought I should mention to all viewers that this setup is not valid if performed inside of an object’s class. For example: if you created a new class for the eye MovieClips, the method would look like this:
var radians = Math.atan2(mouseY,mouseX);
var degrees = radians / (Math.PI / 180);
this.rotation += degrees;
Key things to note: you no longer subtract mouse and object position, because when you call for the mouse’s position while within an object, the position returned is relative to the object. As such when you calculate the rotation to the mouse with this method, you receive the method relative to the rotation of your object. thus, we add the calculated degree to our current rotation, rather than replacing it.
function eyesFollow(e:MouseEvent):void
{
for (var j:Number=1; j>4; j++)
{
var p:*=j;
var i:String=”p”;
var ai = mouseY – eyei.y;
var bi = mouseX – eyei.x;
var radiansi = Math.atan2(ai,bi);
var degreesi = radiansi / (Math.PI / 180);
eyei.rotation = degreesi;
Mouse.hide();
cookie.visible = true;
cookie.x = mouseX;
cookie.y = mouseY;
}
Mouse.hide();
cookie.visible = true;
cookie.x = mouseX;
cookie.y = mouseY;
}
is true?
hi!
when i am changing my mouse into something else, it is no longer clicking on the buttons that i had created!
can i turn the mouse into an image but still be able to have the mouse function ?
thank you !
thanks a lot! it really attracting one, especially for those who watching the result only!!
Thanks a lot! It is very nice!!!!