Saturday, June 24, 2006

Flash: Parallax (multi-plane) scrolling with ActionScript (Version 2)

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 &&
_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


Post a Comment

<< Home