Draggable objects
This demo shows a basic technique for attaching Movie Clips to the cursor, making them follow, then detaching them in a new position. It also demonstrates once again how to abstract general scripts on a dummy object.
We'll start by explaining the general script, attached to that dummy Movie Clip:
onClipEvent(load){
function moveMeMaybe(which){
if(which.pickUp == true){
which._x = _root._xMouse;
which._y = _root._yMouse;
}
}
}
The function defined in this handler causes a particular Movie Clip to follow the cursor by synchronizing its X and Y position with the cursor's, provided that a variable called pickUp has been set to true. Note that this variable is attached to the particular Movie Clip by dot notation. This is the first time you've seen this trick.
The function shown here is generalized: it works with all six of the Movie Clips in the project. The function recognizes which Movie Clip it is working with because of its parameter or key variable, in this case a variable called which. When this function is called by the Movie Clip, a value is placed in the parentheses; any value so placed ends up within the corresponding parameter defined in the function that is being called. Thus the value placed in parentheses ends up within the parameter which. You'll see below how this exchange of information coordinates the function with the Movie Clip.
The project contains six Movie Clips that in turn contain the six face images. Each Movie Clip has an instance name. The content of the name is not important so long as it is unique.
Here's the script attached to each of the face clips:
onClipEvent(enterFrame){
_root.scripts.moveMeMaybe(this)
}
onClipEvent(mouseDown){
if(this.hitTest(_root._xmouse, _root._ymouse) && _root.lockout == false){
this.pickUp = true;
_root.lockout = true;
}
}
onClipEvent(mouseUp){
if(this.hitTest(_root._xmouse, _root._ymouse)){
this.pickUp = false;
_root.lockout = false;
}
}
The enterFrame handler calls the general function defined in the dummy Movie Clip, discussed above. Notice that we pass the value of this to the parameter which in the abstracted script. That exchange lets us plug in the designation of the current Movie Clip, turning the generalized code to a specific purpose.
The mouseDown handler performs two tests: it does a hitTest on the current cursor position to see if it is the Movie Clip on which a mouseDown occurred, and it checks to see if a global variable called _root.lockout is false. If both conditions are met, then the control variable this.pickUp becomes true, meaning that the generalized script will attach this Movie Clip to the cursor position. When that happens, the global lockout variable is also set to true; this ensures that only one Movie Clip can be manipulated at once. If this control is not in place, clicking on one head while it is over another would glue the two Movie Clips together with no way to get them subsequently apart.
The mouseUp handler resets the pickUp and lockout variables, returning the current Movie Clip to its inert state. Thus the Movie Clip remains attached to the cursor only while the mouse button is down.
Adding alpha effects
I've built a variation on this project incorporating the proximity sensing (triangulation) effects introduced in the noisyRoom demo. In this variant, called dragAlphaDemo, the component Movie Clips all begin at 20% opacity (_alpha = 20). Code is added to calculate the distance between the cursor and the midpoint of each Movie Clip. When this distance is 100 pixels or less, the alpha of the Clip in question is set to 120 minus the current distance, which has the effect of moving the alpha setting from 20% (120-100) up to full opacity (120-0, with the alpha setting topping out at 100) as the distance decreases.
Click to see this variant version.
Source files
The Flash source file for the main project, draggablesDemo.fla, is in MMShare/draggablesDemo on Crow. You will also find the variant version, dragAlphaDemo.fla in the same location.
