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.

After downloading it, extract both files within the zip file to:

C:\Program Files\SWiSH Max3\Components\Text display

Note that the exact location may be different depending on where you installed Max3, or MiniMax3.

The component will also be included with future versions of Max3 and MiniMax3 within the Text display component group. The component requires Flash 8 or later because of its use of filters.

As the component is authored almost entirely with scripting and it contains no images or complex shapes, it is quick to load and could be used as a preloader displaying introductory text while the main part of your movie continues to download. Personally, I would rather read something (almost anything) than watch a progress bar while waiting for a site to load.  Note that that this component does not wait for the full movie to be loaded before proceeding. If used in this way, it is recommended that it progresses to a standard preloader scene on completion.

The parameters available for this component are shown below.

The text that was entered in the example is shown below:

"BLOCK BUSTER SCROLL"

Join the red carpet for
the Max3 premiere of
this new component.

Give your movies that
big screen feel with this
new Max3 component.

Simply drag it onto your
stage and alter the text
to your requirements. 

Colors as well as fonts
can be customised via
the parameters panel.

The effect can be
configured to repeat,
start automatically or
wait until started by
an event that occurs
within your movie.

Progress to a scene
or specific frame on
completion of the effect
can also be configured.

Note that each line of text is placed into a fixed size text block. If the text block is not big enough to hold the entire line, the text will be truncated. It is possible to alter the width of the text block via the Width parameter. Alternatively, select a smaller font size. Note that the width of the text block will affect how much the characters slope in towards the center.

If the Initial Pause parameter is set causing the component not to automatically display the text, the display can be started using the script command:

BlockBusterScroll.gotoAndPlay(”ShowText”);

Where BlockBusterScroll is the name of the component movie clip.

If an events function is defined by the Event Function parameter, then that function will be called with the parameters name, true when the scroll process is complete. Name is the movie clip name and true is a boolean value and will always be true. The 2nd parameter allows the same events function to be shared with other components that may assume a 2nd parameter.

Alternatively, a Scene can be defined by the Goto Scene parameter. If a scene is defined, then the movie will progress to the nominated scene / frame (or label) on completion of the scroll process.

Note that if a label is used, then the defined scene is ignored as labels are assumed to be unique within a movie (ie. progressing to a specified label can jump across scenes.)

I think that covers the major aspects of this new component. I hope you enjoy using it.

Load the Project

From the main menu go: File | New Project…
and select Sites | HiFi
For the destination project name enter something like “HiFiMoreSections” and press OK

This will copy the template files to a working area in the nominated folder under the destination project name and open the project files, main.swi, section1.swi … section5.swi

Edit main.swi

In the Wizard panel, select main then press the manual edit button.

Max3 should now have a layout similar to the one shown below. (Note that the exact placement of panels may be different depending on your preferences. Panels that are not visible can be enabled using the Window menu item. )

Add a New Menu Item

Expand MAIN.MENU then select MENU_5.

Copy / Paste In Place, then rename the new object MENU_6 and move it to the bottom of the MENU items.

Alter the _y position from 89.45 to 109.45

The menu should now look like the image below:

Add a new Content Movie Clip

Expand MAIN.CONTENT.CONTENT
Copy MAIN.CONTENT.CONTENT.CONTENT_5 and paste in place back into MAIN.CONTENT.CONTENT then rename the copied item MAIN.CONTENT.CONTENT.CONTENT_6 and move to the bottom of MAIN.CONTENT.CONTENT.

The tree should now look like the image below:

Alter Script for MENU_6

In the Outline panel, select MAIN.MENU.MENU_6 then select the Script panel.

Change

onSelfEvent (load) {
 var id: Number = 5;
}

to

onSelfEvent (load)  {
 var id: Number = 6;
}

Alter Script for siteSpecs

In the Outline panel, select MAIN.siteSpecs and in the Script panel alter

