SCRATCH TUTORIAL

INTRODUCTION
Scratch is a simple environment designed by the Kindergarden Lifelong Learning Group
at MIT to introduce some basic programming concepts in a fun and interactive manner.
In Scratch, sprites (objects) are manipulated on the stage (background) using various
scripts (small program segments). Each sprite has its own set of scripts to control its
behaviors and how it interacts with other sprites and events. Programming consists of
snapping together individual blocks of preexisting actions to create a script. A program
can be as simple as a single block or consist of multiple blocks stacked together that
will run as a unit.

STARTING SCRATCH
To start Scratch, click on ‘Start’ > ‘All Programs’ > ‘Scratch’ > ‘Scratch’ or follow the
instructions given by your Lab Instructor for your lab.

BASIC INTERFACE
When Scratch starts up, you will see a screen similar to the one below. The different
areas have been labeled for you and will be explained in more detail next.

Page 1
MENU: This is how you can create a ‘New’ project, ‘Open’ or ‘Save’ an existing
project, ‘Save (a new project) as’ whatever name you choose, ‘Undo’ a
previous action, and obtain ‘Help’.

BLOCK DESCRIPTIONS: The block description area lists the eight categories of blocks
including , , , ,
, , , and . The block
categories are all color coded so when you see a block of a specific color,
you can quickly determine which category it came from.

BLOCKS PALETTE: This area shows all of the blocks available to you for use in your
programming. Note that the blocks palette will change depending upon
the current block category. When you select a new block category, the
blocks palette will change to reflect the new options available.

CURRENT SPRITE INFORMATION: Here you will find the name and picture of the
current sprite together with its x-y position, direction, and rotation style.

TABS: These tabs allow you to both see and change the current sprite’s scripts,
costumes, and sounds. The scripts tab shows you any scripts that
currently exist as well as to develop new scripts pertaining to the current
sprite. The costumes tab allows you to create (from scratch or from a file),
edit, or copy a costume. A costume is the visual image of the sprite on-
screen. Sprites can have multiple costumes and use scripts to change
between them. The sounds tab displays the current sprite’s sounds.

SCRIPTS AREA: This is where you create and view the scripts pertaining to the
current sprite.

STAGE: The stage is where all of the action takes place. The stage is 480 units
wide by 360 units tall and the center of the stage is at x-y coordinate (0,
0). This means the lower left is at (-240, -180), the upper left is at (-240,
180), the upper right is at (240, 180), and the lower right at (240, -180).

TOOLBAR: A number of tools exist for your use. The arrow is the default selection
and it allows you to pick up and move sprites and blocks of code around.
There are also options for you to duplicate and delete items as well as
grow and shrink your sprite.

GREEN FLAG / RED STOP: Typically you click on the Green Flag to start your main
program(s) and the Red Stop sign to end them.

PRESENTATION MODE: This provides a full-screen view of the stage. To exit, use the
‘Esc’ key.

Page 2
NEW SPRITE BUTTONS: Using these buttons, you can paint a new sprite, choose a
new sprite from a file, or get a surprise (random) sprite.

SPRITE LIST: On the left, you will see a thumbnail for the stage. Clicking on this
thumbnail changes the ‘Current Sprite Information’ area to reflect
the properties of the stage. Stages can still have scripts and sounds.
However, to change the appearance of the stage, you would select a
different ‘Background’ as opposed to ‘Costume’. On the right, you will see
thumbnails of all of the sprites in the project together with the sprite’s
name, amount of costumes, and amount of scripts. You can easily change
the current sprite by clicking on a different one. When you do this, the
‘Current Sprite Information’ area together with the ‘Scripts area’ are
updated too

PART 1: LEARNING TO SCRATCH

The best way to learn Scratch is through experimentation. As it is an interactive
environment, feel free to stop and experiment as you work through this tutorial.

WRITING SIMPLE SCRIPTS

