Temple University



How to Create Computer Animations

Using SCRATCH

By Sally Kyvernitis, June 2009

Table of Contents

1. Overview of this tutorial 2

2. What is SCRATCH (where can I get it – for free)? 2

3. Open and run a SCRATCH project 3

4. Look at SCRATCH scripts 4

5. More about SCRATCH scripts 5

6. Copy a SCRATCH project – Exercise 6

7. Duplicate a sprite (add 2nd second ball) - Exercise 6

8. Rename a sprite & change it’s costume – Exercise 8

9. Make costume changes while the project is running – Exercise 9

10. Add sound – Exercise 10

11. Modify script (change starting position) - Exercise 11

12. Change the background – Exercise 11

13. Add new sprite (paint your own) – Exercise 12

14. Modify scripts again (make game end when a ball hits the floor) – Exercise 13

15. Change the ball speed – Exercise 14

16. Create a variable that will let the user change the speed – Exercise 15

17. Experiment with SCRATCH Error! Bookmark not defined.

18. SCRATCH Reference Cards 18

19. Show what you’ve learned 19

20. Share your project 20

If you would like to get an electronic copy of this (and other computer tutorials),

please visit

Overview of this tutorial

In this tutorial, you will learn about a new exciting computer language called SCRATCH which lets you animate your computer. To create a SCRATCH project, you first select a background and add characters (called “sprites”) to that background. Then, you tell your sprites what to do, for example when the program starts or when a certain key is pressed. You can tell your characters to move around, change their appearance, make sounds and much more.

You start out this tutorial by opening up a sample SCRATCH project – a simple game of ping pong. After running and examining how this program works, you copy this game and make certain changes to it (following step by step instructions). During this process, you will be learning about:

• How to make sprites move, change costumes, and make sounds.

• How to program the scripts that tell the sprites what to do (how to start a scripts, using variables, testing conditions, repeating blocks, how to stop scripts).

After you have modified your copy of the Pong game, you should have a good understanding about SCRATCH and how to use it. Then (on your own), you will study and modify open various projects that come with the SCRATCH program. From the SCRATCH MIT website, you will find and modify more interesting projects that others have posted. Finally, you will come up with an idea for your own SCRATCH project – something that ties in with the concepts you have been learning in camp. When you have finished your project, you can share it to the SCRATCH MIT website so that others may learn from you.

What is SCRATCH (where can I get it – for free)?

SCRATCH is a language that helps you write programs to animate your computer. Using SCRATCH, you can create computer games, animated stories, moving art, music/dance performances.

Scratch projects are made up of objects called sprites. You can make a sprite look however you want – by giving it a costume (you can import any image or draw your own in the Paint Editor). You can make sprites do things (like make sounds or react to other sprites) by dragging blocks together to form scripts. When you double-click on a script, all the blocks of the script run (from top to bottom) and you can see your sprite doing the things you told it to do.

• SCRATCH is free download available from MIT – you can install it from this URL:

• For a SCRATCH reference guide, click on this link then click on “Reference Guide”:



Open and run a SCRATCH project

To see what a SCRATCH Project can do, open up a sample like this:

• Click on Start – Programs – SCRATCH

• Click on Open, double click on the Games folder, then double click on “Pong 2”.

• Run the program by clicking on the green flag (in the upper right of the screen).

• Then in the Stage Area (in the upper right of the window), you should see a blue ball falling down. With your mouse, move the “paddle” (black line) so that it is under the ball. If you do, the ball will bounce off the paddle, but if you let the ball fall into the red (“lava”), the game stops. You can always just start the game again by clicking on the green flag. Once you feel understand how the game works, click on the red stop sign to stop the game (or just let the ball fall into the red).

• Take a moment to look at the different areas within the SCRATCH window:

o Stage Area (where your animations run),

o Sprites List (shows all the “sprites” in your project and the stage upon which they are animated),

o Scripts Area (shows the instructions you gave the selected sprite)

o Blocks Palette (shows all the different kind of instructions you can use to direct sprites).

