Loading ...Flash Drag and Drop
by Greg Lunn - February 11, 2007
Creating drag and drop interaction in Flash is actually very simple, it just requires a little setup to make it work. Fortunately, I’ve already done some of that for you. Download the FLA and follow along with these steps.
1. Open dragdrop.fla and review its organization.
There are five layers in the file – one containing the “pegs” that we will drag and drop, one for the “targets” that we will drop the shapes onto, and one for the wooden box image. The text layer and the actions layer are currently empty. The pegs and the targets are movie clip symbols saved in the library. Press CTRL-L to view the library.
Note: This tutorial is written in Actionscript 2.0 for Flash MX and up.
If you are using Actionscript 3.0 and Flash CS3, take a look at the updated version of this tutorial.
2. Create a dynamic text field to display the right or wrong responses on the text layer.
In order to provide the user with some feedback, we will display a message when the shapes are dropped, indicating whether or not they were placed successfully. Click frame 1 of the text layer. Use the Text tool to draw a text box underneath the colored shapes. Type “Put the shapes away!” to give the box an initial message.
Adding the dynamic text box.
In the Properties inspector, change the text box to a Dynamic Text box using the drop down menu. Set the font to Arial bold, the font color to #990000, and the size to 18pt. Give the text box an instance name of “reply_txt“. Use the Selection tool to position the text box if necessary.
Setting the properties of the dynamic text box.
3. Assign instance names to the peg and target movie clips.
In order to determine which target we drop our shapes over, we need to name them. Click the bright green pentagon target on the stage, and in the Properties inspector, give it an instance name of “pentagonTarget_mc“. Repeat the process, giving the other three green targets instance names of “squareTarget_mc“, “triangleTarget_mc“, and “flowerTarget_mc“.
Click the red square peg on the stage and give it an instance name of “square_mc“. Repeat the process, giving the other three colored pegs instance names of “flower_mc“, “triangle_mc“, and “pentagon_mc“.
Adding an instance name to the pentagon target.
Why are the targets so small?
The targets are smaller than the holes on the toy to provide a little more accuracy. Smaller targets mean that the shape has to be more closely lined up to register as a match.
4. Adjust the targets to make them invisible.
Since the appearance of bright green targets spoils the illusion of a child’s toy, we will make them transparent. Using the Selection tool, click the first green target. Then, holding down Shift on the keyboard, click to select the other three targets. In the Properties inspector, choose Alpha from the Color dropdown menu. Then set the Alpha value to 0, making the targets transparent.
Setting the alpha value of the targets to zero.
5. Add ActionScript to make the red square dragable.
We’ll write some ActionScript to allow us to drag and drop the square peg. Select frame 1 of the actions layer, and open the Actions panel by pressing F9. Type in the following actions:
square_mc.onPress = function():Void { this.startDrag(true); }; square_mc.onRelease = function():Void { this.stopDrag(); };
Adding the drag and drop Actionscript.
This tells Flash to begin dragging the movie clip when the user presses the mouse button, and stop when the mouse is released. The “true” parameter causes the shape to be picked up from its center, which will make it easier to place later. Press CTRL-Enter to test the movie, and try dragging the square.
6. Add ActionScript to display a message in the text box when the peg is dropped.
Here is where we determine where we release the peg, and provide feedback. Add the following code just below this.startDrag(true);
reply_txt.text = "";
Adding this code inside the square_mc.onPress handler will force the text inside the dynamic text field to clear when we pick up the peg.
Add the following lines below stopDrag();
if (eval(this._droptarget) == squareTarget_mc) { reply_txt.text="You got it!"; } else { reply_txt.text="No, keep trying!"; }
Adding conditional logic to give a proper response.
This if statement uses _droptarget to return the name of the movie clip underneath our mouse at the moment that we release the peg. We use the eval() function to make sure we get a droptarget value returned in dot syntax, which is easier to use. If we release the peg over the movie clip named “squareTarget_mc“, we receive a positive reply. If the peg is released anywhere else, we will receive a negative reply. Feel free to change the wording of the text messages.
Test the movie by pressing CTRL-Enter. Try clicking the square and dragging it over an incorrect hole in the toy. Now, try dropping it over the correct hole. Check your code and fix any errors you encounter.
7. Use similar ActionScript to activate the other three pegs.
Copy all of the ActionScript from the Actions panel and paste it three more times. Change each reference of square_mc to flower_mc, triangle_mc, and pentagon_mc, respectively. Change each reference to squareTarget_mc to the names of the proper targets as well.
The code for the flower peg, with changes highlighted.
You may optionally change the responses to other positive and negative phrases as well. Repeat for the triangle peg and the pentagon peg, making the appropriate changes.
8. Test your completed movie.
Try dragging each of the pegs into both incorrect and correct places on the toy. You should receive the correct messages each time.
Ready for the next step?
So far, you’ve created a drag and drop application that responds when an object is placed, but this project could benefit from additional work to make it more functional. For instance, when a peg is released in the incorrect location, is should snap back to its original spot. Also, once a peg has been placed correctly, it should be locked to avoid accidentally moving it again.
We’ll cover these topics and others in part two.
Rate this tutorial