ford_byfp_00 By Melissa Ford, Sadie Ford, and Gabriel Ford

This article has been excerpted from Hello Scratch! Learn to Program by Making Arcade Games

 

Years ago, when I started with Scratch, I had no clue what I was doing. I was teaching myself, which meant that I spent a lot of time confused, snapping random blocks together. Let me save you a lot of time by showing you around so you can jump right into the game making and skip over stumbling around the workspace.

Open Scratch by going to https://scratch.mit.edu/  in your Internet browser. In order to save your work, you will need to create a free Scratch account by clicking “Join Scratch” in the top, right corner.

Once you have set up your account and logged in, click the button marked “Create” in the top left corner of the homepage. This will take you to the project editor screen.

Look at figure 1 and you’ll see the 5 main areas of Scratch: The Block Menu; the Script Area; the Sprite Zone; the Stage; and the Grey Toolbar.


ford_byfp_01

Figure 1 The Scratch workspace is made up of five areas. The Grey Toolbar runs along the top of the screen. The Stage is the big, white box containing the cat. The Block Menu runs down the middle of the screen. The Script Area is the big, grey box on the right side of the screen. Finally, the Sprite Zone is the area in the bottom, left corner of the screen.


As you read this article, look back at this picture if you don’t know where to go. Now let’s get started moving some blocks from the Block Menu to the Script Area.

Getting Started

Look at your Stage – the big, white box on the left side of the screen. You currently have one sprite, the default cat that appears on the Stage every time you open a new project. Let’s make it move across the Stage, as the cat is doing in figure 2.


ford_byfp_02

Figure 2 You’re going to write a program that will make the cat move in the direction of that arrow.


The way you do this is by writing a program that tells the computer to make the cat move, and the way you write a program in Scratch is clicking and dragging blocks from the Block Menu to the Script Area.

Navigate to the Block Menu to begin:

  1. Click the word “Events” to switch to the Events block menu.
  2. Click the When Flag Clicked.
  3. Hold down the mouse and drag the block to any space in the Script Area.
  4. Release the mouse.

In figure 3, you can see the path the block makes from the Block Menu to the Script Area.


ford_byfp_03

Figure 3 To start programming, drag and drop the blocks from the Block Menu to the Script Area.


You’ve now told your program to start when the green flag above the Stage is clicked. Now you need to tell it what you want it to do after the green flag is clicked.

Moving the Cat

The cat is standing there on the Stage, which is kind of boring. Let’s make the cat move. Navigate back to the Block Menu to write the next step in your program:

  1. Click the word “Motion” to switch to the Motion block menu.
  2. Click the Move 10 Steps.
  3. Hold down the mouse and drag the block underneath the When Flag Clicked block in the Script Area.
  4. Move the Move 10 Steps block close to the When Flag Clicked block to see a white space form on the bottom of the When Flag Clicked You can see this white space in figure 4.

    ford_byfp_04

    Figure 4  When the white space appears between the two blocks, you know that they’re ready to snap together when you release the mouse.


  1. Release the mouse so the new block snaps against the existing block. You can see the two blocks together in figure 5.

    ford_byfp_05

    Figure 5  The two blocks work together to make a small program that moves the cat 10 steps.


To check your program, click the green flag above the Stage. You should see the cat move slightly to the right.

 

FiX it: The Cat Doesn’t Move

What happens if you click the green flag above the Stage, but your cat doesn’t move? It means the two blocks in the program aren’t snapped together. If the Move 10 Steps Block is in the Script Area but isn’t touching the When Flag Clicked block, click the Move 10 Steps block again and drag it toward the When Flag Clicked block until you see the white strip appear. Release the mouse to have the two blocks snap into place.

Each time you click the green flag above the Stage, you should see the cat move 10 steps.


Changing a Block

Some blocks are dragged and dropped as is, but other blocks have spaces where you can add other blocks, choose an item from a drop down menu, or type in a new value. The 10 inside the Move 10 Steps block can be changed by typing in a new value.

I usually use the default name for the block. For instance, even after you change this block to read Move 100 Steps, it will still be listed at Move 10 Steps in the instructions. Scratch will remember changes you make to a block by typing on it or using a drop down menu. Therefore, there may be slight difference between how a block appears on your screen versus my screen. If you see a block listed in the instructions and you can’t find that exact block in the Block Menu, check if there is a similarly named block. Chances are that I am using the default name for the block, but you are seeing the same block with a different value listed in the type-able space or drop down menu.

Change the value from 10 to 100 steps:

  1. Click inside the white bubble on the Move 10 Steps
  2. Erase the 10.
  3. Type in 100.

In figure 6, you can see the new value in the middle of the Move 10 Steps block.


ford_byfp_06

Figure 6 There are plenty of blocks in Scratch that can be changed by typing new information or choosing from a drop-down menu.


When you click the green flag above the Stage, you should see the cat take a much bigger step across the screen because it is now moving 100 spaces at a time instead of 10 spaces.

 

Fix It: Runaway Sprites

Click that green flag enough times and your cat will disappear off the right side of the Stage with only a leg and tail showing. Don’t worry, you can get the cat back to the left side of the Stage so it can walk across again. You can move any sprite on the Stage in order to position it wherever you want it to begin. Click the cat on the Stage and drag it toward the left side of the Stage while holding down the mouse. Release the mouse when your cat is where you want it to begin.

Right now, each time you want the cat to move, you need to click the green flag. You can also set up your program to keep doing the same step over and over again until the program stops.


Continuing a Step

You’re going to need a lot of room if you’re going to program your cat to keep walking until the program ends, so move the cat on the Stage to the far left by clicking and dragging it to a new place on the Stage. (See the Fix It: Runaway Sprites box for more information.)

