SO FAR, YOU’VE been using Scratch’s built-in blocks and they’re great, but Scratch also lets you make your own blocks that you can personalize and customize to your particular needs. In this adventure, you use custom blocks and a handy tool called the Backpack to put on a fashion show!

Making Your Own Blocks

If you can dream it up, you can probably create it by using Scratch’s built-in blocks. But, sometimes, your programs can get pretty complicated, with many different blocks all put together in a very precise way.

When that happens, a great way to stay organized and make programming easier is to create your own custom blocks.

Let’s take another look at the arrow key sprite control script that you created in Adventure 4, which is shown in Figure 9-1.

That’s a lot of blocks to just make a sprite move around when you press the arrow keys. Wouldn’t it be great if there were a block like the one shown in Figure 9-2 that you could use to do the same thing as all of the blocks in Figure 9-1?

Well, there can be, and you can make it yourself! We show you how to create custom blocks in the next section.

Splitting Programs into Custom Blocks

You’ve learned about and used a lot of different blocks so far, in each of the different categories in the Block Palette. There’s one very special category of the Block Palette where you can create an unlimited number of custom blocks. This is called the More Blocks Palette. To make your first custom block, follow these steps.

1. Select File  ⇒  New from the top toolbar to start a new project.

2. Click the More Blocks category in the Block Palette.

   You see two buttons in the More Blocks Block Palette, as shown in Figure 9-3.

3. Click Make a Block in the More Blocks Block Palette.

   The New Block pop-up window opens, as shown in Figure 9-4.

4. Enter Draw Circle into the text area in the New Block pop-up window, as shown in Figure 9-5.

5. Click OK to create your new block.

   A new stack block with the name Draw Circle appears in the More Blocks Block Palette, and a hat block named define Draw Circle appears in the Scripts Area. Both of these are shown in Figure 9-6.

Next you need to define what the Draw Circle block will do. Everything under the custom block’s hat block will run every time you use the custom stack block.

Follow these steps to define the Draw Circle block and make it actually draw a circle.

1. Drag a pen down block from the Pen Block Palette to the Scripts Area and snap it to the define Draw Circle block.
2. Drag a repeat () block from the Control Block Palette and snap it to the bottom of the pen down block.
3. Change the value in the repeat () block to 180.
4. Drag a move () steps block from the Motion Block Palette and snap it inside the repeat () block.
5. Change the value in the move () steps block to 1.
6. Drag a turn clockwise () degrees block from the Motion Block Palette and snap it to the bottom of the move () steps block.

7. Change the value in the turn clockwise () degrees block to 2.

   Your define Draw Circle block script should now look like Figure 9-7.

8. Drag a Draw Circle custom block from the More Blocks Block Palette to the Scripts Area.

9. Double-click the Draw Circle block in the Scripts Area.

   Scratch the Cat moves and draws in a circle.

10. Use your mouse to drag Scratch the Cat to a different location on the Stage.

11. Double-click the Draw Circle block in the Scripts Area.

    Scratch the Cat draws another circle, starting in the new location.

Changing Custom Blocks

Your new Draw Circle block is pretty awesome. Anywhere where your sprite is on the Stage, when the Draw Circle block runs, it causes the sprite to draw a circle.

But it can only draw one size of circle, in one color. Wouldn’t it be great if you could draw different circles with this same block? You can! All you need to do is modify your custom block so that you can tell it what kind of circle to draw. Here’s how:

1. Click the More Blocks Block Palette.

   You see your custom block, Draw Circle.

2. Right-click the Draw Circle block and select Edit, as shown in Figure 9-8.

   The Edit Block pop-up window opens, as shown in Figure 9-9.

3. Click the arrow next to Options in the Edit Block pop-up window.

   You see the custom block options, as shown in Figure 9-10.

4. Click the oval icon to the right of the words Add Number Input.

   An oval appears in the image of your custom block inside the pop-up window, as shown in Figure 9-11.

5. Change the name of the number input to size by typing inside the oval.
6. Click OK to save your block.

Take a look at your block definition in the Scripts Area now. You see that it has a new block called size next to the name of the block, as shown in Figure 9-12.

You also notice that your custom stack block now has a place in it for entering a number, as shown in Figure 9-13.

Try changing the number in the Draw Circle () block in your Scripts Area to a larger number, such as 4, and then double-click it.

Did you see what happened? No? That’s right! Nothing changed.

In order for the number in the Draw Circle () block to do anything, you need to use your new variable size inside of your script.

