Actions and Animation

Actions Overview:

Actions are the key to creating interesting navigation and menu systems such as expandable menus, animated navigation and more interesting interactive applets and Flash files.

Basically an action allows one button to control the appearance or position of other buttons (including itself). You specify actions to be performed when an event occurs such as when a button is pressed or mouse-over occurs.

Actions may look complicated, but really are quite simple to create using the Action dialog (pictured above) - once you get going, you will be amazed at what can be achieved using a series of actions.

Example:
The example action pictured above will move the button named "sunflower" to a position 100 pixels to the right and 50 pixel down the screen. This will occur over 100 frames.

Note:
You do not have to use the Add Action dialog to add or edit actions. You can add or edit them directly using the actions text box on the general or button properties window.

When can Actions be Triggered?

Actions may be triggered when one of the following events occur:

  • On Leaving Button
    Whenever the button state changes to the up state.
  • On Entering Button
    Whenever the button state changes to the mouse-over state.
  • On Button Down
    Whenever the button state changes to the down state.
  • On Mouse Up
    Whenever the mouse button is released inside the button.
  • On Check
    Whenever a checkbox or radio button becomes checked (selected).
  • On Uncheck
    Whenever a checkbox or radio button becomes unchecked (deselected).

Actions may also be triggered when your project starts. You access this facility on the General Properties Tab.

Some Simple Actions:

  • Show -- makes a button visible.

  • Hide -- makes a button disappear.

  • Up -- sets a button's state to the Up State.

  • Over -- sets a button's state to Mouse-Over.

  • Down -- sets a button's state to the Down State.

These simple actions are all expressed in the form; Action Button-name.

Example:
Hide Button 1 will make the button called "Button 1" disappear.

The Button-name can contain a wildcard character at the end of the name, so one action can be applied to a group of buttons with similar names. The wildcard character is represented by the asterisk symbol "*".

Example:
Show Option1.* will show any button with a name beginning with "Option1." (i.e. Option1.1, Option1.2, Option1.3 and so on).

Move:

Moves a button to an X, Y coordinate.

Move Button-name: X, Y, [frames, frame-delay]

Example:
Move Button 5: 100, 200 will move the button called "Button 5" so that the top-left corner is positioned at coordinates (100,200).

You can also move a button relative to its current position using a plus or minus sign after the coordinate value.

Example:
Move Button 5: 10+, 5- will move Button 5 right by 10 pixels and up by 5 pixels.

Animation:
You can animate Move actions by adding the optional parameters frames and frame-delay. Frames specifies the number of frames in the animation. More frames will result in slower, smoother animation, less frames means a faster, more jerky animation. Frame-delay specifies the number of milliseconds to wait after each frame.

Size:

Re-sizes a button to a new width and height.

Size Button-name: width, height, [frames, frame-delay]

Example:
Size Big Button: 600, 280 will re-size the button called "Big Button" to a width of 600 pixels, and a height of 280 pixels.

You can also re-size a button relative to its current size using a plus or minus sign after the width or height value.

Example:
Size Big Button: 20-, 10+will make "Big Button" 20 pixels narrower and 10 pixels taller.

Animation:
You can animate Size actions by adding the optional parameters frames and frame-delay. Frames specifies the number of frames in the animation. More frames will result in slower, smoother animation, less frames means a faster, more jerky animation. Frame-delay specifies the number of milliseconds to wait after each frame.

Xform:

Transforms a button to a new position and size.

XForm Button-name: x, y, width, height, [frames, frame-delay]

Example:
Xform Zoom Button: 100, 200, 600, 280 will move "Zoom Button" to coordinates (100, 200) and also re-size it to a width of 600 pixels, and a height of 280 pixels.

You can also transform a button relative to its current position and size using a plus or minus sign after the x, y, width or height values.

Animation:
You can animate transform actions by adding the optional parameters frames and frame-delay. The button will be moved and re-sized simultaneously.

Call:

Calls a JavaScript function.

Call function name(param1, param2, ... paramN)

For more information on JavaScript see Interfacing with JavaScript (Java) or Interfacing with JavaScript (Flash)

Wait:

Updates the display, and waits for the specified time.

Wait milliseconds

The Wait action performs the previous action (if any), updates the display, and suspends execution for the specified time in milliseconds.

SetText:

Changes the text label on a button. You can change the text on any of the button states or all of them simultaneously.

SetText Button-name: button-state, new text

Example:
SetText TextBox: up, Click here for more information will change text on the up-state of the button named "TextBox" to "Click here for more information".

Valid button-state values are: up, over, down and all

RestoreText:

Restores the text label on a button to its original value set in the editor. You can restore the text on any of the button states or all of them simultaneously.

RestoreText Button-name: button-state

Example:
RestoreText TextBox: up will restore the text on the up-state of the button named "TextBox" to its original value.

Valid button-state values are: up, over, down and all

Play:

Plays a sound. Plays an AU file in Java applets or an MP3 file in Flash files.

Play sound-file, [loop-flag]

Valid loop-flag values are 0 = no loop and 1 = looping.

Example:
Play intro.mp3, 0 will play the audio file "intro.mp3" once.

Note:
The audio file is copied into the build directory for Java applets or in the case of Flash is copied into the Flash file.

Fade: (Flash files only)

Fades a button to a specified opacity level.

Fade Button-name: Opacity%, [frames, frame-delay]

Example:
Fade Button 5: 50 will fade the button called "Button 5" so that it has an opacity level of 50%.

You can also fade a button relative to its current opacity level using a plus or minus sign after the opacity value.

Example:
Fade Button 5: 10+ will increase the opacity level of Button 5 by 10%.

Animation:
You can animate Fade actions by adding the optional parameter frames and frame-delay. Frames specifies the number of frames in the animation. More frames will result in slower, smoother animation, less frames means a faster, more jerky animation. Frame-delay specifies the number of milliseconds to wait after each frame.

Note:
You cannot preview the Fade action in the editor window. You may only preview it using the Test Flash file in Browser option.

Rotate: (Flash files only)

Rotates a button by a number of degrees.

Rotate Button-name: Angle, [frames, frame-delay]

Example:
Rotate Button 5: 180 will rotate the button called "Button 5" around a full 180°.

You can also rotate a button relative to its current angle using a plus or minus sign after the rotation value.

Example:
Rotate Button 5: 90+ will rotate Button 5 by an additional 90°.

Animation:
You can animate Rotate actions by adding the optional parameters frames and frame-delay. Frames specifies the number of frames in the animation. More frames will result in slower, smoother animation, less frames means a faster, more jerky animation. Frame-delay specifies the number of milliseconds to wait after each frame.

Note:
You cannot preview the Rotate action in the editor window. You may only preview it using the Test Flash file in Browser option.

Multiple Actions:

You can perform more than one action at a time. Put each action on a new line, or separate actions with semicolons.

Example:
Over Button 1; Hide Button 2 will set Button 1's state to Mouse-Over, and make Button 2 disappear.