Here’s a simple project that I started to demo Scratch for the June 2010 issue of LinuxPro Magazine. The game was inspired by the Click Me Challenge. It demonstrates, costumes, broadcasts, backgrounds, random numbers, operators, and gravity.

You can pick up a copy of LinuxPro Magazine at a bookstore near you. Now for the game. Click the image below to play the game at the Scratch website and download the source.

This is chapter 7, Games of Fortune, from the book Scratch 1.4: Beginner’s Guide.

In Scratch it is easy to create projects that
incorporate dynamic information using variables. However, variables
have a limitation; they store only one value at a time. Sometimes, we
want a variable to store multiple values.

Welcome to lists. In Scratch, a list allows us to associate one list
(a variable) with multiple items or values in much the same way we
create a list before going to the grocery store. In this article, we will take a trip to the fortune-teller to demonstrate lists, and you’ll learn how to:

• Store and retrieve information in lists
• Add and remove items from the lists
• Keep track of items in a list by using a counter
• Identify intervals using the mod block
• Use if/else control blocks to make decisions

Fortune-teller

Most of us enjoy a good circus, carnival, or
county fair. There’s fun, food, and fortunes. Aah, yes, what would a
fair be without the fortune-teller’s tent? By the end of this article,
you’ll know everything you need to spin your fortunes and amaze your
friends with your wisdom.

Before we start the first exercise,
create a new project and add two sprites. The first sprite will be the
seeker. The second sprite will be the teller. Choose any sprites you
want. My seeker will be a clam and my teller will be a snowman. If you
want to add a background, go ahead.

Time for action – create a list of questions

In
order to have a successful fortune-telling, we need two things: a
question and an answer. Let’s start by defining some questions and
answers:

1. Select the seeker from the list of sprites.
2. From the Variables palette, click the Make a list button.
3. In the list name dialog box, type questions and select For this sprite only.
4. Click OK to create the list. Several new blocks display in the Variables palette, and an empty block titled seeker questions displays on the stage.
   
5. Let’s think about a couple of questions we may be tempted to ask, such as the following:
   • Will my hair fall out?
   • How many children will I have?
6. Let’s add our proposed questions to the questions list. Click the plus sign located in the bottom-left corner of the seeker questions box (on the stage) to display a text input field. Type Will my hair fall out?
7. Press the plus sign again and enter the second question: How many children will I have? We now have two questions in our list.

   To automatically add the next item in the list, press enter.

8. Let’s add a say for 2 secs block to the scripts area of the seeker sprite so that we can start the dialog.
9. From the Variables palette, drag the item of questions block to the input value of the say for 2 secs block.
10. Double-click on the block and the seeker asks, “Will my hair fall out?“
11. Change the value on the item block to last and double-click the block again. This time the seeker asks, “How many children will I have?“

What just happened?

I’m
certain you could come up with a hundred different questions to ask a
fortune-teller. Don’t worry, you’ll get your chance to ask more
questions later.

Did you notice that the new list we created
behaved a lot like a variable? We were able to make the questions list
private; we don’t want our teller to peek at our questions, after all.
Also, the list became visible on the screen allowing us to edit the
contents.

The most notable difference is that we added more than
one item, and each item corresponds to a number. We essentially created
a numbered list.

If you work with other programming languages, then you might refer to lists as arrays.

Because the seeker’s questions were contained in a list, we used the item block to provide special instructions to the     say
block in order to ask the question. The first value of the item block
was position, which defaulted to one. The second value was the name of
the list, which defaulted to questions.

In contrast, if we used a variable to store a question, we would only need to supply the name of the variable to the say block.

Have a go hero

Create an answers list for the teller sprite, and add several items to the list. Remember, there are no wrong answers in this exercise.

Work with an item in a list

We
can use lists to group related items, but accessing the items in the
list requires an extra level of specificity. We need to know the name
of the list and the position of the item within the list before we can
do anything with the values.

The following table shows the available ways to access a specific item in a list.

Import a list

Entering one item at a time via the Scratch
interface is functional, but the small size of the list box can be
difficult to use when we need to add a large number of items.
Fortunately, we can create a text file outside of Scratch and then
import it into our list.

