Menu
Components > Media Components > Animation

Animation Component

2D animation for logos, objects and characters.

  1. Adding an Animation Component
  2. How to create an Animation
  3. How to export from Spine
  4. Apply your Animation to Umajin
  5. Properties for the Animation Component
  6. Events that can trigger an Action on the Animation Component

1. Adding an Animation Component

Go to the page you’d like to add the animation to, click the + button, and find the

Animation Component (under Media category). Click Insert.

The Animation component loads a default ‘Umajin’ text animation. With the Animations Component selected, head to Properties > Beauvoir. 

Find the dropdown arrow next to Start Animation. The default animation will have three states of which the animation can start at. (Press PLAY to view the default animation.) 

2. How to create an Animation

To create the 2D animation we support Spine (http://esotericsoftware.com/) which is a fantastic third party tool for creating 2D animations.  After downloading and installing the latest version of Spine from their website, you will need to go into Spine Settings. In the Application tab, use the drop-down to change the Spine version to 3.7.94.

 

Here are some examples of the UI animation that can be created:

Here is a project with some sample animations you can add to your new templates list with this link Install Template. Alternatively here are the animations in a zip file that you can download and add to your own projects.

3. How to export from Spine

  • Click the Export button (CTRL+E for windows or CMD+E for Mac).
  • Have JSON selected.
  • Have ‘Create atlas’ selected.
  • Click on settings next to ‘Create atlas’
  • Check the output is PNG and the packaging is Atlas.
  • Also adjust the size. It must be a square size e.g. 1024 x 1024 or 2048 x 2048.
  • Click ok and then click Export.
  • Spine will create 3 files, an Atlas, a JSON file and a PNG.

4. Apply your Animation to Umajin

  • Copy your exported Spine animation files (.atlas, json and .pngs), open the Resources Folder for your Umajin Project, and paste the files into the animation folder.

  •  In the Properties Inspector, under the  Appearance heading, Animation file, click the folder icon and select your Animation.

  •  Select the Animation in the drop-down for Start animation if you want your

    Animation to play as soon as the page is viewed.

  • You can choose to loop the Animation or not.
  • You can choose the option to play the Animation on Press animation.
  • Press play and check your Animation is working as you’d expect it to.
 

There are a special set of actions for controlling animations. These are under the Animation tab in the Action Selector. Animation actions

Properties for Animation Component

NameWhen components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and SizeSets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a animation thats size  will be maintained across devices.
AppearanceSets up the main animation file and size.
Animation fileType in the exact filename of your previously created main animation file that you have saved in the Project’s ‘Resources Folder’ inside the ‘animation’ folder.
ScaleRe-size using the scale slider. Scale of 0 to 3, 3 being the largest.
BehaviorSets up the action for your animation.
Start animationThe dropdown will display a list of all of the animations in the file. The file can be text or an animation. If you select an animation here, it will play at the start of the page being visible.
Start loopCheck the box if you want your animation to loop.
Delay before start(ms)On a sliding scale of 0 to 5000 milliseconds you can set a delay before your animation will play.
Press animationThe drop-down will display a list of all of the animations in the file. If you select an animation here, it will play when the user presses on the animation component.
Origin XSet the horizontal position.
Origin YSet the vertical position.

 

Events that can Trigger an Action on the Animation Component

On PressAction occurs when component is pressed.
On CompletionAction occurs when the animation is completed.
Menu