Flash actionscript tutorial - flash actionsript help - online free actionscript flash lessons - actionscript in flash course
flash actionscript tutorial, flash actionsript help, online free actionscript flash lessons, actionscript in flash course
Flash ActionScript Tutorial - Mouse dragsGo to Flash ActionScript Tutorial - Mouse dragsAdvanced Flash tutorialGo to advanced Flash tutorialWeb development tutorialsGo to web development tutorialsHomepage

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

Click to view mousedrag Flash action tutorial example

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.

Setting the actions for dragging

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.

Stopping the drag action

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.

Click to view a flash movie in which you can drag a circle symbol using the mouse


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


  Back


AddThis Social Bookmark Button
Page contents: Flash actionscript tutorial - flash actionsript help - online free actionscript flash lessons - actionscript in flash course

Page URL: http://www.webdevelopersnotes.com/tutorials/adflash/ flash_actionscript_tutorial_mouse_drags.php3



Join Mailing List


Feedback/Questions




50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine
Search WebDevelopersNotes.com