Smooth Draggable Background X Axis

[khadesa 1 Likes (Newbie)]

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

[Carl 11,108 Likes (Superhero)]

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.