 |
|
| Click to view the movie. Drag a vertex to change the shape. |
This demonstration extends last week's discussion of scripted drawing into the realm of interactivity. The simple cube shown above has draggable vertices, allowing the user to play with the form. The principle used here can be easily applied to more complex situations.
I. Architecture
The movie has three layers, each with a single frame. The first layer contains the script discussed below. The second and third layers contain the eight objects that mark the vertices of the cube. Each is an instance of a Movie Clip that contains a simple circle. For the sake of simplicity, I placed all four front vertices in one layer and all four rear vertices in the other.
Each vertex object is given an arbitrary instance name. I name the four front vertices vertex11 through vertex14 and the rear vertices vertex21 through vertex24, using the first digit of the number to differentiate front from back. (This convention is purely for my use and is not required by the script.)
II. Scripting
Each of the vertex objects contains the now familiar mouseDown and mouseUp handlers to control dragging. In addition, one of the vertices (upper right front, though it could have been any one) also has an enterFrame handler that invokes the function redraw().
This function is defined in the single frame of the top layer, reserved for scripting (so it's defined at the root). The code looks like this:
function redraw(){
createEmptyMovieClip("pen",1);
//bottom
pen.moveTo(_root.vertex24._x, _root.vertex24._y);
pen.beginFill(0xFFFF00, 50);
pen.lineTo(_root.vertex23._x, _root.vertex23._y);
pen.lineTo(_root.vertex13._x, _root.vertex13._y);
pen.lineTo(_root.vertex14._x, _root.vertex14._y);
pen.lineTo(_root.vertex24._x, _root.vertex24._y);
pen.endFill();
//front
pen.moveTo(_root.vertex14._x, _root.vertex14._y);
pen.beginFill(0xFF0000, 50);
pen.lineTo(_root.vertex11._x, _root.vertex11._y);
pen.lineTo(_root.vertex12._x, _root.vertex12._y);
pen.lineTo(_root.vertex13._x, _root.vertex13._y);
pen.lineTo(_root.vertex14._x, _root.vertex14._y);
pen.endFill();
//RSide
pen.moveTo(_root.vertex12._x, _root.vertex12._y);
pen.beginFill(0x0000FF, 50);
pen.lineTo(_root.vertex22._x, _root.vertex22._y);
pen.lineTo(_root.vertex23._x, _root.vertex23._y);
pen.lineTo(_root.vertex13._x, _root.vertex13._y);
pen.lineTo(_root.vertex12._x, _root.vertex12._y);
pen.endFill();
//LSide
pen.moveTo(_root.vertex14._x, _root.vertex14._y);
pen.beginFill(0x0000FF, 50);
pen.lineTo(_root.vertex24._x, _root.vertex24._y);
pen.lineTo(_root.vertex21._x, _root.vertex21._y);
pen.lineTo(_root.vertex11._x, _root.vertex11._y);
pen.lineTo(_root.vertex14._x, _root.vertex14._y);
pen.endFill();
//Back
pen.moveTo(_root.vertex21._x, _root.vertex21._y);
pen.beginFill(0xFF0000, 50);
pen.lineTo(_root.vertex24._x, _root.vertex24._y);
pen.lineTo(_root.vertex23._x, _root.vertex23._y);
pen.lineTo(_root.vertex22._x, _root.vertex22._y);
pen.lineTo(_root.vertex21._x, _root.vertex21._y);
pen.endFill();
//Top
pen.moveTo(_root.vertex21._x, _root.vertex21._y);
pen.beginFill(0xFFFF00, 50);
pen.lineTo(_root.vertex22._x, _root.vertex22._y);
pen.lineTo(_root.vertex12._x, _root.vertex12._y);
pen.lineTo(_root.vertex11._x, _root.vertex11._y);
pen.lineTo(_root.vertex21._x, _root.vertex21._y);
pen.endFill();
}
As you can see, this script basically repeats the same pattern six times, once for each face of the cube. Having set up a drawing object at depth level 1, we draw and fill four quadrilaterals, connecting the various vertices at their present locations.
Since this script reinitializes the drawing object each time it is run, and since it is invoked in an enterFrame handler, the entire cube is redrawn at the movie frame rate (12 fps), meaning that the images is reconfigued smoothly as the user drags any vertex object.
III. Source files
The source file for this demonstration, boxer2.fla, is available on Crow in MMShare/boxerDemo. I've also included an earlier version, boxer1.fla, in which the cube sides are not filled.
