Polar stars

Hits: 3101

Nice 3d starfield in flash

Category: TutorialsFlashtro
Author: Mr Howard
Submitted by:
Date: 2004-12-20 23:12
Edit Hits: 3101
No tags


Here is a quick tutorial following Musashi9's one concerning old school stars.
What we will do here is use simple maths formulas to move stars, giving the impression they come from far away to us, like if we would travel in space in always the same direction.
Be aware that these are not "real" 3D stars but just a fake using some maths, they are plainly 2D stars in fact.

Remember those old boring college maths lessons ? Some were useful for one thing: creating demo effects.
If you remember right, when we have a circle with a radius of one, we can get any point's coordinates on this circle using a simple fact, that I'm showing you here:

See ? If I want the X coordinate of any point of the circle, I'm applying these formulas: X=cos(angle) and Y=sin(angle) . That's nice you say, but how the hell will it help us ? Easy: for any circle, you can do the same, using those formulas:

X=cos(angle) * radius
Y=sin(angle) * radius

This means we can have the coordinates of any point for any circle, in 2D.

Now all we have to do is to create a starfield, with a certain amount of stars, and make the radius vary for each star. This will make our star move, getting more and more "away" from the center of all the circles.

I know I'm not so good in explaining maths stuff, mainly because I've never been good in maths, but if you want to really dig more I guess you can find easily better explanations on the net... Here in France we call this system "polar coordinates".

Now I know this might be scary for some of you, but it's really easy, believe me... The Actionscript we will code to do this effect is not more advanced than the first stars tutorial.

Open up flash and create a movie with the follwing width height fps etc...

Width = 320
Height = 256
FPS = 50
background colour = Black (#000000)

right now the next thing to do is to make a star shape ,but i dont mean a 5 pointed star i mean more of a DASH ( - ) shape
so lets make a new movie ,goto insert from the top menu and select New Symbol

we should now beinside this symbol so lets make a star
from your lefthand side tool menu make sure both colours are WHITE and then select Rectangle tool

now on the top right we see something that says 100% click that and select 400% from the dropdown menu
if you cant see the center cross move the slide bars untill you can see it left click the mouse on the center cross and drag to the right slighty ,not to much just a small amount and down slighty also

this is our star shape
ok leave this symbol now and select Scene 1 from the top left
this brings us back to our main scene
in the frames section we have 1 blank frame ,lets make 2 more ,right click on frame 2 and select Insert Blank Key Frame
and do it once more so we have 3 blank key frames

now left click on frame 1 and goto your ACTIONS window and type or copy/paste this
this.attachMovie('star', 'star', 1);
xminstars=0; // here we have the min and max values for the X,Y coordinates, fitting our screen.
diffspeed=3; // and here is the number of different speed we want in our starfield. (play with it)

middlex=(xmaxstars-xminstars)/2; // these are the values of the center of the circles.
nbrstars = 200; // total number of stars
starfield = new Array(nbrstars); // the starfield

// here is a little function, for educationnal purposes.
// it is quite self-explanatory...

function polarstars(angle,distance,speed) {

// now is a loop where we'll give each star in the starfield
// a random angle value, and random distance from the center.
// then, not necessary here but for debugging purposes, we
// put it on the screen.

for (i=0; i starfield[i] = new polarstars(random(360), random(200), random(diffspeed)+1); // we call our function and build our starfield
duplicateMovieClip("star", "star_" + i, i+10);


right now left click on blank key frame number 2 and type this

for (i=0;i {
starfield[i].distance+=starfield[i].speed; // here we make each star move.
starfield[i].x = Math.cos(starfield[i].angle)*starfield[i].distance; // and we calculate the good coordinates.
starfield[i].y = Math.sin(starfield[i].angle)*starfield[i].distance;

if (starfield[i].x <= -middlex || starfield[i].x >= middlex || starfield[i].y <= -middley || starfield[i].y >= middley) // ouf of screen ?
starfield[i].angle = random(360);
starfield[i].distance = random (10);

setProperty ("star_" add i , _x , starfield[i].x + middlex);
setProperty ("star_" add i , _y , starfield[i].y + middley);
setProperty ("star_" add i , _alpha , starfield[i].distance/2);

As you can see, we just add some value to the radius (which is called distance), then check if it's out of screen... If so, we give the star a new random angle and distance close to the center.

Then, the last trick is to change their alpha value according to the distance... It's done in the last line.

now lets goto our last key frame which is number 3 and type this

gotoAndPlay (2);

and that's it ! you can play around with it, I hope it will be fun for you and I hope I somehow helped some of you :-)


PS: I used some gfx and explanations from precedent tutorial, thanks a lot to musashi9 for it ;-)

FileDownload: Polar stars
Filesize: 0KB, downloaded 238 times
Powered by the best online Amiga mod player: FLOD

Some more you may like:
3d Swirly StarsParasol Stars


Leave a Comment!

: Use this calculator
Your comment will be available for editing for 10 minutes
2004-12-29 19:25

1. xious writes

Excellent - you could have varying star shapes that become bigger, the greater the radius, thus giving the impression that they're getting closer. Not tried any of this flash stuff yet, to busy with work and university!
2004-12-31 14:12

2. scenex writes

thanks mr howard for proving once again that math isn't that boring as many people think :)
2005-01-24 20:33

3. MrHoward writes

I've done this tutorial quite fast to be honest... Of course, I should have added that yes, you can vary the star size according to the distance from the center, and yes, you can make them "rotate" around the Z-axis by adding or removing a value to the angle for every star.
Anyway, thanks a lot for the good feedback dudes ;-)
2005-07-22 18:22

4. Gang3 writes

Scene=Scene 1, Layer=Layer 1, Frame=1: Line 21: ';' expected
for (i=0; i starfield = new polarstars(random(360), random(200), random(diffspeed)+1);

Scene=Scene 1, Layer=Layer 1, Frame=1: Line 22: ';' expected
our starfield

Scene=Scene 1, Layer=Layer 1, Frame=1: Line 13: Statement block must be terminated by '}'
function polarstars(angle,distance,speed) {

Scene=Scene 1, Layer=Layer 1, Frame=1: Line 27: Syntax error.

Scene=Scene 1, Layer=Layer 1, Frame=2: Line 2: ':' expected

Scene=Scene 1, Layer=Layer 1, Frame=2: Line 3: ')' expected
starfield.x = Math.cos(starfield.angle)*starfield.distance;

cant get it to work :(

if you can help me (bobila@walla.co.il)
2005-07-22 21:10

5. musashi9 writes

What version of flash do you have
2005-11-15 20:50

6. Hotshot2005 writes

I get the same error as Gang3 and I am using Flash 2004 Mx
and you help me on what wrong with the error are pls.
The tutorial of what you have done is Great :)
2005-11-15 21:09

7. Hotshot2005 writes

It is ok now...I have sort it out but funny enough I didnt know my star was so huge on the screen LOL I having fun :D