Orbits

Here's another simple exercise that uses Flash's built-in math functions: we'll create a little solar system of orbiting planets using trigonometry (what? trig? they told me there wouldn't be any math in this program!). Calm down, it's not that bad...try it out.

Specifications

Size: 550 x 400 (default Flash size)

Frame Rate: 12 fps (default)

Length: 1 frame

Due Date: week 11 (12/18)

Deliverables: both the FLA and exported SWF files.

Part 1: Flash Layout

Launch Flash and open a new movie (standard size, 550 x 400).

Draw six circles to represent the sun, Mercury, Venus, Earth, Mars, and the moon. If you want you can do Jupiter, Saturn, Uranus and Neptune too (note that Pluto has recently been demoted to planetoid, but some folks aren't willing to abandon it—it's your call).

Convert the circles into movie clips. I'd recommend calling them sun_mc, mercury_mc, etc. And make sure the registration is centered.

It's a good idea to give each of your circles instance names, but for purposes of this exercise, the only ones that need instance names are the sun and Earth. I called them sun_in and earth_in.

Position the sun in the center of the stage (use the Align palette). Don't worry about positioning the other planets; we'll do that with code.

Part 2 Flash: Actionscript

Select the mercury instance. Open the Actionscript window and add the following code:

onClipEvent (load) {
speed=.4;
radius=40;
orbit=0;

}

This first bit of code establishes three variables (speed, radius, and orbit). Each is given a value that will be used in the second handler. Speed will determine how quickly our planets orbit; it represents how much of the circumference of its orbit the planet travels each frame, with a full orbit being 6.28 (twice pi). Thus .4 is 6.37% of it's orbit's circumference (.4 ÷ 6.28). Or, another way of looking at it, it will take 15.7 frames for mercury to make one full orbit (6.28 ÷ .4). The upshot of all this is the larger the number, the faster the rate of travel.

Radius will determine the distance of the planet from the center of the sun in pixels. The larger the number, the farther away the planet, and the larger the orbit.

Orbit will determine the planet's position each frame. For now it is set to zero, but we'll change that in the next block o' code.

Now add the next chunk of code to the same script:

onClipEvent (enterFrame) {
orbit+=speed;
this._x = Math.cos(orbit) * radius + _root.sun_in._x;
this._y = Math.sin(orbit) * radius + _root.sun_in._y;

}

The onClipEvent(enterFrame) handler is triggered whenever the playhead enters the frame. Since the movie is one frame long, the playhead is perpetually in the frame so what we have in effect an infinite loop; everything inside this handler will continue until stopped.

The first line adds the value of speed to orbit. Initially orbit is zero, and speed is .4, so the first time the script is run orbit becomes .4 (0 + .4 = .4). When the playhead enters the frame the next time (1/15 of a second later at 15 fps), .4 is added to orbit again yielding .8. Then it jumps to 1.2, 1.6, etc.

Now comes the trigonometry. The next two lines position the Mercury movie clip (this) by determining its current x and y position. It finds the cosine of the value of orbit, multiplies it by the radius to determine the x (horizontal) position. Then it finds the sine value of orbit, multiplies it by the radius to determine the y (vertical) position. The result is a movie clip that moves in a circle.

For more information on sine & cosine, check out this article on Wikipedia.

Try it out, see if it works. Pretty cool, but only one planet is moving. Now we need to get the others going.

Add the same script to each of the other planets, but for each one, change the speed and radius. Try the following numbers:

Planet	Speed	Radius
Venus	.2	90
Earth	.1	150
Mars	.05	210

Note that the further the planet is from the sun, the slower it should move (or, more accurately, the longer it should take to make a full orbit). These numbers aren't set in stone; you can vary them as you see fit.

The moon is a special case; instead of orbiting the sun, it orbits Earth. Use the following code for the moon:

onClipEvent (load) {
speed=.5;
radius=15;
orbit=0;

}

onClipEvent (enterFrame) {
orbit+=speed;
this._x = Math.cos(orbit) * radius + _root.earth_in._x;
this._y = Math.sin(orbit) * radius + _root.earth_in._y;

}

Note the major difference, we've replaced the instance name for the sun with the instance name of the earth, this way it will orbit the proper movie clip. Note also the larger speed number and smaller radius.

Note; when you test this, the moon may have a funny orbit that runs into the earth. If so, select the moon movie clip on stage and send it to the back. The planets are drawn from top down, so if the moon is above the earth it is drawn before the earth is positioned each frame. We want the earth in place first so that the calculations for the moon's position are accurate. Putting the moon below the earth in the stacking order accomplishes this.

Test it out; does it work? One thing I noticed is that because the speeds of the planets are all multiples of one another, every time Mars completes an orbit, all four planets line-up in perfect synchronization (this by the way, is known as syzygy). To eliminate this alignment, adjust the speeds slightly. Try .38 for Mercury, .24 for Venus, .13 for Earth, and .06 for Mars, for example.

Go Above and Beyond

Some possibilities:

Customize your planets.

Add more planets.

Find another use for orbiting objects.

Point Breakdown

10 pts	Went above & beyond and made something special
9 pts	Above and beyond the basics.
8 pts	Did the basics; it works, but it's nothing fancy.
7 pts	Something's not working right.
0-6 pts	Poor showing; mostly incomplete or full of errors.