The Scratch Interface

Definition

The Scratch Interface is the visual workspace where Scratch programs are created and run. It consists of four main areas: the Stage (where projects run), the Blocks Palette (containing all programming blocks organized by category), the Scripts Area (where blocks are assembled into programs), and the Sprite List (showing all characters in the project). Key concepts include Script Area, Coordinate Grid, Hat Block.

Each area of the interface serves a specific purpose. The Stage displays the visual output and uses an x/y coordinate system with (0,0) at the center. The Blocks Palette organizes over 100 block types into color-coded categories: Motion (dark blue), Looks (purple), Sound (pink), Events (yellow), Control (orange), Sensing (light blue), Operators (green), Variables (orange-red), and My Blocks (dark red). The Scripts Area is where you drag blocks to build programs that control your sprites.

Real-Life Example

Think of the Scratch Interface like a chef's kitchen. The Stage is the serving plate where the final dish is presented. The Blocks Palette is the pantry with all ingredients organized by type (vegetables, spices, tools). The Scripts Area is the counter where you combine ingredients following a recipe. The Sprite List is like the menu board showing all the dishes you are preparing. Just as a well-organized kitchen helps a chef cook efficiently, the Scratch Interface helps programmers create efficiently.

In practice, a teacher in a classroom might project the Scratch Interface on a screen while students follow along on their own computers. The teacher clicks through each area — 'This is where our cat sprite lives' (Sprite List), 'This is where we find movement blocks' (Palette), 'We snap blocks here to make the cat dance' (Scripts Area), 'And this is where we watch the cat dance' (Stage). Students learn the layout by using it, not by memorizing it.

Interactive Diagram

Launch the interactive diagram to see this in action.

Open Interactive Diagram

---

The interactive diagram for this chapter demonstrates The Scratch Interface. It shows the full Scratch interface with labeled panels: blocks palette, scripts area, stage, sprite pane, and toolbar.

Introduction

When you first open Scratch, you might feel a little overwhelmed by all the panels, buttons, and menus. Take a deep breath — everything has its place, and you will learn it quickly. The Scratch Interface is carefully designed to make programming as intuitive as possible. Once you understand the layout, you will be able to focus on creating instead of searching for tools.

The Scratch editor has four main areas: the Stage (top right), where you see your project run; the Sprite List (bottom right), showing all characters in your project; the Blocks Palette (middle left), containing all available programming blocks; and the Scripts Area (middle), where you drag blocks to build programs. Each area has a specific purpose and works together with the others.

In this chapter, you will take a guided tour of the Scratch Interface. You will learn what each section does, how to navigate between them, and how to customize your workspace. By the end, you will feel comfortable finding your way around and ready to start snapping blocks together.

How It Works

The Stage is where your project comes to life. It is a rectangle, typically 480 pixels wide and 360 pixels tall, with a coordinate system. The center of the Stage is at coordinates (0, 0). The x-axis runs left (-240) to right (240), and the y-axis runs bottom (-180) to top (180). Every sprite on the Stage has an x and y position that determines where it appears.

The Blocks Palette is organized into nine color-coded categories: Motion (dark blue), Looks (purple), Sound (pink), Events (yellow), Control (orange), Sensing (light blue), Operators (green), Variables (orange-red), and My Blocks (dark red). Each category contains blocks related to that type of function. Clicking a category name shows its blocks in the palette. The color coding helps you quickly find the block you need.

Deeper Dive

The coordinate system in Scratch uses a Cartesian plane, just like in mathematics. The center is (0, 0). Moving right increases x, moving left decreases x. Moving up increases y, moving down decreases y. The Stage is 480 pixels wide (x from -240 to 240) and 360 pixels tall (y from -180 to 180). You can see a sprite's current position in the sprite info panel below the Stage.

The Menu Bar at the top of the editor contains important options: File (new, save, load), Edit (restore, undo), Tutorials (built-in guided lessons), and the Project Name (click to rename). There is also a Share button (when you are online) that publishes your project to the Scratch website. The menu bar also shows your username and has controls for language and account settings.

The Toolbar below the menu bar has the Green Flag (start your project), Stop Sign (stop all scripts), and controls for presentation mode (full screen). There are also buttons to duplicate, delete, and grow/shrink sprites. The Undo and Redo buttons are lifesavers when you accidentally delete something important.

Advanced

The Scratch editor supports multiple tabs in the Scripts Area. When you select a sprite, its scripts appear. When you select the Stage, you can add Backdrop scripts (code that runs for the background). Each sprite and the Stage have their own separate set of scripts, which is how Scratch implements parallel programming — multiple scripts running at the same time.

The Costume tab (next to the Scripts tab) lets you edit the visual appearance of a sprite. You can draw your own Costume using the built-in vector or bitmap editors. Vector graphics scale without losing quality, while bitmap graphics can create more detailed textures. The Sounds tab lets you record or import sounds, and use the sound editor to trim, fade, and apply effects.

Scratch supports keyboard shortcuts that speed up common tasks. Ctrl+Z (undo), Ctrl+Shift+Z (redo), Ctrl+C/Ctrl+V (copy/paste blocks), and Ctrl+D (duplicate sprite or block). Right-clicking a block or script shows a context menu with options like duplicate, delete, add comment, and (for boolean blocks) the ability to see the block's output value.

Vocabulary Table

Fun Facts

Common Misconceptions

Knowledge Check

Chapter Navigation