Flash: Parallax (multi-plane) scrolling with ActionScript

*NOTE: This explanation of parallax scrolling differs from the current (June '06) MB2 site. I will be posting a new version that is proportional scrolling (proportional to the size of the site, that is if the user's mouse is to the far right the scrolling is to the far right). See new post.

I finally got the parallax scrolling in Flash working on the MB2 site.

Parallax (or multi-plane) scrolling simulates a 3D camera moving. Objects far from the eye (backgrounds like sky or mountains) appear to move slower than objects close to the eye (foregrounds like the moving road below you when you are driving).

There are two ways to create parallax scrolling. One is to have three objects. One in the foreground, middleground, and background. If the camera is moving to the left, the foreground and the middle ground moves to the right (opposite direction), while the background move to the left (same direction). All three move at different speeds with the background moving the slowest and the foreground moving the fastest. The closer an object is to the viewer the faster an object appears to move. Here is an example of this at the Macromedia Website. (If this link doesn't work, you can view this snapshot.

The desk moves the fastest, the wall moves slower, and the buildings through the window do not move at all.

Here is a published movie that should explain the previous text.

Here is the source file (in flash 7) for paralax scrolling. I will clean it up and add explanations as time allows.


--Stephen M. James
www.smjdesign.com