1. Click the size oval inside the define Draw Circle () hat block.

2. Drag the size oval to the move () steps block and snap it inside of the oval between move and steps.

   Your custom block definition should now look like Figure 9-14.

3. Change the value of the number input in the Draw Circle () stack block to 3 and double-click it.

   Scratch the Cat draws a larger circle on the Stage, as shown in Figure 9-15.

After you have a custom block, you can use that same custom block with any sprite by dragging the custom block definition onto the new sprite. Follow these steps to try it out:

1. Click Choose Sprite from Library in the Sprite Pane.

   The Sprite Library opens.

2. Select any sprite that you like and click OK to add it to your project.
3. Click Scratch the Cat in your Sprite Pane to view Scratch the Cat’s Scripts Area.
4. Click the define Draw Circle () hat block in the Scripts Area and drag it onto the image of your new sprite in the Sprite Pane.

5. Click your new sprite in the Sprite Pane.

   You see a copy of the define Draw Circle () block in the Scripts Area, and the Draw Circle block in the More Blocks Block Palette, as shown in Figure 9-16.

6. Drag a Draw Circle () block from the More Blocks Block Palette to the Scripts Area.

7. Double-click Draw Circle().

   Your new sprite draws a circle of the size that you specify in the number input.

Now you know how to share custom blocks between sprites in the same program. But, what if you want to share a custom block (or any script, for that matter) between two different projects?

That’s where Scratch’s Backpack comes in.

Borrowing Blocks with the Backpack

The Backpack in Scratch is an area where you can store custom blocks and scripts that you create in one program so you can use them in other programs. To access the Scratch Backpack, you need to be signed into your account. If you haven’t already created an account, please refer to Adventure 1 for more information.

While you’re working within Scratch, the Backpack is always waiting there at the bottom of the screen, as shown in Figure 9-17.

When you click the up arrow on the Backpack bar, the Backpack Pane expands to show a new blank area of the Scratch Project Editor, as shown in Figure 9-18.

Here’s how to use the Backpack to carry your Draw Circle () custom block, or any other custom block, with you into a new program.

1. Open the Scripts Area, if it’s not open already, by clicking the Scripts tab at the top of the Project Editor.

2. Click and drag your define Draw Circle () block definition from the Scripts Area into the Backpack.

   A copy of the define Draw Circle () block definition appears in the Backpack, as shown in Figure 9-19.

3. Select File  ⇒  New from the top menu bar to create a new program.

4. Click the up arrow to expand the Backpack Pane.

   You see the define Draw Circle () custom block definition inside your Backpack.

5. Drag the define Draw Circle () custom block definition from the Backpack and drop it into the Scripts Area in your new program.

6. Open the More Blocks Block Palette.

   You see your custom Draw Circle () block.

7. Drag a Draw Circle () block to the Scripts Area.
8. Double-click the Draw Circle () block in the Scripts Area to make your sprite draw a circle.

The Backpack and custom blocks are great tools for helping you to get more done with less coding—which is one of the most important skills for a programmer to learn!

Putting on a Fashion Show

Now it’s time to put together everything you’ve learned about custom blocks to organize a Scratch Fashion Show. In this program, sprites use a custom block to walk or dance toward the camera, showing off their different costumes on the way.

1. Select File  ⇒  New from the top toolbar to start a new project.
2. Name your project Fashion Show by typing into the text area above the Stage.
3. Click Choose Backdrop from Library in the Stage Sprite Pane.
4. When the Backdrop Library opens, find the backdrop named Clothing Store, select it, and add it to your project.
5. Click Scratch the Cat and go to her Scripts Area by clicking the Scripts tab, if necessary.
6. Open the More Blocks Block Palette.

7. Click the Make a Block button.

   The New Block pop-up window appears.

8. Name the new block Fashion Walk and click OK to close the New Block pop-up window and create the new block.
9. Drag a set size to () % block from the Looks Block Palette to the Scripts Area.
10. Set the value in the set size to ()% to 20.
11. Drag the Fashion Walk block from the More Blocks Block Palette to the Scripts Area.

12. Double-click the Fashion Walk block in the Scripts Area.

    Scratch the Cat shrinks down to 20% of her normal size.

13. Drag Scratch the Cat on the Stage to a place where it looks like she’s standing at the very back of the room, as shown in Figure 9-20.

14. Drag a go to x: () y: () block from the Motion Block Palette to the Scripts Area and snap it to the set size to ()% block.

    Because you just positioned Scratch the Cat, the block already contains the correct values for x and y.

