The Stage and the Sprite — Scratch L1

WHAT IT SHOULD LOOK LIKE

Where this arc is heading: by Lesson 6 your cat and its friend move into position and greet each other on one green-flag click.

both in position

step 1 of 3

the sprites move as they would on the real Stage

Learning Goals 3 min

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

Name and point to the four editor areas: Stage, Sprite list, Blocks Panel, and Script Area.
Open the Sprite Properties bar and change a sprite’s name, size, and position without using a single block.
Run your move (50) steps script from last lesson and show that the cat looks different but still moves the same distance.

Warm-Up 7 min

Last lesson your cat took its first steps. But it always started wherever you last left it — and it was still called Sprite1. Today you take charge of where the cat stands and what it is called.

WHAT IT SHOULD LOOK LIKE

Where we are now. Your cat moves on a flag click — that part works. What you cannot control yet is its starting spot, its size, or its name. That is today's job.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Quick-fire puzzle

Aiman snapped three blocks together. He clicked the green flag once. How far did the cat move?


when flag clicked
move (100) steps
move (50) steps

Three blocks. One click. The cat moves twice in a row.

Reveal the answer

The cat moved 150 steps in total — 100, then 50, with no pause between them. Scratch runs blocks one after another, top to bottom, as fast as the computer can. The two moves happen so quickly that the cat looks like it jumps the full 150 steps at once.

This is the big idea: order matters. Swap the two move blocks and you still get 150. But swap in a turn or a say block, and the order changes what you see.

New Concept — the four areas of the Scratch editor 15 min

Think of the Scratch editor as a small kitchen. The Stage is the dinner table, where the food is served. The Sprite is the chef. The Blocks Panel is the pantry full of ingredients. The Script Area is the chopping board where you put ingredients together.

Editor anatomy at a glance

Area	Where on screen	What it shows
Stage	top-right	The 480 × 360 rectangle where sprites move and act.
Sprite list	below the Stage	A grey row of cards — one per sprite. Click a card to select that sprite.
Sprite Properties	between the Stage and the Sprite list	Small boxes holding the selected sprite’s name, x, y, size and direction.
Blocks Panel	far left	All the blocks, grouped by colour. Click a coloured dot to jump to that category.
Script Area	middle	The big empty space where you snap blocks together.
Code · Costumes · Sounds tabs	top of the middle column	Three tabs that change what the middle area shows. Today we stay on Code.

The Stage in detail

The Stage is 480 pixels wide and 360 tall. The middle is (0, 0). The x-axis runs left to right — negative on the left, positive on the right. The y-axis runs bottom to top — negative below, positive above.

Every corner of the Stage has a coordinate, and the red dot in the middle is (0, 0). Each sprite carries its own x and y — you can read both in the Sprite Properties bar.

The Sprite list and Sprite Properties

Below the Stage sits a grey row showing every sprite in your project. Right now there is one — the cat. Click the cat’s card. Now look just above the Sprite list: a row of small boxes appears. These are the Sprite Properties.

WHAT IT SHOULD LOOK LIKE

This cat is the sprite your whole scene is built around. Its name, position (x, y) and size are all editable in the Sprite Properties bar — no blocks needed.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

The Sprite Properties bar, left to right: Name, x, y, Size, Direction, Show/Hide. A fresh cat starts at x=0, y=0, Size=100, Direction=90 (facing right).

Two ways to move a sprite

You now have two tools that both change where the cat is, and they are not the same thing:

Properties change the sprite the moment you press Enter. Nothing has to run. This is how you set up a scene.
Blocks like move (50) steps change the sprite only when the script runs. This is how you animate a scene.

Set-up first, animation second. Every project in this arc starts by putting sprites on their marks.

Why it matters

Later in this arc your cat must always start on the left, so it has somewhere to walk to. If you rely on where you last dragged it, the scene looks different every run. Properties give you a reliable starting point.

Worked Example — meet Aisyah’s Cat 15 min

Open your project from last lesson. We will rename the cat, shrink it, park it on the left edge, then run the same script and see what does — and does not — change.