Before you continue with the exercise,
build your own text file with the fortunes you want to use in response
to the seeker’s questions. Enter one fortune per line in a text editor,
such as Notepad.

You can use any fortunes you want, but I’m going to use a list of common Magic 8 ball responses that I found on Wikipedia at http://en.wikipedia.org/wiki/Magic_8_ball. My list will contain 19 items to start.

Time for action – import a list of fortunes

If you haven’t already done so, create a new list and name it answers.

1. To import the list, right-click on the answers list and choose import… Note: This will erase any items you previously added to the answers list.

   

2. In the Import List dialog box, browse to the fortunes file you saved on your computer prior to starting this exercise and import it.
3. Think of a new fortune that is not yet in your answers list. We are going to add it to the list. I’ll use “No comment” as my new fortune.
4. Now, let’s add the new fortune to our list. From the Variables palette, find the add block. Replace the default value thing with your new fortune. Make sure the answers list is selected.

   

5. Double-click on the add block to add the new item to the end of the answers list.

What just happened?

I
don’t know about you, but I had a much easier time typing in a text
editor than I did typing in the list monitor. Actually, if you took my
lead, you copied the Magic 8 ball responses from Wikipedia and pasted
them into a text file. That way, all you had to do was to clean up some
formatting.

We did add a new fortune to the list via the add block. The add
block always places the new value at the end of the list. Now, my list
contains 20 items. As an alternative, we could have updated the
original fortunes text file and then re-imported the list.

Reasons to import

It’s
true that importing a list makes list creation easy. However, we can
use the Import List functionality in other creative ways. For example,
we could create a game that instructs the player to create a unique
list that he or she can import into Scratch. That way, each player can
customize the game.

If we create a math game, we could ask the player for a varied set of numbers to make the problems different. You get the idea.

Export a list

Sometimes,
we may want to export a list from Scratch to a file. For example, as
people play a game, we may want to collect all the scores into a
separate list that we can later export to a text file on our computer.

As
we create our projects, the contents of a list may change from the
original list we imported. In that case, we may want to export the new
list.

To export a list, right-click on the list monitor and click export. The file automatically saves to the root installation directory for Scratch. In Windows, that is C:Program FilesScratch.

Pop quiz

1. If you wanted to group ten related items together, you would create a new:
   • Variable
   • Numbers block
   • List
   • Forever loop
2. If you want to add many items to a list at one time, how would you do it?
   • Type each item one at a time into the add block
   • Type each item into the list monitor that displays on the stage
   • Export the list from Scratch
   • Create a list in a text file and import it via Scratch

Your fortune is …

Take
a moment to add more questions to the seeker sprite’s question list.
Now that we have a list of several questions for our seeker to ask and
a list of fortunes for our teller to answer, let’s create the script
that randomly selects a question.

Time for action – tell me a fortune

Before we begin, hide the lists from the stage by right-clicking on each list and selecting hide so that they are out of the way. Let’s start with the seeker sprite. We should have a say block in the scripts area from our earlier exercise:

1. We need a way to control our seeker. From the Control palette, drag the when space key pressed block and attach it to the say block.
2. From
   the position drop-down list in the item block, select any. Press the
   space key to ask a question. Each time you press the space key, a
   random question from the list displays.
3. We need to let the teller know we’ve asked a question, and that we expect an answer. From the Control palette, add the broadcast block.
4. Add a new broadcast message titled fortune.
   
5. Every question deserves an answer. Select the teller sprite so that we can create the script to provide an answer.
6. From the Control palette, drag the when I receive block into the scripts area, and make sure fortune displays as the message value.
7. From the Looks palette, add the say for 2 secs block to the when I receive block.
8. Let’s pick a random item from the answers list. From the Variables palette, add the item block as the input to the say block.
9. For the seeker
   sprite, we pick a random question using the any position of the item
   block. This time, we’re going to take a slightly different approach to
   build a more flexible, but slightly more complicated script. From the Numbers palette, add the pick random block as the position value of the item block.
