Parallax Panning Effect w/ Easing

programming flash
1

Hello Kirupa Community,
I’ve been working hard to achieve a parallax panning effect like the one seen here www.mauriciostudio.com . Unfortunately the closest i have come is www.nickhelm.info/lsc/default.html

Mine is rather choppy and doesn’t provide the easing that Mauricio has included in his.

If anyone is able to provide insight on how to properly achieve this effect, please do! Your efforts are much appreciated. Thank you!

My code is provided below:

import flash.events.MouseEvent;
import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;

//Algorithm: init - end = x / time = z * 2 = g
//Position = g + init

var mX:uint = 512;
var mY:uint = 384;

var clip1Xinit:int = -1328;
var clip1Xend:int = 2652;
var clip1Yinit:int = -70;
var clip1Yend:int = 2025;

var clip2Xinit:int = -800;
var clip2Xend:int = 1600;
var clip2Yinit:int = -136;
var clip2Yend:int = 1348;

var clip3Xinit:int = -534;
var clip3Xend:int = 1064;
var clip3Yinit:int = -125;
var clip3Yend:int = 912;

var clip4Xinit:int = -338;
var clip4Xend:int = 675;
var clip4Yinit:int = -85;
var clip4Yend:int = 542;

var BgXinit:int = 150;
var BgXend:int = 1030;
var BgYinit:int = -340;
var BgYend:int = 0;

var clip1Xratio:Number = (clip1Xend - clip1Xinit)/3;
var clip1Yratio:Number = (clip1Yend - clip1Yinit)/4;

var clip2Xratio:Number = (clip2Xend - clip2Xinit)/3;
var clip2Yratio:Number = (clip2Yend - clip2Yinit)/4;

var clip3Xratio:Number = (clip3Xend - clip3Xinit)/3;
var clip3Yratio:Number = (clip3Yend - clip3Yinit)/4;

var clip4Xratio:Number = (clip4Xend - clip4Xinit)/3;
var clip4Yratio:Number = (clip4Yend - clip4Yinit)/4;

var BgXratio:Number = (BgXend - BgXinit)/3;
var BgYratio:Number = (BgYend - BgYinit)/4;
;

var clip1X:Number = clip1Xinit + (1.5*clip1Xratio);
var clip1Y:Number = clip1Yinit + (2*clip1Yratio);
clip1.x = clip1X;
clip1.y = clip1Y;

var clip2X:Number = clip2Xinit + (1.5*clip2Xratio);
var clip2Y:Number = clip2Yinit + (2*clip2Yratio);
clip2.x = clip2X;
clip2.y = clip2Y;

var clip3X:Number = clip3Xinit + (1.5*clip3Xratio);
var clip3Y:Number = clip3Yinit + (2*clip3Yratio);
clip3.x = clip3X;
clip3.y = clip3Y;

var clip4X:Number = clip4Xinit + (1.5*clip4Xratio);
var clip4Y:Number = clip4Yinit + (2*clip4Yratio);
clip4.x = clip4X;
clip4.y = clip4Y;

var BgX:Number = BgXinit + (1.5*BgXratio);
var BgY:Number = BgYinit + (1.5*BgYratio);
Bg.x = BgX;
Bg.y = BgY;

var gsc:Number = .05; //For converting speed to smaller scale

var clip1Xspeed:Number = gsc;
var clip1Yspeed:Number = gsc;

var clip2Xspeed:Number = gsc*(clip2Xratio/clip1Xratio);
var clip2Yspeed:Number = gsc*(clip2Yratio/clip1Yratio);

var clip3Xspeed:Number = gsc*(clip3Xratio/clip1Xratio);
var clip3Yspeed:Number = gsc*(clip3Yratio/clip1Yratio);

var clip4Xspeed:Number = gsc*(clip4Xratio/clip1Xratio);
var clip4Yspeed:Number = gsc*(clip4Yratio/clip1Yratio);

var BgXspeed:Number = gsc*(BgXratio/clip1Xratio);
var BgYspeed:Number = gsc*(BgYratio/clip1Yratio);

function stageMove (e:Event) {
	if(!((mouseX >= 72 && mouseX <= 948) && (mouseY >= 72 && mouseY <= 660))) {
	// First Layer
		if(clip1.x >= clip1Xinit && clip1.x <= clip1Xend) 
			clip1.x += -(mouseX-mX)*clip1Xspeed;
			clip1.y += -(mouseY-mY)*clip1Yspeed;
		{
			if(clip1.x > clip1Xend)clip1.x = clip1Xend;
			if(clip1.x < clip1Xinit)clip1.x = clip1Xinit;
			if(clip1.y > clip1Yend)clip1.y = clip1Yend;
			if(clip1.y < clip1Yinit)clip1.y = clip1Yinit;
		}
	// Second Layer
		if(clip2.x >= clip2Xinit && clip2.x <= clip2Xend) 
			clip2.x += -(mouseX-mX)*clip2Xspeed;
			clip2.y += -(mouseY-mY)*clip2Yspeed;
		{
			if(clip2.x > clip2Xend)clip2.x= clip2Xend;
			if(clip2.x < clip2Xinit)clip2.x = clip2Xinit;
			if(clip2.y > clip2Yend)clip2.y = clip2Yend;
			if(clip2.y < clip2Yinit)clip2.y = clip2Yinit;
		}
	// Third Layer
		if(clip3.x >= clip3Xinit && clip3.x <= clip3Xend) 
			clip3.x += -(mouseX-mX)*clip3Xspeed;
			clip3.y += -(mouseY-mY)*clip3Yspeed;
		{
			if(clip3.x > clip3Xend)clip3.x= clip3Xend;
			if(clip3.x < clip3Xinit)clip3.x = clip3Xinit;
			if(clip3.y > clip3Yend)clip3.y = clip3Yend;
			if(clip3.y < clip3Yinit)clip3.y = clip3Yinit;
		}
	// Fourth Layer
		if(clip4.x >= clip4Xinit && clip4.x <= clip4Xend) 
			clip4.x += -(mouseX-mX)*clip4Xspeed;
			clip4.y += -(mouseY-mY)*clip4Yspeed;
		{
			if(clip4.x > clip4Xend)clip4.x= clip4Xend;
			if(clip4.x < clip4Xinit)clip4.x = clip4Xinit;
			if(clip4.y > clip4Yend)clip4.y = clip4Yend;
			if(clip4.y < clip4Yinit)clip4.y = clip4Yinit;
		}
	// Background Layer
		if(Bg.x >= BgXinit && Bg.x <= BgXend) 
			Bg.x += -(mouseX-mX)*BgXspeed;
			Bg.y += -(mouseY-mY)*BgYspeed;
		{
			if(Bg.x > BgXend)Bg.x= BgXend;
			if(Bg.x < BgXinit)Bg.x = BgXinit;
			if(Bg.y > BgYend)Bg.y = BgYend;
			if(Bg.y < BgYinit)Bg.y = BgYinit;
		}
	}
}
	
//-------------------------------------------------------------------------