Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
khadesa

Smooth Draggable Background X Axis

Recommended Posts

Hey everybody,

I am trying to make my background scroll smoothly according to the user's drag,

window (stage) is 800 by 480,
background (lvl1_blitmask) is 2400 by 480

 

It's scrolling quite nicely, but not perfectly, it skips and jumps around toward the right side of stage.

It is surely a matter of the maths involved, im afraid i just comprehend where...

Here is the code:
 

function mouseMoveHandler(event: MouseEvent): void {

	if (blitMask.bitmapMode == false) {
		blitMask.enableBitmapMode();
	}

	var x: Number = this.mouseX - xOffset;
	
	if (x > bounds.left) {
		lvl1_blitmask.x = (x + bounds.left) * 0.5;
	} else if (x < bounds.left - xOverlap) {
		lvl1_blitmask.x = (x + bounds.left - xOverlap) * 0.5;
	} else {
		lvl1_blitmask.x = x;
	}
	blitMask.update();
	var t: uint = getTimer();
	//if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
	if (t - t2 > 50) {
 		x2 = x1;
		t2 = t1;
		x1 = lvl1_blitmask.x;
		t1 = t;
	}
	
	event.updateAfterEvent();
	

}

function mouseUpHandler(event: MouseEvent): void {
	

	lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
	lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	var time: Number = (getTimer() - t2) / 1000;
	var xVelocity: Number = (lvl1_blitmask.x - x2) / time;
	ThrowPropsPlugin.to(lvl1_blitmask, {
		throwProps: {
			x: {
				velocity: xVelocity,
				max: bounds.left,
				min: bounds.left - xOverlap,
				resistance: 1000
			}
		},
		onUpdate: blitMask.update,
		ease: Strong.easeOut
	}, 10, 0.5, 1);

I have also uploaded the flash cc file,

Thanks anybody who can spare a sec,

 

 

LeonardTheLeopardV2.zip

Link to comment
Share on other sites

Sorry, I can't hunt through all the code and find where you might have made a mistake.

 

Replace your code in your fla with the code below:

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;
TweenPlugin.activate([ThrowPropsPlugin]);
var bounds:Rectangle = new Rectangle(0,0,800,480);
var blitMask:BlitMask = new BlitMask(lvl1_blitmask,bounds.x,bounds.y,bounds.width,bounds.height,true);
var t1:uint,t2:uint,x1:Number,x2:Number,xOverlap:Number,xOffset:Number;
blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
  TweenLite.killTweensOf(lvl1_blitmask);
  x1 = x2 = lvl1_blitmask.x;
  xOffset = this.mouseX - lvl1_blitmask.x;
  xOverlap = Math.max(0,lvl1_blitmask.width - bounds.width);
  t1 = t2 = getTimer();
  lvl1_blitmask.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  lvl1_blitmask.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseMoveHandler(event:MouseEvent):void {
  var x:Number = this.mouseX - xOffset;
  if (x > bounds.left) {
    lvl1_blitmask.x = (x + bounds.left) * 0.5;
  } else if (x < bounds.left - xOverlap) {
    lvl1_blitmask.x = (x + bounds.top - xOverlap) * 0.5;
  } else {
    lvl1_blitmask.x = x;
  }
  blitMask.update();
  var t:uint = getTimer();
  if (t - t2 > 50) {
    x2 = x1;
    t2 = t1;
    x1 = lvl1_blitmask.x;
    t1 = t;
  }
  event.updateAfterEvent();
}

function mouseUpHandler(event:MouseEvent):void {
  lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  lvl1_blitmask.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  var time:Number = (getTimer() - t2) / 1000;
  var xVelocity:Number = (lvl1_blitmask.x - x2) / time;
  ThrowPropsPlugin.to(lvl1_blitmask, {throwProps:{ x:{velocity:xVelocity, max:0, min:-lvl1_blitmask.width+bounds.width, resistance:-300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1);
}

That should make the dragging work fine. You can build up from there and add in your other code.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×