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 panel and change a sprite's name and size.
- Run your script from last lesson — and see the cat looks different, but still moves the same 50 steps.
Warm-Up 7 min
Last lesson, your cat took its first steps across the Stage. Today you'll map the whole Scratch editor — then place and rename that same cat, ready for the scene ahead.
Quick-fire puzzle
Aiman snapped three blocks together. He clicked the green flag. Predict — how far did the cat move?
when flag clicked
move (100) steps
move (50) steps
Reveal the answer
The cat moved 150 steps in total — 100 then 50, with no pause. Scratch runs blocks one after the other, top to bottom, as fast as the computer can. The two moves happen so quickly that the cat looks like it teleports the full 150 steps in a single instant.
This is the most important idea in coding: order matters. Swap the two move blocks and you still get 150 — but try replacing the second block with a different one (a turn, a say) and the order changes the result.
New Concept — the four areas of the Scratch editor 15 min
Think of the Scratch editor like a small kitchen. The Stage is the dinner table — where the food (your project) 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 the ingredients together.
Editor anatomy at a glance
| Area | Where on screen | What it shows |
|---|---|---|
| Stage | top-right | The white 480 × 360 rectangle where sprites move and act. |
| Sprite list | below the Stage | A grey row of cards — one per sprite in your project. Click a card to select that sprite. |
| Sprite Properties | between the Stage and Sprite list | Five tiny boxes showing the selected sprite's name, x, y, size, 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 to build scripts. |
| 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 pixels tall. The middle is (0, 0). The x-axis goes left-to-right (negative on the left, positive on the right). The y-axis goes bottom-to-top (negative below, positive above). Just like the maths lessons you've had at school — but flipped, because Scratch is for sprites, not for graph paper.
The Sprite list and Sprite Properties
Below the Stage there is a grey row showing every sprite in your project. Right now you have one — the cat. The cat's card has its name and a small thumbnail.
Click on the cat's card. Now look at the area just above the Sprite list — five small boxes appear. These are the Sprite Properties:
Why it matters
Properties give you a second way to control a sprite — by typing values directly, no blocks needed. This is handy for setting things up before the script runs: position the cat where you want, pick a size, point a direction. Then the script does the rest.
Worked Example — meet Aisyah's Cat 15 min
Open Scratch in a new tab. We'll rename the cat, shrink it, and run the script you wrote last lesson.
Step 1 — Click on the cat in the Sprite list
Find the grey row below the Stage. There's one card — the cat. Click it. The card gets a blue border. Now the Sprite Properties bar above shows the cat's values.
Step 2 — Rename the cat
Click on the Name field where it says Sprite1. Erase that, type Aisyah's Cat, press Enter. The Sprite list card now shows the new name. (The cat on the Stage looks exactly the same — only its name changed.)
Step 3 — Shrink the cat
Click on the Size field where it says 100. Erase, type 60, press Enter. The cat on the Stage shrinks to about three-fifths of its original size. Cute.
Step 4 — Position the cat at the left edge
Click on the x field. Type -200, press Enter. The cat slides over to the left side of the Stage.
Step 5 — Build the script from last lesson
Click the Code tab if you're not on it. Drag when ⚑ clicked from the yellow Events category and move (50) steps from the blue Motion category. Snap them together.
when flag clicked
move (50) steps
Step 6 — Click the green flag
The tiny cat shifts 50 pixels to the right. Click again — another 50 pixels. The cat is smaller, but it still moves the same distance per click. Properties affect how the sprite looks, scripts affect what it does.
What changed: compared to last lesson, the cat is now smaller, renamed, and starts on the left edge — yet the script is exactly the same two blocks. Properties and scripts are two separate languages for two separate jobs.
Your finished setup
Sprite Properties should now read: Name = Aisyah's Cat, x = -200, y = 0, Size = 60, Direction = 90. Script Area should contain the two-block stack above. Stage should show a small orange cat sitting on the left side.
Try It Yourself — three small builds 12 min
Goal: Make the cat huge. Set Size to 200, leave x = -200, then click the flag with this script:
when flag clicked
move (50) steps
Think: The giant cat moves the same 50 steps as the tiny cat did. Why? Because the script doesn't know the cat is bigger — it just says "move 50 pixels to the right".
Goal: Flip the cat around. Reset Size back to 100. Now set Direction to -90. The cat now faces LEFT. Run this script:
when flag clicked
move (50) steps
Think: "Move (50) steps" doesn't mean "right" — it means "forward, in whatever direction you're facing". With Direction = -90, forward is LEFT. The cat slides left instead of right.
Goal: Land the cat exactly on the centre. Set Direction back to 90. Set x = -200 (so the cat starts at the left). Then build this stack:
when flag clicked
move (200) steps
Think: The cat started at x = -200. It moved 200 steps to the right. New x = -200 + 200 = 0. The cat is back at the centre. Check the x field in Sprite Properties — it should now read 0. (Properties update after a script runs.)
Mini-Challenge — left edge to right edge in one click 5 min
"Aisyah's Cat travels the whole Stage"
Using only the Sprite Properties panel and the two blocks from last lesson, make the cat travel from the very left edge of the Stage to the very right edge with one click of the green flag.
It works if:
- Before clicking the flag, the cat sits on the left edge (touching it, or just off-screen left).
- You click the green flag just once.
- After the click, the cat sits on the right edge (touching it, or just off-screen right).
- You only changed sprite properties — no new blocks, no extra scripts.
Reveal one valid solution
Set the cat's starting x to -240 (left edge of the Stage). Set Direction to 90 (facing right). Then use a really big number in your move block — at least 480, because the Stage is 480 wide.
when flag clicked
move (480) steps
One click — the cat zooms from x = -240 to x = +240 in a single instant. Try 500 or 1000 — same result, because the Stage edge stops the cat from going further off-screen.
Recap 2 min
Today you toured the four main areas of the Scratch editor and met the Sprite Properties panel. Properties let you set up a sprite — its name, position, size, direction — without writing a single block. Scripts then do the moving and changing. Two languages, two jobs.
- Stage
- The 480 × 360 rectangle (top-right of the editor) where sprites live and act. 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, showing the selected sprite's name, x, y, size, direction.
- Code / Costumes / Sounds tabs
- The three tabs at the top of the middle column. We stay on Code for now.
- Direction
- The way a sprite faces.
90= right,-90= left,0= up,180= down.
Homework 1 min
The Tiny Cat Marathon. Open Scratch. Change your cat's Size to 30 (tiny!) and starting x to -240. Build the same two-block script (when ⚑ clicked + move 240 steps). Click the flag once.
- Take a screenshot of your Sprite Properties panel showing Size =
30and x =-240. - Take a screenshot of your Script Area with the two-block stack.
- Take a screenshot of the Stage right after the click, with the tiny cat near its destination.
Bring back next class:
- All three screenshots.
- Your written answer to this question: "If you set x to
+240BEFORE clicking the flag, would the cat appear to move at all? Why or why not?" (Hint: think about where the cat is starting and where it's trying to go.)
Heads up for next class: SCR-L01-03 tours the nine block-category colours in the Blocks Panel. You'll learn what every colour means before we start using them.