The updated components can be found in this zip file.

After downloading it, extract all files including the sub folders to:

C:\Program Files\SWiSH Max3\Components\

Note that the exact location may be different depending on where you installed SWiSH Max3 or miniMax3. If you are using a x64 system, the location will probably be:

C:\Program Files (x86)\SWiSH Max3\Components\

If you are using Vista or Win 7, you will need administrator permission to unzip the files into the correct destination folder.

These components work with Max3 and miniMax3 build 20091130 (or later). Use the following links to download the  latest SWiSH Max3 or latest SWiSH minMax3 if you are currently using a version prior to 20091130.

New or updated components (based on the Max3/miniMax3 build 20091130 installed components):

Buttons\Pushbutton\NumericKeyPad.*
Controls\Lists\Combo_silver.*
Controls\Scrollers\ImageZoom.*
Effects\2D\FilmScratch.*
Effects\2D\Texture.*
Menu\Menu.*
Shapes\2D\Autoshapes\Chart_decision.*
Shapes\2D\Autoshapes\Chart_ellipse.*
Shapes\2D\Autoshapes\Chart_rectangle.*
Shapes\2D\Autoshapes\Connector_arrow.*
Shapes\2D\Autoshapes\Line_arrow.*
Shapes\2D\Autoshapes\Measure.*
Shapes\2D\Autoshapes\RoundedRect.*
Shapes\2D\Autoshapes\Ruler.*
Shapes\2D\Autoshapes\Sunburst.*
Shapes\2D\Shapes and Icons\CrossAnimated.*
Shapes\2D\Shapes and Icons\TickAnimated.*
Shapes\2D\Shapes and Icons\TickCrossAnimated.*
Shapes\3D\Cylinder.*
Shapes\3D\Autoshapes\Coil.*
Text Display\EntryForm.*
Utility\DataBank.*

These components were mentioned in the articles:

• 3d Cylinder
• Databank
• Texture
• Numeric Keypad
• Film Scratch
• Well-Rounded (rectangles)
• Image Zoom
• Flow Charting
• Sunburst
• Coil
• Measure
• Ruler
• Tick & Cross
• Entry Form

In addition to the components outlined above, the  Hidden Words blog article provided special purpose wizard files to create a hidden word puzzle. See that blog article for download details.

The component comes with some prototype methods that check various aspects of the data that is entered by the user. This simplifies the verification of the data entered.

The sample below demonstrates the type of input forms that can be created.

Read on to find out more…

The label and input field font, font color, size and general layout can be altered by modifying the fields:

• EntryForm/userinput/label (label field) and
• EntryForm/userinput/ip (input field)

Pressing the Update button in the EntryForm parameters area cause the modified userinput (master) movie clip to be replicated to the other fields.

In a similar way, the background color can be altered by changing Shape object and the WarningIcon can be altered by changing (or substituting) the WarningIcon. Essentially, modify the movie clip userinput to behave as you require and the changes will be updated for all of the other fields after pressing the Update button.

The Script within the EntryForm component makes some assumptions about the naming and behavior of the userinput movie clip. Those assumptions are detailed later in this article. The assumptions must be followed (or the script modified) for the entry form to behave correctly.

The text for each of the labels is defined by the  Labels parameter. Each label is entered on a different line. Once the labels have been entered (or modified) the userinput movie clip is duplicated and re-aligned so that one exists for each label. The other parameters behave in the same way as described for the ClipClone component.

The component comes with a number of pre-defined methods that assist the designer in testing the validity of the user entered data.

The methods are described in the table below:

In the example entry form shown above, the following is used within the button Events function to check valid user entry:

// check that user data looks ok.
var formerror:Boolean = false;	// no known errors at this stage

TickAnimated.Hide();    // hide the big tick.
EntryForm.ResetWarnings();    // clear the warning flags

// first name - require at least 1 char.
formerror |= EntryForm.CheckMinLength(1,1);

// surname - require at least 2 chars
formerror |= EntryForm.CheckMinLength(2,2);

// address 1 - require at least 2 chars
formerror |= EntryForm.CheckMinLength(3,2);

