Basic effects
The demonstration projects on this page show some effects created with automatic alignment, a scripting technique that allows you to coordinate the rotation of a Movie Clip with the position of a static point, the X and Y position of another Movie Clip, or the mouse pointer. As you can see, the arrows above are fixed on the cursor. Each arrow swivels to point at the cursor as it moves through the window.
The mathematics of this effect (trigonometry, actually) draws on some basic rules you probably learned in high school and forgot shortly after your took the SAT. Here's the relevant code:
function track(which){
xRef = which._y - _root._yMouse;
yRef = which_x - _root._xMouse;
rad = Math.atan2(yRef, xRef);
which._rotation = rad*180/Math.PI;
}
The script above is installed in a load handler on a separate Movie Clip (another of our ubiquitous scripting dummies). Each arrow is also a Movie Clip whose script contains an enterFrame handler that calls the function shown above.
Referring to the particular Movie Clip that calls it (whose name is passed in the parameter which), the script does two things. First it subtracts the current X and Y positions of the mouse from the X and Y of the arrow clip. The sums of these subtractions are then plugged into the Arc Tangent method Math.atan2(). Arc Tangent returns the angle made by the baseline of the screen and a line that intersects both the present object and the object to which we refer--in this case the cursor.
The result of the Arc Tangent method is expressed in radians, but Movie Clips must be rotated in degrees. That brings us to the second line of the function, which converts the radian value, stored in the variable rad (the name is arbitrary), to a value in degrees. This value is then plugged immediately into the _rotation property of the object.
The result is what you see above: the scripted Movie Clips track the cursor whenever it is within the movie's rectangle.
Applications
The basic auto-alignment technique can be useful in may ways. One of its more obvious applications is to virtual knobs and dials, as you can see at right. Either drag the indicator to move the dial gradually or click at a point on the circumference of the dial and the indicator will jump there. Rotation of the dial controls the associated sound.
Below are thumbnail images of four more projects showing further applications of this technique. Click on each thumbnail to view the project.
|
|
| "Paranoid:" actually you are the target... | "Slices:" with apologies to David Hockney... |
|
|
| "Dials:" a complex visual interface; the dials rotate in relation to one another as well as independently. | "liveTree:" using automatic alignment, the branches re-orient themselves when the leaves move; click and drag the leaves to change the branch positions, or watch them move at random. |
Source files
Source files for these projects are all on Crow within MMShare/autoAlign/.