10. From the Variables palette, add the length of block to the second value of the pick random
    block. Make sure the answers list is selected for the value in the
    length of block. The following screenshot shows the script for the
    teller sprite:
    
11. Press the Space bar to make the seeker ask a question. The teller will respond with a fortune.

Every
item in a list is represented by a number, and when we want to
manipulate a certain value in the list, it’s the number we refer to.
The list length block gives us a way to always know how many items are
in a list. In our example, our list of answers contains 20 items.

What just happened?

You
are now prepared for a life in the carnival. Based on our script, we
can answer any question that may come our way, and our response will
seem profound. At least that’s what we’ll choose to believe.

Our
seeker asked a question, and our teller doled out a random fortune
using items from their respective lists. The script we used for the
teller sprite was decidedly more complex than the script for the seeker
sprite.

In the seeker’s script, we used the default any value to
select a random item from the list. For the teller, we replaced the any
value with a pick random block. The length of questions block gave the
pick random block the maximum number of items to choose from. In my
example, the script selected a number between 1 and 20 because my
questions list contained 20 items.

You’re probably asking
yourself why we would write the more complex code when we can achieve
the same result with less. If you are asking that question, good for
you.

The answer, naturally, depends on what we want to
accomplish. If we only want to select a random item from our list, then
the simple script for the seeker suffices. However, let’s say we want
to instruct our teller to answer every fifth question with a positive
response, and all other questions get a random response.

Let’s see how we can modify the teller’s script to guarantee a positive fortune for every fifth question.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book

Time for action – force a positive fortune

Before we begin
this exercise, re-order your answers list so that all the positive
responses are at the end. Edit the list items in your text editor and
then re-import the list. Make a note of where the first positive
response begins:

1. Our first task is to set up a variable to
   count how many questions the seeker asks so that we can calculate
   whether or not it’s time to answer positively. Select the stage from the sprites list and create a new variable named question_number.
2. Add the when flag clicked block to the scripts area.
3. From the Variables palette, add the set question_number to 0 block to the when flag clicked block. Now, we have a way to reset our calculation.

   

4. Next, we need to assign the question_number variable a value when the seeker asks a question. Click on the seeker sprite to display the scripts area
5. From the Variables palette, snap the change question_number by 1 block in place between the when space key pressed and the say blocks.

   

6. Next, make the teller sprite give a specific range of answers based on the question. Select the teller sprite to display the scripts area.
7. From the Control palette, add the if/else block to the when I receive block. Snap the current say block in place after the if block.
8. Change the first input value on the pick random block to reflect the item number that begins your positive responses. In my example, that value is 11.
9. Now, we need to supply a condition to the if statement to test whether or not we should issue a positive response. From the Numbers palette, add the = block to the if block.
10. Drag the mod block into the value to the left of the = sign. Change the value to the right of the equals sign to 0.
11. We’re going to use the mod block to divide question_number by 5 so that we can calculate the remainder. Add the question_number block to the first value of the mod block.
12. Change the second value of the mod block to 5 so that the block reads question_number mod 5.
13. Test
    your script by pressing the Space bar. With our current setup, the
    teller responds only on the fifth question, and it’s always a positive
    response.

    

If
you double-click on the variable monitor block on the stage, a slider
will display. Use the slider to assign a number to the variable before
you run the script as a way to test.

What just happened?

We asked our teller to issue only a positive response every fifth question, but we needed a way to let our teller sprite determine when the fifth question was asked. We set up the question_number variable as a way to count the question, and the seeker script updated the value of the question_number variable each time we pressed the space key. We call that a counter variable.

The mod block gave us the logic we needed to let the teller calculate whether or not to issue a positive response. The mod block divided the first number (question_number) by the second(5) and returned the remainder.

The teller sprite used the if
block to compare the remainder to zero. We chose zero because when
question_number is a multiple of 5, the remainder was zero. When the
remainder was zero, we executed the code in the if block; otherwise, the code in the else block ran.

Let’s evaluate some mod calculations using a divisor of 5:

