Inovista
    
Animator



 Animator Quick Start

While the Animator has a very large range of capabilities, getting started is quite easy.

TIP: Make sure your SVG images are as simple as possible. Remove unnecessary paths and where possible simplify transforms. The less complex the image the quicker and more efficient it will be, especially if there are many images.

1) Load an SVG Image
An image can be loaded from a file on the local computer or using an online URL. Use either the 'Load Image' section in the Animator left hand panel or click one of the options directly on the toolbar at the top of the Animator. Clicking on the 'URL' button in the toolbar will open the 'URL' section in the 'Load Image' section. Enter or paste the URL into the field and click the arrow below it to open a URL.
Load Image from Panel
Load Image from Toolbar


2) Select All or Part of the Image
Once an image is loaded, a tree structure contained the editable elements of the image will be shown below the 'Load Image' section. To create an animation for the whole image within the background, select the very first item at the top of the tree or select one of the elements in the tree to edit that part of the image. Clicking on elements in the loaded image itself, will also select that element in the tree.

Once an element has been selected, click on 'edit -->' to create a transition for the selection. For more information on the tree, see Element Tree.
Image Elements Tree
Loaded Image



3) Create a Transition
After clicking on 'edit -->', the element(node) will be shown in the 'Transitions' section. To create a new transition, click on the '+' button next to 'New Transition'. This will show a popup dialog with a list of the available transitions for this type of element(node). Click on the required transition type. See Transitions for more information.
Create New Transition
Select Transition Type


4) Edit a Transition
Each transition will appear as an expandable tab under the 'Transitions' section. Enter values to define the transitions. Sub-sections of the transition can also be expanded/closed by clicking on the relevant arrow icon next to the option down.

If there are transitions for multiple elements/nodes, switch between them by selecting the required node in the 'Node' dropdown. If there are chained(multiple) transitions, they will be presented in the order they play. To edit a chained transition, scroll to that transition and expand it.
Set Transition Values
Enter Transition Options


5) Test the Animation
At any time after a transition has been created, it is possible to play the animation that has been created. To play the animation, click the button in the toolbar below the loaded image. ('1' below). Click again to pause the animation.

To move to a specific point in the animation, drag the pointer on the slider ('2' below) or click on the slider ('3' below).

Play the Transition


6) Deploy the Animation
Once the image is ready for deployment, either export or copy the image in the 'Image Project' section. To copy or export the current project, select the 'Current Project' option. To copy or export the animated image, select 'Stand Alone Image'. If the animated image is to form part of an Inovista Chart, select 'Inovista Chart Image'. For more information, see Export  and Copy Image. Once an image has been created as an SVG file, that file can then be included into a web page. To do this, there are three options: See Deploy Image for examples on how to do this.


Export or Copy Image
exc
Select Export/Copy Action
rpt