Insight & Article


Animation Background

Those familiar with cartoons may think of animation simply as a change in position over time e.g. an aeroplane flying across the screen. 

In SignStix Creator, animation is a broader concept as you can animate any of the following attributes of a layer:

  • Position (X and Y coordinates) – to achieve movement
  • Opacity – to achieve fade-ins and fade-outs
  • Scale – to achieve growth and shrinkage
  • Angle – to achieve rotation
  • Colour – to achieve colour transitions

To define an animation you need to specify the following:

  • The layer to be animated
  • The start time for the animation
  • The end time for the animation
  • The attribute to be changed (e.g. angle)
  • The value of the attribute at the start time (e.g. 0 degrees)
  • The value of the attribute at end time (e.g. 90 degrees)
  • How the value should change between those two values (e.g. at a constant rate)

In Creator, time is handled using ‘frames’, where each frame is 40 milliseconds long.  By default, a sign has 100 frames, making the sign last 4 seconds.  The length of a sign can be increased by increasing the number of frames.

Each layer has its own timeline of frames, allowing independent animation of each layer.

To define an animation you choose a layer then mark two frames as ‘key frames’.  These determine the start and end time for the animation.  Then you select each key frame in turn, and set the attribute values you want at those points.  This is covered in more detail below.

Adding Animation in Creator

The steps below show how to animate the position of a layer so that it moves smoothly from the top left of the screen to the bottom right.  It is assumed that you have already opened your sign in Creator, and that it contains at least one layer.

  1. Firstly open the Animator view.  This can be done either by pressing the ‘A’ key or choosing ‘Animator’ from the View menu in Creator.
  2. In the Layers panel at the top right, select the layer you would like to animate.
  3. In the Animator, click on the first frame in the timeline.
  4. Press the ‘Add Keyframe’ button.  This looks like a key with a little plus sign.
  5. The frame should now include a little black dot, indicating that it’s a key frame.
  6. Click on a frame somewhere near the middle of the timeline and make it a key frame too.

This has defined the start and end frames for the animation.  Now you need to specify the layer’s position at those frames.

  1. Activate the ‘Move Tool’ in the Tools section at the top left.
  2. Click on the first key frame in the Animator.
  3. Drag the layer somewhere near the top left of the signage canvas.
  4. Now click on the second key frame and drag the layer towards the bottom right of the canvas.

At this point you have created a ‘step’ animation.  If you were to play the animation you would see the layer remain at the top left for the first half of the sign, and then suddenly jump to the bottom right when the second key frame was reached.

Step animation has its uses, but in general a gradual animation is required.  This can be achieved as follows:

  1. In the timeline, click on any frame between the two key frames.
  2. Click the ‘Add a motion tween’ button.  This looks like an alarm clock with a little plus sign.
  3. The frames in this region will turn blue to indicate that they are part of a ‘tween’ (which means a period of gradual change between two fixed points).
  4. If you now click on one of these frames you’ll see the layer move to the corresponding position on the canvas.
  5. Play the animation by clicking the play symbol (a triangle pointing to the right) at the bottom of the Animator.
  6. You should see your layer move gradually from the top left to the bottom right during the first half of the sign, and then remain at the bottom right for the second half of the sign.
  7. Stop the animation using the pause symbol (two vertical bars) at the bottom of the Animator.

Note that the layer moves at a constant rate because the default ‘Transition’ setting is ‘Linear’.  Try setting this to ‘Bouncing’ instead.  Play the animation again and notice how differently the layer moves now!

As a further exercise, try making the layer fade-out towards the end of the sign, along the following lines:

  • Add a further pair of key frames later in the sign.
  • On the final key frame, set the Opacity of the layer to 0 (meaning completely transparent) using the Tool Options window on the right.
  • Add a tween between those key frames and set the Transition to ‘Linear’.
Get to grips with animation using our new video tutorial. 
Back to Support