Drag and drop with ease

[surfersdream]

Hi guys

I currently have a image slider using this function, basically its one long image the user can drag across the screen, but only left to right, thats why i have applied bounds!

How would i edit this to make it ease to a stop when they let go, i.e. they drag the image, let go and it slides to a stop?

This is my code:


var imgWidth:Number = imageHolder1.width;
var imgHeight:Number = imageHolder1.height;
var rectWidth:Number = rect.width;
var rectHeight:Number = rect.height;
var rectX:Number = rect.x;
var rectY:Number = rect.y;
// Do math to correctly make the drag bounds using values attained above
var boundWidth = rectWidth - imgWidth;
var boundHeight = rectHeight - imgHeight;
// Now apply the variable numbers with the math we want as bounds
var boundsRect:Rectangle = new Rectangle(rectX, rectY, boundWidth, boundHeight);
// Enable drag
imageHolder1.addEventListener(MouseEvent.MOUSE_DOW N, DragImage1);
function DragImage1(event:MouseEvent) {
// Here you see we apply the boundsRect when they drag
imageHolder1.startDrag(false, boundsRect);
}
// Stop drag
imageHolder1.addEventListener(MouseEvent.MOUSE_UP, DropImage1);
function DropImage1(event:MouseEvent) {
imageHolder1.stopDrag();
}

Thanks

Jake

[flosculus]

well you need to use tweens.

i use tweenmax/tweenlite for my tweens so i'll give you an example using them.

import com.greensock.*;
import com.greensock.easing.*;

var prevXAxis:Number;

// assuming it drags horixontally

function DragImage1(event:MouseEvent) {
       // Here you see we apply the boundsRect when they drag
       prevXAxis = imageHolder1.x;
       imageHolder1.startDrag(false, boundsRect);
}


function DropImage1(event:MouseEvent) {
       imageHolder1.stopDrag();
  
       if(imageHolder1.x > prevXAxis) {
              TweenMax.to(imageHolder1, 1, {x:imageHolder.x + 20, easing:Strong.easeOut});
       } else {
              TweenMax.to(imageHolder1, 1, {x:imageHolder.x - 20, easing:Strong.easeOut});
       }
}

ok, so the 'to' method of tweenmax using the following parameters:

the displayobject, duration of tween, {changes}

that should work.

download tweenmax or tweenlite here: http://www.greensock.com/tweenlite/

flos