• 25 mod 5 is 0
• 32 mod 5 is 2
• 67 mod 5 is 3

In our script, question 25 guarantees a positive response, while questions 32 and 67 do not.

Counters

When
we need to know how many items we’ve processed like we did in our
“force a positive fortune” exercise, we use a counter variable. A
counter variable is just an arbitrary name I chose so that we can
easily associate that we are using a variable to count the steps in
some process.

For example, iterating through each item in a list
is a common example of using a variable to count the current list
item’s position. Consider the block of code in the following screenshot:

The
sample code in the screenshot uses the counter variable in several
ways. It sets the value to 1 prior to checking the condition in the forever if
block. It uses the number assigned to counter to determine if we’ve
processed all the items in the list. If counter is less than the number
of items in the list, the block runs. At the end of the block, we
increment counter’s value by 1, and the forever if block checks the new value of counter

Keep track of intervals with mod

If
we identify an interval, then we can create a pattern of events based
on the interval. We already saw an example where we look for the fifth
occurrence of an event, but what if we wanted to make our sprite dance
after 100 seconds elapse? A mod calculation helps us identify the
interval. Assuming our timer starts at zero, the expression
“current_time mod 100 is 0″ becomes a check to identify every 100th
second.

In our project example, we used the mod block to select
certain items from our list, but we could program any number of events
based on our interval, such as select items from a totally different
list, change backgrounds or costumes, or we could use the mod
calculation to do nothing at all.

Have a go hero

Give mod a try. Make the seeker
sprite do something on every fifth response. Examples of things you
might try include issuing a response to the teller, applying a
graphical transformation, or jumping for joy.

If/else

The forever, forever if, and if concepts checks a condition and then runs if the condition is met. We don’t define what happens when the condition is not met.

In contrast, the if/else control block evaluates a condition, and if the evaluation is true, the code in the if block executes. If the if condition evaluates to false, then the code in the else block executes.

Think
of the ultimatums you give your children, or your parents gave you. If
you clean your room, you get ice cream. Or else, you go to bed without
a snack.

Pop quiz

1. The mod block:
   • Modifies a number in the list
   • Creates a variable that tracks an interval
   • Transforms the sprite into a leprechaun
   • Divides two numbers and returns the remainder
2. We use a counter variable to:
   • Track how many times an event occurs
   • Identify how many sprites we have in the project
   • Select a random item from a list
   • Add a new item to a specific position in the list

Repeat the fortune

Up
to this point, we’ve only stored numeric values in our variables, but
variables can store text too. Let’s add a script to our teller sprite to repeat the question.

Time for action – my fortune is what?

What
if we get distracted and miss our fortune? That would be tragic, so
let’s add some code to the teller sprite that repeats the last fortune
told:

1. Create a private variable for the teller sprite named your_fortune. We’ll use this variable to keep track of the fortune.
2. We’ll start with the blocks inside the if statement. From the Variables palette, snap the set to block in place between the if block and the say block. Select your_fortune as the variable so that the block reads set your_fortune to 0.
3. We need to replace the 0 value in the set to block with the code that selects a random item from the answers list. Remember, we’re working with the if block right now. Click on the item block and drag the entire block into the to value of the set to block.
4. From the Variables palette, drag the your_fortune block into the value of the say block. Refer to the following screenshot for the new script:

   

5. Apply the same changes to the else block. Refer to the following screenshot for help:

   

6. Get a fortune by pressing the Space bar. Notice that the your_fortune monitor reports the teller’s fortune.

   

7. Now, we need a way to prompt the teller to repeat the message. We’ll add a when clicked control block to the teller sprite. From the Control palette, add the when teller clicked block to the scripts area.
8. From the Looks palette, add the say for 2 secs block to the when teller clicked block.
9. From the Variables palette, add the your_fortune block as the message value for the say block.
10. Click the teller sprite to repeat the last fortune.

What just happened?

Like thoughts, fortunes can be fleeting. That’s why we captured our fortune in the your_fortune
variable. We replaced where in our script we selected the fortune. Our
logic to pick a random item from the answers list became the input to
the set to block. And for the say block, we replaced the message value
with the your_fortune variable.

