ANIMATION

Learn how animation works and create your own animation frames!

T1 — L11 ~75 min Canva + Paper G5-1, G5-2, G5-3
LEARNING SUPPORT WORKSHEET
← Previous Lesson Next Lesson →

1 What Is Animation?

Key Vocabulary

Animation
Showing many pictures quickly to create the illusion of movement
Frame
One single picture in an animation
Sprite Sheet
All the animation frames arranged side by side in one image
FPS / Frame Rate
How many frames are shown per second — more frames = smoother
Animation is like a flipbook — many pictures shown fast = looks like movement.
Example: A stick figure walking needs 4 pictures: standing, left foot forward, both feet together, right foot forward.
In games, the computer flips through these pictures really fast (usually 12–24 per second).
In Unity, other students use an Animator tool. We will create the individual frames by hand!
Flip the corner of a notebook quickly. See the pages move? That's animation!
I understand that animation = many pictures shown quickly to look like movement.

2 Paper Flipbook Activity

Draw a 4-frame flipbook to see animation in action:

Get a small piece of paper or use the corner of your notebook.
Frame 1: Draw your character standing still (arms down).
Frame 2: Draw the same character with left leg forward, right arm forward.
Frame 3: Draw the same character standing still again (arms down).
Frame 4: Draw the same character with right leg forward, left arm forward.
Flip the pages quickly to see your character "walk"!
Show your flipbook to your partner. Can they see the character walking?
I have drawn 4 frames and can flip them to see movement.

3 Create Animation Frames in Canva

Open Canva and create a wide rectangle for 4 frames side by side:

Create a custom design — 2000 x 500 px This gives you a wide rectangle to fit 4 frames side by side.
Use Elements > Lines to add 3 vertical lines dividing the canvas into 4 equal boxes (at 500px, 1000px, 1500px). Tip: Drag a line, hold Shift to keep it straight.
Label each box: Frame 1, Frame 2, Frame 3, Frame 4 Use small text at the top of each box.
In Frame 1: Build your hero character standing still. Use the shapes from L04 — circle head, rectangle body.
In Frame 2: Copy the character, paste it, move body parts slightly. Move one leg forward, move one arm up.
In Frame 3: Copy Frame 1 again (back to standing). This creates the "return to centre" pose.
In Frame 4: Mirror of Frame 2 (opposite leg forward, opposite arm up). This completes the walk cycle.
Tip: Select all parts of the character > right-click > Group to keep them together, then Ctrl+D to duplicate. Grouping makes it much easier to copy and move your character.
Make sure all 4 versions are the SAME SIZE and in the SAME POSITION within each box. Consistency is key — if the character jumps around between frames, the animation will look shaky.
Rename your design: "L11 - Animation Frames - [Your Name]" This keeps your work organised.
Raise your hand or ask your buddy. Check that your character is made from simple shapes and that each frame is only slightly different from the last.
I have 4 frames showing my character in slightly different poses.

4 Understand Sprite Sheets

In real games, all 4 frames are placed in one image called a sprite sheet.
What you just made IS a sprite sheet! Your 2000×500 design with 4 frames side by side is exactly what game engines use.
Professional games have sprite sheets with dozens of frames for walking, running, jumping, attacking, dying, and more.
Your 4-frame design is exactly what Unity students create too — just using different tools.
Look up "sprite sheet examples" on Google Images to see how professional games organise their animation frames!

5 Save Your Work

Save your Canva design (it auto-saves, but double-check).
Take a screenshot of your completed animation frames.
Submit your screenshot to Google Classroom.

Well Done!

You learned how animation works and created a 4-frame walk cycle! This is exactly how professional game animators work.

← Previous Lesson Next Lesson →