Scratch for
Storytelling
Dr. Ben Schafer
Department of Computer Science
University of Northern Iowa
Recall from this
morning…
• “Scratch is a free programmable
toolkit that enables kids to create
their own games, animated stories,
and interactive art”
This afternoon’s focus
• “Scratch is a free programmable
toolkit that enables kids to create
their own games, animated stories,
and interactive art”
Choose a different Sprite!
• While the cat is a good first step, he
isn’t always the character we want to
work with
• You can choose a different sprite to
program from a library in Scratch, or
you can draw your own!
Choose Your Sprite!
• To choose a sprite
from the Scratch
library, click on the
Folder with a Star
icon. When you
hover your mouse
over it, it will say
“Choose new sprite
from file”.
Choose Your Sprite!
Open the folders of the
different categories of
sprites. (you may use
those loaded with
Scratch or any standard
image file).
Choose one that you’d like
to experiment with by
double clicking on it.
Choose Your Sprite!
You can have more
than one sprite in
your animation!
For this demo I am
going to load “Dan5”
and “Marissa”
Choose Your Sprite!
• Once you have the sprites
that you’d like to program,
you can delete the orange
cat sprite by clicking the
scissor icon and clicking on
the cat!
• Make sure that you click on
the arrow icon before you
do anything else –
otherwise, you’ll delete
something that you really
wanted!
Choose Your Sprite!
• You can also right
click on the icon to
delete that sprite
Resize Your Sprite!
• You can make your sprite larger or
smaller by using the “grow sprite” or
“shrink sprite” icons.
• You click on one of these icons, then
click on your sprite until it is the size
you’d like.
Naming your sprites!
• Scratch uses the name sprite# by
default
• To make things more helpful we
normally want to assign our sprites
meaningful names.
• You do that with the text box above
the sprite’s script area.
Choose Your Background!
• Right now, you have a plain, white
background – boring!
• You can also change your background
by choosing one from the Scratch
library or creating your own!
Choose Your Background!
• Click on the Stage:
• Now, select the
“Backgrounds” tab!
Change Your Background!
• You can experiment with creating or
importing your own background later,
but, for right now – choose one from
the library by selecting Import.
Change The Background!
From this screen, you can choose one of
the category folders, and select a
background that you like by double clicking
on it!
Change The Background!
I chose the “hall” background from the
“indoor” category.
CS4HS Summer 2010
Sidenote : While I didn’t
use it this morning…
Depending on how you want to introduce
Scratch you may want to consider using
the graph paper background.
CS4HS Summer 2010
Now, We’re Ready to
Program!
Changing a Sprite’s Looks
• Click on the Looks menu.
– Take a few minutes to look at your
options.
Changing a Sprite’s Looks
• Click on the Looks menu.
– Take a few minutes to look at your
options.
• The one we are interested in right
now is the “say .. for” block (notices,
“square-edged” blocks expect text).
Let’s consider the
following script
•
•
•
•
•
Marissa : Knock, Knock.
Dan : Who’s there?
Marissa : Dwayne.
Dan : Dwayne who?
Marissa : Dwayne the bathtub. I’m
dwowning.
How could we program
this?
• Divide the lines between each sprite
• Sequence them together
What is the problem?
• The “actors” talk over the top of
each other
– We didn’t think this through carefully.
Let’s consider the
following script
•
•
•
•
•
Marissa : Knock, Knock. (but Dan waits)
Dan : Who’s there? (but Marissa waits)
Marissa : Dwayne. (…)
Dan : Dwayne who? (…)
Marissa : Dwayne the bathtub. I’m
dwowning. (…)
What is the solution?
• Use the “wait” block from the control
menu!
What is the solution?
Changing a Sprite’s Looks
• Recall the Looks menu.
– One of the options under here was
changing a costume
– Let’s improve the animation with some
costumes.
Changing a Sprite’s Looks
•
•
•
•
Select the Dan Sprite
Select the “Costumes” tab
Select the import button
Navigate and select “Dan4” under the
“people” folder.
– Notice that Scratch gives the costumes a
different name from the “image” name
– Rename this costume “thinking”
Changing a Sprite’s Looks
• Let’s have Dan “think” for two seconds
before saying Dwayne who?
• This means:
–
–
–
–
Changing the costume at the right time
Waiting two seconds
Changing back to his original costume
(It also means having Marissa wait longer since
Dan’s turn takes longer).
Changing a Sprite’s Looks
Another option for
coordination
• The last technique we used involved
counting (very carefully) how long we
expected things to take and then
having sprites wait for a set amount
of time.
Another option for
coordination
• But what happens when
– there are large sets of
collaborating sprites (the count is
complicated)?
– the waiting depends on something
specific happening (the count is
impossible to determine)?
broadcast-ing messages
between sprites
• Scratch allows sprites to listen for
messages from other sprites.
• When one sprite wants to signal the
others it uses broadcast to send a
message.
Under Marissa’s script
• Select the control
menu from script
• Drag out the
broadcast block
• Select the arrow in
the text box
• Select “new”
• Give the message
name as
“playsounds”
Sound!
• Now, let’s add some sound to our
animation!
• There are many different ways to get
sound in your animation.
• The first way we’re going to experiment
with is by importing a sound from the
Scratch sound library.
Importing Sound From The
Scratch Sound Library
• Click on the sprite you want to have
sound
• In this example, let’s actually add it
to the stage
• Click on the Sounds tab and select
Import.
CS4HS Summer 2010
Scratch Sound Library
• You will see different categories of
sounds that you can use in your
animation that are available for you
in the Scratch library.
Inserting Sound
• Once you find a sound that you like,
select it and click on OK.
– (I selected “laugh-female” under
“human” AND “gong” under “percussion”
• You will see the sound you just
selected show up under the Sound
tab.
CS4HS Summer 2010
Play Your Sound
• If you click on the “Play” button, you
can preview your sound.
Adding The Sound To
Your Animation
• Now, you’re ready to add the sound
to your animation!
• Click on the Script tab.
• Select the sprite you want to have
sound.
• Now select the Sound button.
Adding Sound
• Now, select one of the blocks that says,
“play sound…”
• Select your sound from the drop-down
menu by clicking on the triangle next to
“pop”.
Under the Stage’s script
• Select the control
menu from script
• Drag out the When
I receive block
• Select the arrow in
the text box
• Select the message
named “playsounds”
• Add in the two
sounds
Concept Summary
• Creating new sprites
• Changing backgrounds and costumes
• Sequencing and coordinating actions
between multiple sprites.
• The Looks and Sounds menus
• The broadcast command from the
Control menu