o Notice also the “Mouse X” and “Mouse Y” indicators just under the Stage Area. These values change whenever you move your mouse. If you move your mouse to the upper left corner of the Stage Area, “Mouse X” should be about -240 and “Mouse Y” should be about 180. Move your mouse to the other three corners to see those mouse values.

[pic]

Look at SCRATCH scripts

If you look in the Sprites List (lower right of window), you will see the stage and the 2 “sprites” that are part of this project (a ball and a paddle). To see the scripts of an object, click on that object in the Sprites List and then look in the Scripts Area.

• If you click on the ball in the Sprites List, you will see (in the Scripts Area) the scripts of the “ball” object. These scripts are pretty easy to read and understand. As you can see, all scripts start when the green start flag is clicked (i.e., when the game starts) – and they all happen at the same time.

|[pic] | |

|Script of “ball” |This script says when the green flag is clicked, the ball should |

| |go to a position (mouse_x=13, mouse_y = 157), |

| |wait until it touches red (on the bottom of the stage), |

| |then, the game should stop. |

|[pic] | |

|Another Script of “ball” |This script says that when the green flag is clicked, |

| |the ball should check (forever – as long as the game is running) to |

| |see if the ball is touching the paddle. |

| |whenever the ball touches the paddle, the ball should play a sound |

| |(water drop), change direction (like a bounce), & then move forward. |

|[pic] | |

|Another Script |This script says that when the green flag is clicked, |

|of “ball” |the ball should check (forever – as long as the game is running) to see if the ball is on the edge |

| |(of the playing area) and if so, bounce off and move forward. |

• Click on the paddle and you will see only one script

|[pic] | |

|Paddle’s Only Script |This script says that when the green flag is clicked, |

| |the paddle should forever make its x position (left-right position) match the x position of the |

| |player’s mouse. |

• Click on the stage and you will see that the stage does not currently have any scripts.

More about SCRATCH scripts

|Block |What these blocks can do |Stack Blocks (Sample) |Reporters |

|Palette | | | |

|Control |Four “Hat” blocks (curved top) |[pic] |none |

|Start |can make a sprite (or the stage) |[pic] | |

|Blocks |begin running the stack of blocks below it. For |[pic] | |

| |example, |[pic] | |

| |when a key is pressed. | | |

|Motion |Position, direct, or |[pic] |[pic] |

| |move a sprite. | | |

|Looks |Make a sprite say things or change its costume or |[pic] |[pic] |

| |color/effects. | |[pic] |

|Sound |Play sound effects, |[pic] |[pic] |

| |play music. | |[pic] |

|Pen |Make a sprite draw on the stage |[pic] |none |

| |(pen color, pen down, pen up) | | |

| |–> use with motion blocks. | | |

|Sensing |What is value of something? |none |[pic] |

| |Is something is true? | | |

|Control |Run certain blocks |[pic] |none |

|Testing |only if something is true. | | |

| |(The IF block) | | |

|Variables |Create / delete numeric variables. |[pic] |Samples: [pic] |

| |Set/change their values. | | |

|Numbers |Do arithmetic, logic |none |[pic] |

| |(on values sensed &/or variables). | | |

|Control |Run blocks repeatedly. |[pic] |none |

|Repeating |(The REPEAT block) | | |

|Control |Stop running this or all script(s). |[pic] |none |

|Stopping | | | |

Copy a SCRATCH project – Exercise

Use the Save As button to save your own copy of the Pong Game. Save the project as “your name pong” (put your name in for “your own name”). Before clicking OK, put your name in for Project Author and change the description in “about this project”.[pic]

Duplicate a sprite (add 2nd second ball) - Exercise

Let’s make the game a little more interesting by adding a second ball. In the Sprites List, right click on the “ball” sprite and select “duplicate”. Then you should see a second ball (named “Sprite1”) in the Sprites List.

[pic]

When you click on this new sprite (in the Sprites List), you see that this new sprite has all the same scripts as the original “ball” sprite had. Run your game (by clicking on the green flag) and see how the game now works.

[pic]

Rename a sprite & change it’s costume – Exercise

Change the name of the new sprite (from “Sprite1”) to “ball2”, change its costume so it looks like a soccer ball, and change the size of the soccer ball. To rename the new sprite,