onSelfEvent (load) {
    _parent.n_sections = 5;
    _parent.current_id = 1;

to

onSelfEvent (load) {
    _parent.n_sections = _parent.parameters.SectionsCount;
    _parent.current_id = 1;

In the working folder (the same folder that contains main.swi) copy section2.swi to section6.swi. This creates an initial template file for use by the wizard.

Template / Wizard Changes

To make the new section easily accessable the following wizard changes are needed. To enable wizard authoring, from the main menu go:
Preferences / Editing and check the
Enable Authoring Options for Components and Wizards check box.

Right click on the tab for main and then select Movie | Author Wizard

this will open the Author Wizard panel.

Personally I find it convenient to dock this panel with the Layout and Script panels.

Parameter Changes

It is necessary to modify and add parameters to support the new section.

In the Parameters section of the Author Wizard:

• Alter parameter SectionsCount so that ControlParameters is 1;2;3;4;5;6 instead of 1;2;3;4;5
• Add a parameter after Section5Type called Section6Type then duplicate the other settings used for Section5Type changing 5 to 6 where appropriate.
• Add a parameter, Menu6Text, so that it appears under Menu5Text. Again, duplicate the settings for Menu5Text changing 5 to 6 where appropriate. Pay specific attention to the Assoc Parameter field which must be MAIN.MENU.MENU_6.TEXT_FIELD.TEXT_FIELD.text
• Modify the parameter MenuProperties by appending ;MAIN.MENU.MENU_6.TEXT_FIELD.TEXT_FIELD to the existing contents of the Assoc Parameter field.

Press the Apply button to save the changes.

Alter the Value of the parameter Item 6 in the Menu group to “Stuff” using the Wizard panel. Changing this value should cause the menu caption of the new section to change in the layout panel.

Apply before script

This script is executed when a parameter is altered. Alter the script at about line 16 as follows:

if ("SectionsCount" == parameterChanged) {
    // enable or disable menu items depending on number of sections
    var i;
    var blEnabled;
    for (i=1;i< =5;i++) {

to

if ("SectionsCount" == parameterChanged) {
    // enable or disable menu items depending on number of sections
    var i;
    var blEnabled;
    for (i=1;i< =6;i++) {

Press the apply button and resave main.

Well that’s about all that is required. Initially set Count to 6 in the Sections group then choose a different section type for section 6, then choose a different one again to be sure that the template gets copied over.  Now press preview or publish. You should now see a new section under the heading “Stuff” (Note: you can easily alter the heading name using the Menu group of the Wizard panel).

Resave as a Template with a New Name

If you want to save this template so that it can be used as the basis of future templates, do the following:

Modify the .swp file

Locate the file HiFi.swp. This should reside in the folder “HiFiMoreSections”.

Rename the file “HiFi More Sections.swp” then edit it using a text editor such as notepad and alter it so that it shows the information below:

open=working\main.swi
project=HiFi6
preview=HiFi More Sections.jpg
descriptiontext=An example web site for your business or portfolio with 6 sections.
thumbborder=0

Save the file.

Now rename the .jpg file from “HiFi.jpg” to “HiFi More Sections.jpg”. The jpg name must match the .swp file name.

Copy the New Template back to the Templates folder.

The site templates are normally located under:
c:\Program Files\SWiSH Max3\ProjectTemplates\Sites
This area may be different if you have installed Max3 to a different drive or folder.

Simply copy the entire folder, “HiFiMoreSections” into the Sites area. The full path to the modified .swp file should now be:

c:\Program Files\SWiSH Max3\ProjectTemplates\Sites\HiFiMoreSections\HiFiMoreSections.swp

When you now open a new project, you should see the following:

The modified main.swi file is here.

Note: Other sample templates supplied with Max3 have been authored using different script. Consquently the modifications described here may not work with any site template other than HiFi.

The path quoted in the previous article does not exist in Windows 7. Simply create your gadget as described in any folder then package the gadget as described below.

The two sample gadgets clock and calc need to be repackaged as a gadget installation package for use on Windows 7.

In the case of calc.zip it contains the following files in a sub folder named Calc.gadget

Calc.gadget\CalcGadget.html
Calc.gadget\CalcGadget.swf
Calc.gadget\CalcGadget.swi
Calc.gadget\gadget.png
Calc.gadget\gadget.xml

Simply zip the files…

CalcGadget.html
CalcGadget.swf
gadget.png
gadget.xml

…into a new zip file (note that they are no longer in a sub folder) then rename the zip file “Calc.gadget”. The important thing is that the filename ends with “.gadget”

The icon should change to a gadget icon if you are using Vista or Windows7.

Now double click on the gadget icon. The installation prompt shown below will appear.

Pressing install will install the gadget onto the desktop and also into the desktop gadgets gallery. If you do not already have the flash player installed, you may be prompted to install that too.

When installation is complete, the gadget will appear on the desktop and also within the Gadget Gallery.

The gadget gallery is easily located by typing “gadget” into the Windows7 search area.

Enjoy!

The wizard concept is an extension of the components used in SWiSH Max2. A Component applies to a movie clip, a Wizard applies to an entire movie (or in some cases, multiple movies). Using Wizards you can create templates that present a simplified interface to users who will carry out the final customization. The items that are available for customization are determined by the Wizard author.

To enable Wizard and Component authoring, from the main menu go:
Tools | Preferences | Editing
and check the “Enable Authoring Options for Components and Wizards” checkbox.

If the Author Wizard panel is not enabled, from the main menu go:
Window | Author Wizard (set the checkbox)
Personally, I find it convenient to dock the Author Wizard panel with the Layout and Script panels.

Create a new movie using the Blank Movie option.
Add some text and some shapes to your movie.
Wizard creation is simplified if each item within your movie is given a name. In my example movie, I have named the text “t1″ and the shapes “s1″ and “s2″.

The easiest way to set the color fill of shapes is via the content library. Please refer to the blog article Using Content Library.

I have set the fill color of both shapes to link to the content library color resource named “shapefill”. This item should be visible in the Content panel. As both shapes refer to the same color resource, changing the resource in the library will change the color for both shapes. This feature can be used to simplify configuration as color themes can be a applied to a number of objects simultaneously with the one color edit. In addition, it will reduce the number of wizard parameters that must be presented to the end user. Alternatively, if it is desired to give each shape a different color fill, then each shape could refer to its own individual color resource in the library.

Pressing the Author Selected button on the Author Wizard panel will open the panel with the currently selected movie as its target.

The Wizard parameters will be displayed by default. In this panel you can define the parameters that are presented to the user.
Press the + Add button
Add items according to the table below:

The above items have defined a parameter named Text of type String. When text is placed into the wizard edit box, it will be written to the associated property which is in this case Scene_1.t1.text. This will cause the text field to be updated with whatever the user types into the wizard edit box.

Press the + Add button again and add the following items into the Parameters panel:

This parameter allows the user to alter some of the Text Properties of the text field. Note that the name entered is TextProperties - parameter names should not contain spaces. However the Display Name field (if defined) allows the user to dispaly a name that does contain spaces, ie. “Text Properties”.

The Type and Control fields are both set to Object Properties. This allows a properties panel to be presented to user so that they can modify specific properties associated with the text field. The Control Parameters field is set to “-all+fontdetails” -all means disable all user modifiable items in the properties panel,  +fontdetails means re-enable only the items that allow the font details to be modified. In this way the end user can be prevented from modifying items that they are not meant to, eg. the name of the text field. Finally the Assoc Property field is set to Scene_1.t1 to associate the Properties panel with a specific object within the movie.

Press the + Add button
Add items according to the table below:

This parameter allows the color of the shapes to be modified. This is done via the Assoc Property field which associates the parameter with the library shapefill resource. This is done via the Property library.shapefill.color

Finally, press the + Add button
Add items according to the table below:

This parameter sets the background color via the movie property “backgroundColor”. The control that was used is “color” as the backgroundColor property does not support alpha.

After adding the above parameters, press the Apply button in the Author wizard panel.

The Wizard panel should now show 4 parameters for the movie.

Using these parameters it is now possible to alter the text, shape color and background color.

This is just a simple example to demonstrate what is possible through the use of Wizard authoring. The example1.swi movie discussed in this article can be downloaded from here.

More complex parameter modification is possible using the other views that are available in the Author Wizard panel.

The forum topic Authoring Wizards and Components contains additional information as well as a link to the Authoring Wizards manual which lists the additional movie properties that are available to wizard authors.

There is also a screencast Creating a Simple Wizard Project which will help give an overview.

Good luck wizarding!

For example, your movie may display a number of image thumbnails. When a thumbnail is selected, the full size image is displayed. If the images are stored in the library, then both the thumbnail and fullsize image can be linked to the same library reference. This removes the need to store the same image twice (once for the thumbnail, once for the fullsize image) as both objects refer (or link) to the same library reference. In a similar way, the blog article A Magnifying Glass uses the library to provide two views of the same image. One with the image sized normally, and another in a magnified state for use with the magnifying glass.

The link icon  indicates when an object is linked to a library reference. If desired, the link can be broken by pressing the button and selecting the break link icon.

To add an item to the library, press the button in the Properties Panel. This will open a dialog that allows you to give the library item a name and choose if you add and link (Add to Library and create a link) or add and copy (Add a copy to the Library). Normally you would use the Add to Library and create a link option as this makes the most efficient use of storage.

When the item has been added to the library, it can be seen in the content panel. The content is sorted according to its type with each type of content existing in its own folder.

It is also possible to import content directly into the library via the Import to Library Drop Down control.

Library content can be modified by double clicking on the item in the Content panel. Any modification will apply to all linked objects. This facility can be used to rapidly implement movie wide changes.

For example, you could define navigation buttons that use color and gradient resources defined in the library. Changing the color or gradient fill of the library reference will change the color of all of the buttons that are linked to it. This technique is often used with the supplied templates and galleries as it simplifies configuration.

In the example below, b1 was made with 3 rectangles, press, over and normal. The color fill in each of those rectangles is set to refer to a library element, press, colorover and colornormal. The button was then copied 3 times to make buttons b2, b3 and b4.

If it is desired to change the color of all of the buttons, it is only necessary to alter the appropriate color fill in the content library.

This is shown in the screen capture below where the colornormal fill has been changed to light Grey.

In the case of Max3 and Wizards, the use of the library reduces the number of parameters that need be made available to the user via the wizard panel. The above example can have wizard control added by simply adding parameters for the three library color fills.

The three library fills are conveniently referenced via the Assoc Property field of the parameters table via library.press.color, library.colorover.color and library.colornormal.color. The names shown in italics must match the user chosen names of the library references. The .color extension means associate with the color properties of the library reference. This is needed when referring to color fills.

This results in the wizard panel which presents the three color options to the user. Any changes made via the wizard panel will be applied to all 4 buttons via the library linkages.

This Max3 wizard example is supplied in librarywizard.zip.

The library can also be used to simplify the editing of multiple text objects.

Text characteristics such as font, font size and color can also be manipulated by saving a single text object to the library and then making multiple links to that single library reference.

The use of text in this way is slightly more complex as the linked text objects will always show the same text unless dynamic text is used, and item specific text is loaded dynamically by script.

The example below (not playing), shows a movie with a shared library reference called headingtext. This reference is a dynamic text object. The linked items, t1, t2 and t3 are all linked to headingtext and hence share the same text style. When the movie is played, the onSelfEvent (load) script inserts different text into each of the dynamic text objects.

The same movie in preview mode:

As stated previously, double clicking on the item in the Content Panel will allow the item to be edited / modified. In the case of the library item headingtext, you will see something like that shown below. However your layout may be slightly different because of your chosen panel layout.

In this state, the properties of the library item can be altered. For example the font color, size or type could be altered. This would change the style of t1, t2 and t3 in the main movie.

Note the red X symbol in the type left hand corner of the layout panel. This closes the symbol editor. Closing the symbol editor completes the edit process and returns the layout panel to its normal state. A movie cannot be saved while the symbol editor is open.

The text example shown above is contained in the librarytext.zip file.

The countdown component is based on the SevenSegmentCluster component. This new component allows a multiple digit display to be created. The Number of digits is chosen by the user via the Parameters Panel and can range from 1 to 16.

The SevenSegmentCluster component is based on the SevenSegment Data display component that is supplied with SWiSH Max3. However, the SevenSegment component has been modified in the following ways:
1. Added the Colon segments and corresponding Method SetColon(value)
2. Modified the DisplayDigit(n,p) method so that ” ” and “-” are also recognized as valid display values. This allows a digit to be blanked (” “) or set to “-” (only the middle horizontal segment is lit).

The components will be shipped with future releases of SWiSH Max3, but are also available in this .zip file. Copy the contents to your Components\Data display folder. The components require Max3 build 20090904 or later.

Configuration

To configure the CountdownTimer, simply enter the target date and time in the Parameters Panel.

If the parameters panel is not visible, use Menu | Window to display it.

The hours field is 24 hour format so enter a number 0 to 23 (0 = midnight, 23 =11pm). The Parameters Panel also allows the color of the digits and the other text to be altered.

If the GMT checkbox is checked, then the alarm time will be relative to GMT time. This allows users in different locations to see the same countdown indication (assuming their clocks are set correctly and their computer has the local time offset correctly configured).

Technical Description

For those interested, here is a brief description of how it works…

Time Calculations

The target countdown time is inserted into a date object using the setUTC methods in the onSelfEvent (load) script. This sets the target date according to GMT based on the parameters in the parameters panel. The getTime() method is then used to obtain the number of milliseconds since midnight January 1, 1970. This is saved the variable t1, which is used for all future offset calculations.

onSelfEvent (load) {
 d = new Date();

 d.setUTCFullYear(parameters.Year, parameters.Month, parameters.Day);
 d.setUTCHours(parameters.Hour);
 d.setUTCMinutes(parameters.Minute);
 d.setUTCSeconds(0);
 d.setUTCMilliseconds(0);

 t1 = d.getTime();

The SetCounter(t) function calculates the difference between the target time and the current time and then displays the result in the SevenSegmentCluster component.

If local time is being used then the users time zone offset is added to the calculations.

The time difference is then converted from milliseconds to seconds for display in the SevenSegmentCluster.

The time difference is broken into days, hours, minutes and seconds using division and remainder calculations. dd is the variable containing the time difference in seconds.

// convert number of seconds into days, hours, minutes and seconds
 dday = Math.floor(dd / (24*3600));    // get number of days.
 dd -= dday * 24*3600; // calculate remainder
 dhour = Math.floor(dd / 3600);    // get number of hours
 dd -= dhour * 3600; // calculate remainder
 dmin = Math.floor(dd / 60);    // number of minutes
 dd -= dmin *60; // calculate remainder
 dd = Math.round(dd);    // number of seconds

// write out number of seconds
 SevenSegmentCluster.Digit_0.DisplayDigit(dd%10, false);
 SevenSegmentCluster.Digit_1.DisplayDigit(Math.floor(dd/10), false);

 // write out number of minutes
 SevenSegmentCluster.Digit_2.DisplayDigit(dmin%10, false);
 SevenSegmentCluster.Digit_3.DisplayDigit(Math.floor(dmin/10), false);

 // write out number of hours
 SevenSegmentCluster.Digit_4.DisplayDigit(dhour%10, false);
 SevenSegmentCluster.Digit_5.DisplayDigit(Math.floor(dhour/10), false);

 // write out number of days
 SevenSegmentCluster.Digit_7.DisplayDigit(dday%10, false);
 dday = Math.floor(dday/10);
 SevenSegmentCluster.Digit_8.DisplayDigit(dday%10, false);
 dday = Math.floor(dday/10);
 SevenSegmentCluster.Digit_9.DisplayDigit(dday%10, false);

The configuration and use of each of the Digits within the SevenSegmentCluster is shown in the table below:

Timer Routine

The onSelfEvent (load) script also defines an interval function and then sets up an interval timer to call the function on a regular basis (1/4 second, 250mS). A smaller interval could be used to increase accuracy but this would also increase CPU load.

 function UpdateDisplay() {
  SetCounter(t1);
 }
 var intervalID = setInterval(UpdateDisplay, 250);

End Processing

When the SetCounter(t) function calculates a negative time interval, the countdown has expired. When this happens, all digits are blanked, the colons on digits 2 and 4 are turned off, and digits 4, 5 and 6 are set to display the word “End” by setting specific segments. The interval timer is also stopped to reduce CPU load.

if (dd < 0) {
 // time has expired, display "End"
 // turn off all digits
 SevenSegmentCluster.Digit_0.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_1.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_2.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_3.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_4.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_5.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_6.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_7.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_8.DisplayDigit(" ", false);
 SevenSegmentCluster.Digit_9.DisplayDigit(" ", false);

 // turn off both colons
 SevenSegmentCluster.Digit_2.SetColon(false);
 SevenSegmentCluster.Digit_4.SetColon(false);

 // display End
 SevenSegmentCluster.Digit_4.SetSegments(false,true,true,false,true,true,true);
 SevenSegmentCluster.Digit_5.SetSegments(false,true,false,false,false,true,true);
 SevenSegmentCluster.Digit_6.SetSegments(true,true,true,true,false,true,false);
 clearInterval(intervalID);
 return;
 }

The SetSegments(a,b,c,d,e,f,g) method allows each individual segment, a to g to be set individually. The segment codes are shown in the diagram to the left.

Unfortunately, the segment codes that are used by the SevenSegment component are not industry standard. We apologize for this error, but cannot correct it as correction would make the revised component incompatible with users that may have deployed the previous version.

The correspondence between the industry standard designation (A to G) and the Max3 designation (a to g) is as follows:

A=a, B=e, C=g, D=c, E=f, F=d, G=b.

SWiSH Max3

DOWNLOAD FREE TRIAL – SWiSH Max3

SUPER SALE – SUPER SALE – SUPER SALE

SWiSH Max3 – SALE $99.95! (RRP $149.95)

UPGRADE OPTIONS:

• SWiSH Max2 to Max3 – SALE $16.95(RRP $24.95)
• SWiSHminMax3 to Max3 – SALE $56.95(RRP $84.95)
• SWiSH Max to Max3 – SALE $66.95(RRP $99.95)

Note: These ‘Super Sale’ discount prices are ONLY available until Oct 16, 2009.

SWiSH miniMax3

SWiSH miniMax3 suits the business user, student or anyone new to Flash who wants to get quick, professional results. New features include Project Tempaltes, improved drawing tools and more components including autoshapes. SWiSH miniMax3 is now at the new low price of only $69.95 – super value for a great Flash editor. Check out the product comparison between SWiSH miniMax3 and SWiSH Max3 here.

DOWNLOAD FREE TRIAL – SWiSH miniMax3

SUPER SALE – SUPER SALE – SUPER SALE

SWiSH miniMax3 – SALE $49.95! (RRP $69.95)

UPGRADE OPTIONS:

• SWiSH Max to miniMax3 – SALE $19.95 (RRP $29.95)

Note: These ‘Super Sale’ discount prices are ONLY available until Oct 16, 2009.

What’s new in SWiSH Max3 and SWiSH miniMax3

Here is a list of changes for SWiSH Max3 and miniMax3 from the previous version. You can also click here for screencaps of these features and screencast demonstrations. Check out the product comparison between SWiSH miniMax3 and SWiSH Max3 here.

Projects and Wizards
Project templates can be opened to allow easy customization of multi-document templates from the ‘Wizard’ panel.

Shape Operations (Max3 only)
Select multiple objects and chose to add, subtract and perform other boolean operations on the group. E.g. use a circle to punch a hole in a square.

Knife Tool (Max3 only)
Cut any vector shape with a freehand curve. Smooth the curve before, or after, placement.

Smoothing options for Knife and Pencil Tool
When drawing a freehand curve it is useful to smooth the results to reduce the number of vertices.

Motion Path bézier curves
Motion paths now have bézier curves which can be edited with the Subselection tool just like the Pen Tool.

Convert Shape to Motion Path (Max3 only)
Creating a motion path is now even easier. Select a shape and make it your new motion path.

Even More Components
Even more components, including several auto-shape components for enhanced drawing capability.

Component Tool (Max3 only)
Make your favourite components quick and easy to select using the new component tool.

Support for Flash AS2 Classes (Max3 only)
Advanced scripting now includes support for Adobe Flash Actionscript 2 (AS2) Classes.

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.

User created autoshapes are now possible, however advanced scripting knowledge is required. As with all of the currently supplied components, it is possible to view the component scripting by altering the component object attributes once it has been placed on the stage. In this way, it is possible to use the existing components as an example for user authored components.

Some interesting new autoshape components that have been added to Max3 include:

• Various arrows: 2 way (a), 4 way (b), L (c) and T shape (d)
• Circle Segment (e)
• Cookie Cutter (f)
• Connector Line (i)
• Cross (g)
• Lshape (h)
• Various rectangles: beveled (j), champher (k) and rounded (l)
• Spiral (m)
• Splat (n)
• Toroid (o)
• Toroid Segment (p)
• Triangle (q)

Of the new components, I think that Splat (n), Cookie Cutter (f) and Spiral (m) are my personal favorites.

This Screen cast shows how to use the Splat autoshape.

The Splat autoshape (as well as the Cookie Cutter autoshape) can be used to create interesting frames for photographs. The Splat autoshape provides an easy way to draw irregular closed shapes with smooth edges. eg. a cartoon face profile.

The Cookie Cutter autoshape allows regular shapes to be created that have a fixed number of segments. The handles can be dragged to change the position of the inner and outer points. Both handles are also counter handles. Clicking on the outside handle cycles through the various corner modes (smooth-smooth, sharp-smooth, and sharp-sharp). Clicking on the inner handle increments (or decrements if right click is used). This autoshape can be used to create star, flower and curvy star type shapes with any number of points.

The Spiral autoshape is interesting as it can be used as the basis of a motion path. This screen cast gives more information.