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.
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.
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.)
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:
- 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.
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.
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:
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:
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.
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.
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.
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.
to be continued…