One of the most useful features of Flash is the ability to attach MovieClips to the stage. This allows you to create relatively complex on-screen animations without dragging and dropping lots of objects onto the stage, and instead using a little ActionScript.

In the following tutorial we'll create a dynamic star-field background effect. You'll be able to customize the number of stars, speed, and angle. In a follow-up I'll show you how to use these to make a little game. Even better we'll be coding most of it using classes, so you'll be able to use it in a project with around only 3 lines of code.

The best way to get you interested is to show you the end result, so have a look just below. You can download the source code and all the rest from the end of the post.

The finished product

Setting up your Movie

First create a new Flash File (ActionScript 2), set the dimensions to 550x400px and the background color to black (#000000).

Create a new graphic in your library, and name it "Star Shape". Inside the Star Shape graphic draw a white circle (no outline) and set the properties in the properties inspector to width=40, height=40, x=-20, y=-20 (so the circle is centered on the origin).

Now create a new MovieClip in your library and name it "My Star". Drag the "Star Shape" graphic onto the first frame of the first layer and position it at x=0, y=0.

Right click (Cmd+click on the Mac) on the My Star MovieClip in your library and select Properties. Check the box next to 'Export for ActionScript', and enter the name "Star" as the ActionScript Export Identifier.

Now select File > Publish Settings from the toolbar and select the Flash tab; then press the settings button next to where it says ActionScript 2 to open the ActionScript settings dialog.

Press the "+" button to add a new ClassPath and enter the location where you store your ActionScript classes, mine is "C:\ActionScript".

If your not sure what all that means, it's kind of easy. You store all of the classes you download or create in a central directory, that way it's easy to access them and share them between projects. If you don't have a folder already go ahead and create one somewhere; then enter it's location into the ActionScript settings dialog.

All that done? Click OK on both dialogs to return to your Movie. Now hit File > New and create a new ActionScript file.

The Star class

First I'll give you the full code of the star class, then I'll explain it in details afterwards. Enter the following into the ActionScript class you just created

Let's start of with the name of the class: org.josephearl.anim.starfield.Star. This is the fully qualified name of the class, the local name is "Star" and we will be saving it as "Star.as". So what's all the rest of it before that mean? The org.josephearl.anim.starfield. tells you what the folder the Class is in relative to your main ActionScript classes folder. If you chose "C:\ActipnScript\", then the Star.as file's full location will be C:\ActionScript\org\josephearl\anim\starfield\Star.as.

For your convenience the download contains both classes uses packaged in the right folders to just drag and drop into your ActionScript folder. If you don't want to do that, go ahead and make the folders, and then save the file as "Star.as" (without the quotes of course).

Phew, slightly convoluted; hopefully it makes sense though. So what did all that class mean?

Well firstly notice in the class name there's an extra bit after the name - extends MovieClip. This means that this class inherits all of the properties and method of the MovieClip object, which makes sense since we'll be applying it our Star. This will essentially give our Star MovieClip extra properties and methods that we define here.

Okay first we have all of the properties in the class, there's starSize, xSpeed and ySpeed:

Unsurprisingly they control the size of the star, it's horizontal and vertical speeds (well velocities really). Notice we use the private keyword when defining them - this means the user cannot directly get or set these properties: generally you should only let users interact with your classes in the way you define.

Next comes a part that every class must have - the constructor. This set's up the class, and has to have exactly the same name as your class. The constructor can take arguments, but in this case we'll be applying our class by setting the ActionScript class of a MovieClip rather than calling new Star(); so we wouldn't have the chance to pass it any arguments. Ours just sets the properties to some default values:

Next we have a function that let's the user set the size of the star. Well really it's two functions; the first one is public, and this lets the user the set the starSize property of the star. This function also makes use of another private method which updates the size of the star (so that the size of the star MovieClip matches the starSize property.

Notice in the updateSize method that we set _x and _y properties even though we haven't defined them; this is of course because they are properties of the MovieClip class, which we're extending so we have direct access so.

Next we have getters and setters, these let the user change the properties of class (but of course only the ones you allow them to):

You might be wondering how a getter or setter method is different to any other. It's simple: a getter or setter method behaves like a property. So in the above example, you'd call myStar.yVelocity = 20; to set the ySpeed property of the star, rather than myStar.yVelocity(20) as you would with a normal method. To get the ySpeed property you'd use var yVel = myStar.yVelocity;

An important point is that ySpeed is the internal name of the property - it's used internally in the class, but from outside the class you can't touch it directly. When using the class it would appear it had a yVelocity property, even though we really know it's just getting the variable we called ySpeed in the class.

Only two more functions to go in this class, first up is the moveStar method. This changes the star's _x and _y properties by it's speed:

Finally we have the destroy method - this gets rid of the star by removing the star MovieClip from the stage.

And that's all of the star class, this will let use manage all of our stars easily.

The Starfield class

This is the main class, and it's a little longer (199 lines) than the last. Create a new ActionScript file, then enter the following code:

As always first we have the properties of our Starfield.

I'll give a quick explanation of the most important ones:

• speedMin and speedMax control the minimum and maximum speed of the stars in the star-field
• The moveAngle property determines the angle at which the stars in the field move at.
• numStars is of course the number of stars in our star-field.
• sizeMin and sizeMax control the sizes of the stars.
• The clip property will store a reference to the MovieClip which will contain the star-field
• updateInt this will be the interval that the screen is updated at, in milliseconds. A lower value results in a smoother animation (but it is more computationally intensive); conversely a higher value with result in a more jerky looking animation, but will require less system resources
• The idName property will contain the ActionScript Export Identifier of the Star MovieClip we want to use in this star-field (this let's you have different fields with different stars)

Then comes the obligatory constructor; this time it takes some arguments which let the user set all of the important properties of the star field. Most of the arguments, except target_mc and starIdName, don't have to be specified and will use the default values defined in the constructor.

Then we have one of the most important methods of the class, the create method. Once a Starfield instance has been created, this will method will add of all the stars to the stage.

Essentially this loops through the number of stars we have and each loop adds a star to the stage, giving it a random position. We add a new star to the stage using the MovieClip.attachMovie method.

To use the attachMovie method, you do something like the similar:

• my_mc is the MovieClip that you want to attach your MovieClip to (ie it will be the parent of the attached MovieClip)
• The exportId argument is the ActionScript Export Identifier of any MovieClip in your library.
• newName will be the name of the MovieClip attached, e.g. "myNew_mc"
• attachLevel is the depth of the MovieClip, usually use something like my_mc.getNextHighestDepth()
• The initObj is an optional Object you can pass to initialize MovieClip variables. You might pass {_x:10, _y:50} which will set the MovieClips position to x=10, y=50 when it is attached.

Notice we use several methods of the Star class we created earlier in the create method.

We set the velocity of each individual star as a the velocity chosen multiplied by the update interval in seconds. This means that the visible speed is independent of the interval chosen.

Next we have two methods that change the angle and speed of the Starfield.

These are pretty simple and just change the relevant properties of the Starfield. Both make use of a private method, updateStarVelocities, which passes the changes in speed and direction onto each individual star.

This just loops through all our stars and sets their velocities again, just like we did in the create method.

We then have another two private methods, getRandomVelocity and getRandomPosition. These are used by other methods to generate random velocities and positions for the individual stars. There's explanations as to how exactly this is calculated in the comments.

With our animation, we're going to place a load of stars on-screen in random positions, move them in the desired direction, and then once they pass off screen we want to move them to the other end of the screen and start them moving again. That way we don't need to keep creating and adding MovieClips all the time so it's more efficient. To do this we need to detect if a MovieClip is off-stage.

We need to keep referencing our stars throughout this class, in order to move them and change their properties. The getStarClip function takes a number and returns the MovieClip of the star corresponding to the number.

The animationStep doesn't actually do animation. It receives an instance of a Starfield, and calls the moveStars method of that instance. The reason we do it this way, is because of variable scope.

Variable scope

It's important to understand, so I'll go on a quick detour to explain why we do that. Feel free to skip this part if you like and get onto the rest of the code.

Firstly, we'll animate our star-field by calling the animation function at an interval. The animation function will move all of the stars on one step. To do this we use the setInterval global method, which allows you to call functions at regular intervals.

Calling something such as setInterval(animationFunction, 100) will call the animationFunction function every 100 milliseconds. If the animationFunction method references this, or needs to access other members of the class, it's important to understand what this is.

Normally you change a class property by doing something such as this.property = newValue. It's important to know that Flash lets you omit the this keyword, so even if you don't put it in, that's what is really going on.

In this particular case, because the animationFunction is called by the setInterval; the this keyword refers to the setInterval event that fires the function. Thus in order to access methods and properties of the class we can't just call myMethod(), because that's really doing this.myMethod() and myMethod isn't a method of the setInterval event that fires.

In order to make the animation function more readable, we write it as normal, and use a helper to function to call it so that the this keyword in the real animation function does refer to our class. We pass the helper function animationStep an instance of our Starfield, which then calls the real animation function using Starfield.moveStars(); and the this keyword in our moveStars method now does refer to our class, so we can access all of the properties and methods easily.

Back on track

Not much more code to go through! The moveStars method is up next, and all this does is loop through all of our stars. We check if the star is off-stage, if it is then we move it to a new position. Then we call each stars moveStar method (remember we made this earlier in our Star class).

The moveStars and animationStep methods don't do anything on their own though, and both are private so they can't be accessed in our Movies. The next method solves this and stars the star-field animation playing:

We use the setInterval method to call our animationStep function at regular intervals. Notice we pass the animationStep method the current Starfield instance by passing it the this keyword.

The setInterval function returns a number, you can use this in conjunction with the clearInterval method to stop the interval. We use this make a method which stops the star-field animation.

Don't worry it's the last bit of code in this class now, the destroy method. This stops the animation and gets rid of all of the stars by calling their individual destroy destroy method that we defined in our Star class.

Save the file as "Starfield.as" in the "org\josephearl\anim\" folder (relative to your main ActionScript ClassPath.

And that's all of our classes done!

The Starfield animation

Now you'll see why we went to all that trouble of making those two classes, rather than just coding up a quick solution in our Movie using onEnterFrame or something similar.

Return to your Movie. Right-click on the "My Star" MovieClip in your library, select properties, and enter "org.josephearl.anim.starfield.Star" into the Class.

Hit OK, and return to your Movie. Now create a new MovieClip in your library, and give it the name "Starfield"; leave it empty. Return to the root timeline of your Movie, and drag the Starfield MovieClip from your library onto the Stage. Position it at x=0, y=0 and give it the instance name "starfield_mc". Now create a new layer in your root timeline, select the first frame, and open the Actions window, then enter the next 4 lines of code:

First we import our Starfield class with the import org.josephearl.anim.Starfield; statement.

Next we create a new Starfield, 'myStarfield', which we pass the ActionScript Export Identifier of the My Star MovieClip in our library and the name of the blank MovieClip we dragged onto the stage. This will contain the Starfield. We also pass it the speed and size etc, and we set the angle to 0. We update our star field every 20 milliseconds (50FPS).

After that all we have to do is call the create method of our Starfield to make the stars, and then call the playAnimation method to start things off.

And that's it. Hit Ctrl+Enter to test your Movie.

Maybe you could add a spaceship to your Movie to make it look like it's moving through space (actually, I'll show you how to make one in the next installment).

Recap

Once you have the classes saved and made, here's how simple it is to add a Starfield to any Movie:

1. Create a Star MovieClip in your library, give it an Export Identifier and attach the Star class to it.
2. Create a blank MovieClip, drag it onto the stage and give it an instance name
3. Import the Starfield class into your MovieClip
4. Create a new instance of the Starfield class
5. Call the create and playAnimation methods of your Starfield to get things going

Download files

Bear in mind that you'll need to change the Class Path in the ActionScript settings to get the FLA files to publish properly (and make sure you have the classes installed too).

In the next installment I'll show you how to draw the Spaceship, add some controls which will change the direction of the star field and spaceship; then finally we'll make our spaceship shoot some bullets (or lasers, take your pick).

Having problems? Liked this tutorial? Let me know what you thought in the comments section.