To make the cat continue moving with a single click:

  1. Change the value in the Move 10 Steps block (or, now, Move 100 Steps block) back from 100 to 10.
  2. Click the word “Control” to switch to the Control block menu.
  3. Click the Forever It looks like an alligator head, which is appropriate because you’re going to make it swallow the Move 10 Steps block.
  4. Hold down the mouse and drag the block underneath the When Flag Clicked block in the Script Area.
  5. Move the Forever block close to the When Flag Clicked block to see a white space form on the bottom of the When Flag Clicked The Move 10 Steps block will be underneath the Forever block so you may not see it for a moment.
  6. Release the mouse so the Forever block snaps against the When Flag Clicked block and the Move 10 Steps block is inside the Foreverblock

Look at your script. Are your three blocks in the same order as figure 7?


ford_byfp_07

Figure 7 In Scratch, sometimes blocks even go inside other blocks.


Click the green flag above the Stage to test your program and watch the cat slide smoothly across the screen.

 

Fix It: Blocks Out of Order

If you’re having trouble sliding the blocks in the correct order, get rid of the Move 10 Steps block for a moment by dropping it back into the general Block Menu area, and get the Forever block snapped into place. Then reopen the “Motion” block menu and grab a new Move 10 Steps block and slide it inside the Forever block.

The Forever block causes the program inside the block to run indefinitely. In this case, it makes the cat to keep moving 10 steps until you stop the program by clicking the red stop sign next to the green flag.

Answer This: Stop Sign

Question: What happens if you click the stop sign above the Stage while the cat is moving across?

Answer: The cat stops! Reset the cat by dragging it back to the left side of the Stage. Click the green flag to watch the cat start moving. Before it reaches the right side of the Stage, click the red stop sign. Does your cat stop? Try it again, watching the program in the Script Area once the cat starts moving. Do you notice the yellow glow around the program? That means the script is in use. What happens to the yellow glow when you click the stop sign?

You can have more than one sprite on the Stage. Let’s add a second sprite so you can see what happens when you start adding multiple sprites to your projects.


Adding a New Sprite

Look at the bottom left corner of your screen: Your Sprite Zone. This is where all of the sprites and backdrops for your games will live once you create them. It’s also the space where you’ll switch between sprites so you can program each one. Right now, the Sprite Zone only contains that default cat sprite seen in figure 8 that launches with all new Scratch projects.


ford_byfp_08

Figure 8 All of your sprites will live in the Sprite Zone.


You’ll fill this area with your own creations that you’ll draw in the Art Editor, but right now, let’s borrow a new sprite from Scratch’s built-in sprite menu.

To add a new sprite:

  1. Click the head-shaped icon near the top of the Sprite Zone to the right of the words “New Sprite”, as shown in figure 9.

    ford_byfp_09
    Figure 9 The head-shaped icon will take you to the pre-made sprite library.


  2. Choose the bunch of bananas sprite by double-clicking the picture.
  3. Look at the new banana sprite in the Sprite Zone.

You should see two sprites in your Sprite Zone, like in figure 10. Both sprites will also appear on the Stage.


ford_byfp_10

Figure 10 You now have two sprites in the Sprite Zone.


The blue box is currently around your new sprite, the bananas. When you write a script in Scratch, you’re programming a sprite. If you wrote a script right now, you would be programming the bananas because the blue box is around the bananas in the Sprite Zone. Click the cat to make sure you continue to program the cat and not the bananas. The blue box should now be around the cat, as in figure 11.


ford_byfp_11

Figure 11 The blue box is around the cat sprite in the Sprite Zone, which means the cat will be programmed and not the bananas.


Fix It: The Bananas Moved Instead of the Cat!

Programming the wrong sprite is the number one mistake Scratchers make. It is super frustrating to put together a program and realize once you click the green flag that you programmed the bananas to walk to the cat, instead of the cat to walk to the bananas. Bypass this common mistake by always making sure the blue box is around the correct sprite in the Sprite Zone before you begin programming.

You’re now ready to write one last script. Clear the Script Area by dragging the existing script back into the “Block” Menu. You can do this by clicking the When Flag Clicked block and sliding over all the blocks attached to it at the same time.


Trying Unknown Blocks

The best part about Scratch is that it’s impossible to break. The worst that can happen is that you mess up the program you’re working on. (Don’t worry: Once your programs start getting complicated, you can create a duplicate of your project so you can experiment without messing up your work.) Which means that you should try each and every block to see what happens when you snap it into place, and you should also play around with drop down menus and values.

To get you started, use a different “Event” block to kick off your project:

  1. Click the word “Events” to switch to the Events block menu.
  2. Click the When Space Key Pressed.
  3. Hold down the mouse and drag the block to any space in the Script Area.
  4. Release the mouse.
  5. Click the drop down menu on the block and choose a different option, such as the letter “A.”

Any time you see a little triangle on a block, it signals that there is a drop down menu, as seen in figure 12.


ford_byfp_12

Figure 12 A drop down menu gives the programmer multiple options.


Now continue the script by choosing a new block. Do you want your cat to spin around? Go to the Motion menu and choose the Turn 15 Degrees block. Want your cat to meow? Go to the Sound menu and choose the Play Sound Meow block. What program can you make by clicking and dragging blocks into place? Try making your own script, setting an option in the When Space Key Pressed block drop-down menu and snapping one or two other blocks to it. To start the program, press the key you designated in the drop-down menu. For instance, if you set it to the space key, press the spacebar on the keyboard to start the program.

Congratulations, you just created your first scripts. Using Scratch is that simple! Although your programs will grow longer in order to create complex games, you will create all these programs by dragging and dropping blocks into the Script Area.

 

For more, download the FREE first chapter of Hello Scratch.