The Latin word animare has several meanings, one of which is “to enliven”, or breathe life into something. While we don’t want to go quite that far, it serves as a good metaphor for what we want to achieve – giving the illusion of life by moving things.
The term ‘animation’, then, refers primarily to a form of movement:
- This could be linear movement between two or more points, i.e. a distance travelled by an asset (usually an image).
- Over this distance, there could also be a difference in speeds, with either an acceleration or deceleration occurring.
- If we’re not taking the shortest route from A to B, but instead travelling along a curve or winding course, we call this a path animation – the asset is moving along a path.
- If the asset remains at its starting point the entire time, perhaps turning on its own axis, this is called a rotation.
- Changing the size of an asset – also known as scaling – is also a form of animation. If the asset is not scaled proportionately, we call this distortion.
- An animation doesn’t necessarily have to include a movement – an asset could also fade out gradually until it is invisible, or slowly fade into view. When it comes down to it, both of these transformations are essentially changes in opacity.
An animation is a visible change to an asset that takes place on the timeline.
Animations are always linked to objects in a scene. As such, they are never shown as independent assets in the Scene Navigator. Instead, they are created and managed in the Animations Inspector. The Animations Inspector is located in the sidebar on the right. When an object is selected or marked on the stage or in the Scene Navigator, the Animations Inspector displays all the animations that involve the object in question.
In principle, animations are created by following a simple pattern:
Import objects into the scene – Create a new animation in the Animations Inspector – Specify length, speed and other factors – Define the starting status for the object in the timeline (key frame) – Use other key frames to make changes to the position, rotation, size and opacity of the object.
All of this will be easier to follow if we go through an example step by step. In our example, we want a leaf to fall from a tree.
Both the tree and the leaf are imported into the scene as assets, and the leaf is initially placed in the treetop.
- In order to make sure that the leaf is positioned further forward than the tree, we need to increase its Local Order from 0 to 1. We can do this in the top area of the Object Inspector. The Local Order value determines how far in front of the background an object is positioned. The higher the value, the further forward the object is. When assets are first imported, their Local Order = 0.
- Next, we will select the leaf, open the Animations Inspector (right sidebar, middle symbol) and use it to create a new animation. We will call this animation ‘FallingLeaf’.
- We want the fall to take 4 seconds and include 101 frames (frame rate: 25 frames/second).
Caution: The Number Of Frames and Loop Time can be linked to one another using the padlock symbol. You can lock and unlock this padlock by clicking on it.
When the padlock is unlocked, you can adjust the two properties independently of one another. For example, if you increase or reduce the Number of Frames, the Loop Time will remain unchanged. This means that the total time the animation runs for will remain the same, but if you have created an animation in one of the previous frames, this will now run faster or slower.
Caution: The Number of Frames can only be reduced if there is no key frame on the last key. As such, if you want to reduce your number of frames, you first need to move your key frames accordingly in order to make your change.
Example 01: Imagine you want to animate an object that moves from left to right, such as a ball.
The animation you create has 30 frames and takes one second. You then decide to increase the number of frames to 60 while keeping the loop time to one second.
If you play the animation after making this change, the animation of the ball will run faster, as the animation still takes place in the first 30 frames. As a result, the movement is now completed within half a second. The last 30 frames are still played as well, of course, but since the animation ends at frame 30, it is followed by 30 frames of empty animation where nothing happens.
Of course, you could use these new frames to continue the animation, e.g. by making the ball jump or roll back in the opposite direction.
However, if you adjust your 30-frame animation to the new 60 frames and place the last key frame at 60 again, the animation will play at the same speed as it did before, when you were using one second and 30 frames.
Example 02: You want your ball animation to run faster, but you don’t want to add any additional animation to the end of it. In this case, you will need to leave your number of frames as it is and only alter the Loop Time.
When the padlock is locked, the two properties are linked. This means that if you adjust one value, the other will be altered accordingly. For example, if you double the number of frames, the Loop Time will also be doubled.
Example: Imagine you have an animation that want to link to a sound file, but the sound file is longer than the animation.
As soon as the animation is played, the end of the sound is cut off, as the sound ends at the same time as the animation. However, you want to play the entire sound without altering the speed of the animation.
In this case, you need to link the Loop Time and Number of Frames values by clicking the padlock symbol to lock it.
Next, enter the full duration of your sound file under Loop Time. TigerCreate will then automatically add the extra frames you need at the end of the timeline.
However, since the animation still ends on the same frame and has not been moved, it still has the same speed as before.
The additional “empty” frames at the end now allow the sound to be played in its entirety without being cut off prematurely.
- If the timeline is not yet open, you can click on the Animator (above the workspace). Clicking on the round, blue button on the far left activates Record mode for the timeline. You will need to be in Record mode in order to set keys and make changes to animations. You can use the Scale Timeline option at the bottom of the Animator window to adjust the view so that you can see the entire length of the animation.
- In the current frame, frame 0 (the transparent red bar – the slider – indicates the current position), we want to set keys for Position and Rotation in order to save the current status of the object.
- We will also set more keys in frame 100, at the end of the animation. In the timeline, a line is now shown between the keys in frames 0 and 100 to indicate that an animation may take place during this time. If we were to play the animation now, however, nothing would happen, as the status of the object at the start of the animation is identical to that at the end. If there is no animation or change of state between two key frames, the background between the frames in question will appear grey. As soon as a change takes place between the two key frames, the area between them will turn turquoise.
- Set the slider to frame 100 (by clicking in the frame scale at the top), then move the leaf to its end position on the floor. There are several ways of doing this:
- a) Use the mouse to drag the leaf from one position to the other on the stage itself.
- b) Use the arrow keys on the keyboard to move the leaf (hold down Shift to move in larger increments). This option takes far too long to be useful for our example.
- c) Adjust the values in the Object Inspector. In the Key Transformation Properties area, you will see X and Y values for the Position of the object. Since we are primarily interested in moving the leaf downwards on the vertical axis, change the Y value to approx. 1,000 and fine-tune afterwards using the mouse, if necessary.
- For as long as the ‘FallingLeaf’ remains selected, you can test what you have done so far with it by pressing the Space bar to run the animation.
- In order to make the animation a little more life-like, we will create a few more key frames between the start and end points. In these frames, we will make the leaf move sideways several times while rotating on its own axis. To do this, click on the scale at the top to move the slider – the red bar in the timeline – forwards 15 frames at a time to frames 15, 30, 45, etc. In each of these frames, we will set another key by clicking in the Position and Rotation lines.
- Once you have set all your keys, you will need to adjust the values for Position and Rotation in the individual key frames (15, 30, 45 etc.). You can either do this manually using the mouse, or by changing the values for Position (x) and Angle (z) in the Object Inspector.
Start animations – Dependent animations
- If you launch the Preview function – the simplest of TigerCreate’s internal testing options – at this point, you will see that the leaf does not move. This is because we have not yet defined whether we want the animation to start automatically (making it a start animation) or only when it is clicked (making it a dependent animation).
Let’s try out both. Open the Animations Inspector again – the area where we created the ‘FallingLeaf’ animation and can now manage its properties. To the left of the animation is a checkbox with the word ‘Start’ above it. If this checkbox is checked, the animation will start automatically. It will normally do this as soon as the scene and the object in question have finished loading. To stop it from doing so, enter a value of 125 time steps in the Delay box further down the screen; this corresponds to a total of 5 seconds. This means that the ‘FallingLeaf’ animation will not start until 5 seconds after the scene has finished loading, at which point it will play through exactly once. This applies in both the Preview mode and the final application.
- If you do not want the animation to start automatically at all, you will need a trigger element, which must be marked as Is touchable. You can check this option under Generic Properties in the Object Inspector. Before you do so, however, it is important to note that there are three ways of making an animation start with a Click:
- a) Mark the object itself as Is Touchable. When the user clicks on the touchable object, the animation which is assigned starts. This is not very practical for our leaf, as it is very small and hard to make out against the rest of the tree.
- b) Assign Is Touchable to another object; for example, the ‘FallingLeaf’ animation could start when the user clicks on the tree. We could take this one step further by adding another animation to the tree itself, making it move before the leaf falls to the ground. In order to do this, we would need to link two animations – wobbling tree and falling leaf – to one object. This is exactly what we’re going to do – only in a different way.
- c) Experience has demonstrated that it is good practice not to link touches to the moving object itself, e.g. an image. Instead, it is best to create a node and place this in the position where you want the animation to start. Nodes are transparent, rectangular objects that are invisible in the final application. (Nodes fulfil the same function as the buttons used in TigerCreate 1.)
Working with nodes as buttons
There are many benefits to using nodes as buttons for animations.
- If you have a complex scene with a lot of objects and animations, and want to make changes to your scene at a later date, it can quickly become difficult to keep track of which object controls which animation. If you follow the principle of “every animation must be controlled by its own node, and every node must have a clear name” it will be much easier to maintain a clear overview of everything.
- When an image object controls an animation, it is always the object’s surrounding rectangle that acts as the button. If your tree is very high, this would be very impractical as the animation would be started not only when the user clicked on the treetop, but also if they clicked on the trunk or the areas to the left and right of it.
- Many animations need to be triggered only once – no more. Think about an apple falling from a tree. Once it has hit the ground, there is no logical reason to click on it again and make it fall a second time. In such cases, it is helpful if the animation is triggered not by the object itself (the apple), but by a node, which is then removed from the stage area by an animation of its own. For an alternative, simpler way of solving this particular problem, see below.
Let’s return now to our example. We want to give the tree its own animation to make it move back and forth slightly before the leaf falls off it. We will execute this movement using a slight rotation.
When an object is imported, TigerCreate shows the object’s ‘anchor point’. This is automatically positioned in the centre of the object’s surrounding rectangle when it is first imported. There is a blue circle around the anchor point; this is responsible for the object’s rotation. If we were to rotate the tree while it remained in its starting position, it would turn around its centre point, causing the trunk to rotate as well. This would look decidedly strange.
- Using the mouse, we will drag the anchor point to the bottom of the trunk, where the tree touches the ground.
- The Animations Inspector will show no changes at first, as we have not yet assigned an animation to the tree itself. Now, we need to create a new animation, which we will call ‘Tree’. Set the length of this animation to 41 frames and 2 seconds (Loop Time) and increase the number of Loops to 2 so that the animation plays through twice in direct succession. You will notice that Total Time is now displayed as 2 * 2 = 4 seconds.
- Since we only want a rotation, we will only set keys in the Rotation line of the timeline. In this line, set one key in frame 0 and one in frame 40 – we want the tree to be back in its starting position by the last frame. We also need to assign keys to frames 8, 20 and 32.
- You can set the rotation in the Object Inspector by entering the corresponding numbers in the Angle field. Since we only want a slight rotation, it is better to use this method than to move the blue circle around the anchor point using the mouse. Move the slider in the timeline to frames 8, 20 and 32 in turn, and use the Object Inspector to assign these keys the values 1, 359 and 1 respectively. This means that the tree will rotate just 1° to the left and 1° to the right.
- In Edit mode, you can start and stop individual animations by pressing the Space bar.
- As you will recall, our leaf is currently positioned in front of the tree, so it will not move when the tree rotates. In order to keep things simple, we will now set the Local Order value for the leaf back to 0 in the Object Inspector so that it disappears behind the tree. (Alternatively, of course, we could also increase the Local Order of the tree to match that of the leaf.)
- Press the + symbol in the Scene Navigator (left) to create a node. In the Object Inspector, we will name this node “Button_Tree”. We will then move and scale the node until it covers the majority of the treetop.
- Check the Is Touchable checkbox under Generic Properties in the Object Inspector. Next, we want to assign this node to both of our animations – ‘Tree’ and ‘FallingLeaf’. We will do this using two procedures:
- Press the + symbol below the white field to open a pop-up menu listing all the animated objects in the current scene. If you move the mouse over an object, the animations assigned to it will be displayed. We will use this method to add the ‘FallingLeaf’ animation.
- At the bottom right of the animation list is a small icon in the shape of a chain link, the Animation Pointer, which can be dragged around the screen using the mouse. Whenever the mouse moves over an object with animations, either on the stage or in the Scene Navigator, a list will appear of the objects in this location, together with their animations. Using this method, drag the Animation Pointer over the tree and select the ‘Tree’ animation. This will now also appear in the list of linked animations.
- There are two things we need to bear in mind at this point:
- A leaf can usually only fall from a tree once. At the moment, however, the animation will restart every time the user clicks on the treetop. In order to prevent this from happening, we need to set the Touch Properties for the node to Start Once in the Mode menu. This ensures that every animation linked to the node is only triggered once.*
*Further Mode options for Touch Properties are described in the Object Inspector/Touch Properties section.
- Secondly, the ‘FallingLeaf’ animation is still set as a start animation, so it will start automatically even if the user does not click on the node button. As such, we need to uncheck the Start box in the Animations Inspector. While we’re here, we can also set the Delay Time for ‘FallingLeaf’ to 4 seconds instead of 5 so that this animation starts when the ‘Tree’ animation ends.
All done! If you now click on the treetop, the tree will shake back and forth for a few seconds and then a leaf will fall slowly to the ground.
Caution: If you want to trigger a nested parent-child object comprising several individual objects (see corresponding section), it is important to ensure that all the animations for the individual nested objects that you want to play are linked to the trigger node via the animation-list!
Special considerations for overlapping nodes
Wherever possible, you should avoid contact and overlapping between different nodes with touch events. However, if you cannot avoid this for some reason – e.g. because nodes are always rectangular and you are using them to cover several round objects that are close together – you will need to bear the following points in mind:
- In 2D scenes, the touch event that will be executed is the one belonging to the node with the highest Local Order value. For more information, see Object Inspector/Generic Properties.
- In 3D scenes, the touch event that will be executed is the one belonging to the node with the highest Z position. In 3D scenes, the Z position takes priority over the local order. The local order only plays a role if two overlapping nodes have the same Z position. In this case, as with 2D scenes, the node with the higher local order value will be triggered. For more information, see Using 3D.
Objects with multiple animations
In the example above, we had two objects with one animation each that were controlled by a third object (the node). However, it is also possible for one object to trigger multiple animations at different times/in different objects. In order to do this in TigerCreate 1, we would need to trigger different sections of the same timeline. In TigerCreate 2, on the other hand, every animation has its own timeline with its own parameters, such as length, speed and number of loops.
Let’s look at a simple example: a scene of a stylised field of flowers. A bee flies into the scene and hovers over the flowers. We’re going to create three animations for the bee, so that it flies between a few different flowers before returning to its starting point. We will control these three animations using invisible nodes placed over the flowers.
- First, we will move the bee to the right of the stage so that it can fly into the scene. This position will act as the starting point for the first animation. We want the bee to start flying onto the screen automatically, so this needs to be a start animation.
Select the bee, then press the + symbol in the Animations Inspector to create a new animation. We will call this animation “Start-Bee”. Check the Start checkbox to ensure that the animation starts automatically, then give it a length of 81 frames and a duration of 4 seconds.
- With the Animator open, activate Record Mode; the corresponding button and the bar in the timeline will turn red. Set a key in frame 0 to mark the bee’s starting position, off-stage to the right.
- Next, we need to scroll to the end of the timeline using the slider and set a second key in the last frame, before moving the bee in this frame to about the middle of the stage, above the flowers.
In order to make the bee’s flight path when entering the stage more dynamic, click the lower half of the Position line in the timeline to open the control options, then select Ease Out. This will make the bee fly onto the stage quickly and then slow down at the end of its path (presumably upon discovering the flowers 😉 ).
- In order to prevent any jerks or skipping between animations, we should now use the end point of this start animation as the start and end points for the three animations of the bee flying around the flowers. As such, we need to copy the end position of the start animation by right-clicking on it (‘Copy Key’).
- We can now create the first of these flight animations in the Animations Inspector. We will name it ‘FlyToFlower_1’ and give it a length of 141 Frames and 7 seconds. We want the bee to fly to the big flower on the left side of the stage, stay there for a moment and then quickly return.
- The start and end points of this animation need to be identical to the end point of the start animation: right-click in the first and last frames in the timeline to paste the Position key we copied earlier.
The bee should need 50 – 60 frames to reach the flower, remain in position for approx. 30 frames and then return at a slightly faster speed. We will set a key (Position) in frame 55 and move the bee in this frame to the flower.
- If we start the animation as it is now (by pressing the Space bar or the Play button above the timeline), the bee will be facing backwards when it returns from the flower. As such, we will need to set more keys in the timeline for Scale. We want the bee to stay the way it is in the first and last frames; it only needs to be mirrored on its return journey, from frame 86 to the penultimate frame (139).
In the timeline, we need to set keys in frames 0, 85, 86, 139 and 140 in the Scale line. In frames 86 (the first frame of the return journey) and 139 (the penultimate frame of the return journey), the bee needs to be flipped around. To do this, go to the Object Inspector and change the Scale X value for these frames from 1 to -1. This will flip the bee around to make it a mirror image of its original state.
- Our first animation is now basically complete, though you can still fine-tune it if you want: you could speed up the flight to the flower at the beginning and slow it down at the end again (Ease Out); make the bee move a little when it is on the flower (Position, Rotation); or set extra keys for Position to make the bee take a less direct route.
Now, we will follow the same pattern to assign two more animations to the bee – ‘FlyToFlower_2’ and ‘FlyToFlower_3’ – so that it flies to two more flowers further to its right. Once again, it is important to make sure that the bee never flies backwards by setting keys in the Scale line to flip it around whenever necessary.
- Once we have created all three animations, we can use the + symbol in the Scene Navigator (to the left of the workspace) to create three nodes. On the stage, these will take the form of transparent rectangles that will be invisible in the finished scene. We will call these nodes ‘NodeFlower_1’, ‘NodeFlower_2’ and ‘NodeFlower_3’. Position them above the flowers the bee is going to fly to. The nodes will act as the control elements for the animations.
- Open the Object Inspector to link the nodes to the individual animations. Select ‘NodeFlower_1’, check the Has Touch Event Checkbox in the Touch Properties and use the + symbol to select the correct animation (‘FlyToFlower_1’) from the list.
- For the other two nodes, we will link the corresponding animations by dragging the Animation Pointer onto the bee rather than using the + symbol.
- Caution: Don’t be alarmed if your object seems to ‘disappear’ for no reason when performing these tasks, or if it appears somewhere unexpected. We have one object (in this case, the bee), but several animations; each animation has its own start and end point. If you switch between the animations in the Animations Inspector, your object will move to the current point in the timeline for the animation in question. If you click anywhere in the workspace, on the other hand, your object will move to the position it was placed in when it was first put on the stage, rather than the position it was moved to for its first animation (the so-called default position).Every object has a default position; this is where it will be located when it is not selected/marked and none of its animations are pinned. In addition to this, every animation has a starting position. This is not necessarily identical to the default position!
- Once all three animations have been linked to the nodes, we can test them one by one in Preview mode.
You will notice that we still need to make two aesthetic improvements:
- Firstly, the bee might disappear behind one of the flowers, because the flower is positioned further forward on the stage than the bee. You might want this to happen with the yellow flower, but at the very least the bee should be further forward than the flower it flies to on the far right of the stage. To make sure this is the case, open the Object Inspector and change the Local Order value for the bee to 1 or 2. The bee will now be further forward on the stage, so it no longer disappears behind the flower.
- In addition to this, the animation may jump in certain situations, e.g. if the user clicks on a flower before the bee has fully returned from a different flower. To prevent this from happening, go to the Touch Properties in the Object Inspector and change the Animation Mode for all three nodes from Start to Start If No Active Animations. This ensures that clicking on a flower (or the node placed over it) will only start an animation if none of the bee’s other animations are currently running.
- Sprite sheet animations – Lots of images, little movement
Despite all the options TigerCreate offers for animations, there are still some situations where complex workarounds are required to create certain effects.
As an example, take a look at this image sequence:
In order to animate this cleanly, we would need to divide the hippo into several separate parts and use several different water sections to cover the bottom half of the hippo at different points in the sequence – and that’s without even worrying about the foam and splashes. When you need to do all this for an effect that only appears briefly, it’s time to take a different approach. The magic words here are Sprite Sheet Animation. This function actually swaps the image on the stage for the next one in the sequence multiple times during the animation. Only the 6 images shown here are used for the animation. Each image contains only the part of the picture that changes, i.e. the hippo and the rings in the water around it. The rest acts as part of the background and remains unchanged throughout the entire sequence. It is important to ensure that all the images are the same height and width. You may also find it useful to number all the image names so that you can see more clearly which order they belong in.
Start by importing the first image – the starting status for the animation – into the scene. In the Animations Inspector, create an animation and set the number of frames and time in seconds for it. Once you have done this, go to the Animator and set a key in the first frame in the top line, Image. Next, move the slider to each of the frames where you want the next phase of the animation to appear, and drag the corresponding images for the next phase of the animation directly into the frame from the Project Navigator (Images folder). The image on the stage will be replaced and the anchor point, scaling, rotation, etc. will be adopted automatically. A key will also be added to the timeline. If you left-click on this key, the image inserted at this point will be displayed. This allows you to keep track of what happens in which frame.
This method – sprite sheet animation – is especially useful for sequences of movement that need to be repeated frequently, such as the flickering of a candle or flame, or the movement of a figure running or swimming on the spot while their environment moves around them. Since all the movement phases for this kind of animation need to be retained in the memory at once, you should take care not to use too many images.
- Animations on a path (Follow Path) – Bézier curves
Bézier curves are freely configurable curves that can be used as a path for an animation. They come in handy whenever you want to create any movement that is more than just a straight line between two or more defined points (keys), such as an oval, a circle or a curved line.
In our last example, we had a bee that flew into a scene and then flew back and forth to different flowers in separate animations. In that case, we used fixed points (keys) in the timeline to define the movement. In order to make the flight paths more random and life-like, we will now ‘soften’ them using a Bézier curve.
Press the + symbol in the Scene Navigator to create a new object, ‘Bézier’. The object will appear in the middle of the stage in the form of a small sine curve, with an anchor point and all the usual handles. To the top left of it, you will see a small square with a cursor symbol in it. Like text boxes, Bézier curves have two different modes – one for positioning, scaling and rotating, and one for editing the Bézier curve itself. The little box above the object allows you to switch between the two modes.
When it is first created, a Bézier curve will always have two points. The point on the left is the start point, while the right-hand point is the end point. You can add more points to the curve in Edit mode (see below). We will now enlarge the curve and move it to the top right so that the end point (on the right of the curve) is on top of the bee, just outside the confines of the stage.
- Next, we will go to the Object Inspector and give the Bézier curve a clear name – ‘Start-Path’ – before scrolling down to Bézier Properties and pressing the Reverse Points button. This will swap over the start and end points so that the curve runs from right to left – much more suitable for our bee.
- Click on the small box above the curve to switch to Edit mode. The pencil symbol indicates when you have done this successfully. The appearance of the curve will change: a small arrow indicating the direction of the animation will appear, handles will appear on the start and end points so that they can be moved, and additional controls allowing you to alter the appearance of the curve between its points will also be displayed.
Caution: When Edit mode is active for a Bézier curve, all the other objects and animations in the scene will be temporarily disabled. You will not be able to select them until you exit Edit mode for the Bézier curve.
In order to keep things simple, we will limit the changes in our example to moving the curve’s start and end points and slightly altering its shape. You can find more detailed information on working with Bézier curves here.
- Exit Edit mode briefly, select the bee, then go to the Animations Inspector and select the ‘Start-Bee’ animation. In the timeline, go right to the end of the animation – the bee should be in the middle of the stage – and take a look at the position values for X and Y in the Object Inspector. We need these values to remain unchanged so that the bee still comes to a stop at this point, even if it is following a curve. In order to ensure that this happens, we need to set the end point of the curve to the same coordinates. To do this, select the curve again and switch back to Edit mode. The Bézier Properties in the Object Inspector show the coordinates for all the points on the curve: point 1 is the start point, point 2 the end point. Edit mode allows us to adjust these values manually, so we can enter the exact coordinates for the bee’s end point.
- The rest of the process is pretty straightforward. After exiting Edit mode, select the bee’s start animation again. Next, under Follow Path, we need to assign the curve we have created to ‘Start-Path’. The timeline will then also change: instead of the Position line, you will now see a line called Path Movement. Here, we can once again choose the Ease Out option to speed up and slow down the movement.
When the animation is played in Preview mode, the bee will now fly into the scene along the path, which will now be invisible.
Extra tip: if you are using a Bézier curve as your animation path, you can also combine it with the Drag Along option described below to allow the user to control the animation.
- Back and forth – Ping Pong
Whether you move an animation between fixed, defined keys or along a path, the Ping Pong option in the Animations Inspector allows you to follow the exact same path when moving the object back and forth. The most important prerequisite for using this feature is to ensure that the number of Loops is set to more than 1. If you use an even number, the animation will eventually stop at its original start point; an odd number will cause it to stop at its end point.
When you use the Ping Pong option, the total animation time will be extended according to the number of additional loops, i.e. a value of Loops = 4 will multiply the displayed Total Time by four.
Think back now to the example we used above, where we used three different animations to move the bee from a single start point (A) to different flowers and then back to point A. In principle, we could have shortened these animations by only animating the bee’s path to the flower in question and automating its return journey using the Ping Pong feature. There is one key disadvantage to this approach: the return journey would be identical to the initial path, only in reverse, and we would be unable to adjust the individual parameters. In our example, this would have meant that the bee would fly backwards on its return journey.
As such, you should also be careful when considering using the Ping Pong option.
Let’s go back to our bee as it hovers over the flowers. Instead of triggering the animation by tapping on a flower, you could use the Drag Along option to grab the bee and guide it to the flower (and back again) bit by bit.*
When the Drag Along feature is activated in the Animations Inspector, the user controls the progress of the animation. The user can ‘grab’ the object and move it back and forth along a path (Bézier curve) or the defined animation route. As soon as it is ‘released’, it will come to an immediate stop and remain unchanged until it is moved again by the user. The rotation, scaling and opacity of the object will change depending on the progress of the animation along its route, just like they would for a normal animation. When you are using the Drag Along feature, the speed of the movement depends on the set Loop Time (see above). This specifies the minimum time in which the object can be moved across the entire length of its route. The Loops option is disabled in this mode.
In order for the Drag Along function to work properly, the animation must be defined as a start animation. We cannot do this for our bee, as it already has a different start animation. Alternatively, we can assign a touch event to the object we want the user to move (in this case, the bee). This means that Is Touchable must be activated for the object in question in the Object Inspector, and it must be linked to the corresponding animation (flying to the flower).
* It should be noted that there would be a problem with using this option in our specific example. Since the respective return journeys for the animation we created were identical to the journey to each flower, the bee would not be flipped around. As such, it would fly backwards on the return journey. To change this, we would need to make the return journey significantly different to the outward journey, e.g. by adding another point for the bee to fly to (key frame) or using a closed Bézier curve (e.g. an oval) for the flight path.
Caution: If a Delay Time has been set, you should set this back to 0 before activating the Drag Along option.
Free Drag is not like the other types of animation we have seen so far. When you are using the Free Drag option, no editable properties will be shown in the timeline. Instead, you will need to use the Limit Movement function to define a rectangle or circle within which the user can move the object freely.
If you choose a rectangle, you will need to define the distance by which the object can be moved up, down, left and right from its starting point. In extreme cases, it will be able to move across the entire stage. If you choose a circle, you will need to define the freedom of movement as a radius (Max Radius).
If we apply this approach to the example we used above, we could use Free Drag to create a large area above the flowers within which the user would be able to fly the bee around freely while the individual flowers sway gently back and forth (start animations).
The Min Pinch Scale and Max Pinch Scale options allow you to set upper and lower limits for the scaling of your object. By staying focussed on the object, the user can enlarge or reduce it within the set limits in a similar way to a zoom function.
Caution: In order to use Free Drag, you will need to set an animation as a start animation. To do this, you must set the Delay Time to 0 before selecting Free Drag.
- Scratch that! – Scratchables
The Is Scratchable function can be used to make an object ‘erasable’, allowing the user to scratch it out bit by bit. This is not really an animation in the sense that it does not actually move the object; it is more an interactive way of gradually hiding the object in question. You can also use the options to adjust the size of the eraser area (Brush Size) and set a limit for the percentage at which the object is classified as ‘erased’, at which point it will disappear completely (Complete).
In principle, it is still possible to animate an object that has been scratched – e.g. by adding a start animation to it so that it moves slowly across the stage. However, this approach has only limited uses. One example of when the scratch function can be useful is when you have hidden something behind an object, and want to remove the foreground object by erasing it … as shown in this example.
Caution: In order to use Is Scratchable, an animation must be set as a Start animation and as Is Touchable under Generic Properties. If the Scratch Animation has been assigned an animation under Touch Properties/Animations, it does not need to be marked as a start animation.
Using sounds in animations
TigerCreate offers two ways of linking animations to sounds: you can use either Animation Sounds, which are linked to the animation itself, or Event Sounds, which are triggered separately.
When you use Animation Sounds, the sound is linked directly to the animation (using the Animations Inspector). The sound will then always play whenever the animation is triggered, and end whenever the animation ends (at the latest).
Event Sounds are not linked to the animation itself. Instead, they are linked to the object that starts the animation (usually a node), i.e. to the touch event (using the Object Inspector). In addition to setting a Start Time and End Time to trim the sound and adding a Delay for it, this option also allows you to set a number of Loops and Volume for your sound. These options will be unaffected by the animation itself.
Event sounds also allow you to start different sounds using several different trigger objects.
For more details on this topic, see Adding sounds/Animation and event sounds.
Transferring animations onto other objects
With TigerCreate 2, you can now transfer animations from one object to another, even between different scenes and projects.
Imagine that you’ve created an ingenious animation with well-thought-out parameters for rotation, scaling, etc., and interesting Ease In and Ease Out effects for speeding up and slowing down your object. Now you need to create a number of similar animations. To save time, you can copy the entire animation – independently of the object itself – and transfer it to another object. TigerCreate 1 already offered a rudimentary way of doing this by copying key frames. However, this approach was often lacking when it came down to the detail – e.g. for transferring animations across different scenes. Now, however, the Animations Inspector offers simple copy & paste functions:
- In the Animations Inspector, select an animation and click on the + symbol in the squares at the bottom right of the Animations List. This will copy the selected animation together with all its parameters, but not the object to which it is assigned.
- Once you have done this, the arrow symbol in the squares next to the + symbol will become active. This is the Paste symbol.
- Select another object on the stage or in the Scene Navigator on the left, or switch to another scene. Whatever location you choose, the Paste symbol for the animation in your clipboard will be active in the Animations List.
- Click on the Paste symbol. The animation you have copied will appear in the Animations List, together with its name and all the associated parameters – but with the symbol for the new object you have selected.
Caution: If you want to replace an existing object with a new one without losing the associated animations, you will need to use the Base Image function in the Object Inspector (Generic Properties). Here, you will see the original image of the object in the Project Navigator. To the right of this is a Link symbol. This Image Pointer allows you to re-assign the original image or link to another image in the Project Navigator. The name, properties and all animations will remain unchanged; only the picture will change. Another way of replacing an image is by using the drag & drop function – simply drag an image into the link field under Base Image from the image folder in the Project Navigator.
As well as copying individual animations using the Animations Inspector, you can also use the Object Inspector to copy the animations assigned to an object in the Touch Properties and transfer them to another object. At the bottom of the Animations List, you will see the same Copy and Paste symbols as in the Animations Inspector.
In TigerCreate, operating the Animator controls (or moving the slider in the timeline) usually only plays the current animation without changing the other animated objects in the scene. This is generally a practical approach, and helps you to keep track of everything. In some cases, however, it actually makes things harder – e.g. if two or more animated objects reference one another (object A touches object B, thus causing object B to move), or if several objects have been linked together to form a complex parent-child object (see corresponding section). For example, imagine we wanted to animate a cat moving through the scene. We could animate its head, body, legs and tail all as individual objects. However, in order to assess the interplay between all the different parts of the cat’s body, we would need all the associated animations to play simultaneously.
The “Pin” function allows you to keep animations active in the Animator, even when they are no longer selected. As a result, all the “pinned” animations will move at the same time when you move the slider in the timeline.
To pin an animation, simply activate the pin symbol next to it in the Animations Inspector or the Animator.
Pinned animations remain visible in the Animator even when they and their animated object are no longer selected. If you pin multiple animations, these will be listed one under another in the Animator. The currently active animation will always be at the top of the list; this is the only animation that can be edited. If you want to edit another pinned animation, you will first need to make it the active animation. To do this, click on the name button to the right of the object symbol in the Animator. This will move the animation in question to the top of the list.
Caution: If you have pinned multiple animations, they may not all have the same length. When you start the pinned animations using the Start/Pause button in the Animator, they will all be played all the way from start to finish. However, if you move the slider manually, your movements will be restricted to the top timeline (that of the currently active animation). If necessary, you should make the object with the longest timeline active by clicking on the button with the corresponding name on it in the Animator. This will move the corresponding animation to the top of the list.
Caution: As long as an animation is pinned, you will not be able to select or edit any other animations for the same object in the Animations Inspector. In order to select or edit other animations, you will first need to deactivate the pin or activate it for another animation.
Things only start to look more complicated when you want a complex (parent-child) object to trigger multiple animations. Let’s take the example of our cat again – we want it both to slink through the scene (animation 1) and to jump in the air at a specific point (animation 2). As such, each of the cat’s body parts needs to perform at least two different animations. So that you don’t need to pin and unpin a whole heap of animations each time you want to edit one or the other of them, TigerCreate 2 allows you to use tags. These can be used to bundle all the animations for the slinking animation together in one group and all the animations for the jumping animation in another, for example. You should give both groups as clear a name as possible. You will then be able to switch between them as often as you like using the Tag Actions function in the Animator.
Now let’s go through this process step by step:
- We’ll start by creating two animations for each part of the cat’s body that needs to move – one for walking, one for jumping. You can leave these ‘empty’ for now.
- Next, click on the + symbol next to the Tags field, further down in the Animations Inspector. A new expandable list will appear that shows all existing tags.
By pressing the + symbol in this window, we will now create a new group. We will call this group ‘Cat-Walk’, as it is going to contain all the animations for the cat walking.
- Once you have done this, use the Tags option to assign the walking animations for each of the individual body parts to the new group.
- Next to the control bar in the Animator is a drop-down menu entitled Tag Actions. If we select our ‘Cat-Walk’ tag, all the animations associated with it will be pinned and listed one after the other.
- Use the same method to create another Tag for all the jumping animations. Name this tag ‘Cat-Jump’. Once you have done this one click in the Animator is all you need to switch the Tag Group.
The illustration below provides a brief summary of all the steps above.
1 – Pin symbol for activating/deactivating the pinning function for an animation
2 – Pin function in the Animations Inspector
3 – Button for activating a specific pinned animation – this animation will move to the top of the list, making its timeline the relevant one and allowing you to edit it
4 – Tags section in the Animation Properties Inspector
5 – The + icon opens a menu in the Animations Inspector; used to assign an animation to a Tag group or to open the Configure Tags menu
6 – Tag Actions drop-down menu in the Animator; used to activate and deactivate tagged groups. Extra tip: the Unpin All Animations with Tags and Unpin All Animations functions make it easy for you to deactivate all the active animations in one move.
Another advantage of ‘pinned’ animations and pinning groups is that you can use the Touch Properties (see Object Inspector) to easily add all the animations that are currently active (those that are pinned) at once. For example, if the animations in a tag group called ‘Bee’ are currently active in the Animator, you can add them to the Animations List for the trigger object with a single click.
In principle, all the animations in a tag group will be listed in the Animator when the group is question is active. However, you can also temporarily ‘unpin’ individual animations in order to remove them from the Animator display without deleting them from the tag group.
This is displayed as follows in the Tag Actions menu:
- Fully active groups are marked with a √
- Groups in which not all animations are currently active are marked with a –
- Inactive groups have no symbol
Animations of nested objects (parent-child objects)
In practice, you will often find yourself wanting to animate objects made up of several sub-objects, rather than simply animating individual objects in isolation. While we were looking at tag groups, we used the example of a cat. While the cat’s individual body parts were moved/animated in isolation, we wanted it to move across the screen as a single unit. Tag groups come in handy during the animation process, but the ability to group objects together as nested objects (parent-child objects) is even more important. This type of configuration is made up of a main (parent) and one or more subordinate (child) objects that are assigned to it. In the example of our cat, the individual legs, head and tail of the cat could be ‘children’ of the main ‘Body’ object. In order to achieve this configuration, the objects are nested inside one another in the Scene Navigator, then the child objects are animated individually and linked to the ‘Cat’ parent object by means of the nesting. If the parent object is moved, rotated or scaled, or if its opacity is altered, the child objects automatically adopt the same changes. In order to better illustrate how this works, think of a mother duck with her chicks swimming behind her in her wake. If you make the mother change her path, the chicks will follow her automatically, even though they are still performing their own movements.
Nested objects are easy to create:
- First, you need to think about which object is going to be your main, or parent, object – the one the other objects will follow.
- Next, go to the Scene Navigator and drag the child object onto your chosen parent object. Keep the mouse button pressed until a blue background appears behind the target object.
- The target object should always be the main (parent) object.
- When you release the mouse button, the child object will seem to disappear. However, a small triangle will appear next to the padlock and eye icons for the parent object. If you tap this triangle, the parent object will expand to reveal all its child objects – offset to the right. The child objects are now assigned to the parent object. Almost nothing changes in the way the objects are displayed on the stage. However, if you move the parent object, the child objects will automatically be moved, rotated, scaled etc. with it.
You will now notice something interesting if you look at the Object Inspector: the Position values (x, y) for the child objects will change, maybe becoming smaller or even negative. This is because child objects belong simultaneously to multiple coordinate systems. On the one hand, they have a position within the stage area, which means they have x and y values calculated starting from the top left-hand corner of the stage. This is referred to as the global position. At the same time, the fact that they are dependent on their parent objects means that they also have local positional values. These refer to their position in relation to the parent object’s anchor point. You can use the Local and Global buttons above the workspace to switch between these two coordinate systems. The good news is that, despite the complexity of the hierarchy levels for nested objects, TigerCreate can still copy and paste both the local and coordinates for nested child objects ‘cleanly’ when the object itself is copied.
Tip: this works both when copying between different objects and when copying between different coordinate systems – you could copy an object’s local values and use them as the global values for a different object, for example. All you need to do is switch from Local to Global once you have copied the values in question.
Caution: The child objects will also be assigned to the parent object in terms of the order/hierarchy. Even if a child object has been assigned its own Local Order, it will take on the hierarchy level of its parent object. Within the complex parent-child object, the hierarchy order – and thus the way the objects appear on the stage – will be as follows:
- The parent object will always be in the lowest position, and thus visibly behind (!) its child objects.
- The child objects themselves will be sorted either alphabetically or using their previous Local Order, but still controlled primarily by the parent object.
Example: take a parent-child object comprising a butterfly’s body and two wings. Originally, the two wings were assigned the local order = 2, while the body had a local order = 0. Now that they have been combined to form a complex object, the wings still have a local order = 2 but, as they are now child objects, they are subject primarily to the local order of their parent, which is still 0. As such, if another object – a bee, for instance – with a local order = 1 were introduced, it would obscure both the butterfly and its two wings. The local order of the child objects still exists, but it only applies within their parent object.
Caution: If you turn an object that already has an animation into a parent, the parent’s transformation values will be applied to the child object. Since the parent object may have two different transformation values (its original (default) transformation values, which apply as long as there is no active animation, and the transformation values of the animation), you will need to decide which of these values are applied to the new child object. The easiest way of doing this is to hold down the alt key while nesting the objects. This will open a small selection window that allows you to choose one of the available options. If you do not hold down the alt key during nesting, TigerCreate will use the default transformation values of the parent object unless an animation assigned to the parent is pinned. In such cases, the animation’s transformation values will be applied to the child object.
As a rule, we always recommend that you carry out all your nesting and create all your parent-child hierarchies before animating your objects. Nesting objects that have already been animated often leads to unexpected – and usually unwanted – side-effects.
Let’s use a simple example to illustrate this.
In our first animations, we used a bee. In order to keep things simple, we moved the bee as a single unit – its wings did not move. Since a bee is quite small, this wasn’t too obvious. Now, however, we want a bee whose wings are always moving when it is in flight.
- We will start by importing three objects from the Project Navigator: a bee (with no wings) and two individual wings.
- If you move the wings onto the bee, you will notice that, due to the alphabetic sorting, they are positioned in front of the bee (see illustration, left). To change this, go to the Object Inspector and assign higher Local Order values to the bee and the left wing. The right wing will now be behind the other two elements (see illustration, centre). Next, move the anchor points for the two wings to the bottom tip, as this is the point around which we want the wings to rotate (see illustration, right).
- Next, we want to animate the wings individually. We will do this by creating a short animation for each (‘RightWing’, ‘LeftWing’). These animations should last just 0.2 seconds so that the wing moves through the 15 frames of the animation quickly. In the Animator timeline, we need to define several key frames for the outward and inward rotation of each wing. We will also take this opportunity to create a ‘Bee’ tag group, in which we will place the individual wing animations. This will allow us to monitor whether the two wings move in time with one another. In order to ensure that the wing animations start automatically, they both need to be set as start animations. In order to ensure that the wings never stop moving, set the Loops value to 0. We do not need to assign an animation to the bee itself.
- If we now group the individual objects – the bee plus its two wings – together to form a nested parent object, the bee will become the parent object and the wings the two child objects. If we were to move the bee, its wings would follow automatically and move while doing so.
However, there are good reasons not to use this approach. Firstly, regardless of its local order, a parent object will always be positioned behind its child objects. This means that the bee would once again be positioned behind both its wings. It might be possible to overlook this for this example, but if all four of our cat’s legs were in front of its body … Another reason to avoid this method is the need to maintain a clear overview. Our example really isn’t that complex, and it only has one nesting level. However, TigerCreate can be used to create nested objects with any depth. The greater the depth, the more complex the object – and the more complex the object, the more important it is to be able to keep track of what is on which level.
- In order to circumvent these disadvantages, we can turn once again to nodes. Use nodes as your parent objects and make sure they have a clear name right from the start. In our example, we will now create a new node in the Scene Navigator and name it ‘BeeNode’. We will then scale it to about the size of the bee and place it exactly over the top of it.
- Next, we will nest all four objects. In the Scene Navigator, we need to drag the bee and its wings onto the symbol for ‘BeeNode’ and hold them in place until the node’s background turns blue. If we now release the mouse button, a small triangle will appear next to ‘BeeNode’. If we open the drop-down lists under the symbols, we will now see the bee, which is now nested.
- In order to make the bee fly, we now need to animate the ‘BeeNode’ parent object. To do this, we will create a (start) animation called ‘BeeFlying’. We will set the time for this animation to 10 seconds and 300 frames, so that the bee crosses the scene in 10 seconds. Set Loops = 0 to make this animation repeat endlessly.
At first, we will only set keys in the first and last frames in the Animator timeline. In the first frame, we will move the bee off-stage to the left, and in the last frame we will move it off-stage to the right.
- In order to make this all a little more life-like, we will now create more key frames, in which the bee pauses occasionally during its journey to hover over a flower for half a second (15 frames). We will use Ease In and Ease Out to speed up and slow down the bee’s movement between key frames. Once you have done all this, switch to Preview mode to see the results.
- As an alternative to defining a path using keys, we could also use a Bézier curve. To do this, we will use a ‘new’ bee. Right-click on the ‘BeeNode’ object in the Scene Navigator to duplicate it. A new copy of the ‘BeeNode’ object will appear both in the Scene Navigator and on the stage, together with all its child objects and associated animations. This object will have a ‘1’ at the end of its name to distinguish it from the original object and make it easier to tell the two apart. This is ultimately irrelevant, however, as we are going to rename the duplicate parent object ‘BeeNodePath’.
- Next, go to the Scene Navigator and create a new Bézier curve called ‘BeePath’. Drag the handles of this curve to enlarge it until it crosses the length of the entire stage. The start and end points of the curve should be off-stage to the left and right respectively. Between these points, you can give the curve any shape you want.
- Finally, we need to go to the Animations Inspector and replace the existing start animation, ‘BeeFlying’ with a new one, ‘BeeFlyingPath’. The only keys we need for this are the start and end points. We will use the same length as in the previous animation (10 seconds/300 frames) and link it to the ‘BeePath’ Bézier curve using the Follow Path function. The ‘BeeNodePath’ node will automatically jump to the start point of the Bézier curve.
If we now select Preview mode or the Quick Test function (top left), we can see that the two bees fly in synchronisation, one straight from key frame to key frame and one following the Bézier curve. However, what is important is that the wings on both bees constantly move together with the bees themselves.
As noted above, this is a very simple example. It would be much more complicated, for example, to animate a walking person. This would be a much more complex object, and you would need to break it down into many different parts – torso, head, arms, thighs, calves, feet, etc. – so that they could be animated individually, nested properly and bundled into tag groups so that they always move together as a unit, even when you are working on individual animations.
One way of doing this would be as follows:
- At the bottom level is a foot that is animated individually (mainly using rotation).
- This foot is a child object of the corresponding calf, so if the calf is moved, the foot moves as well.
- In turn, the calf is a child object of the thigh.
- The thigh is a child of the parent object ‘Body’, which encompasses the entire torso.
- Other child objects of the ‘Body’ include the other leg (in which the second calf and, below that, the second foot are nested), both arms (with the hands as a further child level) and the head (so that this can move independently of the torso).
- At the top level is a node, which acts as the parent object for ‘Body’ and all the body parts in its various nesting levels.
As you can see, it’s not easy to keep track of everything in an example like this. As such, it is even more important to use clear names for your nodes and assets for this kind of object.
If you want to animate a complex object, it is useful to bundle all the parent and child objects within the object into a single tag group (see above). This ensures that all your nested animations will move together with the main object in Editor mode.
For some very complex objects, it may make sense to only group certain parts of a parent-child object together in tag groups. For example, this could apply to the foot, calf and thigh of a figure. These could be seen as a unit, yet separate from the rest of the body – and thus animated as such.
If necessary, you can use the Tag Actions function in the Animator to toggle quickly between the different groups.
- Triggering nested objects
In order to set all the animations for a nested object running at the same time, you need to either set all the parent and child animations as start animations or control the animations using a node as the trigger button. If you choose the second option, you will need to assign the state Is Touchable (e.g. ‘Start’) to the node in the Object Inspector as usual, then link all the required animations from the nested object to this touchable object. It is not possible to create the required effect by simply linking the parent object and starting it with a click. If you do this, the individual child objects on all levels will follow the parent, but their own animations will not start until they are also triggered by the touch in question.
- Length of individual animations
When using nested animations, make sure that either all the animations are the same length – which may not always make sense – or that the lengths of the individual animations result in whole numbers when divided by one another.
For example, let’s say we don’t want the bee we created earlier to constantly fly on and off the stage. Instead, we simply want it to fly from flower A to flower B and then come to rest on flower B. We will set the flight time for the bee to 4 seconds. It is then important to ensure that the wings beat for exactly 4 seconds, or as close to this length of time as possible. However, since a single beat of the wings is only very short (we set this to 0.2 seconds), we need to set the number of loops quite high. In this example, the required setting would be 4 ÷ 0.2 = 20 loops. This is not a problem here, as we want the wings not only to flap while the bee is flying, but also to resume their exact starting position at the end.
If the wing animation took 0.3 seconds, on the other hand, we would not have a whole number, as 4 ÷ 0.3 = 13.3. If we looped the animation 13 times, the wings would stop moving a little too early; if we used 14 loops, they would stop a little too late. The wings would stop in the right end position after exactly 13.3 loops.
As such, it is important to make sure that the lengths of the individual nested parent and child animations match up.