Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

2. Music and Block Making


In this screencast, you'll learn how to make a new block and make the music you selected play in your project. Watch this screencast to learn the steps involved, then try them on your own. First, get the music started by adding a “when flag clicked” and a “play sound until done” block to the Scripts tab of the stage.

In past club sessions, you started a project by adding blocks to your sprite, so this is a little different. Make sure you have the stage selected, and try the code you added.

Your song should start playing when the flag is clicked.

There are lots of blocks available in Scratch, but you can also make a block of your own and name it anything you like. This screencast will show you how to make a “grow” block that will change the size of a sprite. Add any sprite to your project, then click on it to select it. Go to "more blocks,” click “make a block,” and name your new block “grow.” You can now select the purple “grow” block for your project, and “define grow” is in the script area. If you add the “grow” block to your project right now and click it, though, nothing happens. That’s because you haven't defined what the "grow" block does. If you add code to the “grow” block, then click it...what happens? The sprite gets bigger! You can make the “grow” block do whatever you want by adding the appropriate blocks to the “define” stack.

You just learned one of the most important concepts in computer science. When you made the “grow” block, you created a "procedure." Remember from today’s first screencast, a procedure is a set of many instructions packaged together to create a new command.

A procedure is a like a shortcut--a simple way to convey a long set of instructions to the computer with a single action. Procedures exist in real life, too.

For example, you could tell someone to "take one shoelace, cross it over the other shoelace, tuck it under, pull them both tight... etc. Or, you could just say, "tie your shoes," which is a much shorter instruction that gets the same result. Of course, if you say "tie your shoes" to a 3-year-old, they won’t be able to do it because they have not yet learned the different steps involved. In other words, the "tie your shoes" procedure has not been defined for the 3-year-old, just like the “grow” block didn’t do anything before you added blocks to define it. You had to teach the computer the steps to follow when it runs the “grow” block. Procedures are important to computer scientists because they shorten and simplify long sections of code. For example, look at this code. You can see that it will make the sprite change color, then grow, then change color again, then rotate, then start all over again--but all those steps are covered by a single procedure.

This code you see here does the same thing, but it is a lot longer and harder to read.

Imagine if someone had to tell you every morning to get out of bed, eat breakfast, brush your teeth, and get dressed. That takes a lot longer than simply saying “get ready for school.”

That’s how procedures work in computer science, too. Because they convey a large set of instructions to the computer in a single step, procedures make code simpler and clearer, so anyone can understand it. That makes it easier for multiple computer scientists to work together on a project. Next you need to actually use the Grow procedure in your code so that when the flag is clicked, the new Grow block is called over and over again during your music video. Add a When flag clicked block, a forever loop, and the new Grow block with some wait blocks until it is Growing and shrinking at a pace you like. Now, it's your turn. Add a sprite and click "make a block" to create the new “grow” block. Define the new block by adding code blocks to make your sprite grow and shrink. Then, place a forever loop around the “grow” block so your sprite continually shrinks and grows when the flag is clicked. If you get stuck along the way or have a question, ask your neighbor for help or put up your sticky to get the attention of your CS First Guru.

arrow_backward Back
Next arrow_forward
  1. From the "more blocks" menu, click make a block and name the new block "grow"
  2. Add blocks to the Define Grow stack to tell the computer what the Grow block should do.
  3. Use the new "Grow" block, along with a "when green flag clicked" event and a forever loop, to make the sprite grow and then shrink