Rotating Mouse Trailer


In this tutorial, I'll show you how to create a mouse trail animation as seen above. The whole animation is done with Actionscript 3.0 as usual. You can easily change the code to change the speed, sizes, shapes etc. Start your Flash IDE and let's get started!

Setting up the environment

1. Create a new document of size 300x300.

2. Draw a rectangle of size 10x10. The color doesn't matter, since we'll change that via Actionscript 3.

3. Convert the rectangle into a movie clip. Name it "myRectangle" and set the registration point to the center.

4. Linkage the movie clip to a class named "MyRectangle".

Linkage rectangle

NOTE: When you hit OK, you get an ActionScript Class Warning. Don't worry about it. The Flash warns you because it can't find a class named "MyRectangle". That's no wonder, since we haven't created that class. When we run our movie, Flash will create the MyRectangle class for us.

5. Remove the rectangle from the stage.

Moving into Actionscript 3

Create a new layer for Actionscript and type the following. 

//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 rectangle.
	var newRectangle:MyRectangle = new MyRectangle();

	//Set the position to same place as where the mouse cursor is.
	newRectangle.x = mouseX;
	newRectangle.y = mouseY;

	//Calculate x and y distances to the rectangle
	//from the center of the stage.
	var dx:Number = newRectangle.x - centerX;
	var dy:Number = newRectangle.y - centerY;

	//Calculate the distance to the rectangle from
	//the center of the stage (Pythagorean theorem)
	newRectangle.radius = Math.sqrt(dx*dx + dy*dy);

	//Calculate the angle of the rectangle from the center
	newRectangle.myAngle = Math.atan2(dy, dx);

	//Set the angle speed (how fast we rotate)
	newRectangle.speed = 0.06;

	//At first,set the rectangle to be invisible
	newRectangle.alpha = 0;

	//Assign a random scale to the rectangle
	newRectangle.scaleX = Math.random() + 1.5;
	newRectangle.scaleY = newRectangle.scaleX;

	// Get access to the ColorTransform instance associated with the rectangle.
	var colorInfo:ColorTransform = newRectangle.transform.colorTransform;

	// Set a random color for the ColorTransform object.
	colorInfo.color = 0xffffff * Math.random();

	//Apply the random color for the rectangle
	newRectangle.transform.colorTransform = colorInfo;

	//Add the rectangle to the stage
	addChild (newRectangle);

	//Add ENTER_FRAME to animate the rotation
	newRectangle.addEventListener (Event.ENTER_FRAME, moveRectangle);
}

//This function rotates a rectangle
function moveRectangle (e:Event):void {

	//Get the rectangle from the event target
	var rectangle:MovieClip = e.target as MovieClip;

	//Calculate the new x and y positions for the rectangle
	var newX:Number = centerX + Math.cos(rectangle.myAngle) * rectangle.radius;
	var newY:Number = centerY + Math.sin(rectangle.myAngle) * rectangle.radius;
	
	//Increase the angle for the next frame
	rectangle.myAngle += rectangle.speed;

	//Assign the new position
	rectangle.x = newX;
	rectangle.y = newY;

	//Decreate the radius to get a "spiral" animation
	rectangle.radius -= 0.6;

	//Reduce the scale 
	rectangle.scaleX -= rectangle.radius * 0.0001;
	rectangle.scaleY -= rectangle.radius * 0.0001;

	//Increase the alpha if it's not one and radius is larger than 50
	if (rectangle.alpha < 1 && rectangle.radius > 50) {
		rectangle.alpha += 0.05;
	}
	//Start decreasing alpha if radius is smaller than 50
	if (rectangle.radius < 50) {
		rectangle.alpha -= 0.005;
	}

	//If radius is smaller than zero, remove the rectangle
	if (rectangle.radius < 0) {
		rectangle.removeEventListener (Event.ENTER_FRAME, moveRectangle);
		removeChild (rectangle);
	}
}

Bookmark and Share