tip: scrolling background (1)

Sometimes we like to have an infinite scrollling background. These look cool. And they are easy to create, if you know all the tricks (download the FLA).

So here are the tricks ... er, steps:

  1. Create the image and make it exactly as wide as your Stage. In this case, the image is just a bunch of white dots. The Stage is 330 pixels wide and so is the graphic symbol.
  2. Convert your image into a graphic symbol (F8) -- in this case, I named it Starfield.
  3. Now convert it again, but this time into a movie clip symbol (F8). I named mine Moving Starfield. The movie clip contains the graphic.
  4. Go into Symbol Editing Mode to see the movie clip symbol timeline.
  5. Make sure the graphic symbol is positioned at exactly 0, 0. (Look at the X, Y coordinates down in the Properties panel.)
  6. Make a new layer in the timeline (you are still inside the movie clip).
  7. Drag a new instance of the same graphic (e.g. Starfield) out of the Library and drop it on the Stage, in the new layer.
  8. Position the new instance at the negative of whatever its width is. Mine, for example, is at X: -330.0, Y: 0.0.
  9. Now you can make the movie clip timeline as long as you want. Put a keyframe (F6) at the end of each layer. Both layers must be the same length.
  10. In the keyframes at the END of each layer, move the symbol exactly the width of itself to the right. That is, my Starfield at X: 0, Y: 0 moves to X: 330.0, Y: 0.0 -- AND my Starfield at X: -330.0, Y: 0 moves to X: 0.0, Y: 0.0.
  11. Put a tween on each layer.

Voilà! The main trick is placing two instances of the same symbol side-by-side and then animating them precisely. If they are smaller than the viewing area, or if you do not use the 0, 0 coordinates as instructed, it will not work.

If you followed the instructions, you will see one little hesitation in the scrolling animation. That is easy to fix. Here's how:

Illustration: Timeline of movie clip

Go to the end of the timeline inside the movie clip. Make a new keyframe (F6) one frame to the LEFT of the keyframe at the end of each layer.

Illustration: Timeline of movie clip

Then remove the original last keyframe from the end of each layer.

What you're doing is eliminating the frame that is identical to frame 1 in each layer. That is what caused the hesitation.

If you want to know even more about scrolling backgrounds, read on.

> More tips