Before we create any code, let's make sure we speak the same language.
The interface at a glance
When we encounter software that's unfamiliar to us, we often wonder, "Where do I begin?" Together, we'll answer that question and click through some important sections of the Scratch interface so that we can quickly start creating our own projects.
Now, open Scratch and let's begin.
Time for action – first step
When we open Scratch, we notice that the development environment roughly divides into three distinct sections, as seen in the following screenshot. Moving from left to right, we have the following sections in sequential order:
- Blocks palette
- Script editor
Let's see if we can get our cat moving:
- In the blocks palette, click on the Looks button.
- Drag the switch to costume block onto the scripts area.
- Now, in the blocks palette, click on the Control button.
- Drag the when flag clicked block to the scripts area and snap it on top of the switch to costume block, as illustrated in the following screenshot.
How to snap two blocks together?
As you drag a block onto another block, a white line displays to indicate that the block you are dragging can be added to the script. When you see the white line, release your mouse to snap the block in place.
- In the scripts area, click on the Costumes tab to display the sprite's costumes.
- Click on costume2 to change the sprite on the stage. Now, click back on costume1 to change how the sprite displays on the stage.
- Directly beneath the stage is a sprites list. The current list displays Sprite1 and Stage.
- Click on the sprite named Stage and notice that the scripts area changes. Click back on Sprite1 in the sprites list and again note the change to the scripts area.
- Click on the flag above the stage to set our first Scratch program in motion. Watch closely, or you might miss it.
What just happened?
Congratulations! You created your first Scratch project. Let's take a closer look at what we did just now.
As we clicked through the blocks palette, we saw that the available blocks changed depending on whether we chose Motion, Looks, or Control. Each set of blocks is color-coded to help us easily identify them in our scripts.
The first block we added to the script instructed the sprite to display costume2. The second block provided a way to control our script by clicking on the flag.
Blocks with a smooth top are called hats in Scratch terminology because they can be placed only at the top of a stack of blocks.
Did you look closely at the blocks as you snapped the control block into the looks block? The bottom of the when flag clicked block had a protrusion like a puzzle piece that fits the indent on the top of the switch to costume block.
As children, most of us probably have played a game where we needed to put the round peg into the round hole. Building a Scratch program is just that simple. We see instantly how one block may or may not fit into another block.
Stack blocks have indents on top and bumps on the bottom that allow blocks to lock together to form a sequence of actions that we call a script.
A block depicting its indent and bump can be seen in the following screenshot:
When we clicked on the Costumes tab, we learned that our cat had two costumes or appearances. Clicking on the costume caused the cat on the stage to change its appearance.
As we clicked around the sprites list, we discovered our project had two sprites: a cat and a stage. And the script we created for the cat didn't transfer to the stage.
We finished the exercise by clicking on the flag. The change was subtle, but our cat appeared to take its first step when it switched to costume2.
Basics of a Scratch project
Inside every Scratch project, we find the following ingredients: sprites, costumes, blocks, scripts, and a stage. It's how we mix the ingredients with our imagination that creates captivating stories, animations, and games.
Sprites bring our program to life, and every project has at least one. Throughout the book, we'll learn how to add and customize sprites.
A sprite wears a costume. Change the costume and you change the way the sprite looks. If the sprite happens to be the stage, the costume is known as a background.
Blocks are just categories of instructions that include motion, looks, sound, pen, control, sensing, operators, and variables.
Scripts define a set of blocks that tell a sprite exactly what to do. Each block represents an instruction or piece of information that affects the sprite in some way.
We're all actors on Scratch's stage
Think of each sprite in a Scratch program as an actor. Each actor walks onto the stage and recites a set of lines from the script. How each actor interacts with another actor depends on the words the director chooses. On Scratch's stage, every object, even the stone in the corner, is a sprite capable of contributing to the story.
As directors, we have full creative control.
Time for action – save your work
It's a good practice to get in the habit of saving your work. Save your work early, and save it often:
- To save your new project, click the disk icon at the top of the Scratch window or click File | Save As.
- A Save Project dialog box opens and asks you for a location and a New Filename.
- Enter some descriptive information for your project by supplying the Project author and notes About this project in the fields provided.
Set the cat in motion
Even though our script contains only two blocks, we have a problem. When we click on the flag, the sprite switches to a different costume and stops. If we try to click on the flag again, nothing appears to happen, and we can't get back to the first costume unless we go to the Costumes tab and select costume1. That's not fun.
In our next exercise, we're going to switch between both costumes and create a lively animation.
Time for action – a big step
We will continue working with our script from the previous example:
- From the blocks palette, select Motion.
- Drag the change x by block to the script area for Sprite1 and snap it in place at the end of the script. See the following screenshot for reference:
- Double-click on the script and watch your sprite move across the stage.
Double-clicking on the script runs through each block of the script.
- The change x by block has an number field with a default value of 10. This number controls how far the sprite moves. Change 10 to 20.
- Double-click on the script again.
- From the motion palette, drag the change y by block and add it to the end of your script.
- Change the value in the change y by block to a negative number, such as -30.
- Click the flag.
What just happened?
We added the change x by block to our script to make the cat move horizontally toward the right side of the stage. As we increased the value, our sprite moved further across the stage each time.
Next, we added the change y by block and gave it a negative value. When we clicked the flag, the sprite continued to move horizontally to the right, but it also moved down.
The numeric x or y values found on several of the motion blocks measure pixels. The stage is 480 pixels wide and 360 pixels tall.
Coordinating a sprite's location
Scratch uses an X and Y axis to divide the screen into quadrants. Enter a positive number for X, and the sprite moves to the right. Similarly, enter a negative number for X, and the sprite moves to the left, or backward. A positive Y value makes the sprite climb, while a negative Y value makes the sprite fall.
The unit of measure on our coordinate system is pixels. Each sprite on the stage has an X and Y coordinate that allows you to locate it, but it also allows you to send a sprite to a specific coordinate.
As we'll discover later, even the mouse pointer has an X and Y coordinate that allows us to precisely locate the pointer.
So far we've seen two ways to control the sprite on the stage. We can build a script that uses a control block, such as the flag. Or we can double-click on a block or set of blocks to run a command on the sprite.
The ability to run an individual block against a sprite gives us a chance to observe the behavior of the block before we add the block to our script. It's a great way to test and learn.
Double-clicking on a block works if we have one, ten, or an infinite number of blocks stacked together.
Time for action – in motion forever
So far the cat has moved incrementally across the screen by a set number of pixels and has stopped. Now, we're going to introduce the idea that the cat can stay in motion forever.
- From the Control palette, drag the forever block onto the stack of blocks. Position it in such a way that it snaps in place between the when flag clicked and switch to costume blocks.
- Double-click the stack of blocks and watch the cat disappear from the stage.
- From the Motion palette, drag the if on edge, bounce block and snap it to the bottom of the change y by block. Now watch the cat reappear and bounce around the bottom-right corner of the stage.
- Single-click on the script to stop the cat.
What just happened?
We wrapped our entire script in a forever block. In programming lingo, we put our script into a loop. However, that sent our sprite racing off the screen, so we had to tell our sprite to bounce when it hit the edge of the stage.
If you carried out the steps in the exercise as described, you noticed that as soon as you placed the if on edge, bounce block into your script, the sprite reappeared.
You can add blocks to the loop and change the values as the script runs and the sprite automatically adjusts to the new values.
Even though the sprite reappeared on the screen, it's trapped in the corner of the stage. It's stuck in a loop.
Loops play it again
Whenever we need to repeat an action or continually check for a condition within a program, we use a loop. The forever block represents an infinite loop. The blocks inside the loop will run as long as the Scratch program is running.
As we move through the book, we will encounter other types of loops. Examples include loops that run a set of blocks for a set number of times and loops that run only if a specified condition is met.
Time for action – get out of the corner
We need to get the cat out of the corner and moving across the stage in some kind of orderly fashion. We'll do that by replacing the change x by and change y by blocks:
- Click on the scissors icon located on the toolbar above the stage to activate the scissors tool.
- Move the scissors over the change x by block until it is outlined in a red square. Click your left mouse button to delete the block.
- Similarly, delete the change y by block.
- From the Motion palette, drag the move 10 steps block into your script and snap it in place before the if on edge, bounce block.
- From the Looks palette, snap the switch to costume block into place after the move 10 steps block. Double-click the script to set it in motion. Select costume1 from the list of costumes.
- Add a second switch to costume block before the move 10 steps block. Select costume2 from the list of costumes.
The drop-down menu on the stack of blocks is sensitive. Click directly on the black triangle to display the available selections.
- If the cat stopped moving, double-click the script again. It should be running upside down!
- Let's change the rotation of the sprite. Information about the current sprite displays directly above the script area. To the left of the sprite are three directional buttons: can rotate, only face left-right, and don't rotate.
Many buttons in Scratch will display a tool tip when you hover your mouse over the button. Try it with the rotation buttons.
- Click on the only face left-right rotation button, and now our sprite doesn't run upside down when it bounces off the side of the stage.
What just happened?
The move 10 steps block made the cat move in the direction it was facing, and when it bounced off the edge of the stage, the cat rotated so that it faced the other way. As the cat rotated, it turned upside down.
When we inserted the switch to costume block and set the value to costume1, the cat appeared to run. What really happened is that at every ten steps, our script displayed a different look as the cat moved across the screen. Our trick was subtle; as we changed the look of the cat, we created the appearance of running.
But we couldn't let the cat run upside down forever, so we adjusted the rotation so that when the cat hit the edge of the stage, it flipped 180 degrees and kept running.
Have a go hero
Make the cat run backward across the screen.
Hint: Set the rotation of the sprite to don't rotate.
Undo an action
If you deleted something you shouldn't have, there is an Undo button at the top of the Scratch window. Clicking Undo attaches the last block you deleted to your cursor, and you're able to snap it in place on the script.
You can only Undo the last action; Scratch doesn't have an unlimited undo capabilities.
Feel warmed up? This part of the article helped us feel comfortable working with Scratch by covering some basic concepts. Each Scratch project contains sprites with costumes, scripts, blocks, and a stage with backgrounds. We built a couple of sample scripts to demonstrate how we can control the sprites in a project. For example, we used motion to move the sprites and forever loops to keep the sprite moving.
In the second part of this article we will use broadcast messages to coordinate the actions of multiple sprites. We will conclude this article by sampling and remixing projects from Scratch's sample projects and from the Scratch web site.
If you have read this article you may be interested to view :