Now, if we get a fortune we like, we can make the teller repeat it over and over.

Holding text in a variable

We
can type text directly into the say block. This means that if we want
to change what the sprite says, we have to find the say block in the
script and change the message.

When we work with dynamic data, we
sometimes want to capture that data so that we can use it later. We
already learned how we can use variables to store numeric data, but
having the ability to store text adds a whole new level of
functionality to our projects, such as simulating dynamic conversations.

Other programming languages often refer to a text phrase as a string.

Variables
are one of the most important programming concepts we can use. A
majority of the projects you create will need a variable, especially as
the projects become more interactive and complex.

Text entry limitations

Now,
it is a logical time for us to build a way that prompts the user to
type a question for the teller. However, the current version of Scratch
(1.3) doesn’t allow us to prompt the user for text input that we can
use in our scripts.

Next steps

Our focus has been on
using lists and variables to drive the action in our game. If you
wanted to expand on this game, try adding graphical effects to the
sprites and creating a background to begin to tell a story.

Using
the concepts in this article, you could create other games of chance,
such as blackjack, bingo, or a lottery number predictor.

Summary

We
have seen the power that lists and variables give us to create dynamic,
flexible, and fun projects. We learned how to manipulate lists, a
special kind of variable, to collect a group of related items. We
continued to explore variables by using them to store text. The mod
block helped us identify intervals as we iterated through our list. We
used a variable to keep track of the interval so that we could program
specific events based on when an interval occurred.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book

This scratch tutorial is the second half of chapter 3 from the book, Scratch 1.4: Beginner’s Guide. If you need a more advanced topic, check out my tutorial Scratch Programming Tutorial #3. Enjoy!

Each Scratch project contains sprites with costumes, scripts,
blocks, and a stage with backgrounds. In the first part, 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 this part of the 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.

Add sprites to the stage

In the first part we learned that if we want something done in Scratch, we tell a sprite by using blocks in the scripts area. A single sprite can’t be responsible for carrying out all our actions, which means we’ll often need to add sprites to
accomplish our goals.

We can add sprites to the stage in one of the following four ways: paint new sprite, choose new sprite from file, get a surprise sprite, or by duplicating a sprite. Duplicating a sprite is not in the scope of this article. The buttons to insert a new sprite using the other three methods are directly above the sprites list.

Let’s be surprised. Click on get surprise sprite (the button with the “?” on it.). If the second sprite covers up the first sprite, grab one of them with your mouse and drag it around the screen to reposition it.

If you don’t like the sprite that popped up, delete it by selecting the scissors from the tool bar and clicking on the sprite. Then click on get surprise sprite again.

Each sprite has a name that displays beneath the icon. See the previous screenshot for an example. Right now, our sprites are cleverly named Sprite1 and Sprite2.

Get new sprites

The create new sprite option allows you to draw a sprite using the Paint Editor when you need a sprite that you can’t find anywhere else. You can also create sprites using third-party graphics programs, such as Adobe Photoshop, GIMP, and Tux Paint.

If you create a sprite in a different program, then you need to import the sprite using the choose new sprite from file option. Scratch also bundles many sprites with the installation, and the choose new sprite from file option will allow you to select one of the included files.

The bundled sprites are categorized into Animals, Fantasy, Letters, People, Things, and Transportation, as seen in the following screenshot:

If you look at the screenshot carefully, you’ll notice the folder path lists Costumes, not sprites. A costume is really a sprite.

If you want to be surprised, then use the get surprise sprite option to add a sprite to the project. This option picks a random entry from the gallery of bundled sprites.

We can also add a new sprite by duplicating a sprite that’s already in the project by right-clicking on the sprite in the sprites list and choosing duplicate (command C on Mac). As the name implies, this creates a clone of the sprite.

The method we use to add a new sprite depends on what we are trying to do and what we need for our project.

Time for action – spin sprite spin

1. Let’s get our sprites spinning.
2. To start, click on Sprite1 from the sprites list. This will let us edit the script for Sprite1.
3. From the Motion palette, drag the turn clockwise 15 degrees block into the script for Sprite1 and snap it in place after the if on edge, bounce block.
4. Change the value on the turn block to 5.

   