// city - require at least 3 chars
formerror |= EntryForm.CheckMinLength(5,3);

// state - require at least 2 chars
formerror |= EntryForm.CheckMinLength(6,2);

// zip / post code - require integer (may not work for canada)
formerror |= EntryForm.CheckInteger(7);

// country - require at last 2 chars
formerror |= EntryForm.CheckMinLength(8,2);

// check valid phone number
formerror |= EntryForm.CheckPhone(9);

// check valid email address
formerror |= EntryForm.CheckValidEmail(10);
if (!formerror) {
  // all OK. Show the tick of approval.
  TickAnimated.Show();
}

It is possible to edit EntryForm and add or modify the data checking functions to meet your exact requirements.

Once the data has been verified it can be accessed via the GetItem() method described above.

More information on functions and event functions can be found here. The Event function should be tailored to perform the exact actions that you require regarding checking and data processing.

Note that the checking functions make some assumptions. These assumptions will be satisfied if the userinput movie clip assumptions outlined below are met.

userinput movie clip assumptions

It is important that the following assumptions regarding the “master” movie clip are met. Failure to do so may prevent the EntryForm from working correctly.

1. The master movie clip is named userinput. The master movie clip is the clip that is duplicated by the EntryForm component.
2. The warning icon within the film clip is named WarningIcon and has two methods Show() and Hide() to show and hide the icon.
3. The warning icon defaults to the hidden state when loaded.
4. label field (input heading) is named label.
5. The user input field is called ip and it has the target checkbox set. (input data is obtained from ip.text).
6. the ip object has the following script to ensure correct tab ordering. (This is not essential for the checking methods but it does ensure correct ordering if the user uses the Tab key to move between fields.)

onSelfEvent (load) {
 // consider the parent clip name and assign tab index.
 this._text.tabIndex = (_parent._name.length == 9)?"1":_parent._name.substr(9);
 this._text.tabEnabled = true;
}

This component will work with SWiSH Max3 and miniMax3 with build dates of 20091130 or later, and although the component is not included with the 20091130 build’s installer, it can be downloaded 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. We intend including the component in future releases of Max3 and miniMax3. On x64 systems, Max3 and miniMax3 are by default installed into C:\Program Files (x86)\

The example form shown above including the buttons and format checking can be downloaded here. The Events function of the main movie processes the button press events and either checks or clears the form depending on which button was pressed.

I hope you find this new component useful.

Read on to find out more about the Menu component…

The Menu component, like all components is configured using the Parameters panel. If the panel is not visible when you open Max3 or miniMax3, go Main Menu | Window and enable the Parameters panel. I find it convenient to dock this panel next to the Properties panel.

The parameters are discussed in detail in the online help manual that can be accessed via the link in the parameters panel.

The most important parameter, from a configuration point of view is the Tree parameter that is located in the Menu Definition group.

The Tree parameter describes the layout of the menu as well as the associated menu actions. A menu comprising of a number of levels or sub menus can be constructed using {} to define a sub menu.

The syntax for the menu tree definition is shown in the online help manual. Although the definition may look complex, it is reasonably simple to use. An example is shown below:

News=ShowNews;
Services=
{
  Local=
  {
    Area=area;
    State=state;
  }
  Remote=RemoteServices;
}
Gallery=Gallery;
Support=Support;
AboutUs=15;

The = sign separates the menu item text from the action that occurs if the item is pressed. The action can either be a sub menu “{…}”, a label (text string) a frame number (number) or a URL reference (A text string starting with “URL:“).

This menu example shown above has the following main menu items:
News | Services | Local | Remote | Gallery | Support | AboutUs

Services has a sub menu:
Local | Remote

Local has a sub menu:
Area | State

If the chosen item has a sub menu associated with it, then that sub menu item is displayed.

The action that occurs when one of the other items is selected depends on the value of the Event Function parameter in the Notification… parameter group.

If the Event Function parameter contains a value, then it defines the name of the event function. An event function if defined, is called with two parameters, n and v.

n will contain the name of the calling object. This will be “Menu” unless you rename the component.

v will contain the action value. This will be the item after the = sign in the Tree definition. More information on functions and event functions can be found here.

