AS3 Parallax scrolling

programming flash
1

A while ago I created a website with as3 parallax scrolling with the mouse.
The code works, I only want to make some changes and I have no idea how…
This is my current code:

function constrainedLandschap(target:MovieClip, speed:Number, dir:int){
var mousePercent:Number = mouseY / stage.stageHeight;

stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);

function panImage(E:MouseEvent):void {
	var mSpeed:Number;
	mousePercent = mouseY / stage.stageHeight;
	if (dir == 1) {
		mSpeed = mousePercent;
	} else {
		mSpeed = 1 - mousePercent;
	}
	target.destY = Math.round(-((target.height - stage.stageHeight) * mSpeed));
	if(target.hasEventListener(Event.ENTER_FRAME)){
		target.removeEventListener(Event.ENTER_FRAME, del);
	}
	target.addEventListener(Event.ENTER_FRAME, del);
	E.updateAfterEvent();
}

function del(E:Event):void {
	if (Math.abs(target.y - target.destY) <= 1) {
		target.y = Math.round(target.destY);
		target.removeEventListener(Event.ENTER_FRAME, arguments.callee);
	} else {
		target.y += (target.destY - target.y) * (speed / 100);
	}
	
	    
if(landschap_mc.y > bounds.top){
    landschap_mc.y = bounds.top;
}
if(landschap_mc.y <- landschap_mc.height + bounds.bottom){
    landschap_mc.y =- landschap_mc.height + bounds.bottom;
}
}

Now, the thing I want to change is that it reacts more to the boundaries then to the mouse.
So the closer you get to the boundaries, the faster it scrolls…

Can anyone help me with this?

2

Weird, this code looks like a somewhat distorted version of this code I wrote in 2006.

So you want what… for the image speed to be based on the mouse speed, or what?

3

Probably. I used multiple codes to create my own code, so it worked best for me.

No the problem is that every movement the mouse makes on the stage reacts to the image position. So if you go up with the mouse, the image goes down and otherwise.
You should know, you wrote the biggest part.

Only i want that when the mouse is on the stage and you move it, the images stay in their positions untill the mouse comes closer to the boundaries(top and bottom). A great example can be found on coraline.com.

4

Well, it looks to me like they have a sort of two-layered system for moving their parallax environment. The first is just two regions on either side (and probably for the top, too, or bottom when you’re at the top) that are boundaries for constant-speed motion.

That’s easy to do:

if(mouseX < leftSideBoundary) addEventListener('enterFrame', function():* { 
    if(parallaxCamera.x > 0) parallaxCamera.x --= speed
})
if(mouseX > rightSideBoundary) addEventListener('enterFrame', function():* {
    if(parallaxCamera.x < stage.stageWidth) parallaxCamera.x += speed
})

Then it seems like there’s another layer of reasoning, which does something like what my image pan code does. It’s a more subtle effect, and only happens within the central section. Looks like they use a tween to a destination, and the destination is essentially a percentage of whatever hidden rectangle boundary they have. That’s sort of represented by the smaller gradient in my image, except the position of the gradient is really more in the center.

Anyhow, if you look at a disassembly of their code, they’re clearly using a bunch of Papervision3D stuff to control for the perspective of each of the objects in the scene… so if you want that you’ll have to write it yourself or use something like Papervision.

5

Well somehow after a few changes of my code it works fine…
Sorry, I didn’t use your code, there were some errors that I couldn’t solve.

This is my final code:

import flash.geom.Rectangle;
import flash.events.Event;

var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
var invisible:Rectangle = new Rectangle(0, 0, 899, 100);

constrainedKasteel(kasteel_mc, 5, 1);
constrainedBos(bos_mc, 5, 1);
constrainedDorp(dorp_mc, 5, 1);

//--------------Parallax laag 1----------------//
function constrainedKasteel(target:MovieClip, speed:Number, dir:int){
var mousePercent:Number = mouseY / invisible.height;
var speed:Number = 30;

stage.addEventListener(MouseEvent.MOUSE_MOVE, panImage);

function panImage(E:MouseEvent):void {
	var mSpeed:Number;
	mousePercent = mouseY / invisible.height;
	if (dir == 1) {
		mSpeed = mousePercent;
	} else {
		mSpeed = 1 - mousePercent;
	}
	target.destY = Math.round(-((target.height - stage.stageHeight) * mSpeed));
	if(target.hasEventListener(Event.ENTER_FRAME)){
		target.removeEventListener(Event.ENTER_FRAME, del);
	}
	target.addEventListener(Event.ENTER_FRAME, del);
	E.updateAfterEvent();
}

function del(E:Event):void {
	if (Math.abs(target.y - target.destY) <= 1) {
		target.y = Math.round(target.destY);
		target.removeEventListener(Event.ENTER_FRAME, arguments.callee);
	} else {
		target.y += (target.destY - target.y) / (speed);
	}
	    
if(kasteel_mc.y > bounds.top){
    kasteel_mc.y = bounds.top;
}
if(kasteel_mc.y <- kasteel_mc.height + bounds.bottom){
    kasteel_mc.y =- kasteel_mc.height + bounds.bottom;
}
}

}
I created an invisible rectangle where the mouse scrolls.
Somehow it works just the way I want now…

But many thanks anyway for helping me!