CREATING MOUSE TRAIL WITH ROTATION IN FLASH AS3

this blog is all about use of actionscript 3.0 to make a mouse trail animation with rotation. modification can be done to different aspect of the mouse trail by varying the appropriate numbers.

Process:

1. create a new file with actionscript 3.0.

2. draw a circular shape. select it and convert it to movieclip with name mycircle. keep registration point on centre.

3. you can delete the mycircle movieclip from stage as it is included into library. open library and select mycircle. rightclick on it and goto linkage.

4. on the linkage property window set class as MyCircle. check on "Export for actionscript". press ok. There will be a flash warning window suggesting it can’t find a class named “MyCircle”. No Issue, when we run our movie, Flash will create the "MyCircle" class for us. So go ahead.

5. Make a new layer and name it "actionscript". On the first frame pase the below code.

//Start a timer. Timer calls the timerHandler every 0.2 seconds.

var timer:Timer = new Timer(200, 0);

timer.addEventListener (TimerEvent.TIMER, timerHandler);

timer.start ();

//Get the center coordinates of the stage.

var centerX:Number = stage.stageWidth / 2;

var centerY:Number = stage.stageHeight / 2;

//This function is called by the timer.

function timerHandler (e:Event):void {

//Create a new Circle.

var newCircle:MyCircle = new MyCircle();

//Set the position to same place as where the mouse cursor is.

newCircle.x = mouseX;

newCircle.y = mouseY;

//Calculate x and y distances to the Circle

//from the center of the stage.

var dx:Number = newCircle.x - centerX;

var dy:Number = newCircle.y - centerY;

//Calculate the distance to the Circle from

//the center of the stage (Pythagorean theorem)

newCircle.radius = Math.sqrt(dx*dx + dy*dy);

//Calculate the angle of the Circle from the center

newCircle.myAngle = Math.atan2(dy, dx);

//Set the angle speed (how fast we rotate)

newCircle.speed = 0.06;

//At first,set the Circle to be invisible

newCircle.alpha = 0;

//Assign a random scale to the Circle

newCircle.scaleX = Math.random() + 1.5;

newCircle.scaleY = newCircle.scaleX;

// Get access to the ColorTransform instance associated with the Circle.

var colorInfo:ColorTransform = newCircle.transform.colorTransform;

// Set a random color for the ColorTransform object.

colorInfo.color = 0xffffff * Math.random();

//Apply the random color for the Circle

newCircle.transform.colorTransform = colorInfo;

//Add the Circle to the stage

addChild (newCircle);

//Add ENTER_FRAME to animate the rotation

newCircle.addEventListener (Event.ENTER_FRAME, moveCircle);

}

//This function rotates a Circle

function moveCircle (e:Event):void {

//Get the Circle from the event target

var Circle:MovieClip = e.target as MovieClip;

//Calculate the new x and y positions for the Circle

var newX:Number = centerX + Math.cos(Circle.myAngle) * Circle.radius;

var newY:Number = centerY + Math.sin(Circle.myAngle) * Circle.radius;

//Increase the angle for the next frame

Circle.myAngle += Circle.speed;

//Assign the new position

Circle.x = newX;

Circle.y = newY;

//Decreate the radius to get a "spiral" animation

Circle.radius -= 0.6;

//Reduce the scale

Circle.scaleX -= Circle.radius * 0.0001;

Circle.scaleY -= Circle.radius * 0.0001;

//Increase the alpha if it's not one and radius is larger than 50

if (Circle.alpha < 1 && Circle.radius > 50) {

Circle.alpha += 0.05;

}

//Start decreasing alpha if radius is smaller than 50

if (Circle.radius < 50) {

Circle.alpha -= 0.005;

}

//If radius is smaller than zero, remove the Circle

if (Circle.radius < 0) {

Circle.removeEventListener (Event.ENTER_FRAME, moveCircle);

removeChild (Circle);

}

}

6. Now publish the file. and you will have your circular mouse trail with rotation in action.

Enjoy

Download Source File:

https://sites.google.com/site/pageflipsite/circle/circular.zip?attredirects=0&d=1