EDAD660 (2010)

Scratch is a great tool to develop small, interactive multimedia projects that can easily be embedded into your blog or website. To get started using Scratch, visit the Scratch website at http://scratch.mit.edu . Once there go ahead and download a copy of the software – Scratch is available for both Macs and PCs. You should also sign up for a free Scratch account – this will let you easily publish your creations to the online Scratch repository. Scratch lets you “embed” your games (just like Youtube and the other Web 2.0 tools we covered) so you can easily incorporate your project into your blog when you’re done.

Scratch Basics

When you first start up Scratch you’ll be presented with the following window. I’ve labeled each part of the window – I’ll be referring to these names throughout the tutorial.

In the stage you should see a small orange cat. His name is Scratch, and this is his world. Unfortunately he doesn’t do anything yet. We’re going to start off by giving Scratch some actions, also known as a “script.”

You should notice that the left side of the screen is filled with colored puzzle pieces. These are actions -we can snap together multiple actions in order to write a “script” that Scratch will follow. Let’s write a script to tell Scratch to move to the right when we hit the right arrow key.

1. Click on the Control button in the Action Library. A new set of puzzle pieces will appear
2. Drag the second puzzle piece (”When space key is pressed”) and drag it into the Scripts panel

   

   figure 1

3. Use the dropdown in this puzzle piece and change it’s value to “right arrow”
4. Next we need to tell Scratch what to do when the right arrow is pressed. Click on the Motion button in the Action Library and find “change x by 10″. Snap this puzzle piece onto the bottom of the “when right arrow key pressed”

   

   figure 2

5. Hit the right arrow key on your keyboard. Scratch should move to the right!
6. Repeat this process for the left arrow key. You can drag more puzzle pieces into the window – pieces don’t necessarily need to be connected to one another. Make sure that Scratch moves by -10 instead of +10 when going left! Here’s what the screen should look like.

   

   figure 3

7. If you want Scratch to be able to move up and down you can repeat the process with one important difference – you need to change Scratch’s Y position instead of his X position when moving up and down.

   

   figure 4

8. You might notice that Scratch doesn’t face in the right direction when moving around the screen. We can fix this by creating different “costumes” for Scratch. Click on the Costume tab – you should see a panel like this:

   

   figure 5

9. Let’s create a costume for each of Scratch’s directions. We already have one in which he is facing to the right so we need 3 more. Click Copy 3 times next to costume1. Rename each costume so that it reflects the direction we will be working with.

   

   figure 6

10. Click Edit next to the “Left” Costume. Click the “Flip Horizontal” button to flip Scratch around.

    

    figure 7

11. Click OK to go back to the costume view. Now Click the Script tab to go back to our script view. We need to tell Scratch to change his costume when he moves in a particular direction. Click on the Looks button in the Action Library and drag out the “switch to costume” puzzle piece onto the script that makes Scratch move to the right. Set the puzzle piece so that it changes to the “Right” costume.

    

    figure 8

12. Congratulations! Scratch should now change direction!

Next we’re going to give Scratch a friend to play with. Every character that exists in your game is considered a Sprite – you can add new sprites by clicking the tools beneath the stage. Let’s go ahead and create our second sprite.

1. Click on the “choose a new sprite from file” button.

   

   figure 9

2. Go into the “Things” folder and select the Banana sprite. You should now see your second sprite on the stage.

   

   figure 10

3. Click on the banana and use the “Sprite Name” text box to rename the sprite – call it ‘Banana’

   

   figure 11

4. Now we’re going to tell Scratch to do something when he comes in contact with the Banana sprite. We’re going to need to write a new script for Scratch that does the following:
   • Continually check to see if Scratch is hitting the banana
   • If so, have Scratch say “Yum!”
   • If not, have Scratch say nothing
5. Click back onto Scratch so that his movement scripts are showing. Click on the Control button and drag out the “When Flag is Pressed” puzzle piece. Also drag out the “forever” and “if / else” puzzle pieces and arrange them like so:

   

   figure 12

6. This script says “When the Flag button (AKA the game’s ‘Start Button’) is pressed I should continually (forever) ask myself a question. If the answer to that question is true, I should do something. If it isn’t true, I should do something else.” Let’s fill in the pieces. Click on the “Sensing” and drag the “touching” puzzle piece out – snap it into the diamond shaped block next to the word “if” and change the drop down so that it says “Banana”

   

   figure 13

7. So now we have our question – “If I’m touching the banana sprite” – next we have to tell Scratch to do something if that is a true statement. Click on the “Looks” menu and drag out the “Say” puzzle piece. Drag it under the word “if” and snap it in place. Change the text to something more appropriate (”Yum!”)

   

   figure 14

8. If Scratch isn’t touching the banana we want him to say nothing. Drag another copy of the “say” puzzle piece out and snap it into the “else” position. Erase the message so that Scratch says nothing when he’s not touching the banana.

   

   figure 15

9. Click on the flag button and try out your game. Scratch should say “Yum!” when he’s touching the banana and nothing when he’s not.