(Last Updated: June 22, 2018)

Saola Animate is an HTML5 animation creation software for designing and building animated, interactive, and media-rich web content. In Saola Animate, you can create smooth animations and impressive visual effects using many types of elements and interactions. So, if you haven’t installed the tool, let’s download Saola Animate and try it free for 30 days.

This tutorial is a beginners’ guide for anyone new to Saola Animate. Specifically, it features a short overview of the interface and the basic workflow to create HTML5 animation. More details about each feature and aspect will be saved for other in-depth tutorials.

This tutorial covers:

  1. Saola Animate Interface
  2. Creating New Projects
  3. Importing Contents
  4. Creating Animations
  5. Adding Interactivity
  6. Previewing and Exporting Projects to HTML5

Saola Animate Interface

Saola Animate has an intuitive user interface with a dark theme and orange outline highlight on focus. You can customize the interface by showing or hiding panes and toolbars as well as changing panes’ location and size.

saola-animate-interface

  1. The menu bar and the toolbar are located at the top of the application window. The menu bar contains menus and menu options used to operate the application. Meanwhile, the toolbar contains buttons that act as shortcuts for the most frequently used commands from the menu bar.
  2. The Canvas is the main work area where you can add, modify, arrange elements and preview your animations.
  3. The Scenes pane displays thumbnails of existing scenes in the document. Click a thumbnail to view a scene and edit it if needed.
  4. The Document pane provides quick access to view and edit document properties.
  5. The Timeline pane appears below the Canvas. It contains all animations in the project.
  6. The Properties pane displays properties of selected elements and provides controls to adjust and fine-tune element properties.
  7. The Resources pane displays all resource files in the document including those which are in use and those which are not.
  8. The Elements pane shows all elements included in the documents. You can select elements and change their visibility and locking state in this pane.
  9. The Functions pane shows all JavaScript functions you create to control various aspects of a document.

Creating New Projects

Saola Animate is easy to use right from the start. To begin with, you need to create a new project.

Step 1: On the Welcome Screen, click New. This opens the New Project dialog.

Step 2: Fill in the project name and specify the project location, size, and the initial number of blank scenes.

Step 3: Click OK to finish. Now you’ve done creating a new blank project.

saola-animate-create-project

Keep in mind that you can always change the project size, or add more or delete scenes afterward during the editing phase. So, don’t worry too much about the choice you make at this moment.

Importing Contents

The next step is to import contents into a project because typically you need great graphics and media to create stunning animations. In Saola Animate, you can import contents in three different ways:

  • Drag-and-drop contents onto the Canvas. You can drag-and-drop many element types such as images, audio, video clips, and symbols directly onto a scene.
  • Click the buttons on the toolbar to import corresponding element types. For example, click the Image button to import images into a scene.

saola-animate-import-elements

  • Import contents into the Resources pane to prepare in advance. To do that, click the Import button or just drag-and-drop files into the pane. After that, drag-and-drop files onto the Canvas, or right-click files and select Add To Scene.

saola-animate-resources

Creating Animations

Creating animations is the core part of Saola Animate. And without a doubt, the Timeline pane plays an integral role in the animation-creating process. It gives you the capability to view and control all timing aspects of a project.

saola-animate-timeline

  1. Multiple Timelines controls (left to right): New Timeline, Remove Timeline, Rename Timeline, Set as Main Timeline
  2. Playback controls (left to right): Go to Start, Play/Stop, Go to End, Loop Playback
  3. Auto-Keyframe Mode button
  4. Time control (current time indicator)
  5. Playhead
  6. Timeline trigger
  7. Timeline label
  8. Property
  9. Add Keyframe button
  10. Keyframe (diamond)
  11. Animation segment

Creating Animations with Keyframes

When it comes to keyframe-based animations, there is one key term that should always be mentioned: keyframes. Keyframes define the value for a property at a specific point of time. An animation comprises two keyframes which specify different property values at different points of time.

