First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Author: Nuno Mira | Website: http://www.nunomira.com/

ActionScript

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
{
	startDrag(false);		
	
	stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
	stage.addEventListener(Event.MOUSE_LEAVE, stopDragging);
}

private function stopDragging (e:MouseEvent):void
{
	stopDrag();				
	
	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;
	
	enableDragging();
	
	mouseChildren = false;
	
	_target = target;
}
you pass the instance of the non-draggable (non-visible) object, which is the target:


rabbit_draggable.init(rabbit);
dog_draggable.init(dog);
// 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
		current.preventDragging();
		// slide it to the correct position
		TweenLite.to(current, .1, { x:target.x, y:target.y } );
	}
	else
	{
		// 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
	count++;
	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
(10 being the highest)
» 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!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: doc_chin7
» Description:

The flash's horizontal road drive was done in CS4 and was upgraded to CS6. The car responds to right/ left key and flash will auto-generate the movement of roads from left-right or right-left based on random number. Have fun driving in this virtual environment and avoid other cars... :) If you are creative, a road driving game can be created from it.

Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
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: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.