Actionscript 3 Rotate Objects
Intro
This tutorial covers how you can rotate objects around a point. In this case, we rotate circles around the cursor. If you hold down your mouse, the circles start to rotate faster and vice versa. I wrote this, because I couldn't find any decent tutorial about this subject.
Setting up the environment
1. Create a new document of size 250x250.
2. Draw a ball of size 20x20 (you can choose the color as you like).
3. Convert it into a movie clip (registration point in the center).
4. Linkage the movie clip to a class called "Particle".
5. Remove the Particle from the stage.
Moving into Actionscript 3.0
6. First, let's set up the circles on the stage. Type the following.
Mouse.hide ();
var numberOfParticles:Number = 7;
var particlesArray:Array = new Array();
//Distance how far the circles are from the mouse
var radius:Number = 50;
//Starting angle (used in setting up the particles)
var angle:Number = 0;
//Rotation speed
var vr:Number = 0.03;
//Angle between each particle
var cirlceAngles:Number = 360 / numberOfParticles;
createCircle ();
function createCircle ():void {
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Set the starting position (we must convert angles to radians)
particle.y = mouseY + Math.sin(angle * Math.PI/180)*radius;
particle.x = mouseX + Math.cos(angle * Math.PI/180)*radius;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
//Update the angle so we know where to put the next particle
angle += cirlceAngles;
}
}
7. Let's add the rotating movement to the circles.
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//Get the startin position of the mouse
var oldMouseX:Number = mouseX;
var oldMouseY:Number = mouseY;
function enterFrameHandler (e:Event):void {
//Calculate the distance the mouse moved in a frame
var distanceX = mouseX - oldMouseX;
var distanceY = mouseY - oldMouseY;
oldMouseX = mouseX;
oldMouseY = mouseY;
//Loop through every particle and update its position
for (var i:uint = 0; i < numberOfParticles; i++) {
var particle:Sprite = particlesArray[i];
//Move to new x and y postion according to mouse movement
particle.x += distanceX;
particle.y += distanceY;
//Calculate the x and y position in relation to the mouse
var x1:Number = particle.x - mouseX;
var y1:Number = particle.y - mouseY;
/*
Simply: We can calculate the new x and y positions, since we know the old x and y coordinates
and the angle (vr).
NOTE: If you are not familiar with the following equation check this explanation
http://en.wikipedia.org/wiki/Rotation_(mathematics)#Two_dimensions
x2 and y2 are the coordinates after the rotation.
*/
var x2:Number = Math.cos(vr) * x1 - Math.sin(vr) * y1;
var y2:Number = Math.cos(vr) * y1 + Math.sin(vr) * x1;
particle.x = mouseX + x2;
particle.y = mouseY + y2;
}
}
You are almost done! We still need to add the event handlers for mouse events.
8. Type the following to add a final touch to our custom cursor.
stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseUpHandler (e:Event):void {
removeEventListener (Event.ENTER_FRAME, increaseAngle);
//Add ENTER_FRAME which decreases the rotation speed
addEventListener (Event.ENTER_FRAME, decreaseAngle);
}
function mouseDownHandler (e:Event):void {
removeEventListener (Event.ENTER_FRAME, decreaseAngle);
//Add ENTER_FRAME which increases the rotation speed
addEventListener (Event.ENTER_FRAME, increaseAngle);
}
function increaseAngle (e:Event):void {
//Increase the vr as long as it's under 0.2 (we don't want the rotation to be too fast)
if (vr < 0.2) {
vr += 0.009;
}
}
function decreaseAngle (e:Event):void {
//Decreare the vr as long as it's greate than or equal to 0.03 (we don't want the rotation to be too low)
if (vr >= 0.03) {
vr -= 0.003;
}
}
Final words
Now hat you know how to rotate objects arount a certain point, you can start to create your own custom cursors. Don't get stuck with these boring circles, create your graphics and rotate them (pictures, drawings, ...)! Be creative and play with this code. Change some values and see how it looks.
Final code
Mouse.hide ();
var numberOfParticles:Number = 7;
var particlesArray:Array = new Array();
//Distance how far the circles are from the mouse
var radius:Number = 50;
//Starting angle (used in setting up the particles)
var angle:Number = 0;
//Rotation speed
var vr:Number = 0.03;
//Angle between each particle
var cirlceAngles:Number = 360 / numberOfParticles;
createCircle ();
function createCircle ():void {
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Set the starting position (we must convert angles to radians)
particle.y = mouseY + Math.sin(angle * Math.PI/180)*radius;
particle.x = mouseX + Math.cos(angle * Math.PI/180)*radius;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
//Update the angle so we know where to put the next particle
angle += cirlceAngles;
}
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//Get the startin position of the mouse
var oldMouseX:Number = mouseX;
var oldMouseY:Number = mouseY;
function enterFrameHandler (e:Event):void {
//Calculate the distance the mouse moved in a frame
var distanceX = mouseX - oldMouseX;
var distanceY = mouseY - oldMouseY;
oldMouseX = mouseX;
oldMouseY = mouseY;
//Loop through every particle and update its position
for (var i:uint = 0; i < numberOfParticles; i++) {
var particle:Sprite = particlesArray[i];
//Move to new x and y postion according to mouse movement
particle.x += distanceX;
particle.y += distanceY;
//Calculate the x and y position in relation to the mouse
var x1:Number = particle.x - mouseX;
var y1:Number = particle.y - mouseY;
/*
Simply: We can calculate the new x and y positions, since we know the old x and y coordinates
and the angle (vr).
NOTE: If you are not familiar with the following equation check this explanation
http://en.wikipedia.org/wiki/Rotation_(mathematics)#Two_dimensions
x2 and y2 are the coordinates after the rotation.
*/
var x2:Number = Math.cos(vr) * x1 - Math.sin(vr) * y1;
var y2:Number = Math.cos(vr) * y1 + Math.sin(vr) * x1;
particle.x = mouseX + x2;
particle.y = mouseY + y2;
}
}
stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDownHandler);
stage.addEventListener (MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseUpHandler (e:Event):void {
removeEventListener (Event.ENTER_FRAME, increaseAngle);
//Add ENTER_FRAME which decreases the rotation speed
addEventListener (Event.ENTER_FRAME, decreaseAngle);
}
function mouseDownHandler (e:Event):void {
removeEventListener (Event.ENTER_FRAME, decreaseAngle);
//Add ENTER_FRAME which increases the rotation speed
addEventListener (Event.ENTER_FRAME, increaseAngle);
}
function increaseAngle (e:Event):void {
//Increase the vr as long as it's under 0.2 (we don't want the rotation to be too fast)
if (vr < 0.2) {
vr += 0.009;
}
}
function decreaseAngle (e:Event):void {
//Decreare the vr as long as it's greate than or equal to 0.03 (we don't want the rotation to be too low)
if (vr >= 0.03) {
vr -= 0.003;
}
}
