Many users have asked how to do a 3-D scroll into the distance text effect as seen in some very popular science fiction movies. Although scrolling text is reasonably easy to achieve, it is far more difficult to give it the 3-D look as seen in the movies. We have done all the work for you and produced a component that you can simply drag onto the stage.

This component will work with Max3 and MiniMax3 with build dates of 20090904 or later, and although the component is not included with the 20090904 build’s installer, it can be download here.

(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.

One of the new features of SWiSH Max3 is extensions to the component scripting that allow shapes to be drawn dynamically. This means that autoshapes can be supplied via the component interface. As this greatly simplifies the creation of autoshapes you’ll find new autoshapes will be added in future releases of Max3.

(more…)

Many modern digital cameras come with software that allows you to “stitch” multiple photos together. This can be used to create a spectacular panoramic image. With the addition of a scroll bar, you can add some intrigue to your website by allowing a user to scroll the panorama within a 4:3 aspect ratio window.

This article will show you how to add a scrollbar and a preloader to your movie to scroll wide images. The sample file can be found here.

(more…)

The Combo_silver component and the getURL() script command can be used together to provide a convenient and space effective way of presenting a list of links to other websites.

The example above uses the Combo_silver component (Components | Controls | Lists | Combo_silver).

(more…)