Flex | Flash | Air | AS3
Circular rotation with as3
June 19th, 2009 in FlashLearn how to rotate an object with actionscript 3 and some mathematics with trigonometric functions.
Here we are going to build the rotation of the moon around the earth.
Note that the preview image is taken from http://ixrevivalxi.deviantart.com/art/Earth-67856917
1. Create a new flash file (Actionscript 3.0) and save it as circular-rotation.fla.
2. Import an image of the earth and one of the moon on the stage by selecting File>Import>Import to Stage.
3. Select the moon and convert it to a movie clip named Moon with registration point at the center. Also check the box ‘Export for Actionscript’, and change the base class from ‘flash.display.MovieClip’ to ‘flash.display.Sprite’.
Then click OK.
An Actionscript Class warning will be displayed, click OK.
4. So we’ve just created the class Moon, follow the same step to create the class Earth.
5. Now get rid of the moon and the earth on the stage.
6. Now that’s the interesting part of this tutorial. To create the rotation we have to be helped by some mathematics and more precisely trigonometrics.
Here’s some reminders from Wikipedia:
The trigonometric functions cosine and sine may be defined on the unit circle as follows. If (x, y) is a point of the unit circle, and if the ray from the origin (0, 0) to (x, y) makes an angle t from the positive x-axis, (where counterclockwise turning is positive), then:
cos(t) = x
sin(t) = y
The cosine of an angle is the ratio of the length of the adjacent side to the length of the hypotenuse.
The sine of an angle is the ratio of the length of the opposite side to the length of the hypotenuse.
7. Now that the concept is explained, we need to translate it into code.
Rename ‘layer 1′ to ‘actions’. Open the actions panel and type the following code.
var earth : Earth;
var moon : Moon ;
var centerX:Number = stage.stageWidth / 2;
var centerY:Number = stage.stageHeight / 2;
var radius:Number ;
var speed:Number = 0.2;
var angle:Number = 0;
init();
function init():void{
earth = new Earth();
moon = new Moon();
addChild(earth);
addChild(moon);
earth.x = centerX;
earth.y = centerY;
radius = earth.width /2 + 100;
moon.addEventListener(Event.ENTER_FRAME, rotate);
}
function rotate(e:Event):void{
e.currentTarget.x = centerX + Math.cos(angle) * radius ;
e.currentTarget.y = centerY + Math.sin(angle) * radius ;
angle += speed;
}
8. Let’s explain the code.
- First we declare a bunch of variables to hold different parameters.
To begin we declare a Moon variable and an Earth variable.
The centerX and centerY variables holds the coordinates of the unit circle that we put at the center of the stage. We set the value of the speed variable that represents the value that will increment the angle. We initialize the angle variable to zero.
- Then we call the init function in which we instantiate the moon and earth variables and add them to be displayed. We set the x and y value of the earth to the center of the stage. Also we set the value of the radius.
Next we add an ENTER_FRAME event to the moon to call the rotate function.
- The rotate function changes the x and y parameters of the moon according to the trigonometrics functions and it increments the angle of the parameter speed.
9. All is finished, test your movie to see it in action.
Jul 7th, 2009
Good tutorial. Was helpful
Jul 9th, 2009
Thas is cool , good tutorial
Jul 11th, 2009
this was so incredibly helpful, but i wonder how you would have multiple objects?
Jul 21st, 2009
Very Useful, thanks
Jul 21st, 2009
[...] Read tutorial [...]
Jul 28th, 2009
What a great list!
Nov 23rd, 2009
The moon is always showing the same face to the earth
haha
Feb 22nd, 2010
[...] Click here for this Tutorial! Previously Posted Tutorial: AS3: Trigonometry & 2D Velocity [...]