5. From the sprites list, click on Sprite2.
6. From the Motion palette, drag the turn clockwise 15 degrees block into the scripts area.
7. Find the repeat 10 block from the Control palette and snap it around the turn clockwise 15 degrees block.
8. Wrap the script in the forever block.
9. Place the when space key pressed block on top of the entire stack of blocks.
10. From the Looks palette, snap the say hello for 2 secs block onto the bottom of the repeat block and above the forever block.
11. Change the value on the repeat block to 100. Change the value on the turn clockwise 15 degrees block to 270. Change the value on the say block to I’m getting dizzy!
12. Press the Space bar and watch the second sprite spin. Click the flag and set the second sprite on a trip around the stage.
    

What just happened?

We have two sprites on the screen acting independently of each other. It seems simple enough, but let’s step through our script.

Our cat got bored bouncing in a straight line across the stage, so we introduced some rotation. Now as the cat walked, it turned five degrees each time the blocks in the forever loop ran. This caused the cat to walk in an arc. As the cat bounced off the stage, it got a new trajectory.

We told Sprite2 to turn 270 degrees for 100 consecutive times. Then the sprite stopped for two seconds and displayed a message, “I’m getting dizzy!” Because the script was wrapped in a forever block, Sprite2 started tumbling again.

We used the space bar as the control to set Sprite2 in motion. However, you noticed that Sprite1 did not start until we clicked the flag. That’s because we programmed Sprite1 to start when the flag was clicked.

Have a go hero

Make Sprite2 less spastic. Instead of turning 270 degrees, try a smaller value, such as 5.

Sometimes we need inspiration

So far, we’ve had a cursory introduction to Scratch, and we’ve created a few animations to illustrate some basic concepts. However, now is a good time to pause and talk about inspiration.

Sometimes we learn by examining the work of other people and adapting that work to create something new that leads to creative solutions.

When we want to see what other people are doing with Scratch, we have two places to turn. First, our Scratch installation contains dozens of sample projects. Second, the Scratch web site at http://scratch.mit.edu maintains a thriving community of Scratchers.

Browse Scratch’s projects

Scratch includes several categories of projects for Animation, Games, Greetings, Interactive Art, Lists, Music and Dance, Names, Simulations, Speak up, and Stories.

Time for action – spinner

Let’s dive right in.

From the Scratch interface, click the Open button to display the Open Project dialog box, as seen in the following screenshot.

1. Click on the Examples button.
2. Select Simulations and click OK.
3. Select Spinner and click OK to load the Spinner project.
4. Follow the instructions on the screen and spin the arrow by clicking on the arrow.
5. We’re going to edit the spinner wheel. From the sprites list, click on Stage. From the scripts area, click the Backgrounds tab. Click Edit on background number 1 to open the Paint Editor.
6. Select a unique color from the color palette, such as purple.
7. Click
   on the paint bucket from the toolbar, then click on one of the
   triangles in the circle to change its color. The paint bucket is
   highlighted in the following screenshot.
8. Click OK to return to our project.

What just happened?

We opened a community project called Spinner that came bundled with Scratch. When we clicked on the arrow, it spun and randomly selected a color from the wheel. We got our first look at a project that uses a background for the stage and modified the background using Scratch’s built-in image editor.

The Paint Editor in Scratch provides a basic but functional image editing environment. Using the Paint Editor, we can create a new sprite/background and modify a sprite/background. This can be useful if we are working with a sprite or background that someone else has created.

Costume versus background

A
costume defines the look of a sprite while a background defines the
look of the stage. A sprite may have multiple costumes just as the
stage can have multiple backgrounds.

When we want to work with the backgrounds on the stage, we use the switch to background and next background blocks. We use the switch to costume and next costume blocks when we want to manipulate a sprite’s costume.

Actually, if you look closely at the available looks blocks when you’re working with a sprite, you’ll realize that you can’t select the backgrounds. Likewise, if you’re working with the stage, you can’t select costumes.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book

