Use Symbols to Reuse Animations in Saola Animate 3
Symbols are reusable resources with independent timelines and interactive capabilities. They allow you to reuse elements, scenes, timelines, and animations. In this tutorial, you will learn steps to create and use symbols in Saola Animate 3.
This tutorial covers:
- Symbols vs Symbol Elements
- Convert Elements to Symbols
- Edit Symbols
- Export and Import Symbols
- Use Responsive Symbols
Symbols vs Symbol Elements
Firstly, you need to distinguish between symbols and symbol elements.
- A symbol is a resource in the Resources pane of a document. You 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.
When you edit a symbol, all related symbol elements will be updated. That said, you edit a symbol, and your edits instantly take effect in all symbol elements in a document. For that reason, symbols are useful for sharing identical elements across scenes or at different positions in the same scene. They help you easily maintain consistency and save a lot of time and effort. Meanwhile, applying effects to a symbol element updates that element only. So, a symbol element can be different from the symbol embedded within it.
Convert Elements to Symbols
You create animation symbols by converting one or multiple elements on the Canvas. Do the following steps to convert animations to symbols:
- First, select one or multiple elements of the same parent.
- Next, right-click the selected elements > Convert to Symbol.
- Then, in the Convert to Symbol dialog, type a unique name for the new symbol.
- The Create Playback check box is selected by default to create playback animation for the new symbol. If you don’t want to create a symbol playback at this time, clear the check box. Later, use actions to control symbol playback.
- The Fit to content check box selected by default helps to fit the symbol element to the content, according to its size and position. If you deselect this box, the symbol element will take up its scene’s size. In this case, the size of the symbol element is relative to the scene size and starts at 100% of the scene size. When changing the size of the symbol element in the main document, the size of the symbol in editing mode also changed. If you want the size of the symbol element to be absolute, change the size unit to pixels (px). In a responsive project, if we add a symbol element (which hasn’t been inherited from the base layout) into a responsive layout, this option will be disabled.
- Click OK to convert the 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.
Edit Symbols
Editing a symbol is similar to editing a normal document. You can create animations and add interactivity. Once you enter the symbol-editing mode and make an edit, Saola Animate will update all symbol elements related to that symbol.
To open the symbol-editing mode, double-click a symbol element on the Canvas. Alternatively, you can right-click a symbol element > Edit Symbol, or double-click a symbol in the Resources pane.
The editor then displays the symbol’s content, which resembles a normal Saola Animate document with scenes and timelines. 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. In the figure below, the park is the main document. The Ferris wheel symbol is the symbol that 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 the desired symbol or the main document. For example, click the park button to close the symbol and return to the main document.
- Double-click outside the content of the symbol on the Canvas to navigate to the closest parent symbol. For example, double-click outside the content of the Ferris wheel symbol to jump up to the main document.
Export and Import Symbols
You can export symbols for reusing and sharing between Saola Animate documents.
Export Symbols
The Resources pane manages all resources of a document, including symbols. From here you can export a symbol as a single file (*.saolasym). Do the following:
- In the Resources pane, select a symbol resource you want to export.
- Click Export selected resources to files in the toolbar or right-click the symbol > Export.
- Provide a file name for the exported symbol and click Save to export.
Import Symbols
When importing a symbol into a document, you also import all resources used in this symbol into the target document. These resources become resources of the document, not those of the symbol. Do one of the following to import a symbol:
- Drag and drop a symbol from your computer onto the Canvas.
- Copy a symbol from your computer and paste it onto the Canvas.
- Click Symbol in the Insert toolbar and select a symbol from your computer.
- Import a symbol into the Resources pane and later add it to a scene.
Use Responsive Symbols
In responsive documents, symbols can respond to the container size changes. A responsive symbol has all breakpoints and layouts cloned from the parent symbol or the main document at the time it is created. After that, the breakpoints and layouts of the child and parent symbols no longer affect each other. You can edit a responsive symbol as a normal responsive document. Just double-click the symbol element on the Canvas or the symbol in the Resources pane.
The size of the symbol element is the container size of the symbol embedded within it. For this reason, the symbol element size decides the layout when the symbol runs in the output document. If the symbol element size is in the range of a layout, that layout will be selected. Thus, you can create a responsive symbol and reuse it in different responsive documents. Just resize the size of the symbol element to determine the layout in which the symbol will run.
So now you know how to create and use animation symbols in Saola Animate 3. Try animation symbols today to reduce boring and tiring work, thus gaining more time for creativity.
Related Articles: