Frame-by-Frame Animations

Watch the beginning of our Jojo & Albert animation shown below. In the first part, Jojo moves from the right to the left, stops and speaks.

The part where Jojo speaks is obtained by assembling two frames (closed and opened mouth). The principle is the same as for animated GIF. This is what we call a frame-by-frame animation.

Let's go back to where we left off in the previous workshop, when Jojo1 moved from the right to the left and stopped. To concatenate this movement with Jojo's speech, we will insert a new keyframe on the layer and place the jojo_2 image in it.

Proceed as follows:

1. Activate the Jojo1 layer and click on the first empty cell in the timeline (frame 21) to select it.
   
   
2. Choose Insert > Blank Keyframe.
   
   
A new empty cell will appear in the timeline.



Figure 1: For now, our keyframe is empty


3. Place the jojo_2 image in the cell, as explained in the section Positioning Jojo on the Stage from the previous workshop.
   
   
4. Position the jojo_2 image precisely on the jojo_1 image.
   
   
Thus, when frames alternate, only the elements which differ from one frame to the other (in our case, Jojo's mouth) will give the sensation of movement.


Using the keyboard for more precision. Use the keyboard arrow keys to position jojo_2 precisely on jojo_1.


5. Copy and paste the cells containing jojo_1 and jojo_2 in the timeline, alternating them in order to obtain the required movements.
   
   
To do this, select the jojo_1 and jojo_2 cells, then choose Edit > Copy. Position the cursor in the first empty cell and choose Edit > Paste.


Slowing the Speed. In our animation, we will alternate the jojo_1 and jojo_2 frames. If you wish Jojo to open and close his mouth more slowly, just stretch the keyframes so that they span the desired numbers of cells.

This procedure is described in the section Defining the Animation Length with Keyframes in the previous workshop.