An autoshape component is similar to a regular component. The main difference is that it uses the new Max3 component method setContour() to dynamically redraw the shape after user changes to its width, height or associated handles. This tutorial gives you quick steps on how to make a simple Autoshape component with handles.
A contour is an array of edge definitions that form a shape. A shape may have multiple contours, although many simple shapes can be drawn with a single contour. A shape that contains a single contour can have it properties altered easily via the Properties panel. (ie. stroke and fill definitions).
An edge definition is an object and can consist of the following elements:
| Element |
Description |
| x |
x value |
| y |
y value |
| vertexType |
cusp, smooth, symmetrical |
| isline |
true if edge is a simple line |
| edgeType |
start, linear, quadratic, cubic |
| noStroke |
no stroke used |
| stroke |
stroke number |
| noFill |
no fill used |
| fill |
fill number |
| fillLeft |
fill number for LHS of edge |
| fillRight |
fill number for RHS of edge |
| controlPoints |
array of {x,y} point objects for quadratic or cubic edges |
Although this may look complex, the state of many of the elements can be assumed depending on the context of the edge. For example, a simple rectangle could be drawn with the following contour definition:
[{x:-20,y:-10,fill:0,stroke:0}, // top left hand corner
{x:20,y:-10}, // edge to top right hand corner
{x:20,y:10}, // right hand edge to bottom right hand corner
{x:-20,y:10}, // bottom edge to bottom left hand corner
{x:-20,y:-10}] // left hand edge to top left hand corner
// this last edge completes the rectangle
This rectangle would have a fixed size of 40×20. Because of the fixed size, this is not a particularly useful component. It would be more useful to substitute _widthOrignal/2 and _heightOriginal/2 for the constants 20 and 10. However, in this case, constants have been used here as they simplify the example. Note that a shape drawn with constants cannot be easily resized by moving the handles that surround the shape. The shape is simply redrawn the same size in a different location.
A Simple Shape
The contour described above can be used as the basis of an autoshape component. For example, an autoshape rectangle with a user configurable hole.
To create this component, in a new movie, draw a rectangle.
Name the rectangle rectanglewithhole.
In the outline panel, right click on the shape then select Author Component.
If this option is not visible, enable Authoring using:
Tools | Preferences | Editing and check Enable Authoring Options for Components and Wizards. (This option is not available in miniMax3.)
In the Author Component dialog, add a handle as shown in the image below:
The handle h1 is of type In Rectangle and has its boundary set as Top Right.
Paste the script below into the Apply (after) script area of a component. Then press the apply button. The script will draw a rectangle with a hole. The resulting hole is size is set according to handles.h1.x, handles.h1.y.
// w and h are shorthand for outsize width and height
w = _widthOriginal/2;
h = _heightOriginal/2;
// w2 and h2 are the inner width and height
// these are defined by the handle position
w2 = handles.h1.x; // inner width
h2 = -handles.h1.y; // inner height
// draw the shape
this.setContour(
[{x:-w,y:-h,fill:0,stroke:0}, // top left hand corner
{x:w,y:-h}, // edge to top right hand corner
{x:w,y:h}, // right hand edge to bottom right hand corner
{x:-w,y:h}, // bottom edge to bottom left hand corner
{x:-w,y:-h}, // left hand edge to top left hand corner
{x:-w2,y:-h2,edgeType:"start"}, // inner top left hand corner
{x:w2,y:-h2}, // inner edge to top right hand corner
{x:w2,y:h2}, // inner right hand edge to bottom right hand corner
{x:-w2,y:h2}, // inner bottom edge to bottom left hand corner
{x:-w2,y:-h2}]
);
Note that the edgeType:”start” is implied when the outer rectangle is drawn, but must be specified when the inner rectangle is drawn to prevent a line being drawn from -w,-h to -w2, -h2.
Drawing Curves
Flash draws its curves using Bezier Curves. You may have noticed the different possible edge types: quadratic and cubic. quadratic and cubic refer to the types of curves that can be supported via the edge definition.
For Example, the contour:
[{x:0,y:50,fill:0,stroke:0},
{x:-50,y:0,edgeType:"quadratic",controlPoints:[{x:0,y:0}]}]
Draws a quadratic bezier curve from 0,50 to -50,0 with a control point of 0,0.
By extension, it is possible to draw various shapes with combination of curved and straight sides.
[{x:0,y:50,fill:0,stroke:0},
{x:-50,y:0,edgeType:"quadratic",controlPoints:[{x:0,y:0}]},
{x:-50,y:-50},
{x:0,y:-50},
{x:50,y:0,edgeType:"quadratic",controlPoints:[{x:0,y:0}]},
{x:50,y:50},
{x:0,y:50}]
Draws:
As with the first example, it is possible to add handles to allow user configuration of various aspects of the shape. eg. the curve control points or the length of the straight sections. The counter option associated with the handle could be used to change some configuration aspect of the shape. eg. In the case of a star, the count could be used to define the number of points.
Asymetric Shapes
When a shape is drawn using the setContour() method, the bounding rectangle is redrawn around the shape and the reference and transform points are set according to the previously selected setting (center, top left, top right, etc). If this shape has been drawn in an asymmetrical manner, this may cause the previously defined reference point to become altered. For example, the supplied CircleSegment and Toroid_segment autoshapes.
centerX, centerY, originX and originY are predefined properties that specify the offset of the center with respect to the center before the drawing process commenced.
Handle positions can be transformed to their original co-ordinate system by adding the centerX, centerY offsets.
If it is desired to return the transform points to the original origin then this can be achieved as follows:
transformPosition = "custom";
transformX = -centerX;
transformY = -centerY;
Alternatively
transformPosition = "custom";
transformX = originX;
transformY = originY;
could be used.
Example Autoshapes
The autoshapes contained in this .zip file, demonstrate simple shapes based on a single quadratic and cubic curve. The shape is made complete by closing the shape using linear lines through the curve control points. The handles can be used to alter the position of the curve end points as well as the position of the control point(s). As these shapes can be asymmetrical, correction is made to the handle position by adding centerX and centerY. Please examine the Apply after script in each of the components.
The SWiSH Max3 Authoring Guide gives a description of the available wizard and component scripting methods for your reference.
