Polar stars

StarField

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.
xmaxstars=320;
yminstars=0;
ymaxstars=256;
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.
middley=(ymaxstars-yminstars)/2;
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) {
this.angle=angle;
this.distance=distance;
this.speed=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 🙂

-MrHoward.

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

Publication author

offline 2 weeks

mus@shi9

0

Comments: 1160Publics: 2780Registration: 06-03-2017