For example, if the user presses the News menu item and an Events function has been defined, it will be called with the parameters n=”Menu” and v=“ShowNews”.

If the Events function is not defined, then the movie will attempt to gotoAndPlay from the label “ShowNews”.

Note that if a movie contains multiple scenes, labels are the preferred method of navigation as, unlike frame numbers, they are unique across the movie.

To maintain compatibility with SWiSH Max2, the parameter uses a large edit box (as opposed to a popup edit box which is not available in Max2). This can make editing within the box a bit difficult. I suggest you copy and paste your tree layout to and from a text editor such as Notepad.

While writing this blog, I noticed a minor bug in the existing component (v1.2) that is only obvious if a color other than black is used for the text color:  you need to also edit the color of the itemtext object via the properties panel.

The updated component will be available in future releases, but for now it can be downloaded from here. Once downloaded, (assuming a default installation) unzip and copy the file to:

C:\Program Files\SWiSH Max3\Components\Menu\

Note that on 64 bit systems this may be:

C:\Program Files (x86)\SWiSH Max3\Components\Menu\

This will update your menu component. The new component should show a build date of 20100824 in the About Menu… group in the parameters panel.

The source for the example menu shown above can be downloaded from here. Note that this was constructed with the earlier version of the Menu component containing the bug described above.

Read on for more information and the download location.

The components are not supplied with the 20091130 version of Max3 / miniMax3 however they can be downloaded from here. Once downloaded, (assuming a default installation) unzip and copy the files to:

C:\Program Files\SWiSH Max3\Components\Shapes\2D\Shapes and Icons\

Note that on 64 bit systems this may be:

C:\Program Files (x86)\SWiSH Max3\Components\Shapes\2D\Shapes and Icons\

Three components are supplied in the .zip file. TickAnimated, CrossAnimated and TickCrossAnimated.

Tick Animated & Cross Animated

The parameters and methods for TickAnimated and CrossAnimated are shown by the tables below:

Parameters

The components also contains some methods that allow the item display to be controlled via scripting.

Methods

TickCrossAnimated

The TickCrossAnimated component is a combination of the above two components. It can display nothing, a tick or a cross. It would be useful for quiz pages where the user supplies answers.

Parameters

The component also contains some methods that allow the item display to be controlled via scripting.

Methods

The tick component works well with the bullet points component as shown in the example below.

The bullet point example uses the Texture Component to achieve the background texture and color. The example files for this blog article can be downloaded from here.

The example puzzle below was constructed from the names of planets and various stars.

The puzzle square is animated so that mouse clicks, or dragging over a square with the mouse button down, will cause the square to change color indicating that the letter is included in a word. Once the word has been marked, it can be crossed off the left hand side clue list by clicking on the word.

For the competitive people among us, you can time your progress with the inbuilt stopwatch.

Read on to see how to construct, customize and deploy these puzzles.

We have constructed two .swi files that are available here. The zip file contains two files:

• hiddenwords.swi and
• generatepuzzle.swi

hiddenwords.swi

hiddenwords.swi is used to display the puzzle to the users who will attempt to solve the puzzle. The .swf can be embedded in your main webpage, but you must initially create the puzzle using the generatepuzzle.swi file or .swf

The puzzle is defined by the query string that is used to open the page. This allows the same page to display an almost infinite number of puzzles simply by varying the query string.

ie. the sequence ?puzzle=ASCFE… is the query that defines the puzzle that is displayed.

A sample query string may look like this:

http://demos.swishspace.com/hiddenwords.html?puzzle=FqSSmVSzRhSROkNIUEEEgAPAMhwERNTGYLINAcdAPIERADCRLzTSPTUVjEAEHNSUUCUSaBRHAUJARPMNkACCURHETAOuERTATAMTRULNIAUzmNkSRORGANRrnUshSAENaCUiESUEGLETEBSh:ACHERNAR:ALDEBARAN:ANTARES:ARCTURUS:BETELGEUSE:CANOPUS:EARTH:FOMALHAUT:JUPITER:MARS:MERCURY:NEPTUNE:RIGEL:SATURN:SIRIUS:SOL:SPICA:URANUS:VEGA:VENUS

