Events

UI can be made interactive through the "Coherent Prysm 2.0" panel without the need to write code. Events can be added to symbols and the document. When a document is exported the events created in the panel are translated to JavaScript code that is attached to the HTML page.

Events have a type that describes what has happened and actions that are done when it happens. For example, a "click" event on a symbol executes all actions associated with it when the symbol is clicked.

Adding global events

Events that affect the HTML page as a whole are added through the "Document" tab. Since the exporter generates an HTML page for each scene, the global events are unique per scene.

A global event is added through the following steps.

  1. Open the "Document" tab.
  2. Click the + icon next to the "Document's actions" menu.
  3. Select an event from the "Event type" dropdown.
  4. Click the + icon next to the event actions menu to add actions.
Multiple actions can be added for an event type.

Adding events to symbols

Events that affect specific elements are added through the "Events" tab.

A symbol event is added through the following steps.

  1. Select a symbol instance on stage.
  2. Open the "Events" tab.
  3. Click the + icon next to the "Symbol events" menu.
  4. Select an event from the "Event type" dropdown.
  5. Click the + icon next to the event actions menu to add actions.
Multiple actions can be added for an event type.

Event type

The event type defines something that has happened. It is selected through the "Event type" dropdown that contains a preset of events and a way to add custom events.

The following preset events are available.

Event Available to symbols Available globally
BLUR YES YES
CHANGE YES YES
CLICK YES YES
DBLCLICK YES YES
FOCUS YES YES
FOCUSIN YES YES
FOCUSOUT YES YES
KEYDOWN YES YES
KEYPRESS YES YES
KEYUP YES YES
MOUSEDOWN YES YES
MOUSELEAVE YES YES
MOUSEENTER YES YES
MOUSEMOVE YES YES
MOUSEOUT YES YES
MOUSEOVER YES YES
MOUSEUP YES YES
SELECT YES YES
WHEEL YES YES
LOAD NO YES

There are also "CUSTOM" and "CUSTOM-BOUND" events.

CUSTOM event type

Custom events are specific to the game. They are created and triggered by the user, so when the "CUSTOM" event type is selected in Animate an "Event name" input field is displayed that should be filled with the name of the event.

More information about how a custom event is created and triggered can be found here.

CUSTOM-BOUND event type

CUSTOM-BOUND events are used so that events specific to the game can be attached to elements generated through data-binding. Through custom data-binding attributes, event listeners are attached to the dynamic elements, so that the event actions can be executed when the custom event is triggered.

The value of the "Bind value" input field is passed to the custom attribute and is available to the event actions.

More information about custom data-binding attributes can be found here.

Event actions

Event actions define something to be done when an event happens. Through the preset actions, animations can be controlled, the game engine can be asked to do something, widgets can be hidden and shown, etc. For more complex logic JavaScript code can be executed as an action.

Engine call

Calls a function in the game.

Interface Purpose
Function The function that is called.
Parameter 1...N A parameter passed to the function.

More information about event call can be found here.

Engine trigger

Triggers an event in the game.

Interface Purpose
Event The event that is triggered.
Parameter 1...N A parameter passed to the event.

More information about event trigger can be found here.

Changes the current HTML page to a different one.

Interface Purpose
Target The type of HTML page to navigate to. "Animate scene" creates a "Target name" dropdown with the other scenes of the document. "Custom scene name" creates a "Target name" input field so that HTML pages not in the document can be navigated to.
Target name The URL of the HTML page to go to.

More information about navigate-to can be found here.

Show

Shows an invisible HTML element.

Interface Purpose
Target The type of element that is shown. "Self" shows the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Custom" creates a "Target name" input field where the class name of an HTML element can be written.
"Target name" The name of the HTML element to be shown.
"Show all targets" Checking this shows all elements that match the target name.

Hide

Hides a visible HTML element.

Interface Purpose
Target The type of element that is hidden. "Self" hides the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Custom" creates a "Target name" input field where the class name of an HTML element can be written.
Target name The name of the HTML element to be hidden.
Hide all targets Checking this hides all elements that match the target name.

Play

Plays the animations of an HTML element.

