Keyframes

Animation is a method in which figures or objects are manipulated to appear as moving images. This illusion of life is created by showing a sequence of still images known as frames in rapid succession. When these frames are shown fast enough to our eyes, our mind perceives a sequence of frames as continuous motion.

In this Fable Academy lesson, we're going to talk about Keyframes. One of the most important and fundamental concepts of motion design. Keyframes mark the start and end of a transition and also control all of the frames in between them.

In order to keyframe in Fable, you need only decide two things. First is the value of the specific property. Scale, for example, that you'd like to animate. And second is the exact moment in time that this value should affect the layer. Keyframes are used to define the values of the various properties, effects and parameters. The main properties are position, scale, opacity, and rotation.

Let's look at how we create basic transitions with keyframes inside of Fable. First, move the play head to the frame where you would like the animation to start and select the desired player. In the attributes panel choose a property to keyframe and click the stopwatch. Next, you can directly enter the value there in the timeline or move the object in the scene. Then place the play head where you would like the animation to end in the timeline and adjust the value. If you move or transform the object directly in the scene, the second keyframe will be added automatically.

Since the beginning and end points of the action are already set, you can press the play button or the space bar to start the preview. And press pause, or the space bar once again, to stop it. The speed of the animation is determined by the distance between the keyframes. Move them further away from each other if you want the transition between the values to be slower and take longer, or push them closer together, if you'd like the transition to happen faster and in a shorter period of time.

At its most basic form, that is how an animation is created between two keyframes. In order to create more advanced animations, simply add more keyframes to the value of the same property or choose a different property layer or effect and animated parameters.

An important thing to note is the anchor point of an object. Think of an anchor point like a thumbtack you could use to pin your object to the canvas. Transformations made to the position, scale, rotation, or skew are applied to based on the location of the anchor point. In this simple demo, the rotation values for two identical stars are the same.

However, if we change the placement of one of the anchor points, notice how the animation is now different. Each of the objects rotates based on where their anchor point is situated.

You can control the position of a selected layers' anchor point very easily. To view its current placement enable "display anchor point" in the attributes panel. By default, the anchor point is placed in the center of any object.

Then in the attributes panel, choose was one of the placement options or freely positioned the point by selecting and moving it directly in the scene. Mixing and matching of different keyframing techniques will results in rich and exciting animations. Thanks for watching.