This .swi file is discussed in more detail later in this article. See hiddenwords.swi (2) below.

generatepuzzle.swi

generatepuzzle.swi is used to construct the query string that is used with hiddenwords.html/swf. A working example is shown below.

Enter 20 words and update the puzzle URL field if you are hosting your own puzzle page. Then press the CreatePuzzle button.

The script within the swf will create a random puzzle based on the words you have supplied. In some cases it will not be able to use all of the words. You can see the list of the words that were placed in the scrolling text box. If you are unhappy with the result, press back and then re-generate the puzzle. It may manage to place more words on a subsequent attempt.

Below the puzzle is a link. This link is based on the supplied puzzle URL and contains additional information to define the puzzle. This link information could be exchanged with your friends or pasted in your facebook page. Clicking on the link will open the puzzle.

Note: If you do click on the link in the example swf above, use right click / open in new window so you can navigate back to this blog.

The wizard interface for generatepuzzle.swi only contains two parameters:

• Default URL and
• Default Questions

The Default URL parameter allows definition of the default puzzle URL. Modify this value if you have uploaded the hiddenword.html and .swf files to your own location. Note that the user can also manually alter the Default URL value so the default URL does not really need to be set, but it can save time during testing.

The Default Questions parameter allows the twenty word values to be filled with initial data (one word per line). Clear this parameter if you do not want to default to all empty fields.

hiddenwords.swi (2)

As stated above, this .swi generates the .swf that represents the puzzle to be solved. The puzzle is defined via the query string allowing the exported .swf file to support all possible puzzle configurations. To export hiddenwords.swi as HTML+SWF you will need the java-querystring.swhtml template described in this blog article: “Passing data to Flash with URL query strings“. Refer to the heading: “Use the java-querystring.swhtml template“. This html template is required to pass the query string back to the .swf file that is created. Alternatively just publish the .swf file and pass the query string directly to that.

The .swi has been created with a wizard interface. The wizard interface allows most of the colors to be easily altered. Some of the possible color schemes are shown below:

The remaining wizard parameters Default Puzzle and Autostart Timer are used as follows:

Default Puzzle parameter allows a query string to be defined that will define the puzzle if an external query string is not provided. The query string can be copied from the Puzzle URL field of the generate puzzle .swi, but should only contain the information after the ?puzzle= text.

For example:

Use: BRAVEHEARTRAmPSYCHOhLEEVMCGoAUvLsIBANEHLPRAkuLETOsMIAFMSeECAIGeENDNAWMCRTyIWNAIEDAAnPHOTTTTAIEJmEDECRROOTLUdCwHAgEOfWOASNgknToVYgNReIuCASABLANCA:ALIEN:AMELIE:ARMADEUS:AVATAR:BRAVEHEART:CASABLANCA:CHINATOWN:DOWNFALL:GLADIATOR:HEAT:INCEPTION:JAWS:MEMENTO:PSYCHO:REBECCA:SNATCH:TROY:UP:VERTIGO
From: http://demos.swishspace.com/hiddenwords.html?puzzle=BRAVEHEARTRAmPSYCHOhLEEVMCGoAUvLsIBANEHLPRAkuLETOsMIAFMSeECAIGeENDNAWMCRTyIWNAIEDAAnPHOTTTTAIEJmEDECRROOTLUdCwHAgEOfWOASNgknToVYgNReIuCASABLANCA:ALIEN:AMELIE:ARMADEUS:AVATAR:BRAVEHEART:CASABLANCA:CHINATOWN:DOWNFALL:GLADIATOR:HEAT:INCEPTION:JAWS:MEMENTO:PSYCHO:REBECCA:SNATCH:TROY:UP:VERTIGO

The Autostart Timer parameter allows the .swf to be configured so that the timer starts immediately the page is opened.

I hope you have fun with this new puzzle and the puzzle generator. For your amusement an example puzzle based on movie names is shown below:

Updates 20100820

We found that the hiddenwords.swi wizard was saved with an absolute string defining the html template. This was causing the errors discussed in some of the blog comments below.

The wizard has been modified to fix this problem. Please download the .zip file to fix the problem. The hiddenwords.swi file should show a date of 20100820 in the wizard parameters about area.

