Animator User Interface

Animator

Animator User Interface

Three toolbars are available in the Animator user interface. There is also a Transaction Editor Panel that allows editing of animation durations and delays for each transition.

1) Main Toolbar
The main toolbar is located at the top right hand side of the Animator.

Main Toolbar

Load from File : Opens a file navigator to allow the selection of a file from the local machine. Also opens the 'Load Image' option in the left hand Panel.
Load from URL : Opens the 'Load from URL' option in the left hand Panel.
List Exported Files : Shows a list of files that have been exported to the server with download links.
Preview Image : Presents a sample of the image in a browser window. Also offers a number of HTML setup options that can be copied.
Open Event Selection : Opens the 'Action Event' option in the 'Image Project' section of the left hand Panel.
Open Export Options > : Opens the 'Export Files' option in the 'Image Project' section of the left hand Panel.
Open Copy Options : Opens the 'Copy Files' option in the 'Image Project' section of the left hand Panel.
Undo Action : Undoes the last action performed in the Animator.
Redo Action : Redoes the last action undone in the Animator.
Open Help : Opens the Animator help pages.
Logoff : Logout from Animator.

2) Resize Toolbar
The main toolbar is located at the top of the loaded image in the Animator.

Resize Toolbar

Edit the Background Sizes : The '-' button decreases the size of the background incrementally and the '+' increases it. Clicking on the image in the center opens the image and background resize options in the 'Image Project' section.
Edit the SVG Image Size : The '-' button decreases the size of the SVG image incrementally and the '+' increases it. Clicking on the image in the center opens the image and background resize options in the 'Image Project' section. Note that the image will be resized proportionately. Edit the image in an SVG editor to change the proportions.

3) Play Toolbar
The play toolbar is located below the loaded image in the Animator.

Resize Toolbar

Rewind : Reset the image in the animation to its original state.
Play the Animation : Runs the animation. Clicking again pauses the animation and clicking yet again resumes the animation.
Select Time Elapsed : Clicking on the time elapsed i.e. '0/1000(millis)' opens a dialog to allow the manual setting of elapsed time. .
Collapse Transition Panel : Closes all the transitions that have been expanded in the Transition Editor Panel.
Collapse Transition Panel : Opens a dialog that filters which transitions are shown in the in the Transition Editor Panel. Transitions can be individually selected to be visible or invisible.
Animation Speed : Select the play speed (less than one for faster and more than one for slower) from the 'Slower' Dropdown.
Play/Repeat Play : Opens a dialog with options to play the animation continuously in the Animator. Also sets the continuous or repeat animation in the image when deployed.

4) Transition Editor Panel
The Transition Editor Panel presents a list of all the current transitions in the SVG image animation. Using the dialog brought up by clicking the 'filter' icon on the toolbar offers the ability to show or hide any of the transitions.

The light color represents a 'delay' and the darker color the 'duration' of that specific transition. Clicking on either of these will open the transition in the left hand panel of the Animator.

Current Transitions

To edit the duration and/or delay of individual transitions, click on the up/down arrow to the left of the transition. This will open the details of the transition. Drag the downward pointing needles to the left or right to adjust the length of the delay. Drag the upward pointing needles to the left or right to adjust the length of the duration. The changes made here will be reflected in the 'Transition' section on the left hand side of the Animator.

Current Transitions

A new transition can also be created by clicking on the '+' icon shown after the id of the element.

5) Web Page Animations Panel
Clicking on the 'Preview Image' icon in the toolbar opens the Web Page Animations Panel. This panel has options to preview what the animation looks like in a browser. Other options allow the copying of different HTML templates that can be used for deploying the image.

There are also options to download the image itself and the JavaScript libraries that are needed to run the animation.

Web Page Sample

Selecting one of 'Inline HTML', 'Object Tag HTML' or 'Img Tag HTML' presents a template of the relevant HTML type with an option to copy the text using the 'Copy HTML' button.

Web Page Template