A scrolling background is a simple way to make it look like your game character is going somewhere. You can make it so your character appears to be falling from the sky, floating through space, running through meadows, etc. I am going to show you how to create a background that scrolls at a constant speed, regardless of the character’s movements. This is a different effect than scrolling when the character is moving or when the character gets to the edge of the screen.
First open a Flash AS2 document: File> New> Flash File (ActionScript 2)
Then draw the background you would like to scroll. Make it very wide if you would like it to scroll horizontally or very tall if you want it to scroll vertically. In this tutorial we are going to make the background scroll vertically. To follow this example, make its height 900px and set your stage height to 300px in the properties window.
Select your entire background image.
Go to Modify> Convert to Symbol
Name it Background (or a name of your choosing) and select Movie Clip. Under linkage select export for actionscript and put Background as the Identifier and Class.
Click okay and you are back to the stage.
Make sure that the crosshair of the selected movie clip aligns with the top left of the Background image. Change it by double clicking to edit the symbol, selecting the entire image and entering zero in the x and y boxes of the properties window.
When you position the Background movie clip on the stage make it aligned with the top of the stage. You can either do this visually or set its x and y positions to zero in the properties window.
Now create a new actionscript file: File> New> ActionScript File
Here is the code that will go in our actionscript file. Explanation follows.
class Background extends MovieClip
_y -= 4;
if(_y < -600)
_y = 0;
Line 1-2: Defines the class to which we linked our background movie clip in our .fla file.
Line 3-5: Under onEnterFrame() we set the rate at which the background will scroll and the direction. Here we specify it will move four pixels in the negative y direction. This will be processed continually at the frame rate of the movie because it is defined within the onEnterFrame() event handler.
Line 6-9: When it has scrolled down 600px, it starts from the beginning. For this example we reset it at 600 because our stage has a height 300px and the movie clip is 900px tall. We want it to restart when the last 300px are on the stage so no white space appears where the movie clip ends.
Because we are scrolling along the y axis in the negative direction, our character will appear to be falling, as the background scrolls upward. You can replace each y with an x to scroll horizontally and change the minus sign on line 5 to a plus sign to change directions. If you want the background to scroll in the other direction, remember that you will also have to position it differently on the stage, in your .fla file. And of course, if you want it to scroll horizontally you will have to make your image very wide, instead of tall.
In order for the background to scroll seamlessly you must make the first section of the background that appears on the stage identical to the last section that appears on the stage, with the exception of a few pixels to account for the slight movement that should occur. That way when it starts at zero, it won’t suddenly jump to a different image than what was just on the screen.
Here is the scrolling background: I’ve shown it with a game character that moves only left and right when you press the arrow keys, so it appears that he is falling. Click on image before attempting movement with arrow keys.