Note: This tutorial is a continuation of Key Mapping and Movement in AS2, but it's OK to start here. Just go back and download the source files.

Click in the box below to see what you'll have by the end of the tutorial. Move using the arrow keys.

SET UP | First off we need to get Flash ready.

Step 1: Open the .fla from our previous tutorial (or the newly downloaded one).

Step 2: Up in the timeline tab, rename Layer 1 to "tank" by double clicking the label Layer 1.

Layers are important for keeping our content separated. By putting thing in different layers, we can differentiate what objects are in front of or behind other objects. For example, we want our tank to be on top of the background.

Step 3: At the bottom of the timeline tab, hit the New Layer button.

Step 4: Name this new layer "Background".

Since we want the tank to be on top of the background, we need to change the order of the layers.

Step 5: Click and drag the background layer below our tank layer.

GRAPHICS | You can download our pre-made graphic or create your own (Illustrator or Photoshop recommended).

You can download background.png here. Once you have a graphic to use as the background, move on to the next step.
Step 6. Save background.png in the same directory as your .fla.
Step 7. Make sure our Background layer is selected, then go to File > Import > Import to Stage, and choose background.png.

Now that we have an image on the stage, we need to convert it to a symbol.
Step 8: Highlight the graphic, then go to Modify > Convert to Symbol, or just hit F8.
Step 9: Type "Background" in the Name, Identifier & Class boxes.
Step 10: Check Export for ActionScript and Export in Frame 1, as seen below.

You should now notice a blue box surrounding the image and a white circle in the middle. This indicates that the image is now a movie clip symbol!

ACTIONSCRIPT | Now lets create an ActionScript file (.as) with code to control the background.

Step 7: Go to File > New then choose ActionScript File.

A new tab should appear to let us add code to our new ActionScript file.

Step 8: First, go to File > Save and save our new document in the same directory as our .fla. with the name Backround.as. Both the name and location of the file is extremely important!

Now we need to declare our Background class.
Step 9: Type the following code in our new ActionScript tab:

class Background extends MovieClip
{

}

Since our background image is a movie clip, we told it that it would have added functionality by typing extends MovieClip. All variables, functions, etc relating to the background will go within the Background class.

Note: If you're not familiar with terms like variables, functions or if statements, you should check out the Basic ActionScript Terms & Best Practices wiki which explains these terms and more in depth.

Step 12: Add the onEnterFrame() function inside of our Background class.

function onEnterFrame()
{
_x -=2;
}


Note: This is the first time that we have used the operator -=. _x -= 1 literally means the same as _x = _x - 1. In both examples, we saying that _x equals itself minus 1, the -= operator is just a shortcut. This shortcut can also be used with the other operators as well (+=, /=, etc.)

If you remember from our previous exercise, _x stores data about the location of the object on a horizontal line (x-axis). By subtracting 2 from _x in the onEnterFrame() function, the background will move to the left 2 pixels in every frame, and since we have our movie set to 30fps, it will move 60 pixels every second.

Step 13: Save the document, then test the program by going to Control > Test Movie.

Sweet! The background is moving along on it's own. It's actually starting to look like a game! Unfortunately there's still a small issue to address. If you watched the movie clip long enough you'll notice that we eventually ran out of background and were left with barren whiteness of the empty stage.

Lets fix that by telling the background image to move itself back to where it started when it reaches the end.

Step 14: Make an if statement that checks to see if the x-positon of the background is greater than or equal to it's width (the width of our supplied background is 2400) and if it is, move it to the beginning (0).

if(_x <= -2400)
{
_x = 0;
}


If you test it now, you'll notice another problem. It restarts, but not before it shows a lot of the empty stage, then snapping into position. The easiest way to fix this is by duplicating the background. This is the first time we've done something like this, so we'll take it slow.

Step 15: Switch over to the "movement in as2.fla" tab.

Step 16: Click on the library button to expand that tab.

Step 17: Double click on Background in the library to open the Background symbol in a new tab.

Important: Make sure that you do not move the image inside of this window. To move, always use the scrollbars. If you accidentally move the image, just go to the Properties tab and reset the X and Y positions to 0.

Step 18: Scroll to the far right of the graphic and open the Library tab again.

You might have noticed that there were two instances of Background in your library. One is the symbol and has an icon of a gear, while the other is the original .png that has an icon of a tree.

Step 19: Click and drag the original .png from the library to the stage.

Step 20: Line it up so that the new image lines up perfectly to the right of the old one. If you can't seem to get it lined up correctly, you can manually set the position in the Properties tab. The X position is the width of the background (2400) and the Y position is 0.

Step 21: Click Scene 1 in the bar just above the stage to return to our main area.

Test your program one last time, and if it works - move on to the final step.

Step 22: Once we're finished, save the documents and go to File > Publish to publish our .swf!

Congratulations! You now have a game with a moving background (that loops) and a moving tank! If you go to the directory where you saved your .fla and .as files, there should now be a .swf and .html file. Double click the .html file and your new game should open in your web browser.

Download the source files for this tutorial below.