This tutorial will teach you how to make a simple starfield background for your flash game. This is what the product will look like in the end.
This tutorial is made using Macromedia flash MX 2004 professional(or in other words Flash 7 professional edition).
First open up a document 550 in width and 400 in height and make the background black. Draw a big dot, a smaller dot, and an even smaller dot on the document to represent your three stars. Separately select each one of the and go to top menu and do modify-->Convert to symbol and convert them to a movie clips. Call them bigstar, smallstar, and tinystar.
Now you actually need to give them property names. In the three panels below the main document, you'll see a panel called "properties". Expand that
panel and right under the dropdown box where it has movie Clip as the symbol type, there is a blank text box to name your symbol instance. Name the three stars t1, t2, and t3 for simplicity. No you should have something that looks like this when you select all three of the stars(Note that I have 3 layers and put one star on each layer, but this is not neccessary for this.
Now we need to duplicate the star to have many of them at once on the stage and a function to make them move. So click on the first frame of your layer and expand the Actions panel at the bottom to edit the code, it should look like this.
The actual code in the actions section should be this:
Code:
stop();
for (i=1; i<=100; i++)
{
t1.duplicateMovieClip( "t1"+i, i+100,t1 );
}
for (i=1; i<=40; i++)
{
t2.duplicateMovieClip( "t2"+i, i+300,t2 );
}
for (i=1; i<=20; i++)
{
t3.duplicateMovieClip( "t3"+i, i+400,t3 );
}
function loadstar(varname) //loads the clip
{
_root[varname]._x=random(550);
_root[varname]._y=random(400);
_root[varname].speed=random(10)+2;
}
function movestar(varname) //stars
{
_root[varname]._x+=_root[varname].speed;
if(_root[varname]._x>550)
{
_root[varname].reset();
}
}
The stop() at the top stops the movie at this frame and prevents it from going onto the next one.
First we have three for loops to duplicate several copies of our star, we duplicated t1(our tiny star) 100 timesm t2(the medium star) 40 times, and t3(the big star) 20 times. The 2nd parameter(ex. i+100) is very important as that specifies the depth. You cannot have two clips of the same depth on the stage or one will replace the other. The function duplicateMovieClip() simply duplicates whatever movie clip you tell it to duplicate.
The next two functions are loadstar() and movestar(), simply put, one loads the stars onto the stage and the other one moves them. They both take a parameter,varname, which is the name of the clip you want it to move.
Loadstar simply sets the initial x(horizontal) position of the clip at somewhere between 1 and 550, sets the initial y position at somewhere between
1 and 400. _root[varname].speed is how fast the star will move across the stage. We set this to some speed between1 pixel per frame to 10 pixels per frame plus an intial 2 frames per pixel so it won't be too slow.
Movestar moves the star, it says to move the star's x position the number of pixels specified in speed every time a frame loads. It also calls a reset() function to reset the star if it moves past pixel 550 in x-coordinates(moves off the stage). Reset is a function in the movie clip itself(we will talk about this in the next section).
So now you have the basic functions, you still need to call them within the movie clip. So, select one of your star movie clips and open the actions tab
like this:
Paste this code in:
Code:
onClipEvent(load)
{
_root.loadstar(this._name);
function reset()
{
_root.loadstar(this._name);
}
}
onClipEvent(enterFrame)
{
_root.movestar(this._name);
}
The OnClipEvent(load) event is what happens when the clip initially loads(every time a star is duplicated). It basically calls the loadstar function
and passes it the clip name in this._name. It also has a reset function for every time the star needs to be reset. This function also just calls to load function which sets the coordinates and the speed of the star.
onClipEvent(enterFrame) loads every time a frame is loaded, flash's default is 12 frames per second. The onClipEvent just calls the movestar function wewrote earlier and passes it the name to move the star.
Now paste that code into the "Actions" tab of all three stars and your done!
