Flash ActionScript Tutorial - Mouse drags

You can create all kinds of interactivity in Flash. My favorite is the mouse drag that allows user to 'pick' something with the mouse and place it anywhere on the Flash movie stage.

Make your landscape - Flash Interactive movie

Creating Symbols that can be dragged

• Flash allows only movie clip symbols to be dragged.
• Buttons are the only symbols which recognize mouse events like mouse-over and mouse clicks.
• The 'Mouse Drag' is accomplished by the Drag Movie Clip action that is applied to the button instance.
• To stop the draggin, Drag Movie Clip is applied with the 'Stop' action.
• Movie Clips are dragged when the mouse button is 'Pressed' and dragging is stopped when the mouse button is 'Released'.

Making draggable objects involves the creation of a button symbol, which is then placed in a movie clip symbol. Remember that the actions are applied to the instance of the button symbol.

Step 1

Draw a circle on the stage and align it to the center of the page. Convert this to a Graphic symbol and name it circle. Delete it from the stage now that you have it in the library.

Step 2

Click Insert - New Symbol, name this drag-button and set the Behavior to Button.

Step 3

Drag an instance of circle graphic symbol on to the first ('Up') frame of the button. Insert keyframes in the other three frames.

Step 4

Go back to movie editing mode (Edit - Edit Movie) and make another symbol (Insert - New Symbol). Name this symbol circle-drag and set the Behavior to Movie Clip.

Step 5

Place an instance of drag-button button symbol onto the first frame of the movie clip and align it to the center of the page. Click on Modify - Instance and bring the Actions tab in front.

Step 6

We shall now add the drag actions to our button instance.
Click on the plus sign (+) and select Drag Movie Clip. Click on 'On (Release)' in the actions list, check the Press checkbox in the Events listing and uncheck Release (refer image below). This changes the 'On (Release)' action to 'On (Press)' and tells the Flash to start the dragging process when the mouse button is pressed NOT relased.

Click 'End On', and add another Drag Movie Clip action from the menu. (Click the plus sign to display the menu). Select the 'Stop drag operation' radio button.

The image above displays the final actions associated with the button instance.

Step 7

Go to movie editing mode (Edit - Edit Movie) and place an instance or circle-drag movie clip symbol from the library on to the stage. Click Control - Test Movie to check the results.

Download 'Make your landscape' .fla
Download the circle movie .fla