• Click on Sprite1 in the Sprites List.

• At the top of the Scripts Area (where you currently see the name “Sprite1”), type “ball2”.

|[pic] | |

| | |

| |To change the “costume” of ball2 |

| |make sure you are still clicked on ball2 (in the sprites pane), |

| |then click on the Costumes tab (in the scripts pane), |

| |click on the Import button, |

| |double click on the Things folder, then |

| |double click on “soccer1”. |

| |Click on the “X” icon next to the “spinningglobe” costume – to delete the |

| |old blue costume. |

| | |

Make ball2 smaller by clicking on the “shrink sprite” icon (above the Stage Area) then clicking on ball2 several times (in the Stage Area). When you like the size of the ball, click on the normal (arrow) icon – to stop the shrinking behavior.

[pic]

Make costume changes while the project is running – Exercise

It might be fun to make “ball” have 2 costumes and change those costumes while the project is running.

|[pic] | |

| | |

| | |

| |First, import two costumes for “ball”: |

| |click on “ball” in the Sprites List |

| |click on the “Costumes” tab in the Scripts Area |

| |Click on “Import” (in the Costumes tab of the Scripts Area of “ball”). |

| |Double click on the “Things” folder, then double click on “baseball1”. |

| |Import a second costume: click on import (Things folder should already be |

| |open), then double click on “basketball”. |

| |You can shrink or grow the size of the “ball” sprite (in the Stage Area) if|

| |you like (as you did in the previous step). |

| | |

When do you want the costume to change? If we put the “next costume” block inside the “forever if touching paddle” block, then the costume will change every time “ball” touches the paddle.

|[pic] | |

| |To make “ball” change costumes whenever it |

| |touches the “paddle”: |

| | |

| |Make sure “ball” is selected in the Sprites List.|

| |Click on the “Scripts” tab (of the Scripts Area) |

| |Click on the “Looks” button in the Blocks |

| |Palette. |

| |Slide the “next costume” block inside the |

| |“forever if touching paddle” block. |

Run the game again and make sure that “ball” changes costumes whenever it touches the paddle.

Add sound – Exercise

You may have noticed that ball2 (which now looks like a soccer ball) does not make a sound like the other (blue) “ball” when it hits the paddle. To troubleshoot this problem,

• Click on “ball” in the Sprites List and then look at the Scripts Area. Notice that there is a block that says to play a water_drop sound. Click the Sounds tab (in the Scripts Area) and note that “ball” has a water_drop sound.

• Now click on “ball2” in the Sprites List and note that there are no sounds in the sounds tab for “ball2”. This is the reason why ball2 makes no noise when it hits the paddle.

• To resolve this problem, import the water drop sound (click on import, double click on the effects folder, then double click on water_drop). While you are at it, import another sound, for example you could import the sound “Zoop” from the Electronic folder.

Now, change the sound that ball2 makes by modifying a block in the scripts pane.

• In the play_sound block, select “Zoop” (or the other sound you imported to ball2) from the pick list.

• Play the game again and test that both balls make the sounds you wanted.

|[pic] |[pic] |

Modify script (change starting position) - Exercise

Notice that when you start the game, the two balls seem to be on top of each other. If you look at the scripts for “ball” and “ball2”, you can see that they both have blocks that move them to position x:13, y:157. (This explains why both balls seem to be starting out “on top of each other”.) Improve the game by changing the initial position of “ball” (to something else). To do this,

• In the Script Area for “ball”, find the “go to x: __ y:__” block.

• Change the x value to something different, for example, x:-13 (a position to the left of the other ball).

[pic]

Run the game again and make sure that the two balls don’t start out in the same position (on top of each other).

Change the background – Exercise

To make the game more realistic and interesting, change the background to be a moon.

|[pic] | |

| | |

| | |

| | |

| |To change the background, |

| |Click on the stage in the Sprites List, |

| |click on the Backgrounds tab (in the Scripts Area), |

| |click on the Import button, |

| |double click on the Nature folder, then |

| |double click on “moon”. |

| | |

Now play the game again. Do you notice anything different (other than a different picture)? If so, how & why?

