Download Tutorial as PDF file.
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.
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.
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.
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.
*_*