15. Drag a show block from the Looks Block Palette to the Scripts Area and snap it to the bottom of the go to x: () y: () block.
16. Drag a repeat () block from the Control Block Palette and snap it to the bottom of the show block.
17. Change the value of the repeat () block to 20.
18. Drag a wait () secs block from the Control Block Palette and snap it inside the repeat () block.
19. Change the value in the wait () secs block to 0.1.
20. Drag a change size by () block from the Looks Block Palette and snap it to the bottom of the wait () secs block.
21. Set the value of the change size by () block to 5.
22. Drag a change y by () block from the Motion Block Palette and snap it to the bottom of the change size by () block.
23. Change the value of the change y by () block to –5.
24. Drag a next costume block from the Looks Block Palette and snap it to the bottom of the change y by () block.
25. Drag a glide () secs to x: () y:() block to the Scripts Area and snap it to the bottom of the repeat () block.
26. Enter the values 2, 273, and –71 in the glide () secs to x: () y: () block.
27. Drag a hide block from the Looks Block Palette to the Scripts Area and snap it to the bottom of the glide () secs to x: () y: () block.

28. Drag a wait () secs block to the Scripts Area and snap it to the bottom of the hide script.

    Your Scripts Area should now look like Figure 9-21.

29. Double-click the Fashion Walk custom block on the Stage and watch as Scratch the Cat walks toward the camera and then glides off to the right!

Now you’re almost done! The next steps are to add several more sprites to the Stage and give them all the same Fashion Show custom block.

1. Click Choose Sprite from Library in the toolbar above the Sprite Pane.
2. When the Sprite Library opens, locate the sprite named Dan and add it to your project.
3. Repeat Steps 1 and 2 to add the sprite named Breakdancer1 to your project.
4. Click the Scratch the Cat sprite in the Sprite Pane to view Scratch the Cat’s Scripts Area.
5. Click the define Fashion Walk custom block definition hat block. Drag it to the Sprite Pane and drop it on the Dan sprite.
6. Drag the define Fashion Walk custom block definition to the Breakdancer1 sprite in the Sprite Pane.
7. Click each of the sprites to make sure that they all have the Fashion Walk custom block.
8. Click Scratch the Cat in the Sprite Pane.
9. Drag a when green flag clicked block from the Events Block Palette and snap it to the top of the Fashion Walk custom block, as shown in Figure 9-22.

10. Drag a broadcast () block from the Events Block Palette and snap it to the bottom of the Fashion Walk stack block.

    You use broadcast events to tell the other sprites to start their fashion walks.

11. Click the drop-down in the broadcast () block and choose New Message.
12. Set the new message to Dan.
13. Click the Dan sprite in the Sprite Pane to open its Scripts Area.
14. Drag a when green flag clicked block from the Events Block Palette to the Scripts Area.
15. Drag a hide block from the Looks Block Palette to the Scripts Area and snap it to the when green flag clicked block.
16. Drag a when I receive () block from the Events Block Palette and drop it in the Scripts Area.
17. Change the value in the when I receive () block to Dan.
18. Drag the Fashion Walk block from the More Blocks Block Palette and snap it to the when I receive () block.
19. Drag a broadcast () block from the Events Block Palette and snap it to the bottom of the Fashion Walk block.
20. Select New Message. from the broadcast () block and add a new message of Breakdancer1.

In the next steps, you make the break dancer walk!

1. Click Dan in the Sprite Pane to open the Scripts Area.
2. Drag the script starting with the when green flag clicked block and drop it onto the thumbnail of the Breakdancer1 sprite in the Sprite Pane.
3. Drag the script starting with when I receive () and drop it onto the thumbnail of the Breakdancer1 sprite in the Sprite Pane.

4. Click the thumbnail image of the Breakdancer1 sprite in the Sprite Pane.

   If the sprite’s scripts are overlapping, drag them to rearrange them in the Scripts Area.

5. Disconnect the broadcast () block from the bottom of the Fashion Walk custom block and drag it out of the Scripts Area.

   Because this is the last sprite to do its fashion walk, it doesn’t need to broadcast to any other sprites.

6. Change the value of the when I receive () block to Breakdancer1.
7. Click the Green Arrow and enjoy the show!

Further Adventures in Coding

Check out custom blocks created by other people that you can use in your own programs at the Block Library at http://blocklibrary.weebly.com/.

Achievement Unlocked: Custom Blocks