Flash10:ActionScript2: Drag and Drop with Targets

From virtualMV2015wiki
Jump to: navigation, search
 Home  Flash10 (CS4) <

Introduction

Drag and Drop introduces some user interactivity with your Flash Movie.

Icon Objective.png

Objective

By the end of this exercises you should be able to:

  • Create a small movie with draggable objects and drop targets

Instructions

Create a new Actionscript2 movie. Rename the first layer to Background. Import a graphic to the stage, or draw one. In this case a frog. Lock the layer. Create a new layer and name it CrownMc. (The assets used in this tutorial are available here: Crown and Frog). Create a new layer and name it actions. Click on the first frame of the actions layer and insert the following actionscript:

stop();

With the CrownMc layer selected on frame one and using the drawing tool of choice, create your draggable object or alternatively import a graphic to the stage. Right Click, Convert to Symbol, Type: Movie Clip, center the registration point (if its not already centered by default) and name it shapeMc. The naming is personal, but keep it meaningful (shapeMc isn't a particularly good name!)


Name the Movie Clip


In the Properties panel, give it a name, eg. crownMc. Drag it to one side of the stage and lock the layer.


Give the Instance a Name


Create a new layer below the one you have just created and name it CrownTarget. With the first frame of this layer selected, drag an instance of ShapeMc from the library and onto the stage and name it crownTargetMc.

Position this Movieclip exactly where you would like your shape to lock in to.


Position Exactly


Slide the alpha channel to 0. Your target is now invisible. Lock the layer.


Reduce the Alpha to 0


Return to CrownMc layer and unlock. Click on the shape. Open the Actionscript panel add the following script. A commented explanations is included.

// Enable drag on button press
on (press) 
{
	startDrag(this);
}
// Stop the drag on release of mouse button
on (release) 
{
 
	stopDrag();
// if the object is dropped on the target as named, snap to the x and y
// coordinates of the target object. The name has to match exactly the name
// given when you named the instance of the shapeMc
if(this._droptarget =="/crownTargetMc")
{
	this._x=_root.crownTargetMc._x;
	this._y=_crownTargetMc._y;
 
}
// if not, return the droppable object to a predefined position, using the
// x and y coordinates.
else{
	this._x=369;
	this._y=46;
}
}


This will give you a basic drag and drop that snaps to an invisible target object.

Extension

It is possible to add extensions to this script to make it more functional.

Keep track of how many successful drops to targets you have by introducing a dropCount Variable. If the variable equals a certain number, then something can happen, eg load a new movie, move along the time line or display a message as examples. The code below displays an appropriate message. (Dont forget to reset the variable if you need to keep count again).

On the actions layer, frame one, declare a variable above the stop();

var dropCount:Number = 0

Then include the following with the actionscript applied to your draggable object:

// This increments the dropCount variable for each drop that is successful,
// when the dropcount reaches a defined number, then an action occurs, 
// in this case, shows a message.  
 
_root.dropCount = _root.dropCount + 1;
	if(_root.dropCount ==1)
	{
		_root.handsome.text = "No Handsome Prince under this Crown";
	}

The full code now looks like this:

on (press) 
{
	startDrag(this);
}
on (release) {stopDrag();
 
if(this._droptarget =="/crownTargetMc")
{
	this._x=_root.CrownTargetMc._x;
	this._y=_CrownTargetMc._y;
	_root.dropCount = _root.dropCount + 1;
	if(_root.dropCount ==1)
	{
		_root.handsome.text = "No Handsome Prince under this Crown";
	}
}
else{
	this._x=369;
	this._y=46;
}
}

Introduce a variable isLocked. This variable is unassigned at the point of the IF statement and will continue to be so until such time as the targets are met. So, while the variable is unassigned, the code between the {} will continue to be executed. When the target is met, the variable isLocked becomes true, this will prevent any further drag and drop on the object.

Below is the final code to snap onto a target, lock it in so it can no longer be dragged and to cause an action to occur when a defined number of drop targets has been met:

on (press) 
{
	if (!this.isLocked)
	startDrag(this);
}
on (release) {stopDrag();
 
if(this._droptarget =="/crownTargetMc")
{
	this._x=_root.CrownTargetMc._x;
	this._y=_CrownTargetMc._y;
	var isLocked = true;
	_root.dropCount = _root.dropCount + 1;
	if(_root.dropCount ==1)
	{
		_root.handsome.text = "No Handsome Prince under this Crown";
	}
}
else{
	this._x=369;
	this._y=46;
}
}

A completed sample of this movie can be viewed here: Crown the frog

Problems

Small targets need precise placement of the object before they snap into place. It is possible to increase the snap area by enlarging the target Movieclip. Click on the target, lock together and increase the size a fraction. This will give a greater drop snap area. Some experimentation will give the optimum size of the target Movieclip.

If objects fail to snap and lock, check the registration points of all objects and make sure they are centered, and check the naming of targets match that in your ActionScript.


Icon References.png References


 

Day, S. (2010). Flash10:ActionScript2: Drag and Drop with Targets. Retrieved January 20, 2018, from http://www.virtualmv.com/wiki/index.php?title=Flash10%3AActionScript2%3A_Drag_and_Drop_with_Targets