Parallax effect is widely used in games but its also used in websites to give that awesome feel to it… its not just like you would just use it because its cool but you’ll have to define the purpose behind using it ( it might be just useless ).
below is a demo of one way of doing it, i might do another one that wont require greensock or any tweening engine to get the same effect, & by the way im using TweenNano which is a very light version of TweenMax.
Edit:
Demo | Download
import com.greensock.TweenNano; import com.greensock.easing.*; //ease type var easeType = Expo.easeOut; //xmouse will hold x position of the mouse in relation to the center of the stage. //assuming that the stage center's value is 0; var xmouse:Number = 0; // percentage of the xmouse position var xPct:Number = 0; // speed or durationl var speed:Number = 2; // add event listener based on mouse movement stage.addEventListener(MouseEvent.MOUSE_MOVE, render); function render(e:MouseEvent):void { //if xmouse pos is greater than the center of the stage if( e.stageX > stage.stageWidth/2) { xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512 } else { xmouse = ((stage.stageWidth/2) - e.stageX); //512 } xPct = Math.round ((xmouse/stage.stageWidth) * 200); //where will the sky moveclip move to... var skyXto:Number = ((xPct/100) * (sky_mc.width - stage.stageWidth)/2) + stage.stageWidth/2; TweenNano.to(sky_mc,speed, {x:skyXto, ease:easeType}); var fieldXto:Number = ((xPct/100) * (field_mc.width - stage.stageWidth)/2) + stage.stageWidth/2; TweenNano.to(field_mc,speed, {x:fieldXto, ease:easeType}); var grassXto:Number = ((xPct/100) * (grass_mc.width - stage.stageWidth)/2) + stage.stageWidth/2; TweenNano.to(grass_mc,speed, {x:grassXto, ease:easeType}); }
Hello Moe,
Thanks for sharing your Parallax scrolling technique.
I’ve recently discovered TweenLite/Max/Nano and have been looking to create a similar effect to what you have done here. Only difference really is I wanted some up and down movement as well as side to side. Using your code I’ve created a y-axis version substituting y’s for x’s and heights for widths. It works perfectly independently however when incorporated into your script to combine both movements it just goes
scrolls up and down – no side to side. Any idea why that would happen?
Thanks for any help in advance,
Moth
here’s the code:
//parallax scrolling code—————————————————————-
//ease type
var easeType = Expo.easeOut;
//xmouse will hold x position of the mouse in relation to the center of the stage.
//assuming that the stage center’s value is 0;
var xmouse:Number = 0;
var ymouse:Number = 0;
// percentage of the xmouse position
var xPct:Number = 0;
var yPct:Number = 0;
// speed or duration
var speed:Number = 5;
// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);
function render(e:MouseEvent):void
{
//if xmouse pos is greater than the center of the stage
if( e.stageX > stage.stageWidth/2) {
xmouse= -(e.stageX -stage.stageWidth) – stage.stageWidth/2;
}
else
{
xmouse = ((stage.stageWidth/2) – e.stageX);
}
xPct = Math.round ((xmouse/stage.stageWidth) * 200);
//where will the sky moveclip move to…
var skyXto:Number = ((xPct/100) * (sky_mc.width – stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(sky_mc,speed, {x:skyXto, ease:easeType});
var fieldXto:Number = ((xPct/100) * (field_mc.width – stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(field_mc,speed, {x:fieldXto, ease:easeType});
var grassXto:Number = ((xPct/100) * (grass_mc.width – stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(grass_mc,speed, {x:grassXto, ease:easeType});
//if ymouse pos is greater than the center of the stage
if( e.stageY > stage.stageHeight/2) {
ymouse= -(e.stageY -stage.stageHeight) – stage.stageHeight/2; //-512
}
else
{
ymouse = ((stage.stageHeight/2) – e.stageY); //512
}
yPct = Math.round ((ymouse/stage.stageHeight) * 200);
//where will the sky moveclip move to…
var skyYto:Number = ((yPct/100) * (sky_mc.height – stage.stageHeight)/2) + stage.stageHeight/2;
TweenNano.to(sky_mc,speed, {y:skyYto, ease:easeType});
var fieldYto:Number = ((yPct/100) * (field_mc.height – stage.stageHeight)/2) + stage.stageHeight/2;
TweenNano.to(field_mc,speed, {y:fieldYto, ease:easeType});
var grassYto:Number = ((yPct/100) * (grass_mc.height – stage.stageHeight)/2) + stage.stageHeight/2;
TweenNano.to(grass_mc,speed, {y:grassYto, ease:easeType});
}
Hey Moth,
You are welcome!
You can pass an array of properties to the Tweenano function, try the following:
TweenNano.to(MovieClip,speed, {y:YtoValue, x:XtoValue, ease:Expo.easeOut});
so basically you’ll be passing multiple ( X & Y ) movieclips properties & values via a single call rather than two.
hope that works 🙂 let me know.
Hello again,
Wow! Thanks for the quick reply… and yes! You were right. By putting both of the x and y properties into a single Tween function, it worked perfectly.
Thanks again for all your help!
Moth
Glad to know it fixed it!
Keep on scripting 🙂
Hey there, Great tutorial. Very useful. I’ve got it working great but when I try to load that swf into another swf the animation doesn’t work. Do I need to move all the code into the main swf? Any ideas?
The error I get is:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at nct1_fla::MainTimeline/frame1()
Don’t worry about it. I figured it out. For those of you in the future who have the same problem it’s because at the time of loading the embedded swf doesn’t have access to the stage yet. Here’s the modified code to fix this:
// add event listener based on mouse movement after the swf has been loaded
this.addEventListener(Event.ADDED_TO_STAGE, addedHandler);
function addedHandler(event:Event):void
{
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);
}
Yeah, I’m a bit of a sloppy hack when it comes to scripting but it works;)
Well done Sean, that isn’t sloppy at all.
Hello!
Would you be so kind to re-upload the source files (.fla)
Thanks in advance,
Best,
Hank.
Hey Hank, looks like I’ve lost the file when I moved to a new hosting provider, I will be syncing in the file from the old provider, kindly check within a day or two.