To create a script, we simply drag a block from the Blocks Palette onto the Scripts Area. To
run it, we can double-click it and observe what happens on the stage. Let’s try…

At the moment, our current sprite is Sprite1 (the cat). By default, he is located in the
center of the screen. You can drag him anywhere on screen that you wish at any time.

Basic movement: Let’s make him move 10 steps forward by selecting

from the Blocks Palette and dragging it onto the Scripts Area. When you double-
click the block, you should observe the cat move 10 steps to the right. You can
double click the block as many times as you wish. The cat will continue to move.

Editing a text field: You can edit the white text field portion of the block by clicking on
the ‘10’ and changing it to another number like ‘-10’. Double click it and see what
happens. Now change it to ‘100’ and observe the difference.

Help: To find out what a block of code does, simply right-click on the block and select
‘Help’ from the pop-up menu. Give it a try!

EXPANDING A SCRIPT
To expand the script, simply snap a second block to the first. Scripts are executed from
the top to the bottom so you need to add the block accordingly. If you want the new
block to execute first, add it on top of the existing block. Otherwise, add it below. As
you drag a block into the Scripts Area, a white line will indicate where you can properly
join the new block with the existing script structure. When you are ready, you can
double click anywhere on the new script to execute it.

Page 3
Turning: Snap a the block underneath the current block. Try changing
‘15’ to ‘90’. If you run this new script a few times, you can see your sprite
moving around. And that’s just the beginning!

REARRANGING A SCRIPT
To move a stack of blocks around, select the top block first and then drag it where you
wish. To split a stack, click on a block within the stack and pull it out. All blocks
underneath it will come too. You can continue to split the stack and move blocks around
to create a new script. Alternately, you can right-click on a block and ‘delete’ it if it is no
longer useful or you can choose to ‘duplicate’ it if you want an extra copy. As well,
‘Undo’ can be found in the Menu along the top if you need it.

Duplicating: Right-click on your current script and duplicate it

three times so you have a total of four copies. You may
need to move blocks around. When finished, your script
should look like Figure 1a. Try it!
Note: If it doesn’t seem like Sprite1 is really moving or the
movement is only a flash, you can click on the

category and add in some

blocks to pause after movements as appropriate.
Figure 1a

Repeating: Instead of explicitly writing the steps four times,

let’s use a loop instead. From the

category, drag the block into the scripts area

and change it to repeat only 4 times. Then move one
pair of the move / turn blocks INSIDE of the repeat block
Figure 1b
and add a so it looks like Figure 1b. This
way, you use fewer blocks to perform the same task.

Deleting: Right-click on your Figure 1a script and delete it.

RUNNING MULTIPLE SCRIPTS

It is typical for each sprite to have multiple scripts giving it access to a range of
behaviors. Each script will be in the Scripts Area and can be run by double-clicking.

Reposition: Make a new script by dragging the block into the Scripts
Area. When you run the new script, the sprite will reposition itself in the center of
the screen. You can practice moving to other locations by changing the text field
numbers.

Page 4
Using the pen: In the category, you will find

options to write with a pen. Use to begin

writing and to stop. You can also use
to change the color of the pen.
There are other options to explore as well. Try
modifying your script to look like Figure 1c. You can
practice moving your sprite to new locations, double- Figure 1c
clicking the script, and then observing what happens.
When finished, snap a block on top of the . Double-click
it to remove the lines and move the sprite to center stage.

CONTROLLING SCRIPT EXECUTION

Double clicking a script causes it to execute but can become cumbersome. An easier
way is to set the script up to execute when a certain event occurs like the green flag
being clicked, a key being pressed, the sprite being clicked, or something else. When
the green flag is clicked, the “main” script for each sprite begins running. Other events
will trigger other scripts to run as appropriate. This gives your sprite access to a range
of behaviors in different circumstances.

Executing when clicked: Snap a block on top of the script from

Figure 1c. Now, when Sprite1 is clicked, it should create a square. Try it!

