Skip to main content
Participant
June 5, 2012
Answered

Drag and Drop slide back Animation

  • June 5, 2012
  • 1 reply
  • 831 views

Hello I am working on a project for work and I have run into a bump in the road. I am a noobie when it comes to programming and have been following a tutorial for a drag and drop game/question quiz for students. What I have so far is I am able to drag and drop my wanted objects to a specific location without any problem. The issue that I am running across is when they drag the object to the wrong spot, I want it to do a nice slide back to its original location, rather than just a quick jump back and there it is. This is what I have for code so far.

import flash.display.MovieClip;
import flash.events.MouseEvent;


var dragArray:Array = [square, circle];
var matchArray:Array = [squareMatch, circleMatch];
var currentClip:MovieClip;

var startX:Number;
var startY:Number;


for (var i:int = 0; i < dragArray.length; i++) {
dragArray.buttonMode = true;
dragArray.addEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
matchArray.alpha = .2;
        

}

function item_onMouseDown(event:MouseEvent):void{
currentClip = MovieClip(event.currentTarget);
startX = currentClip.x;
startY = currentClip.y;
addChild(currentClip);
currentClip.startDrag();
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseUp(event:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
currentClip.stopDrag();
var index:int = dragArray.indexOf(currentClip);
var matchClip:MovieClip = MovieClip(matchArray[index]);
if(currentClip.hitTestObject(matchClip)) {
  currentClip.x = matchClip.x;
  currentClip.y = matchClip.y;
 
  currentClip.removeEventListener(MouseEvent.MOUSE_DOWN, item_onMouseDown);
  currentClip.buttonMode = false;
} else {
currentClip.x = startX;
currentClip.y = startY;
}

}

This topic has been closed for replies.
Correct answer Ned Murphy

One quick way to realize it is to use the built-in Tween class.  Here it is in basic form.  If you look it up in the help documentation you can learn about each parameter and change them to suit your needs

import fl.transitions.Tween;   // add this to import the class

function stage_onMouseUp(event:MouseEvent):void{

...

  } else {

     var twX:Tween = new Tween(currentClip,"x",null,currentClip.x, startX, 1, true);

     var twY:Tween = new Tween(currentClip,"y",null,currentClip.y, startY, 1, true);

  }

}

Many people prefer to use third party tweening engines such as TweenLite/TweenMax instead of the built-in class due to realizing better performance.

1 reply

Ned Murphy
Ned MurphyCorrect answer
Legend
June 5, 2012

One quick way to realize it is to use the built-in Tween class.  Here it is in basic form.  If you look it up in the help documentation you can learn about each parameter and change them to suit your needs

import fl.transitions.Tween;   // add this to import the class

function stage_onMouseUp(event:MouseEvent):void{

...

  } else {

     var twX:Tween = new Tween(currentClip,"x",null,currentClip.x, startX, 1, true);

     var twY:Tween = new Tween(currentClip,"y",null,currentClip.y, startY, 1, true);

  }

}

Many people prefer to use third party tweening engines such as TweenLite/TweenMax instead of the built-in class due to realizing better performance.

BDeacon22Author
Participant
June 7, 2012

Thank you very much! Helped out a lot and help me do what I wanted.

Ned Murphy
Legend
June 7, 2012

You're welcome