Time for action – broadcast a message

We’re going to continue spinning. Let’s make the color wheel strobe as the arrow spins:

1. We need to duplicate the existing background. Select the Stage sprite and click on the Backgrounds tab in the script area. Click the Copy button to duplicate background1.
2. Now, let’s flip the second background. For background2, click the Edit button to open the Paint Editor. Click the Flip Horizontally button that is located above the editor window and click OK to exit the Paint Editor.

   

3. Select the Spinner sprite from the list of sprites.
4. We’re going to program the sprite to send a message. From the Control palette, add the broadcast block to the script before the turn 5 degrees block. Click on the message drop-down list of the broadcast block and choose New.

   

5. Type spin in the message name dialog box and click OK.
6. We’re going to tell the stage to listen for the broadcast message. Select Stage from the list of sprites.
7. From the Control palette, add the when I receive block to the script area. Select spin from the message drop-down list.

   

8. From the Looks palette, add the next background block to the script.
9. Click on the arrow.

What just happened?

Now we’re programming in Scratch!

Our first step was to duplicate the existing background so we could flip it horizontally. We could have flipped the background vertically instead. Or, we could have flipped it both horizontally or vertically—it’s a matter of whimsical choice.

We used a broadcast block on the Spinner sprite to let the stage know when we clicked the arrow. The arrow sent the message spin, which told the stage to switch to the next background, and this produced a strobe effect.

The stage knew how many times to switch backgrounds because when we clicked on the arrow, the script selected a random number between 25 and 200. In the original project, the random number controlled how many times the arrow spun around the circle.

In our new project, if the script selected a random number of 30, the following set of commands repeated 30 times in sequence: broadcast the message spin and turn to the right 5 degrees. For each spin, the background switched.

Broadcast messages coordinate sprites

When a sprite broadcasts a message, it’s a clue to the other sprites that something should happen. In order for another sprite to react to the message, it needs to be told to listen for the broadcast message by using a when I receive block. Multiple sprites can be controlled with a single broadcast. If a sprite is not instructed to listen for a broadcast message, then it ignores the message.

You can think of broadcasts as a conversation starter. Conversations require two or more participants to engage. If I pass you on the street, I might say, “Hi, reader.” Depending on the circumstances you might respond in one of three ways. First, you might say, “Hi, Mike.”
Second, you might wave. Third, you might ignore my message and continue on your path.

Browse the Scratch community

Learning by doing is a great way to figure things out, but interacting with the code of other Scratch programmers provides an insight and an inspiration that you might not find on your own. If you visit the Scratch web site at http://scratch.mit.edu, you can browse community projects by Newest Projects, Featured Projects, Top Remixed Lately, Surprise Projects, Top Loved Lately, Top Downloaded Lately, and Top Viewed Lately.

To view the Scratch projects on a web page, you need a Java Runtime environment installed.

Take some time and click through several projects so you get a broad sampling. As you view the work of others, stop thinking like a user and start thinking like a designer and a programmer. When you find something you like, ask yourself, “How does that work?” Then try to visualize how you might build the same thing. This exercise gets easier as you gain more experience.

Time for action – create an account

In order to download projects to our local computer, we need to create an account.

1. From the Scratch home page, click the Signup link to create an account or go to http://scratch.mit.edu/signup.
2. Enter all required information in the Create an account form.
3. Click the sign up button to create the account.
4. Read the terms of use at http://scratch.wik.is/Terms_of_use. It’s a link in the page footer.
5. Welcome to the Scratch community.

What just happened?

We created an account at the Scratch web site. We can share our projects, but for now, we need an account so that we can download a project.

Abide by the terms of use

It’s important that we take a few moments to read the terms of use policy so that we know what the community expects from us. Directly from Scratch’s terms of use, the major points are:

• Be respectful
• Offer constructive comments
• Give credit
• Help keep the site friendly

Time for action – download a project

Without further hesitation, find a project you like and download it:

1. Click the link to download the project.
2. When prompted by your web browser, save the project to your computer.
3. Next, open the project in Scratch. From the Scratch interface, click on the Open button.
4. In the Open Project dialog box, navigate your filesystem and open the project you just downloaded.

What just happened?

We found a project we liked, we downloaded it, and then we opened it. As you review the project code in the Scratch interface, you can begin to answer the question, “How does it work?” You did remember to think like a designer and not a user, right?

Now that you saw the code, are you surprised by what you saw? Don’t worry about whether or not you understand what it all means. You will.

Our mothers taught us to share, which brings us to the other implicit concept in this exercise. The Scratch community also encourages us to share, and each project on
the Scratch web site is available under a Creative Commons Attribution-Share Alike License.

Creative Commons

The Attribution-Share Alike license is simple in concept and practice. When you find an interesting project, feel free to download it and remix it to create something new. Then credit the original author. The project notes make a great place to credit the work of others. We can make several projects to share with the Scratch community, and hope that our work inspires someone else to create something new and unexpected.

For more information about Creative Commons licensing, visit www.creativecommons.org.

Have a go hero

Modify the project you just created in some way. If you’re not sure where to begin, try inputting different values into the blocks to see what happens.

There is no right way, just exploration.

Summary

This two-part article helped us feel comfortable working with Scratch by covering some basic concepts. Each Scratch project contains spriteswith costumes, scripts, blocks, and a stage with backgrounds.

In this article, 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, forever loops to keep the sprite moving, and broadcast messages to coordinate the actions of multiple sprites.

We finished the article by sampling and remixing projects from Scratch’s sample projects and from the Scratch web site. We also discovered that Scratch promotes sharing as a way to learn and encourage ideas.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book

This Scratch tutorial is the first half of chapter 3 from the book, Scratch 1.4: Beginner’s Guide. The tutorial introduces Scratch programming and the Scratch interface.

The anticipation of learning a new programming
language can sometimes leave us frozen on the starting line, not
knowing what to expect or where to start. In this two-part article, we will:

• Take a tour of the Scratch interface
• Create a couple of sample projects
• Learn some basic Scratch programming concepts
• Get our minds racing

Our specific objectives include:

• Learning how to work with Scratch
• Learning basic Scratch programming commands
• Finding inspiration to fuel our creativity

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
• Stage

Let’s see if we can get our cat moving:

1. In the blocks palette, click on the Looks button.
2. Drag the switch to costume block onto the scripts area.
3. Now, in the blocks palette, click on the Control button.
4. 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.

   

5. In the scripts area, click on the Costumes tab to display the sprite’s costumes.

   

6. Click on costume2 to change the sprite on the stage. Now, click back on costume1 to change how the sprite displays on the stage.
7. Directly beneath the stage is a sprites list. The current list displays Sprite1 and Stage.
8. 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.
9. 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.

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.

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:

1. To save your new project, click the disk icon at the top of the Scratch window or click File | Save As.
2. A Save Project dialog box opens and asks you for a location and a New Filename.
3. 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.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book

We will continue working with our script from the previous example:

1. From the blocks palette, select Motion.
2. 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:

   

3. 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.

4. 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.
5. Double-click on the script again.
6. From the motion palette, drag the change y by block and add it to the end of your script.
7. Change the value in the change y by block to a negative number, such as -30.
8. 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 moveddown.

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.

Double-click control

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.

1. 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.
2. Double-click the stack of blocks and watch the cat disappear from the stage.
3. 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.
4. 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:

1. Click on the scissors icon located on the toolbar above the stage to activate the scissors tool.

   

2. 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.

   

3. Similarly, delete the change y by block.
4. 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.
5. 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.
6. 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.

7. If the cat stopped moving, double-click the script again. It should be running upside down!
   
8. 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.

9. 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.

Summary

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.

Learn to program while creating interactive stories, games, and multimedia projects using Scratch Create interactive stories, games, and multimedia projects that you can reuse in your own classroom Learn computer programming basics – no computer science degree required Connect with the Scratch community for inspiration, advice, and collaboration Provides hands-on projects that help you learn by experiment and play http://www.packtpub.com/scratch-1-3-beginners-guide/book