Executing when the green flag is clicked: Snap a block on top

of the script and then press the green flag. If nothing appears to
happen, click Sprite1 first and then press the green flag. To stop the script
execution, press the red stop sign when finished.

CLEANING UP SCRIPTS
If you right -click on the Scripts Area and select ‘clean up’ from the menu, Scratch
will tidy up the scripts that you’ve developed.

PART 2: HAVING FUN WITH SCRATCH

Now that you have some of the basics, it’s time to start exploring some of what you
can do in Scratch. Select ‘New’ from the Menu to start a new project.

Page 5
CHANGING THE BACKGROUND
1. Select the Stage thumbnail
from the Sprite List.
2. Now choose Backgrounds from
the Tabs area. You should see
something similar to Figure 2.
You can either a
background yourself, a
background from a file, an Figure 2a
existing background, or a
background (useful to do before editing).
3. Select Import and find a background you like in one of the existing files (such as
‘Outdoors’ > ‘brick-wall1’). Click ‘OK’ when ready.

4. Since you no longer need ‘background1’, you can click on the to delete it.
You should now have an interesting background!

SPRITE MANIPULATION: MAIN SPRITE

There are three options for introducing a new sprite:
(1) Design one yourself using the Paint option within
Scratch, (2) Open up a pre-existing one from a file, or
(3) let Scratch pick a random sprite for you.

Deleting a sprite: Click on the thumbnail of Sprite1 from the Sprite List to select it,
right-click the thumbnail, and select the ‘delete’ option.

Making a new sprite: Select the ‘Choose new sprite from file’ option from the New
Sprite Buttons area. Choose ‘Animals’ > ‘dog2-b’ to obtain a dog.

Adding a costume: Select the Costumes tab for Sprite1 (our dog). Import ‘Animals’
> ‘dog2-c’. Sprite1 has two possible ‘outfits’ to wear.

Animated movement: Costumes are used to animate objects and we want our dog to
appear to walk. We will allow the dog to respond to right and left arrow key
movements. The costume will switch each time either arrow key is pressed to create
the illusion of movement. We should also ensure the dog starts somewhere on the
sidewalk pointing in the right direction and is resized each time we start. Create the
3 scripts you see in Figure 2b. Experiment using the ‘wait’ block, changing the ‘wait’
time, and omitting the block to see what happens.

Note: The purple blocks are found in the category.

Page 6
 When the green flag is clicked
Face towards the right
Reduce size to 60% of original
Move to a position on the sidewalk
When the right arrow key is pressed
Face towards the right
Move slightly forward
Change to the next costume
Pause slightly

Identical to ‘right arrow’ key script

EXCEPT faces towards the left

Figure 2b

Hint: Select the ‘only face left-right’ rotation

style (middle option) in the Current
Sprite Information area to make the
movement more realistic.

SPRITE MANIPULATION: SECONDARY SPRITE

We can now take our dog for a walk. Let’s give him something to play with …

Making a new sprite: Select the ‘Choose new sprite from file’ option from the New
Sprite Buttons area. Choose ‘Things’ > ‘basketball’ to obtain a basketball.
Initializing a sprite: We want to locate the ball near the dog to attract his interest. It
should also be a little smaller. Create the script in Figure 2c.
Bouncing: It would be interesting if the ball could bounce. Create the script in Figure
2d. For now, when we click on the ball, it should bounce. Try it and see …

Figure 2c Figure 2d

Page 7
 The basketball acts more like a ping pong ball bouncing only back and forth. A
real ball would rotate as it moves around. To simulate this action, add the block
below the block. Observe what happens …

Now the problem is that in only rotating one direction, we don’t simulate gravity.
Our ball bounces all over the stage. We need to rotate in different directions
depending on which direction the ball is going.

CONDITIONAL DECISION MAKING STATEMENTS

