Want to create interactive HTML5 content that responds to user inputs? Have no idea about coding? Know how to code but want something that quicker and easier? Saola Animate is here to help.
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.
This tutorial covers:
- Events, Actions, and Triggers
- Adding Interactivity with Events and Actions
- Inserting Timeline Triggers
Events, Actions, and Triggers
Interactive HTML5 content changes to respond to user actions. For example, when you click a button, a webpage opens in your default browser. Saola Animate uses the trio of events, actions, and triggers to add interactivity to HTML5 animation.
Events are occurrences that determine when to trigger an action. For example, the Mouse Up event occurs when users release a mouse button over an element. Events can be caused by user interactions (e.g. a mouse click). Or, they can occur based on some condition within the tool (e.g. when a Timeline pauses).
Saola Animate provides events for five item types:
- Element events: Mouse and touch events on elements.
- Scene events: Scene-specific events, keyboard events, and all element events.
- Document events: Document-specific events and scene events.
- Timeline events: Timeline-specific events related to Timeline playback.
- Preloader events: Preloader-specific events related to the loading progress.
Events trigger actions. That is, actions perform a function that responds when a specified event occurs. To easily create interactive HTML5 animation, Saola Animate offers many different built-in actions:
- Timeline, Symbol, and Media actions: Control the playback of the Timeline, symbol, audio and video (e.g. playback state, speed).
- Visibility actions: Control the visibility state of elements (show or hide elements).
Triggers are actions placed on the Timeline and executed without user control. On a Timeline, you can create many triggers, each trigger can hold different actions.
Adding Interactivity with Events and Actions
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.
Where to 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).
Inserting Timeline Triggers
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+T to 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.
Note: It’s worth mentioning that a trigger is a timeline item, just like a keyframe. So, moving and copying a trigger use the same techniques as moving and copying a keyframe.