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 |
» 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. |
Download (287 kb) |
» Forums |
More help? Search our boards for quick answers! |