In order to make a decision about what should be done, we need to use
an if-else statement. If some Boolean condition (true or false question) is
true, then we need to take a specific course; otherwise, we need to take
an alternative course of action. To form a Boolean condition, we can
choose from the existing Boolean conditions (such as or
from the category) or create a new one (using a
template such as from the category). Notice that these blocks have
pointed ends and will only fit inside other blocks whose shape matches their own.

There are some preexisting reporters available to you that report different numeric
values such as and . When you click on the check box, a monitor
will appear on stage and show you the numeric value of this reporter. If you double-click the
monitor, you can change its appearance. Monitors are updated automatically as the values
they hold change. These reporters have rounded edges and

can be used inside other blocks with round holes (such as ).

Using monitors: Click on and observe the monitor on the stage. Try
double-clicking the monitor to change its appearance. When you click on the
ball, you can watch the monitor change. Click to close it.

More bouncing: The values of range from -180

to +180 (360 degrees). If we use half of these values
to rotate right and the other half to rotate left, we will
have a more accurate simulation. Modify your script to
become that of Figure 2e. Try it and you can see that
it now looks more realistic. But since we want our dog
to play with the ball, we need the dog to set our ball in
motion. We need our two sprites to interact.

Figure 2e

Page 8
SPRITE INTERACTION
In order for our sprites to interact, we need a means through which they can
communicate. This typically involves touching. When one sprite touches another, an

event occurs. We can capture this using a block to send a message

and a block to receive the message. The message sent can be

named whatever you wish. The only requirement is that the message sent and received
must be identical.

Broadcasting: Make Sprite1 (our dog) the current sprite by clicking on its thumbnail in
the Sprite List. When we happen to touch the ball, we want to send a message
indicating that we’re touching the ball. Since our dog gets excited when this
happens, he’ll say “Woof!”. Modify the initial script from Figure 2b into Figure 2f.
Test it and see what happens.

Figure 2f Figure 2g

The problem is that if Sprite1 is not touching Sprite2 when the green flag is
touched, the message is not sent. We need to keep checking over and over so
that once the dog touches the ball, the message will be sent. Modify your script
to become that of Figure 2g and try it again. Your dog now realizes when he
touches the ball. We need to set the ball up to react when it is touched.

Receiving a broadcast: Make Sprite2 (our ball) the current sprite by clicking on its

thumbnail in the Sprite List. Change into

keeping the rest of the script unchanged. When you try

it now, the ball should react to the dog.

Page 9
Stopping the script: If you watch the ball bounce, you
will notice that every time it touches the dog, the
dog barks. Since the ball is now bouncing on the
road, it is not truly touching the dog and so the dog
should ignore it. Make Sprite1 (our dog) the current

sprite and snap a underneath the

to create Figure 2h. Figure 2h

If you try it now, it works as expected. You can experiment further to see what

happens if you replace the with . Change it back to

when finished.

VISUAL ENHANCEMENT
There are lots of creative ways to visually enhance the
scene. We can have the ball change colors or leave a
trail as it bounces. We can make this trail change colors
or even size. Figure 2i illustrates for you how to
accomplish these outcomes.

Try experimenting with some of the drop down menus

for different effects. For example, you could try “whirl” in

place of “color” in the block .

You could also add from the

category (although this may not work on all

computers). Use your imagination!

There are also some sprites that already have scripts

ready to use. For example, select the ‘Choose new
sprite from file’ option from the New Sprite Buttons area
and choose ‘Things’ > ‘Drawing Pencil’ to obtain a
pencil. Once you’ve clicked on the green flag to start the
script, you can click and drag your mouse anywhere on
stage to actually write with the pencil.

Don’t forget that you can save your files to your P: drive Figure 2i
if you want to. Have fun!
References
1. Scratch Reference Guide:http://scratch.mit.edu/files/ScratchReferenceGuide.pdf
2. Getting Started Guide:http://scratch.mit.edu/files/ScratchGettingStarted.pdf
3. http://scratch.mit.edu/howto

Page 10