First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Nuno Mira | Website: http://www.nunomira.com/


In order to drag an object you use the startDrag() method.
This method has two parameters. The first one lets you choose whether its center will coincide with the mouse's position or not, and the second lets you define a rectangle to restrict the dragging area.
You use false for the first parameter and ignore the second, as you don't want dragging restrictions.

This is the basic code that goes in DraggableObject.as and that you'll use for any object you want to drag:

public function enableDragging():void
	addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
	addEventListener(MouseEvent.MOUSE_UP, stopDragging);
	buttonMode = true;

private function startDragging (e:MouseEvent):void
	stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
	stage.addEventListener(Event.MOUSE_LEAVE, stopDragging);

private function stopDragging (e:MouseEvent):void
	stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragging);
	stage.removeEventListener(Event.MOUSE_LEAVE, stopDragging);

This particular Class has some more code as it preforms a lot more tasks than just dragging the words.
For example, in the init() method which will be used by the visible words only,

public function init(target:DraggableObject):void
	x0 = x;
	y0 = y;
	mouseChildren = false;
	_target = target;
you pass the instance of the non-draggable (non-visible) object, which is the target:

// and so on ...

You also store the initial x and y, so that you can slide the word back if you didn't drop it near its correct target:

public function reposition():void 
	TweenLite.to(this, .4, { x:x0, y:y0 } );

In the Game Class (Game.as) you setup listeners for when you stop dragging the words. This is the time where you see if they are "close enough" to their targets or not.
Just like in the math class at school, this is how you calculate the distance between two points :

private function dist(current:DraggableObject, target:DraggableObject):Number 
	 var dx:Number = target.x-current.x;
	 var dy:Number = target.y-current.y;
	 return Math.sqrt(dx * dx + dy * dy);
It's the Pythagorean theorem in action. Does it ring a bell?

Suppose you're dragging rabbit_draggable. If the distance to rabbit is less than distMax, (a variable defined previously), slide it to the rabbit's position, and prevent it from being draggable. Else, send rabbit_draggable to its initial position:

private function stopDragging(e:Event):void 
	// find out which object this is
	var current:DraggableObject = DraggableObject(e.currentTarget); // rabbit_draggable
	// find out its correct target (this is a custom property!)
	var target:DraggableObject = current.target; // rabbit
	// if they are in the disired distance
	if (dist(current, target) < distMax)
		// the object is no longer draggable
		// slide it to the correct position
		TweenLite.to(current, .1, { x:target.x, y:target.y } );
		// not correct target, send to original position
		current.reposition(); // rabbit_draggable

After you have positioned all the objects correctly, you've finished the game. In order to keep track of this, each time an object is positioned correctly, a variable is increased.

if (dist(current, target) < distMax)
	// increase number of correct objects
	if (count == total) // if they are all correct
		// game successfully finished

total is the number of words: 5.

» Level Intermediate

Added: 2011-02-28
Rating: 1 Votes: 19
» Author
Nuno Mira has been a Flash Developer for 9 years. He loves teaching, and learning. When he isn't coding he may be surfing or snowboarding.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.