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 ) {
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

If you have found this post valuable, please share it with others: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Facebook
  • del.icio.us
  • Google
  • StumbleUpon
  • TwitThis

A note about the author

Photograph of Stephen JamesI love working in a field that changes every day. I am a web developer/designer with an agency background. I have empathy for the user first, then developers, then machines. I follow web standards, coding conventions, then, I do whatever it takes to make it work. Visit my contact page, even if you would just like to say hello. To stay in touch, follow me on Twitter

2 Responses to “Flash: Parallax (multi-plane) scrolling with ActionScript (Version 2)”

  1. Alex Says:

    awesome

    how would you get the objects to go towards the direction of your mouse instead of the opposite way.

  2. Stephen James Says:

    Attached to middlegroundScrollContent change _x = (_x + (-endX -_x) / 15); to _x = (_x + (endX -_x) / 15); so it it takes positive endX instead of negative endX as part of the equation.

Leave a Reply

You must be logged in to post a comment.


My Sites

Books Now Reading

  • Unfortunately, Amazon Web Services (AWS) has disabled wishlist requests. Please visit their site to view my Amazon Reading List.