Drag and Drop

From SouthernWVWiki

Drag, Drop, and Color Change

Learn the startDrag and stopDrag functions.

Open a new Flash file and save it. On your stage, draw a blue circle, select it, and convert it into a symbol. Assign it the instance name “blueCirc.” On a new layer, draw a red rectangle. Convert it to a symbol with instance name “redRect.”

Create a new layer to hold your actionscript. Click on frame 1 of that layer, open the actionscript panel, and paste the following code:

blueCirc.onPress = function(){
startDrag(this);
}

blueCirc.onRelease = function(){
this.stopDrag();
}

Now save and test your movie. You should be able to drag the blue circle around the screen.

Change the color of a movie clip on collision.

Go back into the actionscript and add the following code:

onEnterFrame = function(){
	if (redRect.hitTest(blueCirc)) {
		var circleColor = new Color("blueCirc");
		circleColor.setRGB(0x663399);
	}
	else {
		var circleColor = new Color("blueCirc");
		circleColor.setRGB(0x0000FF);
	}
}

That code tests to see if the blue circle and the red rectangle are overlapping. We've placed it inside the onEnterFrame handler so that it will execute over and over – meaning it will keep checking for overlap. When the clips overlap, it uses the circleColor variable to set the circle's color to purple. When the clips are not overlapping, it sets the circle's color back to blue.

Save and test your movie. When you drag the circle over the rectangle, it should turn purple. When you drag it off, it should be blue.

Use updateAfterEvent to improve the animation.

Finally, you can add the following (optional) code to the frame to make the circle drag more smoothly:

onMouseMove = function(){
updateAfterEvent();
}

All that code does is to check the mouse's position and redraw the circle more often. That makes for a smoother, less jerky animation.

Still lost? Download the FLA.

Drag, Drop, and Disappear

Multiple objects can be dragged and dropped.

Let's get a little more advanced and give our user the task of dragging and dropping three objects.

Download and open this Flash file, which contains a house symbol, a cat symbol, and a dynamic text box. Drag the house symbol from the library onto the stage and give it instance name “house.” Drag the cat onto the stage and give it instance name “cat1.” Drag the cat onto the stage two more times, with instance names “cat2” and “cat3.”

The dynamic text field that's already on the stage is set to display a variable called “result.” More on that later.

Create a layer on the timeline to store your actionscript. Paste the following code:

onMouseMove = function(){
updateAfterEvent();
}

cat1.onPress = function(){
startDrag(this);
}
cat1.onRelease = function(){
this.stopDrag();
}

cat2.onPress = function(){
startDrag(this);
}
cat2.onRelease = function(){
this.stopDrag();
}

cat3.onPress = function(){
startDrag(this);
}
cat3.onRelease = function(){
this.stopDrag();
}

All that code should be familiar from the last example. We've created three instances of the cat that can be dragged and dropped – and at the top, we're telling Flash to draw the animation smoothly.

Save and test your movie. You should be able to move the three cats around the screen.

Trigger an event when the object is dropped.

Let's make it seem more like the cats are going into the house when you drop them. Inside each of the three onRelease functions, add a line that will make the cats appear invisible when they're dropped on the house:

if (cat1.hitTest(house)){
	this._alpha = 0;
	}

Don't forget to change the instance names to cat1, cat2, and cat3 in each onRelease function.

This bit of code is inside the onRelease function for a reason. When you run this code as part of onRelease, you're saying, “when I drop the kitten, I want to know if it's overlapping the house. If it is, set the kitten's alpha (or opacity) to zero – that is, make it invisible.”

Save and test your movie. When you release the kittens on the house, they should disappear.

Keep score using a counting variable.

Finally, let's add a variable that will count the hitTests and tell us when all three cats are inside the house. At the top of the frame, declare your counting variable:

var x = 0;

Inside the if statements that are inside the onRelease functions, add the following line of code:

x = x + 1;

And add this code somewhere in the actionscript window:

onEnterFrame = function (){
	if (x == 3) {
	result.text= "Nice job.";
   	}
}

You're saying, “each time a cat overlaps the house, increase x by 1. When x is equal to 3 (all three cats are in the house), print the words “nice job” in the text field.

Save and test your movie.

Note: there's one thing you can add to make your game a little less buggy. Everywhere you've written “onRelease = function,” make it say “onRelease = onReleaseOutside = function.” That will ensure that, even if your mouse has slipped a little while you dragged, the cat will still register as overlapping the house.

Are you stumped? Download the final FLA.

Drag, Drop, and gotoAndStop

Make a simple matching game using drag and drop.

Next, we'll create a matching game. Download and open the practice file. The first frame contains ten numbers in two columns: five fractions and five decimals. Each number is saved as a symbol in the library.

By referring to the two previous examples, make the fraction symbols on the left side of the screen draggable. Use startDrag and stopDrag like before, but swap in this file's instance names: fraction1 through fraction5. Go to it!

Save and test your movie. You should be able to drag the five fractions on the left side of the screen.

Check for multiple collisions using the && operator.

Let's add the meat of the game, the part that tracks whether the correct pairs of symbols are in collision with each other. Paste the following code at the top of the actionscript window:

stop();

onEnterFrame = function(){
	if ( (fraction1.hitTest(decimal1) && fraction2.hitTest(decimal2) && 
           fraction3.hitTest(decimal3) && fraction4.hitTest(decimal4) && 
           fraction5.hitTest(decimal5) ) ){
	       gotoAndStop(2);
	       }

The if statement in that code tests each of the symbols to see if they're paired up correctly. Because we used “&&” (you can also use the word “and”), we were able to check all five pairs in just one long line of code. If all the pairs are correctly matched up, the code will override the stop command at the top of the window and go to the second frame in the game's timeline – our winning screen!

Save and test your movie. When all the pairs are correctly matched, you should be taken to the winning screen.

Use the timeline to store different states of a symbol.

We could stop there, but we're having so much fun! Let's add some feedback that lets the player know they're on the right track. When the fractions are overlapping with their corresponding decimals, let's make the fraction change color.

Add the following code inside the onEnterFrame handler:

if (fraction1.hitTest(decimal1)){
	fraction1.gotoAndStop(2);
	}
	if (fraction2.hitTest(decimal2)){
		fraction2.gotoAndStop(2);
	}
	if (fraction3.hitTest(decimal3)){
		fraction3.gotoAndStop(2);
	}
	if (fraction4.hitTest(decimal4)){
		fraction4.gotoAndStop(2);
	}
	if (fraction5.hitTest(decimal5)){
		fraction5.gotoAndStop(2);
	}

The code above tells Flash to switch to the second frame of the fraction symbol when it has overlapped with its corresponding decimal. The second frame of the fraction looks the same as the first, except the text is a different color. So, when we switch to the second frame, the fraction symbol will change color.

Save and test your movie. Drag the fractions over incorrect and correct answers. Dragging a fraction over the right answer will cause it to change color – but if you drag it over the wrong one, it won't change back. How would you make the fractions change back?

Here's the final FLA of the game.

Update the Wiki

Upload the assets (.SWF and .FLA) you created to your Team page if you are working on a Team game, or to your "My Projects" page if you are working alone.