WHAT IT SHOULD LOOK LIKE

Stage plan. The cat is still the only sprite you script (see the ✏️ badge). Properties put it at x = −200 at size 60; the script then moves it right.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Step 1 — Select the cat in the Sprite list

Find the grey row below the Stage. There is one card — the cat. Click it. The card gains a blue border, and the Sprite Properties bar above fills in with the cat’s values.

Step 2 — Rename the cat

Click the Name box where it says Sprite1. Erase it, type Aisyah’s Cat, press Enter. The card below now shows the new name. The cat on the Stage looks exactly the same — only its name changed.

Step 3 — Shrink the cat

Click the Size box where it says 100. Erase it, type 60, press Enter. The cat shrinks to about three-fifths of its old size, right away. No flag click needed.

Step 4 — Park the cat on the left edge

Click the x box. Type -200, press Enter. The cat slides to the left side of the Stage. Check the y box reads 0 so the cat sits at eye level, and Direction reads 90 so it faces right.

Step 5 — Rebuild the script from last lesson

Click the Code tab. Drag when flag clicked from the yellow Events category, then snap move (50) steps from the blue Motion category underneath it.


when flag clicked
move (50) steps

The same two-block script from last lesson. It has no idea the cat is smaller or renamed.

Step 6 — Click the green flag

The small cat shifts 50 pixels right. Click again — another 50. Watch the x box in the Sprite Properties bar: it climbs from -200 to -150 to -100. Properties and scripts are reading and writing the same numbers.

Step 7 — Send the cat back to its mark

Type -200 into the x box again. The cat jumps straight back to the left edge, ready for another run. This little reset is how you rehearse a scene over and over.

What changed: compared with last lesson the cat is smaller, renamed, and starts in a known spot — yet the script is the very same two blocks. Properties change how the sprite looks and where it starts; scripts change what it does.

Your finished setup (your reference)

Sprite Properties should read: Name = Aisyah’s Cat, x = -200, y = 0, Size = 60, Direction = 90. Your Script Area should hold this stack:


when flag clicked
move (50) steps

Compare your Script Area with this picture — they should match exactly.

Try It Yourself — three small builds 12 min

🟢 Easy

Goal: Make the cat huge. Keep x = -200, set Size to 200, then click the flag once with the stack below.

WHAT IT SHOULD LOOK LIKE

A giant cat, the same 50-step move. Does the jump look bigger?

at the start

step 1 of 2

the sprite moves as it would on the real Stage


when flag clicked
move (50) steps

Think: the giant cat travels exactly the same 50 pixels as the small one. The script does not know the cat is bigger — it only knows “move 50 pixels forward”. Because the cat is huge, that jump looks smaller.

🟡 Medium

Goal: Turn the cat around. Reset Size to 100 and set x to 150. Now set Direction to -90 — the cat flips to face left. Run the same stack.

WHAT IT SHOULD LOOK LIKE

Same block, opposite result — because "forward" now points left.

at the start

step 1 of 2

the sprite moves as it would on the real Stage


when flag clicked
move (50) steps

Think: move (50) steps never meant “right”. It means “forward, whichever way you are facing”. With Direction = -90, forward is left, so x goes down by 50.

🔴 Stretch

Mini-mission: the perfect landing. Aisyah wants her cat to walk in from the left edge, stop exactly on the centre spot, and announce that it has arrived — all from one flag click.

WHAT IT SHOULD LOOK LIKE

Start on the left, land inside the red ring, then speak. One flag click does all of it.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

It works if: the cat starts at the left edge, the x box reads exactly 0 when it stops, and a speech bubble appears. Use no more than 8 blocks.


when flag clicked
move () steps
say [I made it!] for (2) seconds

Starter stack. You work out the missing number — and the starting x that makes it true.

Think: the landing spot is fixed at 0. So the number of steps depends entirely on where you start. Change the starting x and the answer changes with it.

Mini-Challenge — cross the whole Stage in one click 5 min

“Aisyah’s Cat travels the whole Stage”

Get the cat from the far left edge to the far right edge with a single click of the green flag — using the Sprite Properties bar and the two blocks you already know.

