Adding Interactivity in Saola Animate

Adding Interactivity in Saola Animate


Hello everyone, welcome to Saola Animate Tutorials. Today I will show you how to add interactivity in Saola Animate. Interactivity includes events that trigger an action, in other words, when an event is detected, you provide actions as a response. There are two types of actions: one is executed with user control, and the other is placed along the Timeline and executed automatically. Now let’s see the interactivity in this project. I have an aquarium with a clownfish. When I click the aquarium, the seaweed swings and the bubbles float upward. When I click the clownfish, it swims to the right side. Let’s see how I create all these events and actions. First, I’ll create events and actions for the fish. You can see that the fish swims from left to right in a motion path, and I need to make it stop in the center of the aquarium until a mouse click resumes its movement to the right side. So I’ll add a timeline trigger to pause the Timeline and an action to continue it afterward. To do that, position the Playhead to the point of time when the fish swims across the center of the aquarium. Click the Insert Trigger button in the Timeline pane. In the Timeline Triggers dialog box, click the Add Action button. Select Timeline, choose Pause Timeline action. This way the timeline will pause at this point of time. You can see the two buttons at the top bar of the dialog box. Use these buttons to remove a single action or clear all actions you’ve added. This is the trigger I’ve added to the Timeline. Now I’ll add event and action so that when I click the fish it’ll swim to the right. With the fish selected, click the Open Element Actions button in the Timeline pane or click the Open Actions button in the Properties pane. In the Event-Actions dialog box, the left side is a list of event types associated with object types while the right side is a list of all actions registered with the selected event. Here I select Mouse Click as an event. Click the Add Action button, choose Timeline, and then select Continue Timeline as an action. So when I click the fish, the timeline that I’ve just paused will continue, meaning that the fish will resume its movement to the right side. Finally, I’ll add scene event and actions for a mouse click on the aquarium. Click the Canvas to select scene, and then click the Open Actions button in the Properties pane. Select Mouse Click event. The seaweed and bubbles are all symbols, so I select Symbol and Start Symbol from the action list. In the Target Object column, leave “bubble” as value. Add another action for the seaweed. To change the target object, double-click the cell and select “seaweed”. So I’ve done creating all the interactivity. It’s now time to see the result. On the toolbar, click the Preview Current Scene in Browser button. You can see an aquarium with a clownfish. Click the aquarium, the seaweed swings and the bubbles float upward. Click the fish and it swims to the right side. So that’s how to add interactivity in Saola Animate. Thank you for watching!

Leave a Reply

Your email address will not be published. Required fields are marked *