create animations

Create simple animations for objects (change of color, movement, rotation, etc) by using states.

Discover states to create your project and animations. There are states in screens, foreground, background and in some components: Pop-up and Multi-state. The way to use states is the same everywhere.

A state is a particular scene, like a photography at a "t" time. There are two kind of states: blank states and linked states. Contrary to a blank state, the linked state keeps the original state's properties. That's how you create animations. 

 

Create a state

a. Blank state

  1. Select your state in the Screens window to the left.
  2. Click on + ADD STATE
  3. To ensure you selected the state, check that the green button displays + ADD STATE and not + ADD SCREEN
  4. A new blank state appears

create-a-state-1.gif

b. Linked state

  1. Select your state in the Screens window to the left.
  2. Click on the orange button CREATE NEW STATE LINKED ON SELECTED STATE
  3. A copy of your state appears, the linked state

 

Linked states

When you create a state (2) linked on another state (1), this state (1) is duplicated. Every changes on state (1) are linked on the state (2). So if you create a square on the state (1), you automatically create the same square on the state (2). There three links between these states:

  • size and position
  • properties
  • interactivities

But if you modify things on state (2), these modifications won't be applied on the state (1). By doing this, you create an animation. You can cancel a modification on state (2) by clicking on link icon in the Objects window.

create-a-state-2.gif

Create an animation 

To create an animation on an object, you juste have to create the initial and the final states: transition between these two states is automatic. 

Example: to move an object, create a state with the first position and then create a linked state with the second position. 

 

Appearance effect

  1. Insert an object on a state and set its opacity on 0%
  2. Create a state linked on the selected state (orange button)
  3. In this second state, change the opacity on 100%
  4. Go back on the first state
  5. Choose a trigger (tap on the object...) and the action Change state

 

Disappearance state

That's the same process than appearance effect. Just set the opacity on the first state on 100% and that on the second state on 0%.

 

Flashing effect

  1. Insert an object with a light color
  2. Create a linked state (2)
  3. On this second state, change the color in a darker one
  4. Go back on the first state (1)
  5. Select you state in the screens window and open its Interactivities window
  6. Click on ADD ACTION
  7. Choose the trigger Display Current state, Go to state, Change State and select your state (2).
  8. Go back on the second state
  9. Select you state in the screens window and open its Interactivities window
  10. Click on ADD ACTION
  11. Choose the trigger Display Current state, Go to state, Change State and select your state (1).

There are many other effects you can do: moving effect (position 1 in state 1 and position 2 in state 2), magnifying effect (size 1 in state 1 and size 2 in state 2)...

 

Choose a state by default

Click on the pin icon near the state you chose. The state by default will be the first to appear. If you don't create animation between state, only this state will appear.

 

Was this article helpful?
1 out of 1 found this helpful

Create today your interactive content

Easy-to-use ∗ Free ∗ No installation

START NOW!