(Last Updated: August 28, 2017)

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 article is a beginners’ guide for anyone new to Saola Animate. Specifically, it features a short overview of the interface and the basic workflow in the tool. More details about each feature and aspect will be saved for other in-depth articles.

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. On the Welcome Screen, simply click the New button to open the New Project dialog box. Then, fill in the project name and specify the project location, size, and the initial number of blank scenes. And 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 phrase. 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. Note that it’s all possible to import multiple files of multiple types at once.

  • 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 animate with keyframes, do the following steps:

  1. Select the element you want to animate.
  2. Move the Playhead to where you want the animation to start.
  3. 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
  4. Move the Playhead to where you want the animation to end.
  5. Click the Add Keyframe button again to add another keyframe of the same property.
  6. 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. Check out the video Saola Animate Auto-Keyframe to know more about this handy feature.

Adding Interactivity

Saola Animate allows creating HTML5 web content 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, click the Event Handlers button to open the Event Handlers dialog box. 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

Then, in the Event Handlers dialog box, 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.

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 box, 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 box. Triggers appear as red diamonds on the Actions bar, but when selected they turn into yellow diamonds.

Previewing & 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.

Join our mailing list to receive the latest news and updates from our team.

A confirmation email has been sent to your mailbox, please confirm your subscription!

Pin It on Pinterest