The HiFi project template is one of the more popular free sample templates that is distributed with SWiSH Max3. Although feedback has been positive, we have received a number of requests to increase the number of sections. The discussion below shows how to edit the supplied template to add an additional section. You could repeat this process a number of times to add even more sections.
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.
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.
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.
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.
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.
Everyone has noticed those Flash page curls advertisements, but I bet you never thought it’d be this easy to add to your Flash movie? This article demonstrates the use of a new SWiSH Max2 / miniMax2 component “peelaway”.
Even if you don’t need an advertisement the corner fold can allow the user access to additional controls or buttons and leave the full space available at the “top” level. This is a very good use of space since all the facing area is available to display the main images, text or buttons, but additional levels can be easily accessed via the corner fold.
Unfortunately corner folds are reasonably complex to achieve. We have taken the pain out of the process by creating a corner fold component called “peelaway”. This component will be released in future releases of SWiSH Max2 and miniMax2, but it is available here for those that are interested. A demonstration movie giving an idea of how the component can be used is shown below and is also included in the zip file attached to the bottom of this article.
If you’re new to SWiSH Max2 and Flash you may not realize it’s possible to dynamically draw objects (lines and shapes) through scripting. Drawing on the screen opens up new and exciting possibilities for user iteraction with your Flash movies. This example emulates a whiteboard. If you press the left mouse button and drag the mouse, within the region below, you can draw arbitrary lines.
The source draw.swi file is contained in this .zip file – draw.zip. The zip file also contains drawrandom.swi, a simple extension that draws with a random color each time a the left mouse button is pressed.
Vista users will be aware of the sidebar and the gadgets that it can contain. Although the sidebar has been dismissed by many as a hog of screen real estate, I personally think it is quite useful. I suspect that most SWiSH’ers are not aware of how easy it is to make great looking sidebar gadgets using SWiSH Max2 or SWiSH miniMax2.
By dragging the handles of an object you will scale the contents inside it. When creating components, there are times that you might not want the component itself to be resized but instead allow users to resize only part of the component, or disable resizing completely. This tutorial will show you methods to either enable or disable resizing of a component when you drag it’s object handles.
You can download the example files for this tutorial here - max2-component-resize-handles