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.
- Scene Event Handlers: Same as elements. This button appears in the Timeline, Properties, scene context menu on the Canvas, Timeline pane, and Elements pane.
- Document Event Handlers: In the Document pane.
- Timeline Event Handlers: On the Actions bar of the Timeline pane or in the Timeline menu.
- Preloader Event Handlers: In the Document pane of a preloader document.
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.
Step 2: In the Event Handlers dialog box, the Event Type list (2) lists out all available events. Select the Mouse Click event (3).
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.
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).
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).
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.
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.
- 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).
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.
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.
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.
- 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:
Good luck!
Elearning Supporter 
Leave a Reply