WHAT IT SHOULD LOOK LIKE

Goal: the cat begins hard against the left edge and finishes at the flag on the right.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

It works if:

Before the click, the cat sits against the left edge.
You click the green flag just once.
After the click, the cat sits against the right edge.
You changed only sprite properties — no new blocks, no second script.

Reveal one valid solution (teacher)

Set the cat’s starting x to -240 and Direction to 90. The Stage is 480 pixels wide, so the move block needs at least 480 steps.


when flag clicked
move (480) steps

One click sends the cat from x = -240 to x = +240. Try 500 or 1000 — the same thing happens, because the Stage edge stops the cat leaving the screen.

🚀 Mission — Set the Stage

WHAT IT SHOULD LOOK LIKE

Your cat, on its mark: named, sized to fit, standing left of centre, ready to walk toward the space a friend will fill later in the arc.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Amir is getting his scene ready for the friend sprite that joins in a later lesson. Set your star cat up so the scene can begin the same way every single time.

The cat must carry a name you chose — not Sprite1.
It must stand left of centre, at eye level, small enough to leave room for a friend on the right.
One flag click makes it walk toward that empty space — and stop well before reaching it.
Reset it to the same starting spot and run it again. It must look identical both times.

✅ Done when: two runs in a row look exactly the same, and your cat ends up short of the friend’s circle. Going further: make the cat greet the empty space when it arrives.

Teacher notes — one setup that satisfies the brief

Name = anything the pupil picks; x = -150, y = 0, Size = 80, Direction = 90; script is when flag clicked plus move (50) steps. The reset step is the real learning: typing x back to -150 before each run.

Recap 2 min

Today you toured the four main areas of the Scratch editor and met the Sprite Properties bar. Properties set a sprite up — name, position, size, direction — without a single block. Scripts then make it move and speak. Two tools, two jobs.

Stage: The 480 × 360 rectangle (top-right) where sprites live and act. Its centre is (0, 0).
Sprite list: The grey row below the Stage — one card per sprite. Click a card to select that sprite.
Sprite Properties: The bar above the Sprite list, holding the selected sprite’s name, x, y, size and direction.
Direction: The way a sprite faces. 90 = right, -90 = left, 0 = up, 180 = down.

Homework 1 min

The Tiny Cat Marathon. Shrink your cat to Size 30, park it at x = -240, and send it across most of the Stage with one flag click.

WHAT IT SHOULD LOOK LIKE

A tiny cat starting hard against the left edge at x = −240, landing on the centre spot after 240 steps.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Set Size to 30 and x to -240 in the Sprite Properties bar.
Build when flag clicked with move (240) steps under it.
Click the green flag once, then read the x box.
Take three screenshots: the Sprite Properties bar before the click, the Script Area, and the Stage right after the click.

Bring back next class:

All three screenshots.
Your written answer to this question: “If you set x to +240 before clicking the flag, would the cat appear to move at all? Why or why not?” (Hint: think about where the cat starts and where the Stage ends.)

Heads up for next class: SCR-L01-03 tours the nine block-category colours in the Blocks Panel, so you know where every block lives before we start using them.

WHAT IT SHOULD LOOK LIKE

Where this arc is heading: by Lesson 6 your cat and its friend move into position and greet each other on one green-flag click.

both in position

step 1 of 3

the sprites move as they would on the real Stage

Learning Goals 3 min

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

Name and point to the four editor areas: Stage, Sprite list, Blocks Panel, and Script Area.
Open the Sprite Properties bar and change a sprite’s name, size, and position without using a single block.
Run your move (50) steps script from last lesson and show that the cat looks different but still moves the same distance.

Warm-Up 7 min

WHAT IT SHOULD LOOK LIKE

Where we are now. Your cat moves on a flag click — that part works. What you cannot control yet is its starting spot, its size, or its name. That is today's job.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Quick-fire puzzle

Aiman snapped three blocks together. He clicked the green flag once. How far did the cat move?


when flag clicked
move (100) steps
move (50) steps

Three blocks. One click. The cat moves twice in a row.

