Recently, i have been missing from the blog, because besides of christmas getting nearer – which usually takes a lot of stress, i have been focusing on new projects.
First of all, i am programming some games for Facebook. They will be released under the brand NaiveBook, that will take back from past to life the old Naive project. For those not knowing, Naive.it was a site made by me, Marco Quintavalle and Marco Fresta. It was quite popular, and we presented from 2000 to almost 2006 a flash portal with flash games made by us, that all shared a common naive taste. Some of you can remember MoneyMoneyMoney, or Pumpkin’s Ballade, or even the later ones, like Equilibrium. Maybe i will write a post about facebook flash apps creation process, that I found miserable :) imho, obviously.
On the other hand, work at Egolab has become harder as xmas approaches, just like happens every year.
Anyway.
I found the time to release an AS3 ParallaxBox class, because I noticed some of you asked for it, in the comments for the AS2 version. So here it is. I decided to change the class name from Container to Box, just because I like it more :)
This is an example.
As you can see, this class allows you to consider a movieclip as a ParallaxBox. A ParallaxBox is a container in which two or more elements moves in parallax one with other. You can define wings for any elements. The wing is the maximum movement in pixel the object can do. Ie. if you set the wing of an object as 100, 50, it means the object will move at most 100 pixel on the x axis and 50 on the y one. If you need pixel-precision, there is a pixelhinting boolean for this.
This is the code that makes it all possible:
1 2 3 4 5 6 7 8 9 10 11 | pc.addItem("level1", 200, 30, false); pc.addItem("level2", 120, 10, false); pc.addItem("level3", 70, 2, false); pc.xrate = 6; pc.yrate = 8; pc.mode = ParallaxBox.BOTH; pc.blurred = true; pc.start(); |
Some new features of the class are:
- AS3 makes it faster!
- You can add any number of parallax layers. The elements are added with the method addItem. The addItem method takes four parameters, clipname (the instance name), x-wing and y-wing and pixelhinting.
- You can define the ParallaxBox property to set if using blur on movement, or the movement rate.
Of course, this is still at start. It can be modified in every way, please let me know you needs.
Here is the zip package (a cs3 fla, a swf and the as class file)
See you soon, with facebook flash game programming and great news.
44 Comments
thx for the post; awsome update to a very useful class. regarding developing for platforms, any thoughts on Flash’s future in mobile content? (iPhone/Android)
Oddly enough, this keeps crashing my copy of Flash CS3 – never had Flash crash before.
sam: thank you! Reguarding Android and iPhone, i have not already started playing with them, although i might start someday, if they become standards :)
bob: well, flash hanging with this is quite strange. can you tell me more? try setting the blurred property to false, anyway, that should reduce the calculation amount. I have tested this on some other computers but no crash.
Hi, I recently installed parallaxbox and am using it on our site. It is working great, however I have noticed that when you click off of the window twice, everything disappears and all you can see is the background. I am wondering, is there any way to correct this issue? Thanks.
Here is a link directly to the file: http://www.arkmediagrp.com/FIREFLY/images/stories/videos/parallax3_main.swf
hi ark, i tried your swf but i cannot recreate the condition you mentioned. however, in the class file, i don’t use the MouseEvent.CLICK, nor the MOUSE_DOWN. Are you sure this code isn’t added to your fla or that you modified the class? Last question, on which system and which browser are you using? maybe it will help us spot the cause. in the meanwhile, have a good new year!
For some reason we cannot recreate the condition on a pc in any browser but it is happening in all browsers on our macs. Any ideas?
this blog in my favorite :)
again a special thanks for your work !^^
Awesome updates to a very useful class. Thanks for all of your contributions to the community.
Hello.
I´m using your class, it is just great. But I´m experiencing a little issue with that ‘hwing’.
I want to put a limit on the movement of the pieces, like, to not allow a certain object to go too far, beyond the stage.
How can I put a limit on it?
Let’s try to work on it together.
hi adriano,
the task is very easy, i will give you just some hints here, because i am not home today. if you cannot fix it, please leave another comment, and i will help you more.
you have to change the two methods named addItem and onFrame.
addItem takes care of storing the data of your object, while onFrame is about rendering the real position on the screen.
To do as you want, you have first to change the addItem function to store limits for every added item. (say hmin, hmax, vmin, vmax)
Then simply modify the onFrame function to check if the new x or y computed is not minor nor major than the limits you set for that particular object. (lines 104 and 114)
remember to store limits in theObjects array, that contains all the objects.
hope this help!
Hi Flesh,
Thanks so much for providing this amazing file, I’m fairly new to actionScript,I have downloaded and used your Class file and it works great except, as soon as you click away from the window everything disappears I tried followinf your advise to Adriano and nothing changes…Please help I’m on a deadline
Thanks
Mady
Hi, nice class. I’m going to use this to work on my next project. I got one question if I want to add a zoom like http://www.hostway.com/bobscube/ any idea how to achieve that effect ?
Thanks in advance.
Sacen
I’m having the same problem as Mady (@11) and Ark (@4). Seemingly if you click whilst away from the browser the layers shoot off the screen (sometimes down, sometimes to the left… I’m assuming it’s relative to your mouse pointer). I’ve not modified the class at all (apart from what i describe in the next paragraph) and I’m using Mac OS X (Leopard) with Safari (also does it in Firefox however).
I actually expanded the class to have a MOUSE_LEAVE event listener to pause the ParallaxBox whilst the mouse isn’t over the movie to try and fix this problem, but it still does it!
Great shame because it’s a fantastic class otherwise.
Cheers
Steve
Hey Steve,
Any luck getting it to work? I’m also trying to stop the parallax from moving when mouse out of the MC. If you find the solution please let me know.
Cheers
Sacen
Great Class Flesh!
Steve was on the right path. You just have to add an event listener for a MOUSE_MOVE event and then detect according to the mouse coordinates when to resume the parallax functionality. Just paste the code below on the main timeline.
======================================
import flash.events.Event;
import flash.events.MouseEvent;
function Start() {
stage.addEventListener(Event.MOUSE_LEAVE, offStage);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStage);
}
function offStage(e:Event):void {
pc.pause();
}
function onStage(e:MouseEvent):void {
if(stage.mouseX > stage.x &&
stage.mouseX stage.y &&
stage.mouseY < stage.y + stage.stageHeight)
{
pc.start();
}
}
Start();
======================================
Thanks Danilo
I’ll give this a try
Cheers
Hi Danilo
I got an 1084: Syntax error: expecting rightparen before stage.
stage.mouseX stage.y &&. error, I just copy and paste to the main timeline. Please help. The following are the code
Cheers
// —————————————> Parallax stage.x &&
stage.mouseX stage.y &&
stage.mouseY < stage.y + stage.stageHeight)
{
pc.start();
}
}
Start();
Sorry for the double post.
======================================
//control the viewable area of each item.
pc.addItem(”level1″, 500, 470, false);
pc.addItem(”level2″, 550, 480, false);
pc.addItem(”level3″, 410, 490, false); // x,y
// moving rate of x and y
pc.xrate = 3;
pc.yrate = 3;
pc.mode = ParallaxBox.BOTH;
pc.blurred = false; // use ” ture ” and “false”
//Anable and disable parallax with : ” pc.start(); and pc.pause() ”
pc.start();
import flash.events.Event;
import flash.events.MouseEvent;
function Start() {
stage.addEventListener(Event.MOUSE_LEAVE, offStage);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onStage);
}
function offStage(e:Event):void {
pc.pause();
}
function onStage(e:MouseEvent):void {
if(stage.mouseX > stage.x &&
stage.mouseX stage.y &&
stage.mouseY < stage.y + stage.stageHeight)
{
pc.start();
}
}
Start();
======================================
Hello, Thanks for the amazing class. but I am having a little trouble with it. I am just trying to add a click event to the clips inside the parallax container and then using tweener move them off the stage and animate another clip in.
I get error message:ReferenceError: Error #1065: Variable Tweener is not defined.
at test_fla::MainTimeline/onClick()
this is my code its simple but I can’t solve it. Appreciate your help.
import caurina.transitions.*;
pc.level3.addEventListener(MouseEvent.CLICK, onClick);
function onClick(evt:MouseEvent):void{
Tweener.addTween(box, {x:10, time:1, transition:”linear”});
//trace(pc.box.x);
}
Thanks again
Hi,
Thanks for this class! I’ve applied it to some compositions and it works great. I would really like to modify it to do a center rotation parallax and am wondering if you think this is possible and could help point me in the right direction how to do it.
By center rotation parallax, I am referring to the effect on some of the pages on the Coraline website like this:
http://coraline.com/#/?page=bobinsky&subPage=0
and this:
http://coraline.com/#/?page=spink_foyer&subPage=0
where the motion seems to do a subtle rotation around a central point toward the back of the frame. I am pretty new to action script and have no idea how to accomplish this on my own. Any help would be greatly appreciated.
Thanks!
Mary
Fleshmaker, thank you so much for releasing this class. It’s very well done.
I’m also having trouble resolving the off screen issue. Has anyone found a solution? I’ve tried to follow the method in comment #10 but ran in to some problems. I’m not too familiar with as3.
Any help is appreciated. Cheers
Please Help,
I’ve been trying for 18 hours on the most basic step… How to import the class… why is there there no info on that anywhere on adobe site, or in Flash Help
Very cool this one!
Congratulations for the nice result and thank You for sharing!
Hi,
I haven’t been on here for a while but I think I’ve finally solved the problem in a slightly different way to Danilo that may or may not be useful to anyone using the class.
What I found out (for a different project) was that MOUSE_MOVE seems to active when you MOUSE_DOWN as well, so for instance I was creating a video player who’s controls faded out when the mouse left the stage but I found that when the user was clicking, or selecting text, etc on other parts of the site the controls would appear. This got to me to using a hitTestPoint() with the mouse and stage to make sure that the user’s mouse was actually interacting with the Flash movie, and to cut a long story short it worked like dream.
So I thought I’d try the same method with the parallax box and it also worked rather nicely. I added this method to the class:
private function isOverStage():Boolean
{
var mouseX:Number = stage.mouseX;
var mouseY:Number = stage.mouseY;
return stage.hitTestPoint(mouseX, mouseY, false);
}
then I wrapped the contents of the onFrame() method already in the class with a simple if statement:
private function onFrame(e:Event):void {
if (isOverStage())
{
[rest of existing code]
}
}
This means that the parallax box will still finish off the movement it started before the mouse left the stage, which I found looked a bit smoother than pausing.
Hope that it helps someone :-)
Cheers
Steve
Bonjour, I’m stuck with something basic.. I think.
I’d like to import the class on different clips.
But the ParallaxBox class (in the library) has to be unique.
Can I rename it “ParallaxBox2″ and change something in the .as ?
Thanks and congratulation!
Is there a way to removeItem or unstore values?
I tried some things..
I use tweenlite to move objects, but as soon as the tween is over, the movieclip move back to the .x stored position.
I changed “ParallaxBox.as” to add myself startx and starty positions. For example:
toto.additem(”level”,80,30,150,200,false);
And I re-addItem with new positions after the tweenlite line
But it never really goes where I want to. It stands quite between stored values and new values..
I wanted to try something else but don’t know how: in the “pause” fonction, adding a reset of the values starty and startx.
The most simple maybe is to create a “removeItem” fonction, I don’t know how to do that..
hi nae
you can add this removeItem method after addItem in the class, then simply calling the method will work.
public function removeItem(s:String):void {
for (var m = 0; m < theObjects.length; m++) {
var o:Object = theObjects[m] as Object;
var mc:MovieClip = o.movie as MovieClip;
if (mc.name == s) {
theObjects.splice(m, 1);
}
}
trace("deleted " + s + " from render queue");
}
then simply use it like below
instanceOfTheClass.removeItem(”level2″);
the function will search the item labeled as level2 and remove it from the queue list!
thank you!
and nae, if you really need to use two ParallaxBox instances, simply fill in the symbol properties window as following:
Class: MyParallax1 (or 2 or everything you want)
Base Class: ParallaxBox
bye!
Hi,
Great script but i have a major problem and wondering if it can be fixed. Namely, I want to add a roll-over mouse event to one of the levels (items). whenever I add an instance name and then call it in the script, the swf crashes upon export. same thing happens when I change movie clips to buttons. is it at all possible to add a mouse event to any of the items?
Nice code! Is there anyway to integrate navigational buttons into the code, for instance a button to go to the left, right and middle of the clip, or would it be a case of inputting manual values?
Hi, how would I go about modifying it so that the scroll only happens at the edges of the stage, not the whole stage?
Hey fleshMaker,
you really saved my life with this. But I have one problem …
My stage is 800×500 big. And the image I want to scroll is 2000px big. What do I have to change so that the image scrolls to the left and the right edge of the image? I’m pretty new to AS3, and I really need help. :(
Thanks!
- Jenny
I added buttons to my Flash file that move the layers to preset locations, once the function is completed, and after a short delay, the movieclips tween back to their previous location. How would I go about getting the new co-ordinates to stick?
I just wanted to say thank you to Steve for figuring out the issue with the image disappearing on a Mac. This has been a problem I noticed years back and thank god some figured it out! Thanks Steve!! And Thanks Flesh Maker for this great Class
Hello, I am pretty new to actionscript. I was wondering how to make it so the parallax movement only happens when the mouse is a certain point past the center of the stage, so it doesn’t move when you are between -50 & 50 (in relation to center of stage). Thank you for an help you can give and thanks for this awesome class!
Hi.. thanks for this code.. :D but I’m having some troubles..
if I use a loader class to load an Swf that have this class.. it loads perfectly.. but if I try to unload it. I have the error TypeError: Error #1009. How can I resolve this?! I try’d unload, removeChild.. but the error still there!!
tnks in advance!!
I just got this class to work on a project of mine, thank you I have been looking for something like this for weeks now.
I have a specific issue that hasn’t been covered yet. At the tail end of my movements I am getting an unwanted vibrating effect, as if my LEVELS are hopping across the pixels, xyxyxy instead of running smoothly, do you have any advice?
Also, I tried to add some of the PAUSE scripts, for users who click away and come back, but I have gotten errors for each one, has anyone found anything that works to solve this problem?
Thanks in advance, you are doing great work here.
I’m trying to apply what Steve(#24) but not sure WHERE IN the class i should put the script he wrote.
ALSO.. a little different… When my mouse is still on the screen.. there is movement from the parallax, even after I’ve stopped mouse movement, the images continue shifting a couple pixels (toward the direction of where the mouse last was, and continues shifting until it’s off stage.
any thoughts?
thanks.
Hi there, first off thank you for an awesome class!!
but i seem to be having a bit of trouble getting it to scroll through out the whole X and Y axis of the image i am using…. im new at action script 3.0
thank you !
Hey, thanks for the tutorial…
I keep getting these errors:
Error #1006: addItem is not a function.
Error #1006: start is not a function.
I just have one question, how do you get it to not automatically start moving when it first loads. I tried adding your isOverStage() method without error but it doesn’t seem to work for this problem. Even in your example .swf at the top of this page, when the page and movie loads, you’ll notice that everything moves quickly to the bottom right. Mine on the other hand moves slightly up and left. What causes this and how do you get rid of it?
Thanks!
PS. Nice script by the way.
THANK YOU SOOOOOOO MUCH!!!
This is very good, but how do you get it to scroll automatically without any mouse interaction? I just want it to begin scrolling when the user opens it. Thanks.
Hi,
first i want to thank you for this great job!
But i think your class consumes a lot of ressources because of the use of the ENTER_FRAME listener, which is not recommended (isn’t it?)
I tried to replace it by using a MOUSE_MOVE listener all over the stage and managing the move with the TweenMax class.
This is really good working now and i am saving 40% of my CPU power (intel core2duo E6850 @ 3Ghz) when the mouse doesn’t move and 10% in action.
I cannot share my code, because it is implemented with my other classes, but i hope this will help you.
Thanks again.
One Trackback
[...] of the OpenCV library, with some modifications. For the parallax part I’ve used a class from Fuori Dal Cerchio, I’ve modified this class so it’s no longer time line [...]