Saola Animate offers a user-friendly interface that keeps things simple and consistent. For this reason, you will find it easy to build HTML5 animation with the tool. Let’s spend some time learning the Saola Animate user interface through this tutorial.
This tutorial covers:
- Click Edit (1) > Preferences to customize the application settings.
- Click Help (2) to access information about the current version, open the documentation, check for updates, and open your account webpage to update your profile and manage your subscriptions. You can also click your username (3) in the top right corner and select My Account to open the webpage.
The left side has two sections: Quick Start (4) and Recent Projects (5).
- The Quick Start provides the New button (4a) to create a new project, and the Open Project button (4b) to open existing projects.
- The Recent Projects shows a list of projects you have recently been working with (if any). Click a project in the list to open it.
The center part has three tabs: Home (6), Samples (7), and Resources (8).
- The Home tab shows a list of the tool’s outstanding features.
- The Samples tab shows a list of Saola Animate samples.
- The Resources tab provides links to Saola Animate Homepage, User Community, YouTube Channel, and Online Demos.
Additionally, down in the bottom left corner, there are four buttons that take you directly to the Homepage (9), Facebook Group (10), User Community (11), and YouTube Channel (12) of Saola Animate.
Saola Animate Workspace
1. Menu Bar and Toolbar
The menu bar is beneath the title bar. It shows the names of seven drop-down menus in Saola Animate. Meanwhile, the toolbar below it contains buttons that act as shortcuts for the most frequently used commands.
- File contains commands used for the entire document such as such as creating new projects, opening existing projects, previewing and exporting projects to HTML5.
- Edit contains commands for editing documents such as cutting, copying, grouping, and arranging elements.
- Scene contains commands for working with scenes such as inserting and duplicating scenes.
- Element contains commands for inserting many types of elements in Saola Animate. Ten element types are available, including rectangle div, rounded rectangle div, ellipse div, text, HTML widget, image, audio, video, symbol, and shape.
- Timeline contains commands for controlling the timeline and animations.
- View contains commands for controlling the appearance of the tool such as showing or hiding toolbars and panes.
- Help contains Help Contents, information about the current version and update status, and provides access to the account webpage.
The Canvas is the main work area where you place scenes and scenes’ contents and preview your animations. When you work on the Canvas, bear in mind the following:
- Rulers (View > Rulers): The Canvas has horizontal (1) and vertical (2) Rulers that appear along the top and left edges of the Canvas, helping you position elements precisely.
- Canvas Snapping (View > Canvas Snap): Canvas Snapping snaps elements to special positions on the Canvas or to the edge or center of other elements. It is indicated by red lines (3,4) appearing when you resize or move elements on the Canvas.
- Canvas Zoom: Zoom in or out to enlarge or reduce the magnification level of the Canvas and slides as well. To zoom the Canvas, scroll the mouse wheel while holding down the CTRL key, or press CTRL and = to zoom in and CTRL and – to zoom out. Also, click View > Zoom, then choose zoom options in the drop-down menu.
On top of that, you can use the Canvas Zoom controls in the bottom right corner of the application window. Zoom slider (5): Drag the slider to the right, toward the Plus button to zoom in. You can also click the Plus button multiple times to zoom in to the level you want. On the other hand, drag the slider to the left or click the Minus button to zoom out.
Zoom drop-down list: Click the Zoom drop-down list to display the list of zoom percentages. Then, select a numeric zoom percentage or enter your desired percentage in the Value box (6).
Fit on Screen button (7): Click the button to scale the Canvas so that it fits perfectly in the application window.
3. Scene Pane
The Scenes pane displays thumbnails of existing scenes in the document. You can add or remove scenes, change the scene’s name and order, copy and paste scenes across documents.
To add blank scenes, click the Blank Scene button on the toolbar or choose Scene > Blank Scene from the menu bar. To change the display mode for scene thumbnails, right-click the Scene pane and select either of the following:
- Show in Column: When you resize the pane, the size of scene thumbnails also changes to fit the available width.
- Show in Grid: The scene thumbnails are uniformly sized and displayed in grid.
4. Document Pane
The Document pane provides quick access to view and edit document properties. This is where you can change the document size after creating projects. Be mindful of the following:
- Autoplay (9): Autoplay is turned on by default to make the document automatically starts playing as you open a web browser. If you turn Autoplay off, you must call the document to start via interactivity. Edit the document events and actions by clicking the Event Handlers button (10).
- Preloader (11): By default, Saola Animate documents use a Default preloader that contains only a loading indicator. Click the Edit button (12) to edit different properties of the loading indicator. Besides, you can switch to a Custom preloader to design creative loading screen. To do that, click the Preloader drop-down list (13) and select Custom.
5. Timeline Pane
- Expand or Collapse Lanes: Click the triangle button to the right of an element to show/hide all property lanes under that element. In case you want to expand or collapse all lanes, click the Expand/Collapse Lanes button (14) on the Actions bar.
- Time control: The Time control (current time indicator) displays the current time, helping you navigate the Timeline. To adjust the current time, click on the Time control (15) to make it editable, then use the mouse wheel or enter a new value to change the value.
- Show Animated Elements Only (16): Filter out elements that contain no animation at all.
- Timeline Snapping: As you drag the Playhead along the Timeline, some snapping actions occur. For example, the Playhead jumps to a keyframe, a trigger, or a particular tick mark on the Timeline Ruler. The Timeline Snapping tool (17) is turned on by default with three modes: Grid, Playhead, and Keyframes, Labels, Triggers.
- Grid: Grid helps divide timeline into little frames by displaying subtle vertical lines along the Timeline at regular intervals. Turn Grid on by clicking the Show Grid button (18). After that, use the Grid submenu to set the time increments such as 1 frame/s, 4 frames/s, or 24 frames/s.
- Timeline Zoom: Zoom in and out of the Timeline to get better view of the animations. The Timeline Zoom controls consist of the Timeline Zoom slider (19) and the Zoom to Fit button (20). Those controls work similarly to those of the Canvas Zoom controls. For the Zoom to Fit button, click it to fit the existing animations to the Timeline view.
6. Properties Pane
In the Properties pane, you can view and work with all the element’s properties in your document. Properties are arranged and grouped in different sections. Click the section’s title bar to expand or collapse the section. The Properties pane allows you to view, edit, and animate properties of selected items. Consider the following when working in this pane:
- You can animate any property with a keyframe diamond (21) next to its name (e.g. Display, Opacity). For those without keyframe diamonds, they are only editable (e.g. Overflow, Cursor).
- To change the property value, you can enter a new value in the value box (22), select value from a drop-down list (23), or drag the handle on the slider (24). Note that you can use both the mouse wheel and the arrow keys on your keyboard to input new values.
7. Resources Pane
The Resources pane lists all resource files that are available in the open project. Take note of the following:
- To find resources that are not in use, click the Select Unused Resources button (25) on the toolbar or in the context menu. That way all unused resources will be selected, as indicated by an orange border (26). Afterward, you can remove those unused resources if needed.
- To filter a specific resource type, click the Resource Type drop-down list (27). Then, select the type you want from four resource types: Image, Video, Audio, and Symbol.
- To change the view style of the pane, click the View Style drop-down list (28). Then, select either of the three view styles: List, Small, and Medium.
8. Elements Pane
The Elements pane shows all elements included in the documents, including both groups and their child elements. Child elements (e.g. rotor_sym, blade_sym, and body) appear under and at the next indent level compared to their group name (e.g. helicopter). In addition, in this pane, you can change the visibility and locking state of elements. These states are turned on by default, indicated by an open eye (29) and an open lock (30) buttons. An eye with a slash (31) indicates that the element is currently invisible. Meanwhile, a closed lock (32) and dim effect on the element name show that you cannot select or edit the element.
9. Functions Pane