dcsimg
A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: Drag and drop with ease

  1. #1
    Member
    Join Date
    Jul 2009
    Posts
    42

    Drag and drop with ease

    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

  2. #2
    AS2 intolerant person
    Join Date
    Jan 2009
    Location
    Swansea
    Posts
    352
    well you need to use tweens.

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

    Code:
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center