Parallax Management class: create your parallax in a few minutes

Hi all,
i release today a simple class that will make it easy to generate parallax systems. You won’t have to bother about managing the various levels, anymore.
The thing is just easy as saying “wow”.

Just declare a movieclip on your stage as an instance of ParallaxContainer (you will find the ParallaxContainer.as file in the zip), and then add to the render list the object you want to be moved as you move your mouse. It is a good practise to clean the render list every time you create it :)
Then you have to choose if you want the parallax to move horizontally, vertically or both.
However, as long as you have added every movieclip you need, use the start method and go!

This is the code used in the example. Very easy indeed as you can see.

this.clean();
this.addItem(l3, 10);
this.addItem(l2, 30);
this.addItem(l1, 100);
this.set_mode("H");
this.start();

Just a quick reference to the method addItem. The first paramter is the object to move, the second one is the “wing”. The wing is the quantity of pixels the object will move at the maximum limit of the stage (i.e. extreme left / extreme right)

This is the example.

And this, of course, is the zip package to download. Click here.

Have fun!

Dominic said,

July 22, 2008 @ 10:12 pm

pretty neat class, very useful.
good work

romo said,

August 4, 2008 @ 10:44 pm

Hey great class. Can you write a tutorial on how to make this step-by-step. I’m fairly new to this thanks.

Ken Marold said,

August 5, 2008 @ 12:43 am

is the related .fla file of your example available to look at too?

juan said,

August 6, 2008 @ 10:21 pm

same question here…I need the fla file…

Miro said,

August 7, 2008 @ 5:34 pm

It would be great to have the .fla file too! If possible, thanks.

Snatchy Rhino said,

August 8, 2008 @ 3:11 pm

Props to you. This class is awesome !
Rewritten it for AS3. Shout up if anyone wants it.

Jimbo said,

August 26, 2008 @ 4:53 pm

Can you post the AS3 class Snatchy? Thanks

alessandro said,

October 27, 2008 @ 3:16 pm

Hi, I’ve added two methods to your class to move the center of a single MC or to move all MCs together. Enjoy!

private function set_center(mc:MovieClip, x:Number, y:Number):Void {
for (var num in _elementsArray) {
var o:Object = _elementsArray[num];
if (o.clip.name == mc.name) {
o.x = x;
o.y = y;
}
}
}

private function set_centers(x:Number, y:Number):Void {
for (var num in _elementsArray) {
var o:Object = _elementsArray[num];
o.x = x;
o.y = y;
}
}

rudolf said,

October 27, 2008 @ 6:11 pm

hi Valentino!
first and foremost, thanks a lot for your superb work, and it’s very kind of you to share your knowledge!

i’ve got some good flash skills, but when it comes to classes, i’m a noob ;)

man, i passed the last hour trying to make it work and nope… and obviously, it’s ridiculously simple… but i’ll have to bump the other commenters request: what’s the key?

saudações

fleshMaker said,

October 27, 2008 @ 6:32 pm

Alessandro, thank you o wise man! I will add soon your methods to the class.

Rudolf, i cannot get your point. Does it work for you or not?

If not:
a) Check that the movieclip that needs parallax is exported in the library with linkage and a link to the ParallaxContainer class. (i.e. Go in the library -> find your container movieclip -> right click -> linkage -> export for actionscript -> then identifier must not be left empty, and you have to fill class with “ParallaxContainer”
b) Check that all the movieclips inside the container movieclip, has an instance name. So, let’s say you have element1, element2 and element3, you have to add this code in the same timeline.

this.clean();
this.addItem(element1, 10);
this.addItem(element2, 30);
this.addItem(element3, 100);
this.set_mode(”H”);
this.start();

I hope this is clear enough, otherwise please drop me another comment, i will try to be clearer. Thank you!

rudolf said,

October 28, 2008 @ 9:13 am

yes, fleshMaker!
works like a charm

..i was missing this detail: it’s not the identifier that must be “ParallaxContainer”, it’s the class in the linkage… dooo…

thanks a lot for pointing me the right direction
see ya!

pirco said,

October 31, 2008 @ 12:37 am

embarrassed but helpless… I thought I had some flash skills myself, maybe not so much with classes (same like rudolf) but even with those seemingly clear instructions, it’s still not working for me. here’s what I’ve got:

1. root timeline has nothing but one movieclip called “container”. that mc is in the library with linkage name “container” and Class: ParallaxContainer

2. mc “container” has one actionscript frame with
import ParallaxContainer;
this.clean();
this.addItem(front_mc, 10);
this.addItem(middle_mc, 30);
this.addItem(back_mc, 100);
this.set_mode(”H”);
this.start();

3. mc “container” also has three layers, each with a movieclip. each of those movieclips has the proper instance name and is also exported with the same linkage name (so mc “front_mc” has linkage name “front_mc” and instance name “front_mc”. same with the other two)

4. I’ve got the ParallaxContainer.as file in the same directory as my test fla

when I export. I see my movieclips. but no parallaxing…

what am I doing wrong? is there any chance you can post a sample FLA?

thanks!
pirco

rudolf said,

November 2, 2008 @ 12:48 am

hi pirco,
from what i’ve done, the only differences to your example are: i didn’t use “import ParalaxContainer” and my container does’t have an instance name…
i posted a fla*, use with fleshMaker’s class
http://www.rodbuaiz.com/experimentos/paralax.zip

[ .snip. ]
* fleshMaker, i hope u don’t mind with that ;)

i’ve done an implementation for a page i’m developing with your class, it’s great, thanX!!
it’s a movie credit roll
http://www.rodbuaiz.com/experimentos/paralaxCreditos.swf
(scrollbars were collapsing with the height of the movieclip (!))

pirco said,

November 3, 2008 @ 2:55 am

thank you rudolf!! still not sure what I did wrong but I got it now. I swear, I would have eventually figured it out but you saved me some headache.

and nice credit roll. how did you get the inertia in there?

Pasha said,

November 6, 2008 @ 3:31 am

Friend show, art simply super

Marije said,

November 12, 2008 @ 5:11 pm

It would be a great help if there was also an as3 class available, can someone post it? Thanks!

rudolf said,

November 13, 2008 @ 8:10 pm

thanks pirco!
the only tweak i did on the class was this:
var pY:Number = (100/Stage.height) * _ymouse;

it is originaly= (100/(Stage.height/2)) * _ymouse;

rudolf said,

November 13, 2008 @ 11:48 pm

i just found this:
http://www.ffiles.com/flash/physics_and_motion/parallax_management_class_1730.html
i’m removing the zip from my domain
[eom]
again, thanks for all, flashmaker

TheCosmonaut said,

November 19, 2008 @ 7:50 pm

Does anyone have the AS3 version of this class? Would love to have it…

RSS feed for comments on this post · TrackBack URI

Leave a Comment