This is a basic tutorial that will show you how to make a space scene in Flash. More importantly, it will show how to calculate circular motion paths and use trig in programming, as well as being good practice at action script. This tutorial assumes a basic knowledge of Flash MX and Action Script, and requires Flash MX (or later).
To start we will need a 400x400 stage and 2 planets, one 50x50 and the other 160x160.
Once the planets are drawn, convert them to graphics (select the symbol, right click, go to 'convert to symbol'). When the conversion window appears, choose a name for the symbol. Set the behavior to graphic and set registration to the center one, as shown in the picture.
As a finishing touch, set the stages color to black. You can add stars or anything else you like in the background.
The small planet is going to rotate around the large planet. The small planet will be moved with action script, but the large planet will be stationary. Move it to the center of the stage (X=120, Y=120).
We need to keep track of time as the program runs. Start off by creating a variable to store the time. This should be placed in the action of the first frame.
_root._t = 0;
The bulk of the code will be placed in the enter frame event of the small planet. The enter frame event is called x times a second, where x is the frame rate of the movie. Before clip events can be given, the symbol behavior must be changed to Movie Clip.
Once that is done, the selection can have actions applied to it. Add the following code.
onClipEvent(enterFrame){ _root._t ++; }
This will add 1 to the variable _t everytime the frame is entered.
Before we go into coding the movement, lets first look at this diagram.
The red dot is the large planet and the green dot is the small one. The angle t represents the time. Notice that as t changes, the height and width change, and the radius stays the same. Also notice that everything comes together to form a right triangle, and that its angles are 90°, t° and (90-t)°.
We are going to need to find the x and y coords for our small planet. Before we do that, lets give it an instance name so we can refer to it better. It can be anything, for the tutorial we will call it mars.
Now we can refer to it as _root.mars. Give the other planet a name. For the tutorial, it will be called sun.
It is important to realize that the angle t (see the diagram) is dependent on time. Since an angle cannot be bigger than 360 degrees, add this line right after the _root._t++ line.
if(_root._t > 360) _root._t = 0;
Now for some planet moving!
Flash functions want radians, not degrees. The first line we need is:
var radians = _root._t * (Math.PI/180);
It will convert our degrees into radians. With this we can find the x and y coordinates of our planet. The formulas is:
There you have it! Press ctrl+enter to see the planet rotate around the other planet.
Now we need to make the path more elliptical, this gives the impression we are looking from the side rather than top down. This is quite easy to change, just lower the vertical radius. So, replace the line:
_root.mars._y = 200 + Math.sin(radians) * 150;
With:
_root.mars._y = 200 + Math.sin(radians) * 50;
Press ctrl+enter to check out the changes.
You should notice an error: the rotating planet is always behind the stationary planet. We need to store whether the rotating planet is on the top or the bottom. In the main frame, add the line:
It is a little confusing, but basically it stores the last place x was, then compares it to where x is this time. If x changes direction, it swaps depths and changes the _onTop property.
Almost done! Next we need to change the size of the planet. To do this we will find the distance of the planet from the center. When the planet is close to the center, it is either going to be very large or very small. As it moves away from the center it will be closer to the base size. So, lets first find the offset:
var offset = (182-(Math.sqrt(Math.pow(_root.mars._x-200, 2)+Math.pow(_root.mars._y-200, 2)))) / 5;
182 is the farthest it can be away from the center, so the greater the distance away, the smaller the offset. The bulk of the code (Math.sqrt(Math.pow(_root.mars._x-200, 2)+Math.pow(_root.mars._y-200, 2))) is just the distance formula. Remember, the distance formula is:
D = sqrt ( (X1 - X2)^2 + (Y1 - Y2)^2 )
It is divided by 4 at the end to make the results less extreme. To increase the illusion of depth, the number can be lowered.
Now we have our offset, but what we do with it depends on whether our planet is on top or on bottom. This line will add it to the height and width if _onTop is true, subtract it if false. Notice that the 50 in this line in the base size of the object.
The last thing left is to add a diagonal slant to the orbit path. To do this, just add (Math.cos(radians) * 100) to the y coordinate. This way when the planet in on the left side, it is higher than on the right.
Here is the final product!
Whew! After that you probably need a break. If you like flash games, why not check out Sonny. It is a great flash RPG. (Yes, I do happen to own the site I'm linking to...)
