How To Create Interactive HTML5 Content In Saola Animate

As you may know, Saola Animate is a professional, modern HTML5 Animation tool that allows you to create interactive HTML5 content with Events and Actions.

Atomi Systems boasted that “Saola Animate provides great support for creating rich, interactive HTML5 content. Easy interface and numerous built-in events and actions keep interactive HTML5 content at your fingertips. So, manage well and get things done with no single line of code.”.

Well, take a look at this tutorial to learn how to create interactivity in Saola Animate.

How to add interactivity with Events and Actions in Saola Animate

As stated earlier, Saola Animate provides a wide variety of built-in events and actions to create interactive HTML5 content. To make HTML5 animation interactive, basically you need to click the Event Handlers button to open the Event Handlers. Here you can add, edit, or remove events and actions attached to an item.

Find the Event Handlers Button

The button appears as a lightning bolt. You can find it in more than one place in Saola Animate.

  • Element Event Handlers: In the Timeline and Properties panes. Also, it can be seen in the context menu when you right-click an element on the Canvas, in the Timeline pane, and the Elements pane.

saola animate element event handlers

  • Scene Event Handlers: Same as elements. This button appears in the Timeline, Properties, scene context menu on the Canvas, Timeline pane, and Elements pane.

saola animate scene event handlers

  • Document Event Handlers: In the Document pane.

saola animate document event handlers

  • Timeline Event Handlers: On the Actions bar of the Timeline pane or in the Timeline menu.

saola animate timeline event handlers

  • Preloader Event Handlers: In the Document pane of a preloader document.

saola animate preloader event handlers

Adding Interactivity with Events and Actions

In Saola Animate, events and actions are handled in the Event Handlers dialog box. It is an easy interface where you can define the events and actions you want an item to hold.

To make it simple, let’s say you want to add interactivity to a DIV element. That is, clicking the DIV makes the Audio_1 play. Do the following steps:

Step 1: Click the Event Handlers button (1) of the Div_1.

create interactive html5 content 1

Step 2: In the Event Handlers dialog box, the Event Type list (2) lists out all available events. Select the Mouse Click event (3).

create interactive html5 content 2

Step 3: To add actions, click the Add Action button (4). Select the Start Media action (5) from the lists. Then, the Action table lists out the selected action.

create interactive html5 content 3

Step 4: Double-click the Target Object cell (6) to specify the target object of the action. Select Audio_1 (7) from the list. An action can have no target object (e.g. Go To URL action).

create interactive html5 content 4

Step 5: Double-click the Params cell (8) to specify the parameters of the action. An action can have no or several parameters (e.g. playback direction, URL). In this case, keep the default parameter (9).

create interactive html5 content 5

Step 6: Click Close (10) to finish.

For elements with actions, their Event Handlers button turns orange (11). So, it’s easy to figure out which element holds interactivity.

create interactive html5 content 6

Editing Events and Actions

It’s always possible to edit the events and actions attached to an item. To do that, click the Event Handlers button of the target item to open the corresponding dialog box. Here you can:

  • Edit an existing action: Double-click the Target Object and Params cells to edit an existing action.
  • Replace an existing action: Double-click the Action Type cell (12) to open the Action list. Then, select a new action to replace an existing one.

create interactive html5 content 7

  • Add a new event: Click to choose a new event, and then bind actions to it.
  • Add a new action: Click the Add Action button, and then select a desired action from the lists.
  • Remove a selected action: Click the Remove Action button (13).
  • Clear all actions bound to an event: Click the Clear All Actions button (14).

Insert Timeline Triggers to Create Interactive HTML5 Content

Timeline triggers execute actions without user control. They play an important role in building interactive HTML5 content.

Inserting Timeline Triggers

Let’s say you want to attach a Pause Timeline trigger to the beginning of the Timeline. That way the Playhead will never move, causing the Timeline to stop from the first. This situation may happen when you want to trigger the Timeline playback with a button, for example.

To insert the above-mentioned trigger, do the following steps:

Step 1: In the Timeline pane, drag the Playhead (15) to the beginning of the Timeline (the zero second).

create interactive html5 content triggers 1

Step 2: Click the Insert Trigger button (16) on the Actions bar to open the Timeline Triggers dialog box. Or, press ALT+Tto get the same result.

The Timeline Triggers dialog box looks similar to the Event Handlers one except that it doesn’t have the Event Type column.

create interactive html5 content triggers 2

Subsequent steps are similar to Step 3, 4, 5, and 6 when adding events and actions.

As can be seen in the screenshot above, the Pause Timeline action is listed out in the dialog box. The target object is the Main Timeline.

In the Timeline pane, the trigger (17) is inserted at the Playhead position. It appears as a red diamond on the Actions bar.

create interactive html5 content triggers 3

Editing Timeline Triggers

Editing the actions in a timeline trigger is similar to editing those bound to events. The point to note is that as an item on the Timeline, triggers can be deleted, moved, and copied.

  • Select a trigger: Click the trigger on the Actions bar. When selected, it turns yellow.

create interactive html5 content triggers 4

  • Edit a trigger: Double-click it to open the Timeline Trigger dialog box. Then, edit the actions as desired.
  • Delete a trigger: Click it, and then press DELETE. Or, right-click and select Delete from the context menu.
  • Move a trigger: Click and drag the trigger to a new position.
  • Copy and paste a trigger: Use keyboard shortcuts to copy (CTRL+C) and paste (CTRL+V) the selected triggers to the new Playhead position. You can also use the commands in the trigger context menu to get the same result.

That’s all how to create interactivity HTML5 content with Events and Actions in Saola Animate – The best HTML5 Animation Tool in 2017. If you have not installed Saola Animate yet, get it from the link below:

 Saola Animate FREE Download

Good luck!

Subscribe to our newsletter


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Create a website or blog at

Up ↑