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.

(more…)

The windows sidebar has been removed from Windows 7. However, Gadgets are still supported. Our earlier blog article ‘Make a Vista sidebar gadget’ explained how to make a gadget for Vista, this followup article explains how to convert these previously described gadgets for use on Windows 7.

(more…)

SWiSH Max3 users that have used the New Project… feature will realize that Max3 is supplied with number of example projects that can be easily customized using the wizard interface. The projects, galleries, sites and banners available under the New Project dialog are all examples of Max3 Wizards. This tutorial gives an example of how to create a simple wizard to alter the text, shape color and background color of an object. 

(more…)

One of the more powerful features of SWiSH Max3 (and Max2) is the availability of the Content Library. (Sorry, the Library is not available in miniMax products.)  The Library allows various Resources to be shared across multiple objects in your movie. Not only does this reduce the size of your movie (i.e. it will load faster), it can also simplify editing changes to your movie since editing the single library resource will cause the change to be reflected in all of the objects that link to this common resource.

(more…)

Have you ever wanted a countdown timer for your website, or wondered how long it is until 1st Jan 2012 (local time)? If so, then this component could be for you!  This new CountdownTimer component allows you to specify a countdown date (Year, Month, Day, Hour and minute) in either local time or GMT time. The display then shows the remaining days (max days is 999), hours, minutes and seconds. At the end of the countdown period it will display “End” in the seven segment display.

(more…)

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:

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.