Scratch for Scratch for StorytellingStorytellingScratch for Scratch for StorytellingStorytelling

Dr. Ben SchaferDr. Ben SchaferDepartment of Computer ScienceDepartment of Computer Science

University of Northern IowaUniversity of Northern Iowa

Concept Summary• The layout of the Scratch stage• Basic sequencing of commands• The Motion and Pen menus• The repeat command from the

Control menu

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!

CS4HS Summer 2010

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.

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.

CS4HS Summer 2010

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.

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.

CS4HS Summer 2010

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.

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