How to Create Drag and Drop Function in Flash CS5

The drag and drop function can add interactivity to your Flash CS5 project. It allows users to pick up objects within your Flash movie and to drop them where they want. The function can put a creative spin on electronic greeting cards by allowing the receiver to dress up their own snowman or fill Santa's sleigh. It is also useful for creating interactive games. Flash CS5 differs from previous versions in that it uses Actionscript 3 to code rather than Actionscript 2.

Instructions

1. Click "Window" and "Workspace" in the main menu, and make sure that "Essentials" has a check next to it. Select "Reset Essentials".

2. Click "Insert" and "New Symbol" in the main menu. Create a name for your symbol and select "Movie Clip" from the drop-down menu labeled "Type".

3. Click the "Rectangle Tool" in the toolbox along the right-side margin. Draw a rectangle for your new symbol.

4. Select "Scene 1" from the top of your stage area to exit symbol-editing mode. Create two new layers in the timeline tab beneath the stage. Label the first layer "Actions" and the second "Rectangle."

5. Select the first keyframe of the "Rectangle" layer under the timeline. Select the "Library" tab to the right of the stage, and drag the movie clip symbol you made onto the stage.

6. Click the symbol on the stage to highlight it. Select the "Properties" tab next to the library. Name your symbol "Rectangle_MC" in the top where it is labeled "Instance Name" under "Properties."

7. Select the first keyframe of the "Actions" layer under the timeline. Type "stop();" on the first line and hit "Enter."

8. Enter the code "Rectangle_MC.addEventListener(MouseEvent.MOUSE_DOWN, RectangleMove);" on the next line and hit "Enter."

9. Add the code "Rectangle_MC.addEventListener(MouseEvent.MOUSE_UP, RectangleDrop);" and then push "Enter" again.

10. Type "function RectangleMove(Event:MouseEvent):void{ '' and then hit "Enter" for the next line and type "book.startDrag(); " and return to the next line.

11. Type "}'' to end the function. Start the next line with "function RectangleDrop(Event:MouseEvent):void{'' and then hit "Enter" again.

12. Add "book.stopDrag();" to the final line. Hit enter and add "}''.

13. Select "Control," "Test Movie," "In Flash Professional" to test your movie. Select the rectangle with the cursor to drag and drop it.

References

• "Flash Professional CS5 Digital Classroom"; Fred Gerantabee, 2010.