Interaction: MouseLocations, Draggable, Custom Cursor, Drop Targets
syllabus | schedule | assignments | Web Resources | ARTC courses
[Flash Intro]     [Drawing]     [Other Tools]     [Modify/Import]     [Symbols]     [Animation]     [Navigation]     [Publishing]    [Audio]     [ActionScript]     [Textboxes]     [Conditionals/Loops]     [Functions]     [Timing]     [Interaction]     [KeyPressed]    

Mouse Location

Each timeline (movieClip or main timeline) has its own location of the mouse relative to its coordinate system.

The mouse location is obtained using _xmouse and _ymouse

***To get the mouse location in the Main Timeline:

Create 2 text boxes and change them to Dynamic Text in the Properties

Different types of text:

Static Text - does not change
Dynamic Text - text that can change via code
Input Text - areas for user to enter text
Name the var:      of one textbox themouseXbox and the other one themouseYbox

Make a 2 frame movie
On the first Frame Script add the follow ActionScript:

_root.themouseXbox = _root._xmouse;
_root.themouseYbox = _root._ymouse;
Sample FLA - returnMouseLoc1.fla

Doing something useful with the mouse location

Add this to your code:

_root.leafMC._alpha = _root._ymouse / 4
_root.leafMC._y = _root._xmouse + 50
Sample FLA - returnMouseLoc2.fla

Example to move a movieClip in relationship to the mouse location Make a movieClip and add an Action to it:

onClipEvent (enterFrame) {
      this._x = _root._xmouse;
      this._y = _root._ymouse+100;
}
Sample FLA - returnMouseLoc3.fla

Draggable Instances

Syntax:
startDrag(target,[lock ,left ,top ,right,bottom])

target = the movieClip to move
     lock = lock the center of the movieClip to the mouse
     left, top, right, bottom = bounding box to restrain movement

Put this ActionScript on a movieClip

onClipEvent (mouseDown) {
     startDrag(this, true);
}

onClipEvent (mouseUp) {
     stopDrag(this, true);
}

Custom Cursors

Create a movie clip with the animated graphic you want for a cursor.

Make sure this is the top layer (under actions and labels)

Make an action for the MovieClip
onClipEvent (load) {
     mouse.hide();
     startDrag(this, true);
}
this = refers to the movieClip
true = means loc the mouse to the center
the next 4 numbers are left, top, right and bottom

Sample FLA - customCursor.fla

Sliders

Make a rectangle into a movie clip

On the movie clip on the main timeline add:

onClipEvent (mouseDown) {
     startDrag(this, true, 50, 100, 500, 100);
}
onClipEvent (mouseUp) {
     stopDrag();
}
Sample file: slider.fla

HitTests on sliders

This will make your slider work only if the mouse down is on a movie clip.

Put this code on a movie clip on the main timeline:

onClipEvent (mouseDown) {
     if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
          startDrag(this, true, 50, 100, 500, 100);
     }
}
onClipEvent (mouseUp) {
     stopDrag();
}
false = use the bounding box of the movie clip true = use the actual shape of the movie clip
Sample file: slider2.fla

Drop Target

Dragging an object and determining if it is dropped off in the right spot:

Make 5 movieClips and in the Instance Name name them:

dragable_MC
correct
incorrect
greenTarget_MC
orangeTarget_MC
Place them all on the main timeline (different layers).

on the dragable_MC movie clip Action write:

onClipEvent (mouseDown) {
     if (this.hitTest(_root._xmouse, _root._ymouse, false)) {
          _root.dragable_MC.startDrag();
     }
}

onClipEvent (mouseUp) {
     if(eval(_droptarget) == _root.greenTarget_MC) {
          _root.correct._alpha = 100;
          _root.incorrect._alpha = 0;
     } else if (eval(_droptarget) == _root.orangeTarget_MC) {
          _root.correct._alpha = 0;
          _root.incorrect._alpha = 100;
     } else {
          _root.correct._alpha = 0;
          _root.incorrect._alpha = 0;
     }
     stopDrag();
}
_droptarget returns the path where the movieClip was dropped

An if statement evaluates the _droptarget property and if you drop theDragableClip onto the targetObject then it makes the "correct" Clip 100% visible.