Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - Drag and Drop

302 InterAction
Flash Compatibility: MX 2004
(Principles and ActionScript are the same in Flash 5 and Flash MX)

Written by: Phil

Length: 3750 words

Assumed Knowledge: Some knowledge of Tweening, attaching ActionScript and nesting would be useful.

Level: Medium / Hard

 

Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here

 

For Free Tutorials: See listings: Free Tutorials

 

The aim of the tutorial is to learn how to create Flash Movies with Drag and Drop features. Drag and Drop is when you are able to move something with the mouse on screen. There are no end of situations that you might want the user to be able to pick up an object move it with the mouse. Here are a few:

Example: Download the Flash file IntAct 302a

Cross Ref: If you want to make a slider there are free tutorials on both Sound Sliders and Colour Sliders

There are a number of ways that you can use Drag and Drop type objects that are technically slightly different. Here are several examples.


Example: Download the Flash file IntAct 302b


Example of objects that are free to drag anywhere within the movie.

 

Example: Download the Flash file IntAct 302c


Example of a dragable Menu. Enables the user to organise their screen.

In the above Movies you will notice that you can drag the various objects off the side of the Movie. It is possible to constrain the area that of the dragable object.

 

Example: Download the Flash file IntAct 302d


In this case the object is constrained to a specific area.

 

Example: Download the Flash file IntAct 302e


In this example the red circle jumps to the centre of the white ring. It also changes size as you drag and when you drop it.

 

Example: Download the Flash file IntAct 302f


Animated drop target with reset button.

 

Example: Download the Flash file IntAct 302g


An educational game.

Try placing the continent names in the wrong place, you get a message saying that you are wrong and your score goes down. If you get the names in the right place you get the opposite message and your score goes up. What's more if you drop them in the correct position they lock. You cannot move them again until you click the reset button. The reset button also resets your score. The obvious continuation of this type of game would be that you can move to the next level when you have managed to achieve the top score of five. The next level could be counties in the world or planets in the solar system or something similar.

Note: A game like the one above is too difficult for a beginners tutorial on Drag and Drop but I may consider writing an additional tutorial if there is a demand. Let me know via the: Forum


Additional Examples

There are several additional samples of Drag and Drop. I have placed them on an additional page so as not to clutter the tutorial:

Additional Drag and Drop Examples

Hands on: Creating a Drag and Drop Flash Movie

Example: Download the Flash file IntAct 302h


Drag the red symbol over the drop target.

This is the movie that I will show you how to build. There are a number of features that are worth noting:


Step one: Setting up the Document

  1. Open a new Flash Movie.
  2. Go to: Modify > Document
  3. Set the size to: 400 x 120 pixels
  4. If you wish select a: Background Colour
  5. Click: OK

 

This is a members only bonus tutorial. For the full text you must: LOG ON

For Free Tutorials: See listings: Free Tutorials


145953 visitors to this page since

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.