Moving backgrounds

A moving background can be achieved by careful use of a continuously scrolling image and a mask.

Start a new flash movie and rename the default first layer as background.

Use the flash drawing tools to create a simple background picture on the background layer. The key to a successful scrolling background is to make sure that the left and right edge match exactly.

To speed things up, you could download and load the sample flash file from here and copy the symbol called picture from its library. Please excuse the graphics!

Place the picture symbol on the centre of the stage. Place a second instance (copy) so that it exactly joins on its right-hand edge.

Select both the symbols and use Ctrl and G to group them together as a single object.

Place a second Keyframe on the background layer at frame 120. The actual frame does not really matter but the more frames between the keyframes, the slower the movement of the background.

Select the second key frame and nudge the image so that it is placed with its right edge on the right edge of the stage.

Create a new layer and name it mask. Use the rectangle tool to produce a rectangle in the centre of the stage. This will provide a window to view the scrolling background.

Bring up the properties for the mask layer by double-clicking on its icon and set it to mask.

Bring up the properties for the background layer and set it to masked.

Test the movie and the background will scroll inside a small rectangular window.

To finish off the effect, create a new layer and call it car. Drag the car symbol from the library onto the centre of the stage inside the mask window area.

Now when you test the movie, the car will appear to be moving (although it would be more convincing if the wheels were animated and it moved up and down a little).

Go to the next page to download some sample flash files based on these ideas.