Updates 20100830

After a user request, I have updated the templates to allow user specification of the number of rows and columns.  Two new parameters, Rows and Columns have been added to the wizard parameters for each of the movies. The default value is 12 for both parameters. If you choose to alter the values from the default setting note that both movies must have the same values for Rows and Columns otherwise the puzzle will not display correctly.

The updated .swi movies can be identified by a version number of 20100830 in the wizard parameters.

For Example:

http://www.mysite.com/mymovie.swf?var1=test1&var2=0

…will pass the values test1 and 0 to the variables var1 and var2. Note that the first variable is separated from the movie name via a ? character and each subsequent variable is then separated by the & character.

The sample link below allows you to experiment.

http://demos.swishspace.com/var1var2.swf?var1=test1&var2=0

Try reloading the page with different values for var1 and var2 by manually editing the browser reference. The reloaded page should show the revised values.

Read on to find out more about these variables, their advantages and some of the limitations.

This behavior can be extremely useful. Some of the possible uses include:

• Initialize the movie with user specific data such as name, address or customer ID.
• Set a specific color scheme
• Initialize a game or puzzle. This could allow a single movie to execute a number of game sequences depending on the passed variables.

However, some potential problems may occur when quoting a raw .swf file.

• The browser may not recognize or support the raw .swf file. (Possible error message or non display of webpage).
• The browser may recognize the .swf file but have an older (incompatible) version of the Flash player installed. (Possible error message or non display of webpage).
• The window size is not formally defined. It may display larger or smaller than intended. However, as the browser window is continually scalable this may not be a major problem.

These problems can be avoided if the Flash player object is embedded within an html web page. This happens automatically when you use SWiSH Max3 (or miniMax3) to export to HTML+SWF. However, the default html template that is used to create the html page does not support query strings. Two possibilities exist to get around this limitation:

1. Manual edit of the FlashVars parameter.
2. Use a new template java-querystring.swhtml that assembles the parameters in javascript before passing via the FlashVars parameter.

The two methods are discussed in detail below:

Manual edit of the FlashVars parameter

This method does not support an external query string. However it could be a convenient way of configuring your movie prior to export.

Using Tools | Preferences | Export make sure that the “Show export settings dialog when exporting” option is set.

When you export your movie to HTML+SWF you should eventually see the dialog below:

Choose the default template and enter the query string into the flashvars location. The items in the flashvars location will be passed to the .swf movie as a query string. Note that FlashVars requires SWF6+. Also note that you will need to test your movie via  ‘File | Test | HTML+SWF in Browser’ as the FlashVars are not defined if you simply press the play button.

The embed text that is created for the html file is shown below. The FlashVars sections are shown in red.

<object
 classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
 id="var1var2"
 width="248" height="134"
 >
 <param name="movie" value="var1var2.swf">
 <param name="bgcolor" value="#FFFFFF">
 <param name="quality" value="high">
 <param name="flashvars" value="var1=test1&var2=0">
 <param name="seamlesstabbing" value="false">
 <param name="allowscriptaccess" value="samedomain">
 <embed
 type="application/x-shockwave-flash"
 pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
 name="var1var2"
 width="248" height="134"
 src="var1var2.swf"
 bgcolor="#FFFFFF"
 quality="high"
 flashvars="var1=test1&var2=0"
 seamlesstabbing="false"
 allowscriptaccess="samedomain"
 >
 <noembed>
 </noembed>
 </embed>
 </object>

Use the java-querystring.swhtml template

This template uses javascript to dynamically create the object embed statement with the current query string. The template is not supplied with the 20091130 version of Max3 / miniMax3 however it can be downloaded from here. Once downloaded, (assuming a default installation) unzip and copy the file to:

C:\Program Files\SWiSH Max3\HTMLTemplates

Note that on 64 bit systems this may be:

C:\Program Files (x86)\SWiSH Max3\HTMLTemplates

Once the template is installed, make sure the “Show export settings dialog when exporting” option is set. Export the movie to HTML+SWF then select the java-querystring template via the html export dialog.

the java querystring template inserts the following javascript.

