Make Cursor Eye Animation with Flash ~ design

May 25, 2010

Make Cursor Eye Animation with Flash

Posted by FanArshavin on 2:48 PM. flash tutorial - No comments

Animated eyes that follow your mouse cursor is one of the classic Flash animation that is still attractive because it offers an interactive experience for the user. With its unique form of a pair of eyes that continue to follow wherever the user's mouse movement, when the movie started.

See the Tutorial Video

I will make the 15 eyes lined up with a method identical to the attachMovie () of a symbol that we created as a prototype, as many as 15 times with _x and _y position different. To start, let's just follow the steps below:

1. Create a new Flash file with ActionScript 2.0 features:

Flash File (ActionScript 2.0)'

2. Click on the Insert menu > New Symbol.

3. In the Name column, give the name "eyes" with a choice Movieclip symbol type, click Advanced.

4. On the linkage, check Export for ActionScript option list. Then, give the name "eyes_prototipe" in the Identifier column.

5. By using the Oval Tool, draw a picture of eyes out with a white circle in it, and a small black circle right in the middle, which acts as a pupil. As shown in the image:

6. Right-click on the pupil, select Convert to Symbol menu.

7. Give the name "eyes ball" in the column name, with a choice of types and Registration Movieclip symbol points are in the middle.

8. After a Movieclip, double-click it to enter into it. Proceed as step 6 once again, this time given the name "eyes ball 2" in the column name.

9. Click on the Movieclip, the Properties panel, give the instance name "black2".

10.Return to previous Movieclip one level, by double-click single Movieclip or outside the area can also by clicking the symbol "eyes" which is at the bottom timeline.

11. Click on the pupils we have made a Movieclip earlier, in the Properties panel, give the name "black" in the Instance Name column.

12. Create a new layer to where we save the script: Insert > Timeline > Layer.

13. Right-click the first frame in a new layer, select the Actions menu:

14. After the Actions panel appears, give the script:

var rad:Number = new Number(15);
var point:Object = new Object();
var diffX:Number = new Number();
var diffY:Number = new Number();
var r:Number = new Number();

this.onEnterFrame=function()
{
point.x = _xmouse;
point.y = _ymouse;

diffX = point.x - black._x;
diffY = point.y - black._y;

r = Math.sqrt(diffX*diffX + diffY*diffY);

    if (r>rad)
    {
        r=rad;
    }

    black.black2._x = r*Math.cos(Math.atan2(diffY, diffX));
    black.black2._y = r*Math.sin(Math.atan2(diffY, diffX));
    }

15. Back to the main scene, how to click on "Scene 1" located at the bottom of the timeline.

16. Once we are in the main scene, click the first frame and then provide the script:

for(i=1;i<16;i++)
{
    attachMovie("eyes_prototipe","eyes"+i,this.getNextHighestDepth());
    setProperty("eyes"+i,_x,100*((i%5)+1));
    setProperty("eyes"+i,_y,100*Math.
ceil(i/5));
}

17. To see a preview of the results we have made this, let's do a test movie. Click Control > Test Movie.