Creating parallax (depth of field, usually with movement) is one of my favorite effects. Â It gives a nice sense of space and allows you to draw your eye to certain areas. Â What I like about this demo is the fact that I’m using video of a 3D object making the parallax even more convincing. Â Notice how you can see the left side of the skull when your mouse is on the right side? Below is the code, but you can also download the source file here.
/*----------------------------------------------------------------
Variables
----------------------------------------------------------------*/
//Get the center of the stage
xStageCenter = Stage.width/2;
/*----------------------------------------------------------------
Functions
----------------------------------------------------------------*/
this.scrollmyForeground = function():Void {
//
//MOVE THE TWO MOVIECLIPS BASED ON THE MOUSE POSITION
distanceToTravel = this._xmouse-xStageCenter;
myForeground._x -= distanceToTravel/100;
myBackground._x += distanceToTravel/60;
//
//ANIMATE THE "myForeground" MOVIECLIP
//Variable that returns anything between -20 and 20
var myMovement:Number = Math.round(myForeground._x/10);
//Then add 20 to that number
myMovement += 20;
//Whatever the number is, go to that frame in the timeline
myForeground.gotoAndStop(myMovement);
};
/*----------------------------------------------------------------
Run Immediately
----------------------------------------------------------------*/
clearInterval(scrollInterval);
scrollInterval = setInterval(this, "scrollmyForeground", 30);