Animation symbol is a powerful resource you often use when creating HTML5 animation. It allows you to easily reuse elements, timelines, animations, etc. This tutorial describes the steps to create animation symbols in Saola Animate. Also, you’ll learn how to edit, export, and import animation symbols.
This tutorial covers:
- What is an Animation Symbol?
- Creating Animation Symbols
- Editing Animation Symbols
- Exporting and Importing Animation Symbols
What is an Animation Symbol?
An animation symbol is a reusable resource with independent timelines and interactive capabilities. Animation symbols help create complex animations by nesting one animation within another. For example, while a car is moving across the Canvas, its wheels are rotating. The wheel animation is contained inside a symbol. Symbols have their own Timeline that is separate from the main Timeline of a scene.
Regarding animation symbols, you need to distinguish between symbols and symbol elements.
- A symbol is a resource file stored in the Resources pane of a document. Create symbols by converting elements on the Canvas.
- A symbol element is an element in which a symbol is embedded. In other words, it is a copy of a symbol located on the Canvas. Many symbol elements can use the same symbol.
For instance, the two wheels on the Canvas are two symbol elements. They use the same wheel symbol stored in the Resources pane.
Editing a symbol updates all matching symbol elements. For that reason, symbols are useful for sharing identical elements across scenes or at different positions in the same scene. Edit a symbol and you have those edits instantly take effect in all symbol elements in a document. That way you easily maintain consistency and save yourself a lot of time and effort.
However, applying effects to a symbol element updates only that element. So, a symbol element can be different from its parent symbol. For example, you make changes to either of the wheel elements on the Canvas. Those changes apply to that element only, not the other element or the wheel symbol itself.
The following part shows you the steps to create animation symbols. Later, you’ll learn how to edit, export, and import animation symbols to create HTML5 animation.
Creating Animation Symbols
Create animation symbols by converting any elements or groups of elements on the Canvas. Symbols are useful for keeping several elements together, making them stay organized when being moved.
To create animation symbols, do as follows:
Step 1: Select one or more elements of the same parent.
Step 2: Click the Convert to Symbol button on the toolbar. Or, right-click and select Convert to Symbol (1) from the context menu.
Step 3: In the dialog box, type a unique name (2) for the new symbol.
Step 4: The Create Playback check box (3) is selected by default to create playback animation of the new symbol. If you don’t want to create symbol playback at this time, clear the check box. Later, use events, actions, and triggers to control symbol playback.
Step 5: Click OK to convert selected elements into a symbol. Saola Animate adds the new symbol to the Resources pane. The selection on the Canvas becomes a symbol element of that symbol. In the Timeline pane, the symbol element is listed out with its Playback property.
Once you’ve done creating an animation symbol, you can edit it in the symbol-editing mode.
Editing Animation Symbols
Edit a symbol and Saola Animate will update all symbol elements of that symbol instantly. Symbols contain all the functionality that Saola Animate can create, including animation and interactivity. So, editing a symbol is similar to editing a normal document.
Open the symbol-editing mode by using either of the following:
- Double-click a symbol element on the Canvas.
- Right-click a symbol element on the Canvas, and then select Edit Symbol (4).
- Double-click a symbol in the Resources pane.
After that, the editor displays the symbol content which resembles a normal Saola Animate document. At the top of the Canvas, there is a stack of buttons displaying the symbol hierarchy. These buttons not only show which symbols you are editing but also help navigate the hierarchy.
As the figure above implies, demo is the main document. The car symbol contains the wheel symbol. That is, the wheel symbol is nested within the car symbol. The wheel symbol is the one you are working on.
To navigate the symbol hierarchy, do one of the following:
- Click the symbol/document name in the hierarchy to navigate to a desired symbol or the main document. For example, click the demo button to close all symbols and return to the main document.
- Double-click outside the symbol content on the Canvas to navigate to the closest parent symbol. For example, double-click outside the wheel symbol content to jump up to the car symbol. Similarly, double-click outside the car symbol content to jump up to the main document.
Exporting and Importing Animation Symbols
Animation symbols can be exported and imported for reusing and sharing between Saola Animate documents.
Exporting Animation Symbols
The Resources pane manages all resources of a document, including symbols. From here you can export a symbol and its animation as a single file (.saolasym).
To export symbols, do as follows:
Step 1: In the Resources pane, select a symbol resource you want to export. You can filter all symbol resources by clicking the Resource Type drop-down list (5) and selecting Symbol.
Step 2: Click the Export button (6) on the toolbar. Or right-click the selected symbol and select Export (7) from the context menu.
Step 3: Specify the location (8) where you want to store the file. Also, provide a file name (9) for the exported file.
Step 4: Click the Save button (10) to export the selected symbol.
Step 5: A success notification appears. Click OK to continue.
Step 6: Saola Animate asks you whether to open the containing folder of the newly exported symbol. Click Yes to open the folder. Otherwise, click No to finish the exporting process.
Importing and Using Animation Symbols
When importing a symbol into a document, you also import all resources used in this symbol into the current document. These resources become resources of the document, not those of the symbol.
To import a symbol file and create a symbol element on a scene, do either of the following:
- Drag and drop a symbol file onto the Canvas.
- Copy and paste a symbol file from your computer.
- Click the Symbol button (11) on the toolbar and select a symbol file from Explorer.
To import only a symbol resource into the Resources pane, do either of the following:
- Drag and drop a symbol file directly from the Explorer into the pane.
- In the Resources pane, click the Import button (12) and then choose a desired symbol file.
After that, you can drag and drop a symbol resource onto the Canvas to use it in a scene.
Note: It’s always possible to drag and drop or import many symbol files at once.
So now you know how to create animation symbols in Saola Animate. Try animation symbols today to reduce boring and tiring work, gaining more time for creativity.