AS3 mouse follow

March 20, 2010

Actionscript 3.0 Tutorial

Step 1

  • Create a new Flash document of size 300×300.

Step 2

  • With  PolyStar tool , draw a star without any stroke. Use the following settings (fill color doesn’t matter),see  Fig 1.

Fig 1

Step 3

  • Now make  the star of size 10×10 see fig 2.

Fig 2

Step 4

  • Convert the star to a movie clip. Name it “My Star” and set the registration point to the center. Linkage the movie clip to a class named “MyStar” see fig 3.

Fig 3

Step 5

  • Change the  star movie clip  name in  “myStar”.

Step 6

Final step  As3 code.

Go to actions panel, and type the following ActionScript code:

//Import TweenMax
import gs.*;

//Hide the mouse
Mouse.hide();

//The starting color
var currentColor:uint = 0xffffff;

//This timer calls the changeColor() function every 0.5 seconds
var colorTimer:Timer = new Timer(500, 0);
colorTimer.addEventListener(TimerEvent.TIMER, changeColor);
colorTimer.start();

//This timer calls the createStar() method every 0.01 seconds
var trailTimer:Timer = new Timer(10, 0);
trailTimer.addEventListener(TimerEvent.TIMER, createStar);
trailTimer.start();

//Add an ENTER_FRAME listener so we can move the myStar
addEventListener(Event.ENTER_FRAME, moveStar);

//This function is called in each frame
function moveStar(e:Event):void {

	//Set the myStar coordinates to match with the mouse coordinates
	myStar.x = mouseX;
	myStar.y = mouseY;
}

//This function is called by the colorTimer
function changeColor(e:Event):void {

	//Assign a new random color
	currentColor = Math.random() * 0xffffff;

	//Tween the myStar to the currentColor
	TweenMax.to(myStar, 0.2, {tint: currentColor});

}

//This function is called by the trailTimer
function createStar(e:Event):void {

	//Create  a new star
	var newStar:MyStar = new MyStar();

	//Set the newStar coordinates to match with the myStar coordinates
	newStar.x = myStar.x;
	newStar.y = myStar.y;

	//Calculate random target x and y coordinates
	var targetX:Number = newStar.x + Math.random() * 64 - 32;
	var targetY:Number = newStar.y + Math.random() * 64 - 32;

	//Calculate a random rotation
	var targetRotation = Math.random() * 360 - 180;

	//Add the newStar to the stage
	addChild(newStar);

	/*
	Now we tween different properties of the newStar mc using TweenMax.
	I call the "TweenMax.to()" multiple times so it's easier to read this code.
	All of this could also be accomplished with one line.
	Note that we call the function removeStar() when the tweens are finished.
	*/
	TweenMax.to(newStar, 3, {alpha: 0, scaleX: 5, scaleY: 5, tint: currentColor});
	TweenMax.to(newStar, 3, {rotation: targetRotation, x: targetX, y: targetY});
	TweenMax.to(newStar, 3, {blurFilter:{blurX:3, blurY:3}, onComplete: removeStar, onCompleteParams: [newStar]});
	}

//This function is called when a star's tween is finished
function removeStar(star:MyStar):void {

	//Remove the star from the stage
	removeChild(star);
}

Now test your movie.

Download the project source as3 mouse follow.zip

, , , , , ,

Subscribe

Subscribe to our e-mail newsletter to receive updates.

5 Responses to “AS3 mouse follow”

  1. Kimberly Melendez Says:

    Omg Daz So Pretty ! But On What Do You Do In ? ? Flash Cs4 Professinal ??’ Please Write back to My Email:) . Thank-You .

  2. shane Says:

    definition gs could not be found and
    access of undefined property TweenMax

  3. amit Says:

    Dear Sir/Madam,
    Error appear in ur file.

    definition gs could not be found and
    access of undefined property TweenMax

    plz give me technique, how i solve this error.

    i m waiting for ur mail

    Amit

Trackbacks/Pingbacks

  1.   AS3 mouse follow | Flash tutorials | Flash video tutorials | Flash … by Flash Designers - March 20, 2010

    [...] See the rest here:  AS3 mouse follow | Flash tutorials | Flash video tutorials | Flash … [...]

  2. AS3鼠标跟随效果 « Learning-AS - December 14, 2010

    [...] http://www.flashconf.com/actionscript/as3-mouse-follow/ [...]

Leave a Reply