Drag And Drop Flash CS3

This Flash CS3 Tutorial is about controlling graphics with the mouse, creating the tweens will not be covered. However, you will learn how to make the smiley face react to the mouse. Lets make the MovieClip do something every time the mouse moves over it. Start by coping the code from the example to the first key frame in the actions layer.

smiley_mc.addEventListener(MouseEvent.MOUSE_OVER , smiley);
function smiley(event:MouseEvent):void{

smiley_mc.play()
};

The code creates an Event Listener and adds that Event Listener to the MovieClip smiley_mc. Event listeners have been covered in more depth other Flash CS3 Tutorials. The Event Listener is simply listening for the MouseEvent Mouse over. Then once the event happens ActionScript is telling the MovieClip smiley_mc to play.

Press Control-Enter to see the Smiley Face react.

If you once again go into the Smiley MovieClip and look at the key Frames you will see how this works. When the Event Listeners detects that the mouse has passed over or onto the smiley_mc, actionScript tells the smiley_mc to play, thus playing the movie until something tells the smiley_mc movie to stop. In this case there are key frames in the actions layer that simply have the stop action added to them. You can create any form of animation inside a movie clip then use action script to control when the movie plays.

Drag and Drop
Lets add some more interactivity to the smiley face by adding a drag and drop ability.

Copy the example code and add it below the current event listener.
smiley_mc.addEventListener(MouseEvent.MOUSE_DOWN , smileyDrag);
function smileyDrag(event:MouseEvent):void{

smiley_mc.startDrag();
};

Once again you will see the slandered event listener. What is new would be the smiley_mc.startDrag();. The startDrag method tells Flash CS3 to enable a MovieClip to be moved around the stage. You define which MovieClip by placing the name of the MovieClip in front of the startDrag method, separated with a period. If you test the movie at this point you will see that when you click on the smiley face it movies with the mouse cursor., but how do you stop dragging the smiley around. Well, you need to add another Event Listener.
smiley_mc.addEventListener(MouseEvent.MOUSE_UP , smileyStopDrag);
function smileyStopDrag(event:MouseEvent):void{

smiley_mc.stopDrag();
};

The first Event Listener listened for the mouse to be pressed down. This time you need Flash CS3 to listen for the mouse up event. Since you want the smiley_mc to stop dragging when the mouse button is released you will add the method stopDrag to the MovieClip. Basically, you use the same thing to stop dragging as you do to start dragging.

RESOURCE: http://www.squidoo.com/flash_cs3_tutorial_DragAndDrop

Read more »

Drag and Drop Flash CS3 - VERSION 2

Step 1 - Draw an object

* Anything you like

Step 2 - Transform it into a Movie Clip

* Select the object (or if you created several objects for a drawing select them all)
* Right-click on the object and create a movie symbol
* Give the instance a name in the properties panel !

Step 3 - Adapt code below

Dragging code is really simple and follows the same principles we encountered for example in the Flash button tutorial.

* Associate an event listener with an event handler function. This time we listen to "mouse down" and "mouse up" events and for each we need to write a function that will do the dragging.

// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
obj.stopDrag();
}

Results

* Admire the result (flash-cs3-drag-and-drop-intro.html)
* Get the source from http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (files flash-cs3-drag-and-drop-intro.*)

Drag and drop over another object

The goals is to write a little Flash application that will tell the user whether he correctly dragged and dropped an object over another one.

Step 1 - Start from the file above

* I.e. we want to have the user drag the red circle over the blue rectangle.

Step 2 - Add a text box

This textbox should initially display instruction, then display feedback: "made it" and "missed".

* Use the Textool in the tools panel to enter the text.
* Then in the properties panel, change the type to Dynamic Text.

Dynamic Text

Step 3 - Action script code

// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the object exists AND it is the blue button, then we change
// the text in the TextBox.
// Since obj.dropTarget is a Shape, we need its parent.
if (target != null && target.parent == blue_btn)
{
textField.text = "Made it !!";
}
else
{
textField.text = "Missed :(";
}
obj.stopDrag();
}

Results

* Admire the result
* Get the source from http://tecfa.unige.ch/guides/flash/ex/drag-and-drop-intro/ (files flash-cs3-drag-and-drop-intro2.*)

Improvements to be made

* Styling of the textbox: You can do this with the filters panel. Click on the + sign to add filters and then play around with the options.
* Move the red circle back to its initial position
* Special effects maybe

Drag and match learning application - dumb version

The goal is to move objects to a textbox containing the first letter of its name. E.g. "Cat" should be moved to the "C" box. If there is a hit, the user will get some success message and can't move the object anymore. If he is done, he should get an extra message.

Step 1 - Create movie clips for object to be moved

* As above with the red and blue circle
* Each object should have an instance name

Step 2 - Create textboxes

* Also as above
* Create one for each object (E.g. a "C" for the cat, etc.)
* Make sure they are dynamic and they have a name.

Step 3 - Foreground/Background

Make sure that the textboxes are in the background or the movie clips in the foreground. Otherwise a dropped object will not find its target.

* Select all the movie clips, then right-click->Arrange->Bring to Front.

Step 3 - Write Action Script code

Code below is fairly awful since it lacks abstraction, but it has the advantage to use a minimal variety of AS3.

var hits = 0;

// Register mouse event functions

dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dog.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
rocket.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
rocket.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
cat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
bat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
bat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}

function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the target object exists the we ask the test_match function
// to compare moved obj and target where it was dropped.
if (target != null)
{
test_match(target, obj);
}
obj.stopDrag();
}

function test_match(target,obj) {
// test if either one of the four pairs match
if ( (target == box_c && obj == cat) ||
(target == box_d && obj == dog) ||
(target == box_r && obj == rocket) ||
(target == box_b && obj == bat) )
{
// we got a hit
hits = hits+1;
textField.text = "Yes ! You got one !";
// make the object transparent
obj.alpha = 0.5;
// kill its event listeners - object can't be moved anymore
obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Test if we are done
if (hits == 4)
{
textField.text = "Made it !!";
}
}
else
{
textField.text = "Missed :(";
}
}

Read more »