Reveal the answer

This is the big idea: order matters. Swap the two move blocks and you still get 150. But swap in a turn or a say block, and the order changes what you see.

New Concept — the four areas of the Scratch editor 15 min

Editor anatomy at a glance

Area	Where on screen	What it shows
Stage	top-right	The 480 × 360 rectangle where sprites move and act.
Sprite list	below the Stage	A grey row of cards — one per sprite. Click a card to select that sprite.
Sprite Properties	between the Stage and the Sprite list	Small boxes holding the selected sprite’s name, x, y, size and direction.
Blocks Panel	far left	All the blocks, grouped by colour. Click a coloured dot to jump to that category.
Script Area	middle	The big empty space where you snap blocks together.
Code · Costumes · Sounds tabs	top of the middle column	Three tabs that change what the middle area shows. Today we stay on Code.

The Stage in detail

Every corner of the Stage has a coordinate, and the red dot in the middle is (0, 0). Each sprite carries its own x and y — you can read both in the Sprite Properties bar.

The Sprite list and Sprite Properties

WHAT IT SHOULD LOOK LIKE

This cat is the sprite your whole scene is built around. Its name, position (x, y) and size are all editable in the Sprite Properties bar — no blocks needed.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

The Sprite Properties bar, left to right: Name, x, y, Size, Direction, Show/Hide. A fresh cat starts at x=0, y=0, Size=100, Direction=90 (facing right).

Two ways to move a sprite

You now have two tools that both change where the cat is, and they are not the same thing:

Properties change the sprite the moment you press Enter. Nothing has to run. This is how you set up a scene.
Blocks like move (50) steps change the sprite only when the script runs. This is how you animate a scene.

Set-up first, animation second. Every project in this arc starts by putting sprites on their marks.

Why it matters

Worked Example — meet Aisyah’s Cat 15 min

Open your project from last lesson. We will rename the cat, shrink it, park it on the left edge, then run the same script and see what does — and does not — change.

WHAT IT SHOULD LOOK LIKE

Stage plan. The cat is still the only sprite you script (see the ✏️ badge). Properties put it at x = −200 at size 60; the script then moves it right.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Step 1 — Select the cat in the Sprite list

Find the grey row below the Stage. There is one card — the cat. Click it. The card gains a blue border, and the Sprite Properties bar above fills in with the cat’s values.

Step 2 — Rename the cat

Step 3 — Shrink the cat

Click the Size box where it says 100. Erase it, type 60, press Enter. The cat shrinks to about three-fifths of its old size, right away. No flag click needed.

Step 4 — Park the cat on the left edge

Click the x box. Type -200, press Enter. The cat slides to the left side of the Stage. Check the y box reads 0 so the cat sits at eye level, and Direction reads 90 so it faces right.

Step 5 — Rebuild the script from last lesson

Click the Code tab. Drag when flag clicked from the yellow Events category, then snap move (50) steps from the blue Motion category underneath it.


when flag clicked
move (50) steps

The same two-block script from last lesson. It has no idea the cat is smaller or renamed.

Step 6 — Click the green flag

Step 7 — Send the cat back to its mark

Type -200 into the x box again. The cat jumps straight back to the left edge, ready for another run. This little reset is how you rehearse a scene over and over.

Your finished setup (your reference)

Sprite Properties should read: Name = Aisyah’s Cat, x = -200, y = 0, Size = 60, Direction = 90. Your Script Area should hold this stack:


when flag clicked
move (50) steps

Compare your Script Area with this picture — they should match exactly.

Try It Yourself — three small builds 12 min

🟢 Easy

Goal: Make the cat huge. Keep x = -200, set Size to 200, then click the flag once with the stack below.

WHAT IT SHOULD LOOK LIKE

A giant cat, the same 50-step move. Does the jump look bigger?

at the start

step 1 of 2

the sprite moves as it would on the real Stage


when flag clicked
move (50) steps

🟡 Medium

Goal: Turn the cat around. Reset Size to 100 and set x to 150. Now set Direction to -90 — the cat flips to face left. Run the same stack.

