AS3 Parallax Engine Source Code (937)
A recent project required me to set up a parallax system, of which I’ve done a hundred times probably, starting with AS1. However, I’d never built a class to handle this rather simple functionality. With this project request, I thought that I’d just re-purpose my AS3 Auto-Panning Class. However with my Auto-Panning Class, I realized I’d have to create Auto-Panning instances for each layer of the parallax system which seemed a bit much. I went ahead and moved forward with that, but then realized my Auto-Panning Class is set up to run an ENTER_FRAME event upon mousing over an invisible button. Needless to say, stacking Auto-Panning instances wouldn’t allow lower depths to become mouse-interactive. So, I scrapped that idea and built a rather simple parallax system.
I built the first class which works fine, but knew there were a few other capabilities that I should explore. So, I sub-classed my ParallaxEngine Class and created two additional Classes. One class will allow the parallax plates (any of the layered DisplayObjects within the parallax instance) to return to their predetermined x,y positions if the mouse leaves the designated mouse-active area. Another Class will allow the plates to continue moving slightly and ease to a stop when the mouse leaves the designated mouse-active area.
I’ve provided ASDocs with this set of files along with the FLA and source code – enjoy!
AS3 Parallax Engine Source Code (937)
13 Comments
Fetching the coordinates also works, but not as smooth.
something similar to this, with an eventListener…
2
3
return _plates[plateNum].x;
}
Yeah, you’ll have to modify/hack the system to hardcode the width and height of your plates. In the ParallaxEngine.as file, there is a public method addPlate(); You’ll see displayobj.width / displayobj.height, you’ll need to manually set those — maybe you set up that addPlate method to accept two more arguments, a hardcoded width and height like addPlate(yourObj, objW, objH), and use those in place of displayobj.width/height. Hope this helps.
The setup I’m working on requires *animation.
Is there a way to give the system predefined dimensions? i.e 1000 x 1000
Or maybe I can fetch the X & Y coordinates, then align my animations MC.?
You can add buttons to the plates, you just have to be sure that your plates don’t have transparent backgrounds (a transparent png)—if they do, and they’re above the plate with the buttons, then you’re cursor will be blocked from interacting with the buttons on the lower plate. You should be able to play around with mouseChildren and mouseEnabled to allow your cursor to access buttons on a lower plate. As far as it breaking your app, I’m guessing it’s the way you’ve implemented it. I’m not sure how it could ‘break’ your app. Here is an version with buttons working, see the bottom most example when publishing the swf—the button code is in the Doc.as file: http://lextalkington.com/blog/flash/parallax_with_buttons.zip
As far as animated clips, those may make it work strange. The system gets the width/height of each plate to determine where to stop a plate when it reaches an edge. If there is an animated clip in there, the first frame of that clip will be different than later frames, so the system won’t be able to determine an accurate width/height.
Can you add buttons and animated MC’s to the plates?
This seems to be breaking my app. Any suggestions on how to resolve this issue? Please feel free to contact me.
sweet!
Awesome class, easy to use, zero problems. Love it!
Glad to hear it’s working!
nevermind! got it to work
I assumed that because I was putting png’s into my layers with transparent areas, that they wouldn’t block layers below. thanks for posting this project – it rocks
Hi Ben, I believe I’ve used it with interactive elements, let me set up an example, but may have to be tomorrow. Depending on which ‘plate’ or layer you’re adding interactive elements too and depending on what is in the plates, could it be that one plate is covering the interactive items within another? For example, I higher level item has a transparent background so the mouse isn’t able to trigger events on objects below? If that could be the case, you might set one of your top plates too: yourPlateClip.mouseEnabled = false; Again, I’ll post an example when I can get to it.
have you had any luck adding interactive elements to the individual parallax layers? I’m trying to add a hotspot/button and can’t get any mouse interaction on it. flummoxed!
Hi Dan, I believe the problem is that you’re adding the parallax object to the Display List twice as it should work fine within a sprite or parent object.
2
3
4
5
6
addChild(mc);
var createParallax: ParallaxInertia = new ParallaxInertia(newAdjustedWidth, newAdjustedHeight, 0.09, ParallaxEngine.BOTH_AXIS);
createParallax.addPlate(tabThumbnail[currentIndex]);
mc.addChild(createParallax);
createParallax.start();
So, I removed this ‘addChild(createParallax);’ and make sure your mc instance has been added to the stage. Hope this helps.
Is there a way to put parallax in a container mc?
ex:
var mc:Sprite = new Sprite();
createParallax = new ParallaxInertia(newAdjustedWidth, newAdjustedHeight, 0.09, ParallaxEngine.BOTH_AXIS);
createParallax.addPlate(tabThumbnail[currentIndex]);
addChild(createParallax);
createParallax.start();
mc.addChild(createParallax);
I tried is not display on stage.