<SCRIPT LANGUAGE="JavaScript">
<!--
 var myQueryString=document.location.search;
 // remove the '?' sign if exists
 if (myQueryString[0]='?')
 {
 myQueryString=myQueryString.substr(1, myQueryString.length-1);
 }
document.write(
 '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"\n'+
 '  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"\n'+
 '  id="var1var2"\n'+
 '  width="248" height="134"\n'+
 '   >\n'+
 '  <param name="movie" value="var1var2.swf">\n'+
 '  <param name=FlashVars Value="' + myQueryString + '">\n'+
 '  <param name="bgcolor" value="#FFFFFF">\n'+
 '  <param name="quality" value="high">\n'+
 '<param name="seamlesstabbing" value="false">\n'+
 '<param name="allowscriptaccess" value="samedomain">\n'+
 '  <embed type="application/x-shockwave-flash"\n'+
 '    pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"\n'+
 '    name="var1var2"\n'+
 '    width="248" height="134"\n'+
 '    src="var1var2.swf"\n'+
 '    FlashVars="' + myQueryString + '"\n'+
 '    bgcolor="#FFFFFF"\n'+
 '    quality="high"\n'+
 'seamlesstabbing="false"\n'+
 'allowscriptaccess="samedomain"\n'+
 '  >\n'+
 '    <noembed>\n'+
 '    </noembed>\n'+
 '  </embed>\n'+
 '</object>\n');
</SCRIPT>

An example link is shown here:

http://demos.swishspace.com/var1var2.html?var1=test2&var2=3

Notes and Cautions

• All query string values should be coded with URL encoding.
• Variables are always loaded into the top level (_root) of the movie.
• If your movie depends on items set via the query string, the movie will not preview correctly using the play button as the items will not be defined. It will be necessary to either test HTML+SWF in Browser (manual edit of flash vars) or export HTML+SWF and then manually test as a file reference (Mozilla firefox OK, IE 8.0 does not support this). eg. C:\tmp\var1var2.html?var1=test4&var2=9
• As items passed this way are visible via the URL that is presented to the end user, this method should not be used with unencrypted data that is sensitive.
• The var1var2.swi sample move can be downloaded here.

Note that authoring is not available in miniMax3.

Select manual editing

Open the banner that you want to modify. For the sake of the demonstration I used Banner_005. As the banners have a similar internal structure, the modification should work for any of the banners.

Press the manual editing button to return Max3 to its normal look.

Enable Authoring

From the main Menu use Tools | Preferences | Editing

Make sure the Enable Authoring Options for Components and Wizards option is set. Then press OK.

Modify component attributes to enable authoring

The banner templates consist of a single banner component. Both the component and the template need minor modifications to support additional sizes.

By default most supplied components have their authoring disabled via the settings in their attributes. Authoring can be re-enabled by modifying those attributes.

Right click on the Banner object in the Outline panel.

And select Object Attributes from the menu.

Uncheck any Access or Visibility checkboxes that may be checked. This should enable component authoring of that component.

Author the component

The previously hidden items that make up the component can now be seen in the Outline panel.

Right click on the Banner object and select Author Component from the menu. This will open the Author Component panel. My personal preference is to dock the Author Component panel with the Layout panel as this provides a large work area.

Select the Parameters option to display the Parameters dialog. This dialog allows the definition of the parameters that are supplied in the Parameters panel. For this tutorial we need to modify the Control Parameters and the Display Parameters for the Size parameter.

Scroll the scroll bar until the required columns come into view.

The Display Parameters are the items that are displayed in the list box in the Parameters panel. The Control Parameters are the corresponding values that are passed to the component script. A Control Parameter item should exist for each Display Parameter item.

The Control Parameter for the Size Parameter is:

468x60;234x60;728x90;300x250;180x150

The corresponding Display Parameter is:

468x60 - Full Banner;234x60 - Half Banner;728x90 - Leaderboard;300x250 - Medium Rectangle;180x150 - Rectangle

Add your custom size(s) to the end of the Control Parameter. eg.

468x60;234x60;728x90;300x250;180x150;220x180

And add a corresponding item(s) to the Display Parameter. eg.