Add new sprite (paint your own) – Exercise

You may have noticed that the game now does not stop – this is because the stage’s background (now a moon picture) does not have any red for the balls to touch to stop the game. Add an object that will do what the red did – stop the game whenever a ball touches it. We’ll paint a new sprite for this. So,

• click on the “Paint new sprite” icon.

[pic]

• Then (in the Paint Editor), click on the “zoom out” icon (magnifier with minus sign) several times (so the drawing canvas does not scroll).

• Click on the black color, click on the line draw icon, and you can also select a brush size from the list.

• Using your mouse, draw a straight line all the way across the top of the drawing canvas.

• If you make a mistake, you can click the Undo button and try again. When you are done, click OK.

• (At the top of the Scripts Area), rename this new sprite “moonfloor” (enter the new name at the top of the scripts pane).

• In the stage pane, use the mouse to position your new sprite (moonfloor) to the very bottom of the stage.

[pic]

Modify scripts again (make game end when a ball hits the floor) – Exercise

To make the game end when a ball hits the bottom (the moonfloor you just made), you must modify a block in a “ball” script. Replace the “touching color red” condition to be “touching moonfloor”. To do this:

• Make sure you are clicked on “ball” in the Sprites List.

• Click on the “Sensing” button at the top of the Blocks Palette (because the “touching” block is found under the “Sensing” block palette).

• Drag the “touching color red” block from the Scripts Area and drop it into the Blocks Palette (just to get rid of it). Then the “wait until” block has an empty space where “touching color red” used to be.

• Slide the “touching” block from the Blocks Palette into that empty space.

• Then select “moonfloor” from the pick list in the “touching” block.

|Ball Script – Before |Ball Script – After |

|[pic] | |

| | |

| | |

| | |

| | |

| | |

| | |

| |[pic] |

• Run your game to test it – make sure the game stops when “ball” hits the moonfloor.

• Do the SAME THING for ball2 (the soccer ball): make the game stop when the soccer ball hits the moon floor.

Change the ball speed – Exercise

What blocks do you think controls the speed of “ball”?

[pic]

Yes, the blocks “move 5 steps” and “move 4 steps” control the speed of the ball. Change these – to be a little faster, for example, change them both to 7. Then test the program to see if the speed of “ball” did change. Did the speed of “ball2” (soccer ball) change any? Why or why not?

Create a variable that will let the user change the speed – Exercise

To let the user control their own speed, you must create a variable to hold the # of steps the ball should take.

|[pic] | |

| | |

| |Click on the stage object (in the sprites pane) |

| |Click on variables button at the top of the Blocks |

| |Palette |

| |Click on “make a variable” |

| |Enter a variable name (I entered “speed”), then |

| |click the OK button. |

| |Note that the “speed” variable shows up in the stage |

| |pane (you can hide this later, but for now it’s good |

| |to see it). |

You will need to add 3 scripts to the stage object: one to set the initial value of the variable “speed”, one to increase it (when the user presses the up_arrow key), and one to decrease it (when the user presses the down_arrow key). To do this:

• Click on the stage object (in the Sprites List)

• Click on the Control button at the top of the Blocks Palette

• Drag a “when [green flag] clicked” block to the Scripts Area.

• Draw two “when … key pressed” blocks to the scripts pane. For one of these, select “up_arrow” from the pick list and for the other, select “down_arrow”.

[pic]

