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
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 😉
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 😀
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 🙂
What version of flash do you have
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
starfield.distance+=starfield.speed;
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 ([email protected])
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 😉
thanks mr howard for proving once again that math isn’t that boring as many people think 🙂
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!