Action Events

Animator

Action Events

Image animations can be fired/started by a number of different events. To change the current event in the project, select the required event from the 'Action Event' combo in the 'Image Project' section of the Animator. Each event can have its own set of animations. When the event is changed, a clear animation set will be shown if there are no previous animation definitions or the previously created animation will be loaded. If there are no animations for a specific event type, no animation will happen when that event is fired.

The event options are:

Load/Update: The happens when the image is loaded for the first time or when update is called programmatically.
Click/Tap: When the image is clicked or tapped.
Toggle Click/Tap: This happens on all alternate second clicks of the image. The first click will run the 'Click/Tap' option and the second click will run this option. This process is continuous for the life of the image.
Mouse Over: Happens when the user moves the mouse pointer over the image.
Mouse Out: Happens when the user moves the mouse pointer away from the image.

Select Action Event

When an Action Event other than 'Load/Update' is selected, the 'Fire Toggle Event' checkbox becomes visible. Selecting this checkbox will fire an event that can be accessed using JavaScript code. For more information on handling image events, see the Callback' function section in the Variables and Animator API page.

There are also options to rerun the main 'Load/Update' animation when the image is clicked/tapped or when a mouse is moved over it. If the 'Rerun Update on Click' checkbox is selected, when deployed, the image will run the main 'Load/Update' animation when it is clicked or tapped.
If the 'Rerun Update on Mouse Over' checkbox is selected, when deployed, the image will run the main 'Load/Update' animation when it receives a mouse over event.
Note that this option is unavailable for 'Toggle Click' and 'Mouse Out'.

Image Events
When loaded, the image below runs a animations on the elements(paths) that make up a circle. Once the initial animation has run, clicking on the image and then clicking again will produce different animation effects. Note that there is no need for an initial load animation in order for the click and toggle click to work.

Click and Toggle Click

This example shows animations running for each of the 4 segment paths of the image when the image is loaded. The animations include a color change (Attribute Transition), a Movement Transition and a Rotate Transition for each of the segments. The click and toggle click animations are also based on the same idea.