Scratch for Storytelling

1. Scratch for Storytelling Dr. Ben Schafer Department of Computer Science University of Northern Iowa

2. Recall from this morning… • “Scratch is a free programmable toolkit that enables kids to create their own games, animated stories, and interactive art”

3. This afternoon’s focus • “Scratch is a free programmable toolkit that enables kids to create their own games, animated stories, and interactive art”

4. 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!

5. 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”.

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

7. Choose Your Sprite! You can have more than one sprite in your animation! For this demo I am going to load “Dan5” and “Marissa”

8. 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!

9. Choose Your Sprite! You can also right click on the icon to delete that sprite

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

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

12. 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!

13. Choose Your Background! Click on the Stage: Now, select the “Backgrounds” tab!

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

15. 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!

16. Change The Background! I chose the “hall” background from the “indoor” category. CS4HS Summer 2010

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

18. Now, We’re Ready to Program!

19. Changing a Sprite’s Looks • Click on the Looks menu. • Take a few minutes to look at your options.

20. 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).

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

22. How could we program this? • Divide the lines between each sprite • Sequence them together

23. What is the problem? • The “actors” talk over the top of each other • We didn’t think this through carefully.

24. 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. (…)

25. What is the solution? • Use the “wait” block from the control menu!

26. What is the solution?

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

28. 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”

29. 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).

30. Changing a Sprite’s Looks

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

32. 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)?

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

34. 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”

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

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

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

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

39. Play Your Sound If you click on the “Play” button, you can preview your sound.

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

41. 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”.

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

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