Learning the Scratch 3 Online Interface. Scratch is a programming language based on graphical code blocks. Each block represents a different programming command, and you snap together the blocks to create a program, which Scratch calls projects.
A lot like snapping together Lego pieces, it’s an easy and fun way to get introduced to the world of computer programming.
In this post, you will learn about the Scratch interface, which is where you create and run Scratch projects. Before you start creating programs, you need to learn your way around the various sections of the Scratch interface.
Getting Started with Learning the Scratch 3 Online Interface
To access the interface and start creating Scratch projects, you can simply go to https://scratch.mit.edu and click Create at the Scratch site main menu bar at the top of the website (see image below). If you want to save and share your projects, though, you first need to log in with your username and password. (For instructions on registering at the Scratch site and creating an account, see the Introduction to Scratch.) After logging in, click Create.
Scratch site main menu
After clicking on Create, you will be redirected to the Scratch interface (see Scratch Interface image below), where you can start creating Scratch projects.
The Scratch interface (see image below) consists of the following areas:
Stage: This is where your project gets displayed when it’s active. Your program runs here in the Stage window.
Sprites pane: This is where you add sprites, the objects that perform actions in your script, and display their properties. Here you can change, add, and/or select a sprite.
Backdrops pane: This is where you add a backdrop, which is similar to a background and is displayed in the stage area. Add a backdrop to your stage, and/or select backdrops from this pane.
Tabs area: Here, you find three tabs: Scripts, Costumes, and Sounds. The Scripts tab contains the block palette, which is where you’ll find the various categories of blocks of code and the code blocks themselves. The Costumes tab displays the costumes, or alternate appearances, of the selected sprite. A sprite can have one or multiple costumes. The Sounds tab displays the sounds you can apply to your Scratch project. When you click the Backdrop Pane the tab area replaces Costumes for Backdrops. Tip: Depending which pane is clicked (Sprites or Backdrops) the Tabs area is specific to that pane.
Scripts area: This is the area that you drag the blocks of code to and snap them together to create scripts—and eventually your project.
Backpack: This is a section where you save objects that you can use later in other projects. The objects can be costumes, sprites, backdrops, sounds, blocks of code, and scripts. You can drag and drop these objects into the backpack and later drag and drop them from the backpack to reuse in other Scratch projects.
Menu bar / Toolbar: This is where important overall controls, like Language, File, Edit, Tutorials, Project name (Untitled-5) in the image below, Share, Save, Revert, and New, User name, and open project folder are located.
Scratch Version 3 Interface (on-line)
Scratch Version 3 interface (on-line)
Scratch Version 3 Interface (on-line)
Stage
Just like a theatre’s stage, the stage (see Scratch Interface image above) in the Scratch interface is where you see all of a program’s activities/scripts happen. Programs are called projects in Scratch. A project (program) consists of one or multiple scripts, which you create by combining code blocks. When you run a project or activate a script, the result is displayed in the stage area. The dimensions of the stage are 480 pixels wide in the horizontal direction or X-axis, and 360 pixels high in the vertical direction, or Y axis. When you want to indicate an exact position on the stage, you use a pair of X and Y values, or coordinates, similar to how you’d plot a point on a graph. That’s why we should have paid attention in math class while our crazy math teacher was going on about graphing and his ex-wife. (Learn more about the Scratch coordinate system with these videos. Or check out our explanation here.)
Scratch 3 stage area
The top of the stage provides some controls. Clicking the green flag in the upper-left corner of the stage area can activate (trigger) a script that includes a corresponding green flag code block. Clicking the red octagon in the upper-right corner of the stage area will stop all the scripts in a project from running.
Change the stage size with the 3 buttons in the top-right corner of the stage area.
The stage can be 3 different sizes:
- Regular:
- Normal mode; the stage is 480×360 pixels
- Small Stage Layout:
- Main article: Small Stage Layout
- The stage is half the size with a resolution of 240×180 pixels; this is useful for having more room in the scripts area.
- Full-screen mode:
You can also view the stage area in full-screen mode by clicking the 4-directional arrows in the upper-right corner of the stage.
- Main article: Full Screen
- Fits the player to one’s web browser’s current resolution.
Sprites Pane
The Sprites pane (see image below of the Scratch 3 Sprites Pane) is where Scratch displays thumbnails of the sprites that are being used in the current project. Sprites are objects that perform actions in a project. These actions are determined by the scripts that you create. The scripts tell the sprites what to do and what actions to perform. (More information about sprites can be found here.) The cat sprite called Sprite1 always appears by default when you create a new project.
Sprites Pane
To add a new sprite to a Scratch project, you use the icon in the bottom-right corner of the pane. It looks like this:
Add Sprite to Project
Clicking this button allows you to choose from a library of already existing Sprites offered for free on the Scratch website. Moving the mouse over this initially reveals more options, like this:
Add Sprite options
Let us go through these quickly to see what they do:
Upload Sprite. The folder button (with upload arrow) allows you to upload a sprite from your computer.
Tips: You can upload animated gifs to make your Sprites animated. You can also find already created and free to use Sprites for scratch online.
Surprise. This randomly selects a Sprite from Scratches library and inserts it into your current project.
Paint. The paintbrush button creates a blank sprite with an empty costume.
Choose a Sprite. A redundant button really. Same as the button that initially holds all of these buttons. (Scratches head with a + in the top right-hand side.) Both of these buttons allow you to choose a Sprite from the library.
Backdrops Pane
The Backdrops pane (see image below) is where Scratch displays a thumbnail of the current backdrop that is being used in your project. A backdrop is a background that appears behind your sprite in the stage, and every project has at least one. You can keep track of the backdrops used in a project with the Backdrops pane, which is to the right of the Sprites pane in Scratch 3. Backdrops are explained more thoroughly here.
Backdrops Pane
The white backdrop always appears by default when you create a new project. The Backdrops Pane button has the same options as the Sprite Options button, except they are for the background image instead of the Sprite.
Backdrops Tab
If you click the Backdrops tab, in the top left of the screen. (see image below) This tab shows all the backdrops that are being used in the project. The difference between the Backdrops pane and Backdrops tab is that the Backdrops pane shows the thumbnail of the current backdrop displayed in the stage and the Backdrops tab shows all the backdrops that are used in a Scratch project. At the bottom of the Backdrops pane, there are four icons for adding a new backdrop. Click the landscape scene icon to choose a backdrop from the library, the paintbrush icon to draw a backdrop, the file folder to import one from a file, or the camera icon to import one from a webcam.
Backdrops Tab
Block Palette
The block palette (see image below) is where you find the different categories of code blocks. You drag and drop these code blocks to the scripts area (right) and snap them together to create scripts.
The block palette
The block palette contains ten categories of code blocks. Each category has its own color, so whenever you see blue blocks, for instance, you know they deal with motion. These are the categories:
Motion blocks: These blocks control the movement of the sprite. You’ll learn how to use motion blocks here.
Looks blocks: This category includes several blocks of code that can be used to modify the appearance of a sprite. With these blocks, you can apply graphic effects to the sprite, change the color of the sprite, or change the size of the sprite. More about this category can be found here.
Sound blocks: These blocks add and control sound in your Scratch project. More about this category can be found here.
Pen blocks: These blocks control the pen, which you can use to draw on the stage. You’ll learn more about this category here.
Data blocks: These blocks can hold values, either a number or a name, and be used to create variables to temporarily hold information needed in your project. Some data blocks enable you to create lists; these blocks contain more than one value. You’ll learn more about this category here.
Event blocks: These blocks control when and how the scripts are activated. With these, you can control whether a script starts running when the user clicks the green flag or a sprite. You’ll learn more about these blocks here.
Control blocks: These blocks control how the scripts run. For example, you can pause the script for a specified amount of time or you can repeat a sequence of blocks a specified number of times. More about this category can be found here.
Sensing blocks: These blocks are used if you need to detect things in your scripts. Some of these blocks also allow interaction with a webcam or interaction with the user. You’ll learn more about these blocks here.
Operators blocks: These blocks perform math functions, such as adding, subtracting, and dividing numbers. You can also perform operations on strings of characters, such as comparing them and adding multiple sentences or words to create a new sentence. More about these blocks can be found here.
More blocks: In this section of the block palette, you can create your own code blocks or add extensions so that Scratch can interact with the PicoBoard or Lego WeDo. PicoBoard is a piece of hardware with sensors that enable Scratch projects to interact with the outside world. For example, the sound sensor on the PicoBoard can activate a script when it senses a certain level of noise. Lego WeDo is a Lego system consisting of sensors and motors. Using Scratch, you can use the Lego WeDo sensors to activate the Lego WeDo motors. You’ll learn more about these blocks here.
