Track: Block Coding · Lesson 7 of 10 · Ages: 6+ · Time: 40 minutes
Have you ever made a flip book? You draw a stick figure on each page of a little notebook, changing it a tiny bit every time. Then you flick the pages with your thumb and the figure seems to move! Nothing on any page is moving at all. You are just seeing pictures change very fast.
That trick is called animation, and it is how cartoons, films and video games work. Today you will do it with blocks.
Beep says My arms are the best part of me. In one picture they are down. In another they are up. If you swap between the two quickly, it looks like I am waving hello! Beep boop!
What you need
- A block-coding app that a grown-up has helped you open.
- Beep as your character. Your app probably has a “costumes” tab where you can see and draw pictures for a character.
- About 40 minutes.
Grown-ups In most block apps, each character can hold several pictures, usually called costumes. Your child can draw their own in the paint editor. Please encourage drawings of imaginary characters, and remind them that photos of real people are best left out of their projects. You can also do this on paper with a flip book made from sticky notes.
Words to know
- A costume is one picture of a character. A character can have many costumes.
- Animation is showing a series of pictures quickly so things seem to move.
- A frame is one picture in an animation.
Two costumes for Beep
Here are two tiny pictures of Beep. In the first one, Beep’s arms are down. In the second one, they are up.
Each picture is a costume. A costume is a picture, and swapping costumes changes how the character looks. It does not change where it is.
Pixel says Look closely. Only the arms moved. Everything else stayed the same. That is how good animation works: change a little, not a lot. Meow!
Waving with blocks
Now we use blocks to flip between the costumes.
The two switch costume blocks flip the pictures. The two wait blocks give your eyes time to see each picture. Without the waits, the pictures would change so fast that you could not tell they were different.
Some apps have a next costume block that moves on to the next picture in your list. It makes the script even shorter:
With two costumes, “next” goes back and forth between them. With more costumes, it goes through the list one by one and then starts again at the first.
Walking and waving together
You can mix costumes with movement. Imagine Beep has a left-foot costume and a right-foot costume. This script makes Beep take 10 small steps:
Each time round the loop Beep moves 10 steps and changes feet. After 10 times, Beep has gone 10 × 10 = 100 steps in total, and it took 10 × 0.2 = 2 seconds. That looks much better than one big jump of 100 steps!
Did you know? Cartoons and films are usually made of about 24 pictures every second. Animators call each picture a frame. If you drew a 10-second cartoon by hand, you would need about 240 drawings!
Challenges
Try it Make your own second costume for Pixel (draw one with its tail up and one with its tail down). Then make a script so Pixel’s tail wags 6 times and stops.
Show a hint
Use a repeat block, not a forever block, because the wag should stop after 6 times. Inside it, switch costume, wait, switch costume, wait.
Show the answer
Each trip round the loop is one wag, so the loop runs 6 wags. It takes 6 × 0.6 = 3.6 seconds in total.
Try it Beep walks with this script: repeat 20, move 5 steps, next costume, wait 0.1 seconds. How far does Beep go, and how long does it take?
Show the answer
It goes 20 × 5 = 100 steps and takes 20 × 0.1 = 2 seconds.
What you learned
- A costume is one picture of a character, and a character can have many.
- Animation is swapping pictures fast so things seem to move.
- A wait block gives your eyes time to see each picture.
- Costumes and movement together make walking look real.