Actions and Animation

Actions Overview:

Actions are key to futher customizing your menu. Actions allow you to add user-defined animations, loops, variables, conditions and various other powerful controls. An action is triggered either at Project Startup or when a button changes state. 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.

Any action can be applied to just one button or many selected buttons - simply select them in the Target Button list.

All actions can also be conditional - this means that an action will only be performed if a predefined variable meets a certain condition.

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 on Start-up

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.

Example:
When a HIDE action is added to BUTTON 1 on event ON BUTTON DOWN it will make selected buttons disappear when BUTTON 1 is clicked.

REMEMBER: Any action can be applied to just one button or many selected buttons - simply select them in the Target Button list.

Show Child Buttons / Hide Child Buttons / Toggle Child Buttons

These actions allow you to trigger the hierarchy animations as defined in the Show/hide Child Button Effects menu.

For more information see: Show/hide Child Button Effects

Animate:


Animates a button in a variety of possible ways. Simply select the target buttons (those you wish to animate) and define the animation using the following options.

Note: Select multiple target buttons will mean that all buttons are animated in the same way simultaneously. If you want to animate buttons in a sequence, simply have multiple animate actions.

xPosition
Use xPosition to move the button along the x-axis. The value in pixels is the absolute position along the axis with 0 being the left hand edge of the project. You can position the button off-screen by using a negative number (off-screen to the left) or one higher than the width of the project (off-screen to the right).

xPosition Relative
Checking this box will make the movement relative to the button's current position rather than an absolute position. In simple terms, a positive number will move the button right - a negative number will move the button left.

yPosition
Use xPosition to move the button along the y-axis. The value in pixels is the absolute position along the axis with 0 being the top edge of the project. You can position the button off-screen by using a negative number (off-screen above the project) or one higher than the height of the project (off-screen below the project).

yPosition Relative
Checking this box will make the movement relative to the button's current position rather than an absolute position. In simple terms, a positive number will move the button down - a negative number will move the button up.

Width
Width will alter the width of a button. The value in pixels represents the absolute width for the button - setting a width of 100 will change the width of the target button from whatever it current is to 100 pixels.

Width Relative
Checking this box will make the width change relative to the button's current width rather than to an absolute amount. As it is relative positive and negative numbers are valid (as long as the end result is not less than 0). So a setting of -20 will reduce the width of the target button by 20 pixels whereas a value of 20 will increase the width by 20.

Height
Height will alter the height of a button. The value in pixels represents the absolute height for the button - setting a width of 50 will change the height of the target button from whatever it current is to 50 pixels.

Height Relative
Checking this box will make the height change relative to the button's current height rather than to an absolute amount. As it is relative positive and negative numbers are valid (as long as the end result is not less than 0). So a setting of -20 will reduce the height of the target button by 20 pixels whereas a value of 20 will increase the height by 20.

Opacity (flash only)
Opacity will alter how opaque or transparent a button apears. A button with 100% opacity is solid in appearance, 50% opacity seems transparent and 0% appears invisible. You can use opacity settings to create fade-on / fade-off effects.

Opacity Relative (flash only)
Checking this box will make the opacity change relative to the button's current opacity level. So a setting of -20 will make a button appear 20% more transparent (less opaque) whereas a value of 20 will make a button appear 20% more opaque.

Angle (flash only)
Angle allows you to set the angle that a button is displayed. The normal angle for a button is 0, so if you set the angle to 90 it would appear to be on its right-hand edge or 180 would appear up-side-down.

Angle Relative (flash only)
Checking this box will make the angle change relative to the button's current angle. So a setting of -90 will make a button appear 90 degrees anti-clockwise.

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 (java only) specifies the number of milliseconds to wait after each frame.

Note: If you set the frames to 0 you will instantly change any or all of above settings of the target button(s).

Call:


Calls a JavaScript function.

Javascript Function
Simply enter the name of your Javascript function.

Argument
Enter only one Argument. If you need several you will need to create another function in Javascript which sets multiple arguments.

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.

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.

Play:

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

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.

Set Variable

Initializes a new variable or performs simple operation on an existing variable.

To use a variable in either a condition or as part of an operation on another variable it must first be initialised by using set variable. It can be set to any numeric value or existing variable. Once defined it may be used as part of a condition or as part of adjusting or initializing another variable.

Defined variables will appear in drop-down menus of the condition and set variable dialogs.

TIP: In order to take the guess work out of developing more complex projects with several variables, you can display the value of all defined variables in the Java preview window whilst previewing the project. You can turn this feature on through the options menu.

Loop & End Loop

Allows for repeating action and series of actions.

In order to use the Loop you must have a corresponding End Loop in your project. Unless there is a condition placed on the End Loop the loop with cycle forever.

TIP: Try combining variables, conditions and loops to create more interesting menus - you can even create simple flash intros and interactive banner ads...