Switch Costume

Learning Goals 3 min

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

1. Open the Costumes tab and list the costumes your sprite already has.
2. Drag a switch costume to [costume1 v] block from the Looks category.
3. Build a 5-block animation that flips the cat between two costumes to make it look like it's walking.

Warm-Up 7 min

Last lesson the cat learnt to think. Today it changes its look too — same cat, new mood, different costume.

Quick-fire puzzle

Karthik snapped these blocks and clicked the flag. What did the cat look like after each block?

when flag clicked
switch costume to [costume2 v]
wait (1) seconds
switch costume to [costume1 v]
        

New Concept — costumes are different outfits for one sprite 15 min

Think of a sprite like a child playing dress-up. A costume is one outfit. Most sprites have several. The sprite is still the same character — same name, same scripts, same position — but it looks different depending on which costume is currently on.

The Costumes tab

At the top of the middle column you've seen three tabs: Code, Costumes, Sounds. You've been working in Code. Click Costumes now. The middle area changes — instead of the Script Area, you see a list of pictures down the left. Each picture is one costume the cat owns.

Blocks reference

How the dropdown works

The little arrow v at the end of the block opens a dropdown menu. The menu lists every costume your sprite owns. Click one — the block now refers to that costume by name. For the default cat, you'll see costume1 and costume2.

Why it matters

This is the foundation of animation. Old cartoons are just lots of slightly-different drawings shown one after the other — fast. A walking sprite is two costumes flipped quickly. A running sprite is four. A spinning ball is eight. You're learning the same trick Walt Disney's team used in the 1930s.

Worked Example — Iman's Cat does a tiny walk 15 min

We'll build a five-block animation that flips the cat between its two default costumes three times. To the audience, the cat will look like it's taking three little steps in place.

Step 1 — Open the Costumes tab

Click the cat in the Sprite list. Then click the Costumes tab at the top of the middle column. Look at the left side — you should see two cards: costume1 (legs together) and costume2 (legs apart). Click each one to see the difference on the editing area.

Step 2 — Go back to Code

Click the Code tab to return to the Script Area.

Step 3 — Drag the green-flag hat

From the yellow Events category, drag when ⚑ clicked.

Step 4 — Switch to costume1 to start

From the purple Looks category, drag switch costume to [costume1 v]. The dropdown should already show costume1. Snap it under the hat. This guarantees we start from a known costume each click.

Step 5 — Add the first switch + wait

Drag wait (1) seconds from the orange Control category. Change 1 to 0.3. Snap below.

Drag another switch costume to [costume1 v]. Click the dropdown and pick costume2. Snap below.

when flag clicked
switch costume to [costume1 v]
wait (0.3) seconds
switch costume to [costume2 v]
        

Step 6 — Flip back to costume1

Drag another wait (1) seconds, set it to 0.3, snap it below. Then drag one more switch costume to [costume1 v] (leave the dropdown at costume1). Snap below.

Step 7 — Click the green flag

The cat flickers from costume1 → costume2 → costume1, with 0.3 seconds between each switch. That's a tiny in-place walk.

What changed: compared to having just one costume on screen forever, the cat now has motion in its body — even though the sprite hasn't moved an inch on the Stage. Animation is just "show a slightly different picture quickly".

The full assembled stack

when flag clicked
switch costume to [costume1 v]
wait (0.3) seconds
switch costume to [costume2 v]
wait (0.3) seconds
switch costume to [costume1 v]
        

Try It Yourself — three small builds 12 min

when flag clicked
switch costume to [costume2 v]
wait (2) seconds
switch costume to [costume1 v]
          

when flag clicked
switch costume to [costume2 v]
say [Look at my legs!] for (2) seconds
switch costume to [costume1 v]
          

when flag clicked
switch costume to [costume1 v]
move (40) steps
switch costume to [costume2 v]
move (40) steps
switch costume to [costume1 v]
move (40) steps
          

Mini-Challenge — Walking talker 5 min

"Iman's Cat takes three steps and announces each"

Build a script where the cat takes three little walking steps. Each step is one costume flip + one short say. Combine today's switch costume with the timed say from SCR-L01-24.

It works if:

• Click the green flag once.
• The cat alternates costume1 → costume2 → costume1 → costume2 to look like it's walking in place.
• Between each flip, the cat says a short word like "Step!" for 0.5 seconds.
• You stayed at or below the 8-block cap for Level 1.

when flag clicked
switch costume to [costume1 v]
say [Step!] for (0.5) seconds
switch costume to [costume2 v]
say [Step!] for (0.5) seconds
switch costume to [costume1 v]
say [Step!] for (0.5) seconds
          

Recap 2 min

Today you opened the Costumes tab and discovered that every sprite has more than one outfit. The switch costume to [costume1 v] block changes the sprite's look instantly. Flipping between costumes quickly creates the illusion of animation — the same trick used in every cartoon.

Costume

One of the pictures a sprite can wear. Most sprites have at least two — the default cat has costume1 and costume2.

Costumes tab

The middle tab at the top of the editor. Shows all of the selected sprite's costumes. Click to switch which is active.

switch costume to [costume1 v] (block)

Looks (purple) block. Instantly changes the sprite to the costume named in the dropdown.

Animation

Showing slightly different pictures one after another so the eye sees movement. In Scratch: switch costume + wait, repeated.

Homework 1 min

The walking cat. Build a 6-block animation that flips the cat between its two costumes three full times, with a 0.2-second wait between each switch. The result should look like a brisk walking-on-the-spot cat.

1. Open Scratch. Click the cat in the Sprite list.
2. Drag a green-flag hat.
3. Add switch costume to [costume2 v], wait (0.2) seconds, then switch costume to [costume1 v], then wait (0.2) seconds, then one more switch costume to [costume2 v].
4. Click the green flag. The cat looks like it took a few steps in place.
5. Take a screenshot of your Script Area.

Bring back next class:

• Your screenshot.
• Your written answer: "What happens if you change every wait from 0.2 seconds to 0.05 seconds? Why might that be useful — or annoying?"

Heads up for next class: SCR-L01-27 introduces the next costume block — a shortcut that auto-flips through every costume your sprite owns. No more typing the costume name each time.