Cutout Animation Style — Scratch L4

Where this arc is heading: a 60-second animated short — cutout puppets, lip-sync, a scrolling kampung backdrop, sound FX, and a full storyboard — assembled lesson by lesson until it ships at Lesson 30.

Learning Goals 3 min

By the end of this lesson you will be able to:

Explain the cutout animation mental model: a character is not one sprite — it is a small family of sprites (head, body, arm) that share the Stage in fixed positions, each with its own two-costume animation.
Build a 3-sprite "talking auntie" puppet using go to x: () y: () on each piece so the parts line up like a paper doll, plus set size to (80) % to scale the whole puppet.
Animate each piece independently with switch costume to (closed v) + next costume inside a forever loop, so the mouth flaps and the arm waves while the body stays still.

Warm-Up — why one sprite isn't enough 7 min

You've spent the last 24 lessons assuming one rule: one character = one sprite. The cat is one sprite. The boss in L04-22 is one sprite. The coin is one sprite. That worked because nothing on the cat moved on its own — when the cat walked, the whole cat walked.

Cluster E is animation. The very first problem of animation: in real life, characters' parts move independently. A makcik telling a story moves her mouth while her hand waves while her body stays still. If she were one sprite with one costume, you'd have to draw a separate full-body costume for every combination of mouth-open / mouth-closed × hand-up / hand-down — that's 4 drawings for 2 small movements. Add eyes blinking and it's 8 drawings.

Predict puzzle. Look at this stack on a single-sprite "auntie" sprite that has 4 costumes called still, mouth-open, hand-up, and both:


when flag clicked
forever
  switch costume to (mouth-open v)
  wait (0.15) seconds
  switch costume to (still v)
  wait (0.15) seconds
end

One-sprite auntie trying to flap her mouth.

The mouth flaps fine. Now you also want the hand to wave at the same time, on its own rhythm — every 0.4 seconds, not every 0.15. Can you add that to this stack?

Reveal the answer

You can't — not cleanly. A single sprite can only show one costume at a time. The moment you switch to hand-up, the mouth resets too. To have mouth and hand on different timers inside one sprite, you'd need a costume for every combination (still-hand-down, still-hand-up, mouth-open-hand-down, mouth-open-hand-up...) and one giant script juggling which to show when. Four costumes today. Sixteen tomorrow when you add blinking.

The cutout solution: split the auntie into pieces. The body is one sprite (one costume, never changes). The mouth is another sprite, sitting on top of the body, with two costumes. The hand is another sprite, also on top, with two costumes. Each piece has its own short script. Each script runs at its own speed. No combination-explosion.

New Concept — the puppet model 15 min

The trick is to stop thinking character and start thinking puppet. A paper-puppet auntie at the pasar malam isn't one piece of paper — it's a head pinned to a body pinned to an arm, each piece moving on its own pin. Scratch sprites are the pins.

The three rules of cutout

One piece, one sprite. Each independently-moving body part is its own Scratch sprite. The auntie's head, body, and waving hand are three sprites named head, body, and hand.
Each piece has its own tiny costume set. The head sprite has two costumes: closed (mouth closed) and open (mouth open). The hand sprite has two: down and up. The body sprite has one — bodies don't usually animate.
Position is pinned by the flag click. Every piece, when the flag is clicked, jumps to a fixed go to x: () y: () so the pieces snap into the right places on top of each other. If anything drifts, the whole auntie falls apart.

Picking the coordinates

The Stage in Scratch is 480 wide × 360 tall, with x: 0, y: 0 at the centre. Plan the puppet on paper first, then read off the coordinates of each piece's centre dot. For our auntie standing in the middle of the Stage:


body sprite  →  go to x: (0)   y: (-30)
head sprite  →  go to x: (0)   y: (60)
hand sprite  →  go to x: (45)  y: (0)

Plan first, code second. The numbers come from looking at where each piece should sit on top of the body.

The head's y: 60 is higher than the body's y: -30 by 90 pixels — that's roughly the body's height. The hand's x: 45 sticks the hand out to the right of the body's centre. You'll tweak these numbers by eye in Scratch — but always inside a when ⚑ clicked hat, so they re-snap on every run.

Each piece's animation loop

Once a piece is snapped into place, its animation is a tiny forever loop that swaps its own costume. Crucially, each piece's loop runs on its own timer, completely separate from the others:


when flag clicked
go to x: (0) y: (60)
forever
  switch costume to (open v)
  wait (0.2) seconds
  switch costume to (closed v)
  wait (0.2) seconds
end

The head sprite's whole script. Snap into place, then flap forever.

Sizing the whole puppet at once

What if the auntie should appear smaller? Don't redraw the costumes — use set size to (80) % on every sprite in the puppet, with the same percentage. All three pieces shrink by the same amount, so they still line up. (Mostly. Sometimes you need to nudge the coordinates a bit when scaling — that's expected.)