In order to create animations, first select the element you want to animate. Then, do the following steps:

Step 1: In the Timeline pane, move the Playhead to where you want the animation to start.

Step 2: In the Properties pane, click the Add Keyframe button (the diamond) next to the property you want to animate. This creates the starting keyframe of an animation segment.
saola-animate-add-keyframe-1

Step 3: Move the Playhead to where you want the animation to end.

Step 4: Click the Add Keyframe button again to add another keyframe of the same property. Then, change the value of the property. A bar between the two keyframes appears, indicating the property’s animation.

saola-animate-add-keyframe-2

Besides, Saola Animate offers the Auto-Keyframe Mode to automatically generate keyframes when creating animations. Basically, this feature simplifies the animation-creating process since it avoids the need to manually add keyframes. In order to activate this feature, click the Auto-Keyframe Mode button in the Timeline pane.

saola-animate-autokeyframe

With Auto-Keyframe Mode on, when you make an edit to an element on the Canvas or in the Properties pane, Saola Animate will create necessary keyframes, making the animations to the Playhead’s current position. For more information, see Keyframe Animation Using Auto Keyframe Mode.

Adding Interactivity

Saola Animate allows creating HTML5 animation that is not only animated but also interactive. Interactivity gives audience interactive control over their experience, thus gaining and keeping their attention and interest. You can use events, actions, and triggers to make your animation interactive.

Adding Events – Actions

Events activate actions. When an event occurs, one or more actions are executed as a response. For example, when you click a menu button (event), more options will expand in a drop-down list (action). In Saola Animate, you can add events to five item types, namely, element, scene, document, timeline, and preloader, so as to control the behavior of the timeline, symbol, media, element, etc.

To add events and actions, perform the following:

Step 1: Click the Event Handlers button to open the Event Handlers dialog. You can find this button in the context menu of the selected item or in some panes such as Timeline, Properties, and Document.

saola-animate-event-handlers

Step 2: In the Event Handlers dialog, specify the events (1) and actions (2) as desired. Remember that one item can hold multiple events, and each event can be associated with multiple actions.

Note: While built-in actions can satisfy all the basic interactivity, they may not be impressive enough to deal with advanced interactivity. With this in mind, you need to create custom functions to control the behavior of target items.

To create custom JavaScript functions, click the New Function button in the Functions pane. Select the function type you want to create and then start writing your code. After that, in the Event Handlers dialog, use the Run JavaScript action to call the function you’ve created.

saola-animate-create-function

Adding Timeline Triggers

Triggers are actions that are placed along the Timeline. You can create multiple triggers, of which each can perform many different actions. Unlike actions, triggers are executed automatically (without user control) when the Playhead reaches them on the Timeline.

saola-animate-trigger

To add triggers, click the Insert Trigger button on the Actions bar, then pick the actions you want in the Timeline Triggers dialog. Triggers appear as red diamonds on the Actions bar, but when selected they turn into yellow diamonds.

Previewing and Exporting Projects to HTML5

Lastly but most importantly, you need to preview your document and export it to HTML5. Previewing is crucial because it helps notice any required change, especially when your document has a great deal of interactivity. To preview animations within Saola Animate, drag the Playhead along the Timeline or press the Play/Stop button in the Timeline pane. To preview in default browser, do either of the following:

  • Click the Preview Current Scene In Browser button (3) to preview the currently selected scene.
  • Click the Preview Project In Browser button (4) to preview the entire project.

saola-animate-preview-export

Finally, in order to export a project, click the Export To HTML5 button (5) on the toolbar. Your project will be exported and stored in a folder with structure as below. Open the *.html file to play the project in browser.

saola-animate-export-folder

All things considered, Saola Animate is simple to use, and it meets all you need to create great HTML5 animation. Give Saola Animate a go and see all the benefits it can bring to your work. Should you have any question, don’t hesitate to ask on the User Community or contact us directly via email.

Pin It on Pinterest