Flash AS3 Star System Simulation Tutorial

source: http://flanture.blogspot.com

As I promised earlier, this step-by-step tutorial will show you how you can create your own
working star system simulation using Flash and ActionScript3.0 code. I like to think this is
tutorial for beginners because it is written by one and code I'll explain here is very simple
just around 50 lines stored in single class. This star system simulation is not finished work,
but rather just something to start from building further.

Let's start with planets. I will not explain here how you can create images of planets, just
search the web, there are many good tutorials out there about it. You can use some dummy
images for start, just different size circles. Import them with File . Import . Import to
library. Create movie clips for your planets, center images and name them as you like it
doesn't really matter.

For every planet movie clip in your library you will have to set Linkage parameters like
image shows. For class parameter use different names. I have only two planets in this
example, but you can use more if you like. My planets classes are PlanetSmall and
PlanetBig.
We are almost done with Flash, we only need to declare document class. Within properties
panel set StarSystem as Document class. You can also make full folders structure if you like
and use com.blogspot.flanture.animations.StarSystem as Document class name, but I want
to keep this simple.

Create new ActionScript file in same folder as your StarSystem.fla, name it StarSystem.as
and open it for editing. Now the code.

First we import some libraries:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.display.Stage;

We define our class:

public class StarSystem extends Sprite {

private var p1:PlanetSmall;

private var p2:PlanetBig;
Variables p1 and p2 are types of PlanetSmall and PlanetBig. You will need one variable for
every planet you have.

Next we define two variables to represent center of the stage:

private var xCenter:Number = stage.stageWidth/2;

private var yCenter:Number = stage.stageHeight/2;

Now, for every planet we need different parameters. First parameter is angle and here we
define starting animation angle, two more parameters are xRadius and yRadius needed to
define elliptic movement of planets and one more parameter is planet moving speed. So,
for my two planets I have:

private var angle:Number = 20;

private var xRadius:Number = 250;
private var yRadius:Number = 150;
private var speed:Number = .008;

private var _angle:Number = -45;

private var _xRadius:Number = 100;
private var _yRadius:Number = 65;
private var _speed:Number = .01;

All these variables are something you need to test for yourself to find right numbers.

Then we define main method,

public function StarSystem() {

init();
}

note how main method must be declared as public not private. Init function goes like this:
 private function init():void {
p1 = new PlanetSmall();
addChild(p1);

p2 = new PlanetBig();
addChild(p2);

addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

Here we simple set p1 as new PlanetSmall instance, and p2 as PlanetBig instance. Then we
add those instances to the stage using standard addChild method. Finally we have event
listener which file will fire on every enter frame event and this is where we define planets
movement:

public function onEnterFrame(event:Event):void {

p1.x = xCenter + Math.sin(angle) * xRadius;
p1.y = yCenter + Math.cos(angle) * yRadius;
p1.scaleX = p1.scaleY = p1.y/400;
p1.alpha = p1.scaleX*2;
angle += speed;

p2.x = xCenter + Math.sin(_angle) * _xRadius;

p2.y = yCenter + Math.cos(_angle) * _yRadius;
p2.scaleX = p2.scaleY = p2.y/300;
p2.alpha = p2.scaleX*1.2;
_angle += _speed;
}
}
}

Last part of the code defines elliptic movement of the planets and it consists of two parts.
If you have more planets you will need one block of code for every planet. Position x of the
planet is calculated using sin function and y position is calculated using cos function. We
use scale functions to make our planets smaller when they are away from viewing point
(means they have smaller y value) and bigger when they are closer (bigger y value).
Remember, Flash has different coordinate system, x axis has higher values from left to right
and y axis has higher values from top to down.

We also set alpha as function of scale which is nice trick to use. Feel free to play with these
numbers and see what suits your needs. Last line of the code changes angle of the planets
as function of defined speed and this happens every new frame. Test your star system.

I hope you will make better looking rotating planets , some supernovas, stars and galaxies
on background, animated Sun, maybe some starship or even planets with moons orbiting
around them! When you do that, send me the link, I would like to see your creation.

Thanks for your time.

*_*

More Flash tutorials and freebies http://flanture.blogspot.com

Free Flash clocks http://www.flash2nd.com