Remember that each of these 3 scripts run independently of one another. For the first script (that starts with “when green-flag clicked”), you can set the initial value of speed to 4 (the same # of steps the ball originally moved). For the up_arrow script, increase the value of speed by one. For the down_arrow script, decrease the value of speed by one.

|[pic] |The stage should be selected. |

| |Click on the “Variables” Block Palette |

| |Drag a “set speed to” block under the “when green flag clicked”|

| |Set the initial value to 4. |

| |Drag a “change speed by” block under “when up_arrow pressed”. |

| |Set the value to 1. |

| |Drag a “change speed by” block under “when down_arrow pressed”.|

| |Set the value to -1. |

| |Test the first script by double clicking on “when green flag |

| |clicked” – you should see the value of speed change (in the |

| |Stage Area) to 4. |

| |Test the other two scripts (by double clicking on the top of |

| |these scripts) – and make sure the value of speed goes up and |

| |down. |

Run the program to see if you can control the speed with the arrow keys. If not, do you know why?

|[pic] | |

| |In the scripts for “ball”, you must drag |

| |“speed” from the Variables palette to both |

| |“move __ steps” blocks. |

| |Do the same for the “ball2” scripts so this |

| |sprite also is changed with the user presses |

| |the arrow keys. |

| |Test your program now – to see if you can |

| |control the speed with the arrow keys. |

Experiment with SCRATCH

Open, run, and look at the scripts for several other sample projects by clicking the Open button from SCRATCH.

[pic]

If you like any of these, click on “Save As” and think of minor changes you would like to make. Then try to make these changes. Remember to test after each little change (so, if you made a mistake, it is easier to figure out what changes made the mistake).

Try to come up with an idea for a SCRATCH project that ties in with what you learned in camp last week. You can also look at the simple example ideas in the next section “SCRATCH Reference Cards” to help you with this.

Here is a SCRATCH project that I wrote to go along with the ecology/sustainability theme of our camp. It’s called “Stop Pollution” and it is a modification of the Pong game that we studied in this tutorial:



Here’s another example of what can be done in SCRATCH. It’s called “Protect The Moon”.



For Advanced users:

If you want a Sprite costume or background that is not available, you can search the internet and save any picture that you like to:

C:\Program Files\Scratch\Media\Backgrounds or

C:\Program Files\Scratch\Media\Costumes

Costumes with a transparent background work best in SCRATCH. If you can’t find the costume you want with a transparent background, find one with a simple single color background. You can “Fill” this background color with the transparent color using the Fill button in SCRATCH’s Paint Editor.

You can find and save sounds to: C:\Program Files\Scratch\Media\Sounds

SCRATCH Reference Cards

From if you click on “Scratch Cards”, you’ll see these summary cards which you can print for reference. You can also take a look at the projects shown on the Scratch Cards.

|Change Color |Move to a Beat |Key Moves[pic] |

|[pic] |[pic] | |

|Say Something |Glide |Follow the Mouse |

|[pic] |[pic] |[pic] |

|Dance Twist |Interactive Whirl |Animate It |

|[pic] |[pic] |[pic] |

|Moving Animation |Surprise Button |Keep Score |

|[pic] |[pic] |[pic] |

Go to and look for projects that appeal to you. If you find one you like, download it (link is in upper right corner of web page).

Show what you’ve learned

a. What are the “Mouse X” and “Mouse Y” values for the following screen locations?

|Screen Location |Mouse X |Mouse Y |

|Middle of the stage pane | | |

|Upper left corner of stage pane | | |

|Upper right corner of the stage pane | | |

|Lower left corner of the stage pane | | |

|Lower right corner of the stage pane | | |

b. For the following questions, indicate the area on the SCRATCH screen.

|Question |What Area? |

|Where can you see everything about a sprite – its scripts, its costumes, its sounds? | |

|Where do you find blocks of logic that you can add to become part of a sprite’s | |

|script? | |

|Where can you see how your project runs? | |

|Where can you see a list of all the sprites in your project? | |

c. Tell which sample SCRATCH projects you changed and how you changed them.

d. What is your idea for creating a SCRATCH project that links to what you have learned in camp?

Background:

Sprites:

Animations:

Share your project

Once you have made a project that you would like to share with others, you can click on the Share button (at the top of the Scratch window). To do this, you need to create a login name and password (if you haven’t already done so – it’s free). Put some thought into the “tags”. This is how other people will be able to find your project on the Scratch MIT website. You can always find the projects you have shared by logging into the Scratch MIT website and clicking on “My Stuff”.

[pic]

-----------------------

Blocks Palette

Scripts Area

Stage

Area

Start game

Stop game

Sprite List

Current Mouse position

Shrink Sprite icon game

Normal icon (stop shrinking)

Select color

Zoom out

Draw Line

Scripts Area

Blocks Palette

Double click here to test this script

Slide “speed” in to replace the 4

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download