WHAT IT SHOULD LOOK LIKE

Same block, opposite result — because "forward" now points left.

at the start

step 1 of 2

the sprite moves as it would on the real Stage


when flag clicked
move (50) steps

Think: move (50) steps never meant “right”. It means “forward, whichever way you are facing”. With Direction = -90, forward is left, so x goes down by 50.

🔴 Stretch

Mini-mission: the perfect landing. Aisyah wants her cat to walk in from the left edge, stop exactly on the centre spot, and announce that it has arrived — all from one flag click.

WHAT IT SHOULD LOOK LIKE

Start on the left, land inside the red ring, then speak. One flag click does all of it.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

It works if: the cat starts at the left edge, the x box reads exactly 0 when it stops, and a speech bubble appears. Use no more than 8 blocks.


when flag clicked
move () steps
say [I made it!] for (2) seconds

Starter stack. You work out the missing number — and the starting x that makes it true.

Think: the landing spot is fixed at 0. So the number of steps depends entirely on where you start. Change the starting x and the answer changes with it.

Mini-Challenge — cross the whole Stage in one click 5 min

“Aisyah’s Cat travels the whole Stage”

Get the cat from the far left edge to the far right edge with a single click of the green flag — using the Sprite Properties bar and the two blocks you already know.

WHAT IT SHOULD LOOK LIKE

Goal: the cat begins hard against the left edge and finishes at the flag on the right.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

It works if:

Before the click, the cat sits against the left edge.
You click the green flag just once.
After the click, the cat sits against the right edge.
You changed only sprite properties — no new blocks, no second script.

Reveal one valid solution (teacher)

Set the cat’s starting x to -240 and Direction to 90. The Stage is 480 pixels wide, so the move block needs at least 480 steps.


when flag clicked
move (480) steps

One click sends the cat from x = -240 to x = +240. Try 500 or 1000 — the same thing happens, because the Stage edge stops the cat leaving the screen.

🚀 Mission — Set the Stage

WHAT IT SHOULD LOOK LIKE

Your cat, on its mark: named, sized to fit, standing left of centre, ready to walk toward the space a friend will fill later in the arc.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Amir is getting his scene ready for the friend sprite that joins in a later lesson. Set your star cat up so the scene can begin the same way every single time.

The cat must carry a name you chose — not Sprite1.
It must stand left of centre, at eye level, small enough to leave room for a friend on the right.
One flag click makes it walk toward that empty space — and stop well before reaching it.
Reset it to the same starting spot and run it again. It must look identical both times.

✅ Done when: two runs in a row look exactly the same, and your cat ends up short of the friend’s circle. Going further: make the cat greet the empty space when it arrives.

Teacher notes — one setup that satisfies the brief

Recap 2 min

Stage: The 480 × 360 rectangle (top-right) where sprites live and act. Its centre is (0, 0).
Sprite list: The grey row below the Stage — one card per sprite. Click a card to select that sprite.
Sprite Properties: The bar above the Sprite list, holding the selected sprite’s name, x, y, size and direction.
Direction: The way a sprite faces. 90 = right, -90 = left, 0 = up, 180 = down.

Homework 1 min

The Tiny Cat Marathon. Shrink your cat to Size 30, park it at x = -240, and send it across most of the Stage with one flag click.

WHAT IT SHOULD LOOK LIKE

A tiny cat starting hard against the left edge at x = −240, landing on the centre spot after 240 steps.

at the start

step 1 of 2

the sprite moves as it would on the real Stage

Set Size to 30 and x to -240 in the Sprite Properties bar.
Build when flag clicked with move (240) steps under it.
Click the green flag once, then read the x box.
Take three screenshots: the Sprite Properties bar before the click, the Script Area, and the Stage right after the click.

Bring back next class:

All three screenshots.
Your written answer to this question: “If you set x to +240 before clicking the flag, would the cat appear to move at all? Why or why not?” (Hint: think about where the cat starts and where the Stage ends.)

Heads up for next class: SCR-L01-03 tours the nine block-category colours in the Blocks Panel, so you know where every block lives before we start using them.