Interface Purpose
Target The type of element that will have its animations played. "Self" plays the animations of the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Current scene" plays the animations of the current scene.
Target name The name of an HTML element that will have its animations played.
Iteration count The number of times that the animations will be played. "infinite" plays them infinite times. "custom" creates an input field where a number can be typed.
Play all targets Checking this plays the animations of all elements that match the target name.
Nested animations Checking this plays the animations of all children elements of the target.
Wait to finish Checking this makes the event action that is after the current one wait for the playing of the animations to finish.

Pause

Pauses the animations of an HTML element.

Interface Purpose
Target The type of element that will have its animations paused. "Self" pauses the animations of the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Current scene" pauses the animations of the current scene.
Target name The name of an HTML element that will have its animations paused.
Pause all targets Checking this pauses the animations of all elements that match the target name.
Nested animations Checking this pauses the animations of all children elements of the target.

Goto and play

Seeks the animations of an HTML element to a different time and plays them.

Interface Purpose
Target The type of element that will have its animations played. "Self" plays the animations of the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Current scene" plays the animations of the current scene.
Target name The name of an HTML element that will have its animations played.
From The label that defines the time to seek to. The label is selected through a label picker that lists all labels from the timeline of the target element.
Iteration count The number of times that the animations will be played. "infinite" plays them infinite times. "custom" creates an input field where a number can be typed.
Play all targets Checking this plays the animations of all elements that match the target name.
Nested animations Checking this plays the animations of all children elements of the target.
Wait to finish Checking this makes the event action that is after the current one wait for the playing of the animations to finish.

Goto and stop

Seeks the animations of an HTML element to a different time and pauses them.

Interface Purpose
Target The type of element that will have its animations paused. "Self" pauses the animations of the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Current scene" pauses the animations of the current scene.
Target name The name of an HTML element that will have its animations paused.
From The label that defines the time to seek to. The label is selected through a label picker that lists all labels from the timeline of the target element.
Pause all targets Checking this pauses the animations of all elements that match the target name.
Nested animations Checking this pauses the animations of all children elements of the target.

Play from to

Seeks the animations of an HTML element to a different time and plays them until another point in time.

Interface Purpose
Target The type of element that will have its animations played. "Self" plays the animations of the current symbol. "Instance" creates a "Target name" dropdown with other elements on the scene. "Current scene" plays the animations of the current scene.
Target name The name of an HTML element that will have its animations played.
From The label that defines the time to seek to. The label is selected through a label picker that lists all labels from the timeline of the target element.
To The label that defines the time where the animation should pause. The label is selected through a label picker that lists all labels from the timeline of the target element.
Iteration count The number of times that the animations will be played. "infinite" plays them infinite times. "custom" creates an input field where a number can be typed.
Play all targets Checking this plays the animations of all elements that match the target name.
Nested animations Checking this plays the animations of all children elements of the target.
Wait to finish Checking this makes the event action that is after the current one wait for the playing of the animations to finish.

JavaScript

Executes JavaScript code.

Interface Purpose
Open JS editor button Opens a JavaScript editor in Animate where the code is typed.

JavaScript file (displayed as fileName.js)

Executes a top-level method from an external JavaScript file that is attached to the document.

Interface Purpose
Refresh button Reloads the attached files to scan for new methods and method changes.
File status indicator Green is OK. Red means that there is a problem with the file. Hovering over the indicator displays extra information.
Last refresh text Text that displays the last refresh time of the file.
File method A dropdown with all top-level methods of the file that can be executed.
List of parameters After a method is selected all parameters of the method are listed with input fields attached to them so that value can be assigned.

Exporting events as data-binding events

Checking "Export as data-binding events" converts all of the events defined in the "Events" tab into data-binding events.

Checking "Export as data-bind-events" causes all CUSTOM events to be ignored.

This option simplifies the creation of data-binding events when only data-binding events are needed.

The content of the "Bind value" input is available to the event actions as the model variable. The event and this variables are also available to the event actions, where the this variable is the symbol element.

"Bind value" accepts a valid data-binding expression - {{model}}, {{iter}} and works with data-binding aliases {{#(alias)}}.

More information about data-binding models and iterators from bind-for can be found here.