Common mistakes

Forgetting the go to x: () y: () at the top of each piece's script. The kid drags a piece on the Stage to line it up, hits the flag, and the piece snaps back to wherever it was last saved — which is often offscreen. Always re-snap at flag click.
Pieces appearing in the wrong stacking order. The hand might draw behind the body so the wave disappears. Cluster D's L04-23 hinted at this — use go to (front v) layer or the Stage's layer panel to push the hand to the front.
Sharing a single forever loop across pieces. Some beginners try to control all three pieces from one "controller" script using broadcasts. That works (and is what L04-26 will do for lip-sync), but it makes the auntie's pieces all flap together. The point of cutout is that each piece has its own rhythm.
Different sizes per piece. Setting the body to 100% and the head to 80% makes a tiny head on a normal body. Pick one size for the whole puppet and apply it everywhere.

Worked Example — Auntie Siti tells a story 15 min

Open Scratch. We're going to build a 3-sprite auntie who flaps her mouth and waves her right hand at different speeds — entirely from cutout pieces.

Stage plan. Three sprites snap into position at flag click — body at (0, −30), head at (0, 60), hand at (45, 0). Each gets its own animation loop at its own speed. The ✏️ badge means you script all three sprites.

Step 1 — Delete the cat, plan the puppet

New project. Delete the cat. Sketch on paper: an oval body in the middle (y: -30), a round head on top (y: 60), and a hand sticking out to the right of the body (x: 45, y: 0). Three pieces, three centre dots.

Step 2 — Paint the body sprite

Click Paint to make a new sprite. Draw a simple oval body in a baju kurung colour. One costume only. Rename the sprite body.

Step 3 — Paint the head sprite with two costumes

Make another new sprite. First costume: a round face with a tiny closed mouth (a short horizontal line). Rename it closed. Duplicate the costume, change the mouth to a small open oval, rename it open. Rename the whole sprite head.

Step 4 — Paint the hand sprite with two costumes

Make a third sprite. Costume 1: a hand pointing down (rename down). Costume 2: the same hand rotated to point up as if waving (rename up). Sprite name: hand.

Step 5 — Pin the body in place

On the body sprite, add:


when flag clicked
go to x: (0) y: (-30)
set size to (100) %

The body stands still — no forever loop needed.

Step 6 — Pin the head and flap the mouth

On the head sprite:


when flag clicked
go to x: (0) y: (60)
set size to (100) %
forever
  switch costume to (open v)
  wait (0.2) seconds
  switch costume to (closed v)
  wait (0.2) seconds
end

Mouth opens and closes every 0.2 seconds — about 2.5 flaps per second, the rough rhythm of speech.

Step 7 — Pin the hand and wave

On the hand sprite:


when flag clicked
go to x: (45) y: (0)
go to (front v) layer
set size to (100) %
forever
  switch costume to (up v)
  wait (0.4) seconds
  switch costume to (down v)
  wait (0.4) seconds
end

The hand waves on a different timer (0.4 seconds, slower than the mouth), and go to (front v) layer guarantees it appears in front of the body instead of being hidden behind it.

Step 8 — Click the flag and watch

Auntie Siti now stands in the middle of the Stage. Her mouth flaps fast. Her hand waves slowly. Her body doesn't move. Three sprites, three small scripts, one believable character — and you didn't have to draw a single combination costume.

The full assembled stack — all three sprites together


// body sprite
when flag clicked
go to x: (0) y: (-30)
set size to (100) %

// head sprite
when flag clicked
go to x: (0) y: (60)
forever
  switch costume to (open v)
  wait (0.2) seconds
  switch costume to (closed v)
  wait (0.2) seconds
end

// hand sprite
when flag clicked
go to x: (45) y: (0)
go to (front v) layer
forever
  switch costume to (up v)
  wait (0.4) seconds
  switch costume to (down v)
  wait (0.4) seconds
end

Three sprites' scripts shown together — but remember, in Scratch each script lives on its own sprite.

What you just built: a digital paper puppet. The same technique studios use for South Park-style cutout, for Hari Raya greeting cards, for low-budget animated explainers — animated characters whose parts move independently because each part is, secretly, its own sprite.

Try It Yourself — three cutout drills 15 min

🟢 Easy

Goal: Make Auntie Siti smaller — change the whole puppet to 70% size without breaking the layout. Edit all three sprites' scripts.


// on every sprite, after the go to
set size to (70) %

Same number on every piece. The puppet shrinks as one.

Think: What happens if you set size to 70 on the body but leave the head at 100? Predict before testing — then test.

🟡 Medium

Goal: Add a fourth sprite — eyes — with two costumes open and blink. Make the eyes blink once every 3 seconds (blink for 0.1 seconds, open for 2.9). Pin them at x: 0, y: 75 (just above the mouth).


