24 August 2009

Flash AS3 Star System Simulation Tutorial

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.

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:

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() {

note how main method must be declared as public not private. Init function goes like this:

private function init():void {
p1 = new PlanetSmall();

p2 = new PlanetBig();

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.


21 August 2009

Next Flash Tutorial Sneak Peek

I'm working on yet another Flash tutorial and this time subject is how to create Star System Simulation using ActionScript 3.0 in few easy steps.

Tutorial is almost finished and it will be published probably on Monday. Until then take a look at live example.


12 August 2009

Custom Winter Track

One of the tutorials on older Flanture blog was Flash Racing Game Custom Track Tutorial. Since Mediafire swallowed my files, here is another place (reliable Box.net) where you can download winter track, or just play right now.

flash racing game track preview
Anyone knows if GameSheep ever finished part two of the tutorial? Anyway, you can learn a great deal from part one.

There wasn't many posts here about flash games and development, if any, because my old blog was right place for it, but now since it's officially closed, you can expect some games related ramblings here too.

Good place to start with searching for soul mates and flash games developing collaborations is Kongregate forum. Enjoy.


04 August 2009

AS3 Loading Animation Tutorial

I've seen many loading animations people selling via Envato Flash Marketplace and other flash stock websites at prices like $1, $2 or more. Some of them are really great and some of them are just regular. Truth is, you can make simple loading animation in minutes and enhance it as you like and I'm going to show you how in this step-by-step tutorial.

step 1:

Create new Flash document. Choose File _ New... and than Flash File (ActionScript 3.0). Take a look at how finished loading animation will look like. It will display 6 rectangles and we will simulate 'color movement'.

step 2:

We need only one movie clip, so go to Insert _ New Symbol (or use keyboard shortcut CTRL+F8, choose Movie Clip and name it 'rectangle'. While in edit mode choose Rectangle tool, set black color for stroke and yellow for fill #ffff00. Draw any rectangle on stage, select it and type these setting width:20 height:50 X:0 and Y:0 in Property panel.

Now, on movie clip's timeline, right-click on first frame, copy it and paste it on second frame. Do the same for frames 3, 4, 5 and 6. Get back to frame 2, deselect shape and select only fill. Choose slightly brighter yellow color #ffff33. Continue same thing, for frame 3 fill set #ffff66, for frame 4 #ffff99 for frame 5 #ffffcc and finally for frame 6 use white #ffffff.

as3 loading animation tutorial
step 3:

We are done with our movie clip, go back to scene 1. One more things, rectangle movie clip is now in library. Right click on it and choose Linkage. Set properties like image shows and click OK.

as3 loading animation tutorial
step 4:

All we need to do now is write some AS3 code. Click F9 on keyboard to open Actions panel for first frame of main timeline. Paste next code:

var s1:rectangle = new rectangle();
s1.x = 200;
s1.y = 50;

var s2:rectangle = new rectangle();
s2.x = 170;
s2.y = 50;

var s3:rectangle = new rectangle();
s3.x = 140;
s3.y = 50;

var s4:rectangle = new rectangle();
s4.x = 110;
s4.y = 50;

var s5:rectangle = new rectangle();
s5.x = 80;
s5.y = 50;

var s6:rectangle = new rectangle();
s6.x = 50;
s6.y = 50;

s1.addEventListener(Event.ENTER_FRAME, onFrame1);

function onFrame1(evt:Event) {

Code is simple. Variables s1 .. s6 are our rectangles. We add them to Stage with addChild and we set positions using x and y movie clip properties, since rectangle class extends Movie Clip class, remember Linkage step?

Finally we attach onFrame1 function to s1 instance on enter frame event. Formula (s1.currentFrame+i)%6 will give us values for i=1, 2, ..., 5 which means all rectangles will have different colors during current frame - and that's how we simulate color movement needed for loading animation.

Feel free to improve appearance and play with the code. Final swf is only 805 bytes.
That's all. Easy, right?



template by blogger templates