Last Updated On: October 11, 2021

Saola Animate is the ultimate HTML5 animation software for building interactive, media-rich web content. This guide will provide beginners with all the major steps to create HTML5 animations with Saola Animate 3.0. Thanks to that, it helps you get the most out of the software.

This guide covers:

  1. Saola Animate User Interface
  2. Create New Projects
  3. Insert Elements and Resources
  4. Create Animations
  5. Add Interactivity
  6. Preview Projects
  7. Export Projects to HTML5 or Video Output

Saola Animate User Interface

Saola Animate has an intuitive user interface with a dark theme and an orange outline highlight on focus. When you first launch the software, you will see the Welcome Screen. It’s where you can do some common tasks such as creating a new project or opening an existing one.

Saola Animate Welcome Screen

Right after you open a project or create a new one, Saola Animate appears with a customizable workspace as in the image below.

Saola Animate User Interface

The Canvas is surrounded by a menu bar, dockable and fixed toolbars, and a set of panes. You are free to toggle panes, change the location and size of panes, and customize the shortcuts to your liking.

For more information, please visit: Become Familiar with Saola Animate Workspace

Create New Projects

Creating a new project is the initial step when you start building HTML5 animation with Saola Animate. In the Welcome Screen, click the New button on the left pane or simply press CTRL+N on your keyboard.

After that, the New Project dialog box will appear. For a beginner, you just need to change the default project name and location, customize its size, and leave the other options as default because you can change them later. 

New Project dialog

To get detailed information about creating new projects and responsive layout, please take a quick look at the following tutorials:

Create New Projects
Work with Scenes
Responsive Layout Basics
Build HTML5 Animation with Responsive Layout
Use Flexible Layout

Insert Elements and Resources

It’s easy to find and insert built-in elements as well as embed external resources into a scene. Built-in elements include DIVs, text, and basic shapes. Meanwhile, external resources can be HTML widgets (web pages, HTML packages, pieces of code), images, audio, videos, symbols, and custom elements. Besides, Saola Animate also offers many drawing and editing tools that help you draw your shapes with ease. 

Particularly, you can add an element or a resource to a scene from the Insert Toolbar or the Element menu. Alternatively, you can right-click anywhere on the Canvas and select Element. Regarding text, Google fonts are available to beautify your text for free.

Insert Elements and Resources

Besides, for external resources such as audio, videos, and images, you can drag them directly onto the Canvas. Saola Animate will keep a copy of them in the Resources pane. You can also directly drag these resources into this pane, then add them to a scene later.

The Resources Pane

Apart from multimedia, you can use external JavaScript, CSS, and HTML files to better control your document’s look and feel. You can also import JavaScript and CSS directly from a webpage. All the script resources are editable within the program.

For details about elements and resources, see the following:

Introduction to Elements
Add Shapes
Add Texts
Use Google Fonts
Add HTML Widgets
Use Custom Element
Add Images, Videos, Audio
Control Video and Audio Playback
Use Freeform Tools
Edit Freeforms
Align, Order, and Group Elements
Set Background Fill Styles
Use External JavaScript, CSS, and HTML

Create Animations

After the two preliminary steps, now it’s time to unleash your creativity with the core part – creating HTML5 animations with Saola Animate. In this step, you mainly work with the Timeline pane, which 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 Pane

To create keyframe animations, you need at least two keyframes. Each keyframe specifies a different value of the same property at a specific time. Through these different values, Saola Animate creates a smooth transformation of that property over time. As a result, animations are formed by gradually changing from the current style to the new one. 

In a word, you use keyframes to define the starting and ending values of a property animation. You can add keyframes manually or use the Auto-Keyframe Mode to do that automatically. For details about animations and keyframes, see the following tutorials:

Use the Timeline Pane
Create HTML5 Animations
Add Animation Keyframes
Adjust, Move, Copy, and Remove Keyframes
Use Preset Effects
Create Morph Animations
Create Text Animations
Use Auto-Keyframes
Customize Easing Animations
Create Motion Paths
Create Sprite Sheet Animations

Last but not least, during the process of building animations, you may want to reuse resources to save tons of time and effort. That’s why the symbol feature in Saola Animate comes in. An animation symbol is a reusable resource with independent timelines and interactive capabilities. With Saola Animate, it’s easy to create, edit, export symbols to reuse in other projects. For more information, see Use Symbols to Reuse Animations.

Add Interactivity

Your HTML5 animation can always be interactive using event actions, timeline triggers, timeline labels, and multiple timelines. A large number of built-in actions are available at your fingertips to do all common interactivities. Meanwhile, you can write custom JavaScript functions to handle advanced interactivity.

Use event actions and timeline triggers to add interactivity.

For details about event actions, triggers, and other related features, see the following:

Use Events – Actions
Use Timeline Triggers
Loop Animations Using Timeline Triggers
Create Timeline Labels
Use Multiple Timelines
Create and Call JavaScript Functions

Preview Projects

When you create HTML5 animations, frequently previewing allows you to see how your animations will present to the end-user. Previewing is essential because it helps notice any required changes, especially when your document has a great deal of interactivity. You can also create a cool loading screen for your animations to brighten up the seconds of waiting. You can preview your project or just the current scene in a browser. 

For more information, you can refer to the Preview Projects tutorial.

Export Projects to HTML5 or Video Output

There are two output formats that you can export your project to once having finished creating it. They are HTML5 and video. HTML5 is a perfect solution for exporting projects including a high level of interactivity. Meanwhile, the video format is suitable for creating a demonstration of the animation. For more information, see the following:

Customize HTML5 Preloaders (Loading Screen)
Export Projects to HTML5
Export Projects to Video Formats

All things considered, Saola Animate is simple to use. So, it deserves to be the perfect HTML5 animation software. Give Saola Animate a go and see what it can bring to your work.