Drag and drop with ease

Hi guys

Could do with some help! I am pretty new to flash , i went on a course a month ago through my agency and i really want to get a good grasp of it!

Basically i am making a portfolio site for a client, and i want them to be able to drag a really long image across the screen. Yet when they let go, it eases to a stop.

I have looked up on this, and been told about things such as greensock! I have played around with it but dont seem to get anywhere!

This is my code for the drag and drop:

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_DOWN, 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) {

It basically drags within bounds! Please dont throw some crazy code at me as im very very new to this!

Thanks very much


Using start drag ans Stop drag alone you wont be anle to achieve that effect. Using green shock Tweeners will help you to achieve this effect. On Mouse up identify the drop points and use tweenmax / tween nano
eg: TweenNano.to(imageholder1,delay:{delay} onComplete:{onCompleteFunction}; ease:‘linear’)