468x60 - Full Banner;234x60 - Half Banner;728x90 - Leaderboard;300x250 - Medium Rectangle;180x150 - Rectangle;220x180 - Custom

Then press the Apply button which should now be enabled. This applies the current parameter changes.

That completes the changes for the component. If desired, you can modify the attributes again to Conceal the script and Conceal the child objects. This will result in a less cluttered Outline panel when the component is used.

Close the Author Component panel by right clicking on the tab and select Hide author component panel.

Author the Wizard / Template

Right click on the movie tab (Banner_P005*) and select Movie | Author Wizard.

This will open the Wizard authoring panel.

The Parameters dialog should be similar to the dialog shown for the component parameters.

Modify the same parameter fields as described previously. And press the apply button.

Note that the modified fields should exactly match the modified fields in the component. Hide the Author Wizard panel in the same way that we closed the Author Component panel.

The Wizard panel should now display the new custom size as a size option.

As we have edited the component and the wizard, any previously selected images will need to be re-selected.

Select your new images and you are now ready to publish your banner with its new custom size of 220×180.

If it all works as expected, you can replace the existing banner template with the modified banner template. Copy your modified .swi file to:

C:\Program Files\SWiSH Max3\ProjectTemplates\Banners\Horizontal\Banner_005

Note that on 64 bit systems the folder will probably exist under c:\Program Files (x86)\…

The modified .swi file is can be downloaded from here.

All components and templates supplied with Max3 can be modified using the authoring tools, however these modification may require an understanding of the underlying component and wizard script. More information about authoring components and wizards can be obtained from the Max3 authoring guide.

The Ruler autoshape is used like a conventional ruler to measure and set distances between objects. Its angle can be set via the Parameters panel, or the angle between two objects can be read back from the Parameters panel after positioning the ruler via its handles.

In the example below, the ruler is used to align two ellipses along a 30 degree line at distances of 100 and 300 pixels from the bottom left hand corner of a rectangle.

To use the ruler in this way:

• Set its angle and length to 30 and 300 via the parameters panel. (See the note below regarding the angle).
• Drag to align the ruler with the bottom left hand corner of the rectangle.
• The ellipses can then be dragged into the required position as indicated by the ruler markings.

Note: Angles in Flash are arranged as follows:

Read on for more information and download details.

The ruler end positions can be adjusted using the green handles.

The length, angle and handle positions can all be manually set via the Parameters panel. This is useful if a specific length, angle or position is required.

Graduation markings can be configured to occur at an interval of 5, 10, 20, 25,30, 40 and 50 pixels.

Resetting the exclude option allows the user to over-ride the default behavior that prevents the ruler from being exported to the .swf movie file.

This component will work with SWiSH Max3 and MiniMax3 with build dates of 20091130 or later, and although the component is not included with the 20091130 build’s installer, it can be downloaded here. After downloading it, extract both files within the zip file to:

C:\Program Files\SWiSH Max3\Components\Shapes\2D\Autoshapes

Note that the exact location may be different depending on where you installed Max3, or MiniMax3. We intend including the component in future releases of Max3 and MiniMax3. On x64 systems, Max3 and MiniMax3 are by default installed into C:\Program Files (x86)\

I hope you find this new autoshape component useful.

Line Properties, Text Properties and Arrow options can also be altered via the Parameters panel.

Setting the Exclude from export option, prevents the autoshape from being included in the final exported movie. This may be useful if you wish to use the autoshape as a positioning or measuring tool.

This autoshape component will work with SWiSH Max3 and MiniMax3 with build dates of 20091130 or later, and although the component is not included with the 20091130 build’s installer, it can be downloaded here. After downloading it, extract both files within the zip file to:

C:\Program Files\SWiSH Max3\Components\Shapes\2D\Autoshapes

Note that the exact location may be different depending on where you installed Max3, or MiniMax3. We intend including the component in future releases of Max3 and MiniMax3. On x64 systems, Max3 and MiniMax3 are by default installed into C:\Program Files (x86)\

I hope you find this new autoshape component useful.

The ‘Use Device Fonts’ option is on the Typeface options shown in the Text object’s Properties panel.

 The examples below demonstrates the difference in clarity for different font options.

