Rotating Mouse Trail with ActionScript 3
February 6, 2009 by: smonteIn this tutorial, I’ll show you how to create a mouse trail animation. 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 300×300.
2. Draw a rectangle of size 10×10. 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”.
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); } }
Related tutorials:
Comments
2 Responses to “Rotating Mouse Trail with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Got tons of impressive information keep it up, keep us posted. thanks
thank you.