when flag clicked
go to x: (0) y: (75)
go to (front v) layer
forever
  switch costume to (open v)
  wait (2.9) seconds
  switch costume to (blink v)
  wait (0.1) seconds
end

Think: Real eyes blink for roughly 100 milliseconds. Animators copy that number because anything slower looks like the character is falling asleep.

🔴 Stretch

Goal: Build a second cutout character — a kid named Adam standing to the left of Auntie Siti. Adam needs head + body + one hand (3 sprites), pinned around x: -150 instead of x: 0. His mouth flaps at 0.15 seconds (faster than the auntie's — kids talk faster). Six sprites total on the Stage; two characters, each independent.


// Adam head sprite
when flag clicked
go to x: (-150) y: (60)
forever
  switch costume to (open v)
  wait (0.15) seconds
  switch costume to (closed v)
  wait (0.15) seconds
end

Think: Six sprites for two characters is a lot — and yet the project still feels small because each script is tiny. That's the cutout payoff. Big scenes from small scripts.

Mini-Challenge — the auntie that breaks apart 5 min

"Hafiz's exploding makcik"

Hafiz built his auntie's three sprites exactly like the worked example, but when he clicks the flag, the head appears in the bottom-left corner, the body in the centre, and the hand floats near the top. The animation works — mouth flaps, hand waves — but the auntie is in pieces, scattered across the Stage. Here's his head sprite's script:


when flag clicked
forever
  switch costume to (open v)
  wait (0.2) seconds
  switch costume to (closed v)
  wait (0.2) seconds
end

Hafiz's head sprite script. Animation is fine. So why doesn't the head land in the right place?

What's missing, and why does it cause the scatter?

Reveal one valid solution

Hafiz forgot the go to x: () y: () snap at the top of his script. When he was working in the editor, he dragged the head sprite around the Stage to test positions and left it wherever it ended up. The flag click starts the animation but never repositions the head — so the head animates wherever Hafiz last dragged it. Same problem for the hand. Only the body happens to look right because he hadn't dragged the body recently.

The fix is one block at the top of each animating piece:


when flag clicked
go to x: (0) y: (60)
forever
  switch costume to (open v)
  wait (0.2) seconds
  switch costume to (closed v)
  wait (0.2) seconds
end

The rule for cutout puppets: every piece must re-pin itself at flag click. The Stage is not a layout tool — your script is. Drag-to-position only tells you the coordinates; you still have to write the snap.

Recap 3 min

You met the cutout animation style — the foundational idea of cluster E. A character is no longer one sprite; it's a small family of sprites pinned together by go to x: () y: () at flag click, each with its own short two-costume animation looping at its own speed. You saved yourself a costume-combination explosion by giving each moving piece independence. Auntie Siti's mouth, hand, eyes, and body all run on their own timers — and the whole puppet still scales as one when you change every sprite's set size to () % together.

Cutout animation: An animation style where a character is made of several pieces (head, body, limbs) that move independently — historically paper cutouts on pins, today separate sprites on a Stage.
Puppet: The collection of sprites that together make up one cutout character. Auntie Siti's puppet is three sprites: body, head, hand.
Pinning: Forcing a sprite to a fixed position on the Stage with go to x: () y: (), usually right after a when ⚑ clicked, so the puppet pieces always snap together regardless of where they were left in the editor.
Two-costume loop: The smallest possible animation: a forever loop that switches between two costumes with short waits. Used for mouth flaps, blinks, hand waves — anything that toggles.
Layer order: Which sprite draws on top of which. Use go to (front v) layer on pieces that should appear in front (hand, head) and leave the body in the back.

Homework 2 min

The Family-Photo Puppet. Build a cutout character of your choice (yourself, a family member, a favourite cartoon character) using at least 4 sprites.

Plan on paper. Draw the character, mark the centre dot of each independently-moving piece, and write down each piece's intended x and y.
Paint each sprite with the right number of costumes. Body is usually 1 costume. Mouth, hand, eyes get 2 costumes each.
On every sprite, write a script starting with when ⚑ clicked + go to x: () y: () + set size to (100) %.
For each animating piece, add a forever loop that switch costume to (...), waits, switches back, waits. Pick a different wait time for each piece so they don't all flap in sync.
Save as HW-L4-25-Cutout-Puppet.sb3.

Bring back next class:

The .sb3 file.
A photo or screenshot of your paper plan with the centre dots and coordinates labelled.
Your answer to: "Which piece of your puppet has the slowest timer? Why did you pick that speed for that piece?"

Heads up for next class: SCR-L04-26 teaches lip-sync — connecting your puppet's mouth animation to an actual recorded voice using play sound (line1 v) until done and broadcasts. The mouth will stop flapping randomly and start matching real speech.