This screen capture was taken from an IE 8.0 Web browser running on Windows XP. This particular system did not have the Magneto font installed, hence the incorrect rendering of the Magneto font with the device option.

Embedded Fonts

As the name suggests, these fonts are added (i.e. embedded) in the .swf file that is created by Max. As a result, embedded fonts do not need to exist on the system that is viewing the web page. As the fonts are included with the .swf file, they should display exactly the same as when viewed on the authoring computer.

The inclusion of the fonts with the .swf file will result in slightly larger file sizes. This is not normally a problem for static text, but some care may be required if used with Dynamic or Input text types especially with asian character sets.

SWiSH Max has four types of Embedded font options:

• Vector: Standard fonts
• Vector Align:  tries to align the font lines along pixel lines for crisper text.
• Pixel Sharp: used when you want SWiSH Max to create bitmaps of the font using sharp points.
• Pixel Smooth: works best with rounded fonts and reliefs at larger point sizes.

The clarity of the different font types (Vector, Vector Align, Pixel Shape and Pixel Smooth) depends on a number of factors including the font size, angle and position within your movie. Generally embedded fonts look sharpest when the text is aligned left and the anchor for the object is set to upper left with integer x,y coordinates. However this does depend on the font size. You may achieve better clarity using left middle or left bottom anchors with integer x,y co-ordinates. Other considerations may also come into play - font size, scaling, kerning even the selected font itself can all affect the clarity.

There is no patent formula for dealing with fonts and associating an actual font with a matching font type. Experimentation gets the best results.

As a general rule, use vector fonts for larger point sizes and pixel fonts for smaller font sizes.

Pixel fonts, sometimes incorrectly referred to as bitmap fonts, have unique properties:

• They are specially crafted for one point size. If a pixel font is used it will only remain crisp at the specified pt size and multiples thereof. (i.e. they do not scale well).
• They will look blocky when higher point settings are used.

Embedded fonts cannot be used if you choose to render text as html ().

In general use Embedded fonts for:

• Titles and Large text
• When you want absolute control over how the font appears on the viewers computer.
• Text where the font is unusual and is not likely to be present on the viewing computer
• When the text is scaled or rotated. As many effects use scaling and rotation, generally choose an embedded font if you wish to apply an effect to it.
• When the text is masked.  (For Flash players before v10, Device fonts could not be masked.)

If you are using embedded fonts for input or dynamic text, consideration should be given to the included Character Options (). Pressing this button will open a dialog that allows specific characters to be included within the embedded font set. If the required characters are not included, they cannot be displayed. Note that the All characters option does not include all characters from the asian character sets. If those characters are required, they should be entered via the These characters option. Including all available asian characters could increase the size of your movie considerably because of the size of the character set. In this specific case, consider the use of Device fonts.

Device Fonts

Device fonts are available for SWF5 and above. When using this type of font, the text is rendered with the closest available font in the viewing computer’s browser. This means that the font may appear differently on the viewer’s computer when compared to the author’s computer.

To guarantee the highest probability of a good match it is suggested that only the fonts _sans, _serif or _typewriter are used. The visitor’s system will then choose the default font that applies (Arial, Times New Roman and Courier respectively).

There are a number of advantages and disadvantages associated with the use of device fonts when compared to Embedded fonts.

Advantages:

• No size overhead in the .swf file.
• Small fonts generally display clearer text than the corresponding embedded fonts.
• Can be used to display html text.
• Good with dynamic and input text as the full character set can be assumed to be available.

Disadvantages:

• Text may display differently on authoring and viewing computers.
• Cannot be scaled or rotated.
• Prior to Flash Player 10, cannot be masked.

When you are using embedded html, (i.e. the button is pressed), the html text will be displayed, but on pressing preview (play button) the rendered html text should be displayed. Note that only a subset of html tags are supported and that strict html should be used. Failure to do so may prevent the text from being displayed correctly or at all.

Happy SWiSH’ing

This updated article was based on content originally submitted by Mike Chrysler in 2004 in the SWiSH tutorials section. Many thanks to Mike for the original article.