DesignWell

I have already posted on Parallax (multi-plane) scrolling. Visit the previous post for more information on the process.

This is the script I used on the MB2 site. View a simplified sample movie of the new proportional version.

On the previous post, the scrolling can continue as far as you want. The mouse’s distance from the center of the page controls the speed of the scroll.There is another possible scrolling technique that uses the width of the screen to proportionally control were one is in the scrolling plane (background). This technique is best with smaller (in width) scrolling planes. The sensitivity of the mouse will be to strong if the scrolling plane is too large. This is the technique used by Macromedia in their Experience Studio 8 site (mentioned in previous post).

In this version, the distance of the mouse from the center of the masked window affects the speed. Scrolling will only occur over the distance of the of green gradient of the “middleground.”

The following is the gist of the ActionScript that is attached to movieclip, _root.main_mc.middlegroundContainer.middlegroundScrollContent,
in an onClipEvent handler:

onClipEvent (enterFrame) {
if (_root.objectsScrollable) {
if (_root.main_mc.middlegroundContainer._xmouse -390 ) {
endX = _root.main_mc.middlegroundContainer._xmouse;
}
_x = (_x + (-endX -_x) / 15);
_root.main_mc.foregroundContainer.foregroundScrollContent._x = (_x * 1.75);
_root.main_mc.backgroundContainer.backgroundScrollContent._x = (_x /4);
}
}

Download the source file in Flash MX 2004 format.
Download the published movie in Flash Player 7 format.

–Stephen M. James
www.smjdesign.com

*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