Scratch Cookbook — Save 50%
A quick and easy guide for building Scratch programs intended for further learning through projects, such as interactive animations and games with this book and ebook
This article by Brandon Milonovich, the author of Scratch Cookbook, covers the following recipes:
- Adding words to a sprite
- Adjusting the timing
- Sprites interacting with other sprites
- Basic broadcasting and receiving
- Resetting parts of a program
- Other fun graphic effects
You learned about a lot of different basic things that we can do with Scratch. You learned specifically about the Scratch interface and created your first project, incorporating control and movement blocks. This article will focus on how you can use Scratch to tell a story.
We'll primarily be interested in learning more about the Looks blocks, Control blocks, and Events blocks. Take a look at each recipe to get a good understanding of these types of blocks.
(For more resources related to this topic, see here.)
Adding words to a sprite
One of the first things we need to know to tell a story using Scratch is to display words on the screen to convey the story.
Start off by importing a new sprite (unless you like the default) as well as a background you like. Also, start thinking about a story you want to tell—or you can just follow what we do here!
This family of blocks are the say and think blocks:
So what's the difference between all of these blocks?
Two of these blocks help with timing. These are the first and third in the picture that include a time condition. These are the ones we will focus on because we generally want to control how long the words are displayed on the screen.
The story we are going to make here is going to be told by Monkey Mike. We labeled our sprite this to make understanding the logic of the programming a bit easier.
Now we're ready to get building a story!
How to do it...
Follow these steps to get going:
- Drag over the block with the green flag that we used to start our programs from the Events category. We'll start our story by clicking on the green flag on the stage.
Still using the older version of Scratch (Scratch 1.4)? All of the blocks in the Events category can be found in the Control category. This new category was added with the new version of Scratch.
- Next, we're going to return to the Looks block category and drag over the think block, the first one including the timing.
- Enter Hmm…I guess I'll start telling a story. into the text block.
- Click on the green flag and test the program. You should see a thought bubble pop up as if your sprite is thinking. It should be similar to the following screenshot, depending of course on the background and sprite you chose:
You may wish to adjust the number of seconds for which the thought bubble appears. You do this by changing the number associated with the think block in the code. Enter the number of seconds it shows for how long you expect your viewer to need to read the text. The same rule applies for other texts being displayed.
- Now, we can drag in our next block—the say block—again including the timing element.
You might be wondering what is the difference between the say and think blocks. Both accomplish similar goals. You can think of them as cartoons. The think block imitates the thoughts of the character while the say block suggests that the character is saying something. Note that neither makes the character make a noise.
- Enter the text in this block as Hi, my name is Monkey Mike. We can continue creating a basic story by adding more and more of these blocks to our code.
If you want to end your story with the text remaining on the screen, just use the say or think block without the timing element. This will keep the text on the screen until the viewer either starts the program over or does something else to trigger it (we'll learn more about this option later).
How it works...
So far, this program is relatively simple. Our code so far is:
We can see this sequence of code starting off with the green flag being clicked. Following that, our sprite thinks about starting the story, and then he begins. Naturally, your program may vary depending on how much you've digressed from the story we are using here.
- For more information about timing your story, particularly with multiple sprites in the story, see the next recipe, Adjusting the timing
Adjusting the timing
There is a good chance that the story you have in mind includes more than one sprite. This means that you are also going to need to think about timing in your story since you don't want to have both sprites talking at the same time.
Timing can become more and more complex depending on the program, especially as you add more and more sprites and length to your story. A good way to handle this situation is to think ahead of time as to when you want your sprite to speak, and when you want them to simply observe. Having this planned out will help you program much more quickly.
Continuing with our existing story, add another sprite. For example, we added a frog to our program in the bottom center. Copy over the same code (that we used for the first sprite) to make the second sprite think and talk. Note that if you duplicated the sprite, this is done for you. You'll notice both of them talking at the same time, which is what we are going to learn to fix (see the following screenshot showing roughly what you should see). Our example is relatively simple, but you can apply this concept to even the most complicated Scratch programs.
Remember, you don't need to recreate the code for the new sprite. With the original sprite selected, click and drag all of the code (beginning with the top hat block) on top of the picture icon of the sprite located below the stage. Your code should then appear in the script area of both sprites.
This is what you should see when you run your program:
How to do it...
Our next step is to get the timing right, and then we'll worry about making our characters say something different from each other. Follow these steps:
- For our story, we want Monkey Mike to start things off and have Frog follow. We know that Monkey Mike thinks for two seconds, so there needs to be a delay of at least two seconds on what Frog thinks. Notice that in the Control blocks we have a block called wait 1 secs with the 1 being an input box for you to change the number. While working in the script area for Frog, drag over the wait block and place it directly underneath the block with the green flag, as shown in the following screenshot:
- Next, change the value in the block you just dragged over to 2 instead of 1.
- Now, we'll want to add another wait block in between the think and say blocks we have for Frog. Make this block 2 seconds long as well.
- If you run your program now, you'll still notice a bit of a problem. We still need to make Monkey Mike wait while Frog is talking. Return to the script area for Monkey Mike. Place a wait block in between the think and say blocks, just as we did for Frog. Change this value to 2 as well.
- Now, change the text of Frog's thought bubble to I wonder if Monkey Mike notices me down here. Then, change the say block to Hi, you can just call me Frog.
- Run your program and see what happens. It should flow much better now that we've adjusted the timing.
How it works...
So now you're probably wondering what is happening behind the scenes. Let's look at the two pieces of code.
Our code for Monkey Mike is shown here:
And here is the code for Frog:
The biggest thing to notice in thinking about how the script runs in our program is that since both scripts begin with the block with the green flag, both scripts start simultaneously.
In essence, you can have an unlimited number of scripts running simultaneously in Scratch. We'll learn soon how to get different scripts started with other Events blocks. This will give us much more control over our programs.
While we may have made it appear—when watching the story—that the sprites are waiting for each other, really what is happening is that each script is playing independently of the other. We just adjusted the timing effectively to give the story the timing we want.
Maybe you don't want to have to click on the green flag to start the story. An alternative is to use the when key pressed top hat block instead, also from the Events category:
If you replace the green flag block with this new block, your story will start by pressing a specific key on the keyboard. By default, the block is triggered by the Space bar. You can change this by clicking on the black down arrow located next to the word space.
You'll see that this is the block we will use quite frequently (to get different aspects of our program to start) when we get into creating games and other programs.
For now, we'll stick with using the standard green-flag block for most script starting, but think of this as a good alternative in your own programming.
- For more details on timing, see the Adding words to a sprite recipe
- To see how to get your sprites to interact, take a look at our next recipe, Sprites interacting with other sprites
- Later in this article in the Basic broadcasting and receiving recipe, we'll explore a fun way to get background communication in your program
Sprites interacting with other sprites
When making your story, there is a good chance you will want to get movement on the stage so your story is a bit more exciting. This recipe focuses on how to have sprites react when they are touching or moving around other sprites.
For this recipe, we're going to continue working with the story we built in our previous recipes of this article. Our goal for this recipe is to get Frog to move across the screen and react to Monkey Mike when they touch.
How to do it...
Let's get started:
- To begin the movement of Frog, the user will have to click on the sprite. We'll need to provide directions to the user in order to accomplish this. At the end of Frog's dialogue (from before), add another say block and give it the text Click me to get me moving.
- Now we'll introduce a new top hat block. This is the when this sprite clicked block, located under the Events blocks category. It changes based on the sprite you are working on, so for ours it should indicate you are working with Frog.
- We'll drag this block over and begin a new script in the script area..
- Drag over a forever loop from the Control blocks underneath our new top hat block.
- Place a move 10 steps block (from Motion) and the if on edge, bounce block (also from Motion) into the forever loop.
Change the number of steps to something low, such as the number 2, to make sure the sprite moves slowly.
- Select the second orientation option in the 3-button option area of the sprite settings, as shown in the following screenshot.
First we have to click on the settings option:
- Now, if we run our program and click on Frog on the stage, we'll see Frog move slowly back and forth across the stage. Our next step will be to have the sprites interact when they touch.
- We want Monkey Mike to react when Frog comes in front of him. In order to do this, we'll need to head over to the Sensing category of blocks. We'll also need a new Control block. Change the sprite we are working with to be Monkey Mike.
- Underneath the dialog of Monkey Mike, drag over the forever block. This block is going to be triggered by a new sensing block.
- Into the loop you created in step 9, drag an if () then block.
If you are working in Scratch 1.4, steps 9 and 10 can be combined by using the forever if block. This block was eliminated in the new version of Scratch.
- Drag over the touching block inside the look you just created, as shown in the following screenshot:
- Change the touching block by clicking on the black drop-down arrow and selecting Frog.
You can use the touching block to sense when your sprite is touching any other sprite, or the mouse-pointer, or an edge. This will be very useful when we get into more advanced topics.
- Now we need to make Monkey Mike say something when he is "touched" by Frog. Drag in the say block (with time element) and drop it within the forever block.
- Change the text to say Hey Frog, don't block my view.
- Now run your program to give it a test! Frog will pass in front of Monkey Mike and Monkey Mike will state his observation that Frog is in his way. This will continue as long as you let it go.
How it works...
As in our previous recipes, we have several scripts—all running at once. We learned about a new block, the when this sprite clicked block. This block is similar to our other top hat blocks in that it starts off a script. You can always use this block to start something when you want that particular sprite to be clicked. This only applies to the specific sprite you are programming though, so if you want to click on Frog and have something happen to Monkey Mike, you'll have to use a workaround (we'll talk about this in the next recipe).
Now let's take a look at the script for Monkey Mike. You should have something like the following screenshot:
Once Monkey Mike finishes his dialog at the start of the story, he waits for Frog to pass by his field of vision. This block is essentially a combination of two other Control blocks available to us, so saves us time in terms of coding. We also have, available for use, the forever loop, which we've used before. Secondly, there is the if block. Any block with an if embedded creates an if statement, which is triggered when the statement is true. Our combined block that we used makes Monkey Mike constantly look for that statement to be true, and then repeats the code inside until the story is manually stopped.
If you are extending the story and still want Monkey Mike to say something about Frog passing by, you'll have to create a separate script to handle the forever if loop. This method of creating the code works well when you want nothing else added. However, now you can't add more talking after the loop. Also note that if your Frog isn't large enough, or close enough to the monkey, part of this code will never need to run.
Perhaps we don't want Monkey Mike to comment on Frog passing by for the entire story—after all, there is a good chance this will affect how your story flows. We also have the option of using another block combination as an alternative.
Here, we see that we can integrate the repeat loop and the if loop to create a loop that looks for the trigger a certain number of times—in our case 10. You can change this number if you want to something lower or something higher.
The logic of this section of code isn't too complicated. We see that the repeat loop continues what is inside it, 10 times. In other words, our code will check the condition we set (that is, whether or not we are touching Frog) 10 times, and then will stop checking and move on to whatever else we tack onto this script.
- To see more ways for sprites to interact, check out the next recipe, Basic broadcasting and receiving. This recipe will teach you a lot about basic techniques of background communication that we'll need to use in future projects.
eBook Price: $29.99
Book Price: $49.99
Basic broadcasting and receiving
Broadcasting and receiving is conceptually one of the most challenging ideas we've gotten to so far. That's because the idea is slightly more abstract than some of the other things we've discussed. Let's first talk a little about the principle it is built on, and then go into how it works in Scratch.
We have two separate ideas to think about. The first is the idea of broadcasting. Think of it as a radio station that sends out a signal that only radios can hear. If you are walking around outside, you're not going to hear anything. If you turn on a radio though, you can hear everything being broadcast. Receiving is kind of like the radio. It listens for a specific signal being broadcast, and then will trigger the code placed under it.
In Scratch, we have two blocks that act in this way. The broadcast block and the when I receive block, both of which are Events blocks. We'll talk more about these in the How it works… section coming up.
For this recipe, we will continue using the same Scratch program we have been working with for this article. Start off by matching your code with the following two sprites.
Our code for Monkey Mike:
And the code for Frog should be:
Now that you have caught up with us, we're going to have Monkey Mike introduce Frog as the storyteller, and then broadcast to Frog to begin the story.
How to do it...
Follow these steps to program Monkey Mike and Frog:
- Have your Monkey Mike script ready to program.
- At the end of the current script that we have, drag over a say block (with the time element) from the Looks category.
- Type the text Frog will now tell the story. into the block from step 2.
- Return to the Events blocks. We will now drag over the broadcast and wait blocks to the end of the sequence of code.
- Click on the drop-down arrow next to the block you just dragged over and select new message….
- A dialog box will appear. Enter the message name (that you want to broadcast) as Start Story.
The message name is only for making your code clear to others who look at it or for yourself later. Make it something simple, and something you'll recognize.
- Since we used the version of broadcast that waits for the end of the sequence it starts, we'll need to plan for Monkey Mike to do something when the story is finished. Drag over another say block and add the text That was a good story, Frog. to the block.
- Now that we have finished our broadcast message coming from Monkey Mike, we need to turn our attention to Frog. Be sure you have the script area of Frog selected and look in the Events blocks.
- Drag over the top hat block that says when I receive. Since we already created a broadcast message, you'll see Start Story already filled in for us.
- Now add enough say blocks to tell the story you want to tell. Your overall stack for the when I receive block should look like the following, customized for your own story of course:
- Now, test out your program. You should see what we had before, in addition to Frog telling our "story," with Monkey Mike concluding at the end.
Looking for a better way to view your story? Notice that there is a button just above the stage. This adjusts the interface and brings the stage to full screen. When you want to test your program and don't need to see any code, choose this option to maximize the stage size.
How it works...
First we'll talk about the broadcast and receive blocks.
The broadcast block
The broadcast block has two forms, both of them shown here:
The first of the broadcast blocks simply broadcasts a message. This message is just like when a radio station sends out a signal that only radios can interpret. Thus, the message can only be interpreted in Scratch in a certain way.
The second block sends out a message—just as the first one does—but then waits for everything associated with that message to be completed before continuing the sequence of the program. This will make more sense once you see how this block is used, particularly with the receive block.
The receive block
Our receive block acts somewhat like the radio. It is a top hat block, so triggers a sequence of code just like the green-flag block and other top hat blocks we've worked with so far. This block is a listener. A listener does just what its name suggests; it listens in the background and waits for some event to occur. In this case, that event is some sort of broadcast sent somewhere else in the program. You'll see that whenever you have one of these blocks, either broadcast or receive, you need to have at least one of the other blocks, else nothing will happen.
More about the code
There are two main pieces to this code to understand what is going on in the background. The first of this is what happens with Monkey Mike. Monkey Mike gets the process started by broadcasting the message Start Story. Built into Frog's code we have a listener, the when I receive (Start Story) block. When the listener is triggered by the broadcast from Monkey Mike, the sequence of code connected to the listener (our story) begins to run. The broadcast block we had back in Monkey Mike's code waits until this code is finished. Once it's finished, Monkey Mike continues with what is left to that sequence of code. In our case, all that remains then is to end the story with his final statement.
Keep in mind that we can have multiple receive blocks working on one message. For instance, the broadcast can be sent and two receive blocks (in different sprites or the same sprites, doesn't matter) pick up the message and begin running a sequence of code.
We can use our broadcast and receive commands to do any number of things. Let's take a moment to examine two other possibilities here.
Triggering an event with a click
In the previous recipe, we mentioned that you can only use the when this sprite clicked top hat block on the particular sprite being programmed, and not on others. We can use broadcasting and receiving to get around this.
For example, let's assume for a moment that you want to click anywhere on the stage to get Frog to begin moving. Set the visible script area to the stage and drag over the top hat block when this sprite clicked. Underneath this, drag over a new broadcast block (this time, use the one without the wait command). Click on the drop-down arrow and select New. Give this message the name Move.
Return to the program for Frog and drag over the when I receive block to the script area. Make sure the message you just created, Move, is selected. Now, right-click on the forever loop we created previously for movement and select duplicate (as shown in the following screenshot).
A copy of this sequence of code will appear. Drop it below our new top hat block to have the sequence as shown here:
If you run your program now, you will notice that if you click on the stage as well as Frog, Frog will move faster. This is a result of both scripts running at once, and so the speed is doubled. If you're worried about the speed varying like this, the best suggestion is to not have both sets of code in your program. Since these pieces of code are independent, we cannot (easily) stop one from running.
You can now use this technique to work around clicking on one object and having the code specifically on that object.
Changing the background
What if at some point in your story you want to change the background? Perhaps we can set this to happen when Monkey Mike announces that Frog will tell the story. Recall that we mentioned you can have multiple pieces of receive commands from a single broadcast.
Return to the script area for our stage. Drag over another when I receive block and change the message the block is receiving to Start Story. Next, take a look at your block palette and change the category to Looks. You'll notice that the category appears different for the stage than it does when you are working with a sprite.
Drag over the switch backdrop to () block, the first one in the list, and connect it to the when I receive block that you just dragged over. To make this block effective, you need to select the Backdrops tab and be sure that there is a second background in your program. In our case, we'll select Import and navigate to the bench in a park, as shown in the following screenshot. Then select OK.
The background will automatically change to the new image you just imported, so you'll want to click on the first background to switch back.
Now return to the script area for the stage and adjust the switch backdrop to block to indicate a switch to the new image that we just imported. Now when we run our project, when the story begins, the setting will change to the park.
We should also note that we should drag one more piece of code into the stage area. It is worth noting that we can place this code in any sprite, but it is a common practice to put it in the stage since that is the most relevant area of the program for it.
Drag in a when green flag clicked block as well as the switch to background block. In the block that switches the background, ensure that the original background is selected. By adding this piece of code, you'll be resetting the background to your original image each time you start the story.
Later on when we work with what are called variables, we will call this procedure of resetting things declaring variables. This process ensures that the program starts the same way every time. For instance, in games where we are keeping a tab on the score, we'll want to reset that score to 0 each time someone plays the game.
- See the next recipe, Resetting parts of a program, for a quick description of what other things need to be reset in this story
- We'll explore more graphic effects in the final recipe of this article, Other fun graphic effects
Resetting parts of a program
This recipe introduces, more formally, what we did at the end of the previous recipe when we began the process of resetting aspects of our story. Sometimes when we have a program running various settings, placement of objects, variables, and so on, are going to get changed. When we run the program next time, we'll want all of those things to start from where we originally had them.
The example that we'll go through here is resetting the placement of Frog on the stage. This way, each time you click on the green flag, Frog will return to the same starting position.
How to do it...
To get this started, follow these steps:
- Drag Frog (on the stage) to the place where you would like him to start each time the program runs. Examine the script -area settings and note the x: and y: positions that are given. From the following screenshot, we can see that Frog has an x -value of 18 and a y -value of -145:
- We'll need to know these numbers in just a moment. To reset the position of Frog each time, drag over a new green -flag block.
- Connect to this the go to x: y: block in the Motion category. Most likely, the numbers filled in match the location where your Frog is now. If not, just change the numbers to match what our screenshot has here.
This new block is a different way to get movement. Remember when we said the stage can be thought of as a coordinate plane from math class? This block tells the sprite to go to a particular location on the stage. You won't see this one take any "steps" as we've seen with other movements. Actually, since your computer is pretty fast, you might not notice anything but the location of the sprite change!
How it works...
Programmatically, this recipe doesn't change a whole lot in the program. The main purpose is to ensure that everything starts uniformly no matter who is watching and controlling our program. This is a technique we'll use quite often throughout the rest of this article. It is also a common practice in other programming languages to declare variables (or as in this case, more like just resetting things).
What if you wanted the movement to be noticeable? Not a problem! You can see that just a couple of blocks below the go to block is a glide block. Inputs to this glide block include the number of seconds in addition to the x-y coordinates, similar to the go to block.
If we were to replace our resetting block with this new block, we would see Frog glide to his position instead of just appearing there. The time it would take to "glide" depends on the number you input into this block.
- To see more about the resetting aspects of the program, refer to the previous recipe, Basic broadcasting and receiving
- The next recipe, Other fun graphic effects, takes a look at other cool graphical effects we can incorporate into telling a story
Other fun graphic effects
Now that we have a lot of the other story-creating features, we can have a little fun changing graphics in our story! You might have already taken a look and played around with some of the Looks blocks we haven't really talked about yet. This is where we will formally look at a few more of these.
Here in this recipe, we're going to focus on changing the color effect. Later, we'll also see a few other things you can do with the appearance of sprites. Our time will be spent adding the following three blocks to what we have so far:
The first of these will help us give our sprites some fun effects while the other two will be used to reset those effects back to our starting place.
How to do it...
Let's get started:
- Let's begin by making sure that everything is reset at the start of the program, even though we know nothing has been changed yet. This will make sure we don't forget to have our graphic effects reset later.
These graphic effects are sprite specific, meaning you need to reset them for each sprite you plan on —eventually changing the graphics for. We're only going to change Monkey Mike here, but you may wish to change more.
- Ensure that you have the script area for Monkey Mike open.
- Drag over a green -flag block.
- Also, drag a clear graphic effects block. We can now feel safe and know that each time our program runs, any graphic effects we've added along the way will be set back to normal.
You may not want to use the all-in-one block we just used. If you only change the color, use the second block that we mentioned here to only set the color effect back to 0. You can do this with any of the other graphic effects that are available too!
- Next, we are going to delve into the realm of changing the color of a sprite. We don't have a way to merely select a specific color to change our sprite to. Instead, we change the value of the color effect.
- Returning to our previous project, we'll make it so that Monkey Mike changes color when he is clicked. Drag over the when this sprite clicked block from the Events menu.
- Returning to the Looks block menu, drag and connect the change color effect by block to the top hat block you just added.
- Depending on how extreme you want to make this change appear, adjust the number.
Notice that you can adjust the number in the change effect by block by either a positive value or a negative value. A negative value will reverse any positive -value effect you've already applied. Play around with the numbers to see what happens!
- You should now run your program and click on Monkey Mike several times to see the color effect change.
How it works...
In the background when you change the color effect, there are 200 possible color schemes available. This means if you input a value higher than 200, the actual color that will be displayed would be the equivalent of the number modulus 200. For example, if you input a color effect of 300, you will observe the same effect as you would get when you put in 100. Another example would be 450; this would be the same effect as 50.
You may be interested in having more than one effect in your program. The good news is that not a whole lot changes beyond what we've just done!
Drag over an additional change effect by block to the script we've already been working on in this recipe.
Clicking on the drop-down arrow, as is shown in the previous screenshot, gives us all the other graphic effects that Scratch has included! Here is a brief description of what each does. Each of these also has a screenshot (with an effect value of 50 applied) as a reference to what it will do to your sprite.
You might recognize the fisheye effect from looking into a fish bowl at some point in your life. This effect makes the center of the image look distorted and somewhat rounded.
Whirl adds a spiraling effect to your sprite. The higher the value, the more intense the spiral.
You've probably seen the pixelate effect before when you've zoomed in really close into a digital image. Images are made up of what are called pixels (small squares of color). The more pixels you fit into a small space, the sharper the image.
A mosaic image is made up of many images put together. This effect splits your image into a series of small copies of that image.
If you're looking for a good way to make it look like your sprite is disappearing, this is the effect for you! As you increase the value of this effect, your sprite will become more and more transparent until it eventually disappears.
Play around with these color effects. Depending on the story you are trying to tell, these can be really handy in giving your story some life.
This article mainly discusses the basic concepts of Scratch, how to play around, how to adjust the timings and so on.
Resources for Article:
- Getting Started with Scratch 1.4 (Part 1) [Article]
- Getting Started with Scratch 1.4 (Part 2) [Article]
- Games of Fortune with Scratch 1.4 [Article]
eBook Price: $29.99
Book Price: $49.99
About the Author :
Brandon Milonovich completed his Master's degree in Teaching and Curriculum with emphasis in Mathematics Education in December 2012 at Syracuse University in central New York. Prior to attending Syracuse, Brandon earned his Bachelor's degree in Adolescent Mathematics Education at The College of Saint Rose in Albany, NY. Brandon grew up in upstate New York with an interest in mathematics and computer science at a young age. Brandon has experience of teaching mathematical concepts to students using Scratch in third through fifth grade, as well as experience of teaching mathematics at the middle school, high school, and university level.
It was during Brandon's time at Saint Rose that he began his work with Scratch through an internship program with Computer Science professor Helen Albanese. In coordination with three Albany City School District teachers, Brandon developed an after-school program centered on programming in Scratch for at-risk youth. The program expanded the following year to include a broader age range of students. Now, Brandon works towards making learning Scratch more accessible within the classroom itself, both with traditional methods and flipped classroom-blended learning style concepts, to build the mathematical foundation students need to be successful 21st century learners. Brandon believes in sharing of information as broadly as possible, and so has presented with his colleagues at numerous conferences and workshops on Scratch, and hopes to continue to do so.
For more information on Brandon, or to contact him, visit http://www.bmilo.com.