Flashuser

  • Pin It

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.

eyes_follow_1

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.

eyes_follow_2
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;
}

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+

  • Pingback: Eyes following mouse cursor AS3()

  • Pingback: tripwire magazine | tripwire magazine()

  • http://joyoge.com/ joyoge bookmark

    nice tutorial i like, thanks..

  • Pingback: Eyes following mouse cursor AS3 | favSHARE.net()

  • http://www.favshare.net favSHARE

    This article has been shared on favSHARE.net. Go and vote it!

  • http://tutsnips.com TutSnips

    Wow! Very nice tutorial on actionscipt 3. Great post buddy.

  • http://www.faqpal.com FAQPAL

    Wow, fantastic post, thanks for the share.

  • Pingback: 80+ Stunning Articles for Designers and Developers | tripwire magazine()

  • Pingback: The week in links 25/09/09 - Craig Baldwin's Blog()

  • Pingback: 80+ Stunning Articles for Designers and Developers | huibit05.com()

  • http://www.tutoriallounge.com Tutorial Lounge

    really like your work.

  • Samana

    thanks you

  • http://www.twitter.com/_mark _mark

    nice alien. eheheha

  • chris

    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

    • Rakesh Kumar

      instead of using ‘mouseX and mouseY’ use your character’s x and y position like this.
      var a1 = player_mc.y – eye1.y;
      var b1 = player_mc.x – eye1.x;

  • Alex Domingo

    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.

  • Joseph Harner

    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.

  • ehsan

    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?

  • gab

    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 !

    • Rakesh Kumar

      hi ‘gab’ just put this line after you have coded the custom cursor.
      my_cursor_mc.mouseEnabled=false;
      where ‘my_cursor_mc’ is the instance name of your custom cursor.
      now you will be able to click on the buttons you have created.

  • http://noyan.com kurti

    thanks a lot! it really attracting one, especially for those who watching the result only!! :)

  • makedonskii

    Thanks a lot! It is very nice!!!!

  • http://google.co.uk Valerie Byhoffer

    Its very good as your other content : D, appreciate it for posting .

  • Pingback: Technical Progress | MMPP - what's cookin'()

  • Sammy

    It’s a Flash .swf
    You wouldn’t be able to retain the functionality (eyes won’t follow the cookie) if you convert this .swf into a .gif. However, you could use the Snipping Tool that comes with Windows 7 to capture a picture of it and save it as a .gif. Just click on the Start Button and type Snipping Tool in the search for programs textbox.

  • Rakesh Kumar

    nice tutorial.
    oh, and i liked that cookie very much. wish i ate it.