(For more resources related to this topic, see here.)
The anticipation of learning a new programming language can sometimes leave us frozen on the starting line, not knowing what to expect or where to start. Together, we'll take our first steps into programming with Scratch, and block-by-block, we'll create our first animation. Our work in this article will focus on getting ourselves comfortable with some fundamental concepts before we create projects in the rest of the book.
Joining the Scratch community
If you're planning to work with the online project editor on the Scratch website, I highly recommend you set up an account on scratch.mit.edu so that you can save your projects. If you're going to be working with the offline editor, then there is no need to create an account on the Scratch website to save your work; however, you will be required to create an account to share a project or participate in the community forums.
Let's take a moment to set up an account and point out some features of the main account. That way, you can decide if creating an online account is right for you or your children at this time.
Time for action – creating an account on the Scratch website
Let's walk through the account creation process, so we can see what information is generally required to create a Scratch account. Open a web browser and go to http://scratch.mit.edu, and click on the link titled Join Scratch.
- At the time of writing this book, you will be prompted to pick a username and a password, as shown in the following screenshot. Select a username and password. If the name is taken, you'll be prompted to enter a new username. Make sure you don't use your real name. This is shown in the following screenshot:
- After you enter a username and password, click on Next. Then, you'll be prompted for some general demographic information, including the date of birth, gender, country, and e-mail address, as shown in the following screenshot. All fields need to be filled in.
- After entering all the information, click on Next. The account is now created, and you receive a confirmation screen as shown in the following screenshot:
- Click on the OK Let's Go! button to log in to Scratch and go to your home page.
What just happened?
Creating an account on the Scratch website generally does not require a lot of detailed information. The Scratch team has made an effort to maximize privacy. They strongly discourage the use of real names in user names, and for children, this is probably a wise decision.
The birthday information is not publicized and is used as an account verification step while resetting passwords. The e-mail address is also not publicized and is used to reset passwords. The country and gender information is also not publically displayed and is generally just used by Scratch to identify the users of Scratch. For more information on Scratch and privacy, visit: http://scratch.mit.edu/help/faq/#privacy.
Time for action – understanding the key features of your account
When we log in to the Scratch website, we see our home page, as shown in the following screenshot:
- All the projects we create online will be saved to My Stuff. You can go to this location by clicking on the folder icon with the S on it, next to the account avatar, at the top of the page. The following screenshot shows my projects:
- Next to the My Stuff icon in the navigation pane is Messages, which is represented by a letter icon. This is where you'll find notifications of comments and activity on your shared projects. Clicking on this icon displays a list of messages.
- The next primary community feature available to the subscribed users is the Discuss page. The Discuss page shows a list of forums and topics that can be viewed by anyone; however, an account is required to be able to post on the forums or topics.
What just happened?
A Scratch account provides users with four primary features when they view the website: saving projects, sharing projects, receiving notifications, and participating in community discussions.
When we view our saved projects in the My Stuff page, as we can see in the previous screenshot, we have the ability to See inside the project to edit it, share it, or delete it.
- Be respectful
- Offer constructive comments
- Share and give credit
- Keep your personal information private
- Help keep the site friendly
Creating projects under Creative Commons licenses
Every work published on the Scratch website is shared under the Attribution-ShareAlike license. That doesn't mean you can surf the web and use copyrighted images in your work. Rather, the Creative Commons licensing ensures the collaboration objective of Scratch by making it easy for anyone to build upon what you do.
When you look inside an existing project and begin to change it, the project keeps a remix tree, crediting the original sources of the work. A shout out to the original author in your projects would also be a nice way to give credit.
For more information about the Creative Commons Attribution-ShareAlike license, visit http://creativecommons.org/licenses/by-sa/3.0/.
Closely related to the licensing of Scratch projects is the understanding that you as a web user can not inherently browse the web, find media files, incorporate them into your project, and then share the project for everyone.
Respect the copyrights of other people. To this end, the Scratch team enforces the Digital Millennium Copyright Act (DMCA), which protects the intellectual rights and copyrights of others. More information on this is available at http://scratch.mit.edu/DMCA.
Finding free media online
As we'll see throughout the book, Scratch provides libraries of media, including sounds and images that are freely available for use in our Scratch projects. However, we may find instances where we want to incorporate a broader range of media into our projects.
A great search page to find free media files is http://search.creativecommons.org.
Taking our first steps in Scratch
From this point forward, we're going to be project editor agnostic, meaning you may choose to use the online project editor or the offline editor to work through the projects.
When we encounter software that's unfamiliar to us, it's common to wonder, "Where do I begin?". The Scratch interface looks friendly enough, but the blank page can be a daunting thing to overcome. The rest of this article will be spent on building some introductory projects to get us comfortable with the project editor.
If you're not already on the Scratch site, go to http://scratch.mit.edu and let's get started.
Time for action – moving the cat across the stage
As a warm up, we're going to make the default Scratch cat move across the stage.
- Click on the Create button to open a new project in the editor. The project contains a single sprite—the Scratch cat.
- In the blocks palette, click on the Events button.
- Drag the when flag clicked block to the scripts.
- In the blocks palette, click on the Motion button.
- Drag the move (10) steps block to the scripts area and snap it to the bottom of the when flag clicked block, as shown in the following screenshot:
- Click on the green flag above the stage repeatedly to set our first Scratch program in motion.
What just happened?
Our first Scratch project combined two blocks to make the cat move across the screen. The first block we used was the when flag clicked block from the Events block, and, very simply, when the flag was clicked, we used the move () steps block to give the cat some motion.
As we clicked through the blocks palette, we saw that the available blocks changed depending on whether we chose Motion, Looks, or Events. Each set of blocks is color coded to help us easily identify them in our scripts.
Did you look closely at the blocks as you snapped them together? As children, most of us probably had a game where we needed to put the round peg into the round hole. Building a Scratch program is just that simple. We see instantly how one block may or may not fit into another block. One of the friendly design aspects of Scratch is that it's incredibly obvious when two blocks fit together, just like when you put puzzle pieces together or build with LEGO. Scratch's building block design is heavily influenced by LEGO. The Events block, for example, always sit on top of a stack of other blocks. You can never put the move () steps block on top of the when flag clicked block.
Using events to trigger an action
One of the most important groups of blocks in Scratch is the Events block. We used the when flag clicked block as a trigger to make the cat move. There are other event blocks that we'll encounter in future projects, but a majority of the Scratch projects developed by the community will use the when flag clicked block to start the project.
As we develop more sophisticated projects, we'll see how the when flag clicked block can be used to initialize the starting values, positions, and views of the project.
Have a go hero – testing the move block
Take a minute to explore our two block scripts by changing the value in the move () steps block. Check what happens when you use a larger value such as 50 or a negative value such as -23.
Time for action – animating a walking motion with the cat
We're going to build on our script by creating an appearance of movement:
- From the Looks palette, attach the switch to costume () block to the move () block in our script. The default costume will be costume2.
- Click on the green flag to move the cat. Note that the first time we clicked on the flag, the appearance of the cat changed, but it remained the same on subsequent movements.
- We'll make the animation more realistic in a minute, but let's examine the costumes by clicking on the Costumes tab. The following screenshot shows the contents of the Costumes tab:
- This view opens the sprite in the paint editor, but our primary interest is the costume thumbnails. If you've run the script as we've created, then costume2 is highlighted. Alternatively, click on the thumbnails and observe how selecting the costume displays on the stage.
- Depending on the speed of your clicks, the cat has the appearance of walking or running in place. There's no horizontal movement associated with toggling the costumes back and forth.
- Now, let's adjust the script to replicate this walking motion. Add another switch to costume () to our script. Select costume1.
- Now, repeatedly click the green flag. You will discover that our script doesn't appear to switch the costumes like we expected.
- Scratch is actually running our blocks faster than we can see with our naked eye. We need to adjust the timing so that we can see the animation. From the Control palette, snap a wait () secs block between the switch to costume (costume1) and switch to costume (costume2) blocks.
- The default value in the wait () secs block is 1. Change it to a smaller number, such as .2, to speed up the time it takes to switch the costumes.
- Our revised script can be seen in the following screenshot:
What just happened?
By adding the switch costume to () blocks, our script now gives the appearance of walking. The wait () secs block added some timing so that the transition between the costumes could be detected.
Costumes are a fundamental part of Scratch and can be used to change the appearance of our sprite, as we've seen in our example. There's a limiting factor in our script so in that the cat only takes a step when the green flag is clicked.
We'll continue to refine the movement and action of our script, but let's pause for a moment to put our simple project into a wider Scratch context.
Understanding the basics of a Scratch Project
Inside every Scratch project, we will find the following ingredients: sprites, costumes, blocks, scripts, and a stage. It's how we mix the ingredients with our imagination that creates captivating stories, animations, and games. Think of each sprite in a Scratch program (also known as a project) as an actor. Each actor walks onto the stage and recites a script, which consists of individual lines. How each actor interacts with another actor depends on the words the director chooses, and we are in the director's seat of our Scratch programs.
Throughout the book, we'll learn how to add and customize sprites. A sprite wears a costume like an actress dresses up for her role in the play. Change the costume, and you change the way the sprite looks. Blocks are commands that are grouped by their type and include Motion, Looks, Sound, Pen, Data, Events, Control, Sensing, Operators, and More Blocks. We snap blocks together to create scripts, as our current exercises demonstrate.
Scripts are a set of blocks that tell a sprite exactly what to do. Each block represents an instruction or a piece of information that contributes to the sprite or to the project in general. We'll explore those relationships in our projects.
Saving early, often, and automatically
It's good practice to get in the habit of saving our work.
Time for action – saving our work
The online project editor will autosave our work, but it's good practice to manually save our projects, especially before you close your web browser or navigate away from the Scratch website.
- To manually save your new project, click on Save now from the File menu at the top of the project editor. This works whether we're working with the online or offline editor.
- As you review the project, you'll notice that each project has a name. Our current project is called untitled. To change the name of your project from untitled, find the white textbox above the stage and change the project name to something meaningful by clicking in the box and typing. The following screenshot shows the project name in relation to the screen. My project is named run, kitty, run.
What just happened?
Autosave is nice and will generally limit our loss should we encounter an unexpected error or loss of Internet connectivity. The general rule whenever you're creating something is to save early and save often. This is especially true for users of the offline editor, where there is no autosave feature.
A variation of saving the current project is to use Save as a copy to create a copy of the current project. This is useful if we want to save our work at a particular point. There is no versioning within Scratch, so sometimes saving a copy of a project before making a lot of additional changes is the only reliable way to get back to a known starting point.
Undoing a deletion
If you deleted something you shouldn't have, there is an Undelete option under the Edit menu at the top of the Scratch editor. You can only undelete the most recent item that you deleted.
Introducing forever loops
Let's get back to our walking cat animation and set it in perpetual motion. When we do something forever, we constantly repeat it. In Scratch's context, forever means we're going to constantly loop through a series of blocks for as long as the project is running.
Time for action – setting the cat in motion, forever
So far, the cat has moved incrementally across the screen each time we clicked the green flag. Now, we're going to introduce the idea that the cat can stay in motion forever.
- We want to wrap the stack of blocks in a forever block. To do this, click on the move (10) steps block in the script and detach it from the when flag clicked.
- Now, from the Control palette, snap the forever block onto the when flag clicked block. Grab the stack of blocks you detached and drag it to the center of the forever block. Your script should look like the following screenshot:
- Run the script and watch the cat disappear from the stage.
- Let's get the runaway cat back. From the Motion palette, add the if on edge, bounce block to the bottom of the forever block. Now, watch the cat reappear upside down and bounce around the bottom-right corner of the stage.
- To stop the cat, click once on the script or click on the stop sign above the stage.
The following screenshot shows the current state of our project:
Our script has a couple of issues to work through, such as a choppy walking motion and an upside down cat. We'll come back and fix this up some more, but first let's consider what we accomplished.
What just happened?
We wrapped our entire script in a forever block, which is synonymous with a loop. In programming, a loop runs a group of commands over and over again. After we repeatedly instructed the sprite to move across the stage, it didn't take long before it went off the stage.
The if on edge, bounce block did as the name implies—it turned the cat around when it hit the edge of the stage. As the if on edge, bounce block was the last block in the forever loop, the script checked for the edge of the stage with each step.
If you carried out the steps in the exercise as described, you will see that as soon as you placed the if on edge, bounce block into your script, the sprite reappeared.
Controlling a sprite with loops
Any time we need to repeat an action within a project, we use a loop. The forever block represents an infinite loop because there is nothing in the script that tells the block to stop running. The blocks inside the loop will run as long as the Scratch program is running. We'll use loops throughout the book to control how a sprite behaves and to continually evaluate the changing conditions of our games, stories, and animations.
Time for action – flipping the cat right-side up
Let's tweak our script so the cat rotates right-side up and see if we can speed up our steps:
- Scratch 2.0 introduced the set rotation style block in the Motion palette that will set our cat right-side up. From the Motion palette, find the set rotation style () block and add it to your script after the set rotation style () block. The default attribute for the set rotation block is left-right, which fixes our problem.
- Click on the stack of blocks to run the script. Your script should look like the following screenshot:
- Now, let's address the choppy movement of the sprite. From the Looks palette, drag the next costume block into the scripts area. Don't attach it to the script yet because we want to expose another one of Scratch's features. If the cat is still moving, you can stop it by clicking the stop sign.
- Click the next costume block directly. And then, repeatedly click on the block so that you see the cat switching between its costumes with each click of the block. This block is mimicking the functionality we've already built into the script, but we'll explain the full ramifications after we wrap up the exercise.
- Remove the following blocks from the script by clicking on them and dragging them to an empty spot in the scripts area: switch costume to (costume2), wait (.2) secs, and switch costume to (costume1).
- Add the next costume block after the move (10) steps block, replacing the three blocks we just removed. Verify your script against the following screenshot:
What just happened?
Of primary interest to us was getting the cat's rotation correct as it bounced off the edge of the stage. The set rotation style (left-right) block told the cat to rotate horizontally. Before we set the rotation, the cat was flipping vertically as it reversed direction.
The next thing we did was consolidate the changing of the costumes down to a single next costume block. This made the running motion smoother but much faster. We can slow the cat back down by adding a wait () secs block at the end of the forever loop and experimenting with values.
You might be wondering why we were able to replace the multiple switch costume to () blocks with next costume and still see the running motion of the cat. The reason lies in the loop. Before we added the forever loop, the script used two blocks to explicitly switch between the costumes. These two switch costume to () blocks equaled one step. The wait (.2) secs block put a slight hesitation in the step. In order to get the appearance of running or walking, we needed to manually switch between the two costumes within that one step.
When we replaced the switch costume to () blocks with a single next costume block, each step was now a costume switch. The animation was much smoother even without the wait () secs block. All the blocks in the loop became one step that was repeated forever. The continual looping of the script provided the same end result that we had when we added the multiple switch costume to () blocks.
With the next costume block, we don't need to know the name of the costume or even care how many costumes the sprite has. If the current costume is number one, then the next time through the loop, the costume will change to number two, and so on. When we use next costume, we do have to be concerned that the costumes fit the project we're working on.
On the other hand, if we need to explicitly display a sprite's costume, the switch costume to () block is a better choice. For example, if we need to make sure a sprite looks a certain way at the start of a game, we'd use the switch costume to () block in a script that started with when flag clicked.
Clicking on a block runs the command
Before we added the next costume block to the script, we placed it in the scripts area and clicked on the block. This allowed us to run the block before we added it to the script and is a feature of Scratch. Until this point, we've been clicking on the green flag to run the script, but we could just as easily be clicking on the stack of blocks to start to run the script.
The ability to run an individual block against a sprite gives us a chance to observe the behavior of the block before we add the block to our script. It's a great way to test and learn.
Have a go hero – exploring sprite rotation
The set rotation style () block we used in our script has three rotation values available: left-right, all around, and don't rotate. Explore the behavior of the cat by using each rotation style.
Adding sprites to the project
So far, we have learned that if we want something done in Scratch, we must tell a sprite to act by creating one or more scripts. Scratch always starts a new project with a single cat. However, we don't always want to use the cat, and our games and stories will most likely include multiple sprites.
We can add sprites to the stage in one of the four ways: paint a new sprite, choose a sprite from the library, upload a sprite from file, or a new sprite from the camera. The icons to insert a sprite using one of these four methods are located in the New sprite pane, between the stage and the sprites list. The following screenshot shows the New sprite icons. Move the mouse over each icon to see a tooltip that identifies the new sprite method.
As we build future projects, we'll explore the various ways to add sprites. For now, we'll focus on Scratch's built-in sprite library. It's a great benefit to have a library of available sprites at the click of a mouse. The following screenshot shows what you see when you select the choose sprite from library option:
Time for action – adding a second sprite and script
We've mentioned that we can have multiple sprites acting out their scripts, but now we're going to add a second sprite to the project to illustrate the concept and explore some additional motion blocks and loops.
- Add a new sprite by clicking on the Choose new sprite from library option. Then, browse to the Animals category and select Dog1. Click on OK to add the dog to the project.
- Ensure Dog1 is selected in the sprite list to ensure we have the scripts area for the dog.
- From the Motion palette, drag one of the turn blocks into the scripts area.
- Find the repeat block from the Control palette and snap it around the turn block.
- Wrap the script in the forever block.
- From the Events palette, add the when this sprite clicked block on top of the entire stack of blocks.
- From the Looks palette, snap the say () for () secs block onto the bottom of the repeat () block and above the forever block.
- Next, we'll fine-tune the values of the blocks we just added. Change the value on the repeat block to 100. Change the value on the turn block to 30. Change the value on the say block to chasin' my tail.
- Click on the dog on the stage and watch the sprite spin in a circle as if it's chasing its tail. Click on the green flag and set the cat on its trip back and forth across the stage.
The following screenshot shows the dog and its script:
What just happened?
We have two sprites on the screen that act independently of each other. This seems simple enough, but let's step through our script.
We added the dog sprite to the project and created a script that made the dog appear as if it was chasing its tail. Changing the value of the turn block will make the dog spin slower or faster.
By increasing or decreasing the value of the repeat block, we can control how many times the dog spins before it says chasin' my tail. The repeat () blocks contained in the repeat loop run for the number of times specified.
The repeat loop differs from the forever loop in that a repeat loop has a specified end, while the forever loop runs infinitely. As our exercise demonstrates, we can combine the loops, thereby providing multiple control points in our script.
Our exercise also introduced the idea of using multiple events in the same project to control when a sprite acts. The cat acts when the flag is clicked, while the dog acts only when you click on the dog sprite.
Reviewing a video-sensing project
We're going to leave our first Scratch project behind, and go out to the Scratch website to find a project that uses some of the blocks we've used throughout this article. Our main purpose is to view a complementary project in terms of blocks that can give us some ideas to extend our introductory project and introduce a Scratch 2.0 feature.
Time for action – reviewing pop the balloon - video starter
We'll be viewing a project from the Scratch website, so open a browser and go to http://scratch.mit.edu/projects/10126867/. Alternatively, you can download the book's supporting code files and open Pop the balloon - video starter.sb2. The project is from chrisg, a Scratch team member.
- When you have the Pop the balloon - video starter.sb2 project open, click on the See Inside button to see the sprites and scripts of the project. If you're using the offline editor, you'll automatically open the project in the code view.
- This program uses a webcam, so let's see what it does. Click on the green flag to start it.
- You will be prompted with a message that indicates that Scratch wants access to your microphone and webcam. Click on Allow.
- The view of your webcam is now on the Scratch stage with floating balloons. Touch the balloons to pop them.
- This project has one sprite with two scripts. If you take a look at the script that begins when the flag is clicked on the block, most of these blocks look familiar, and that's why we're looking at this script at this point in time.
What just happened?
In our earlier article exercises, we've used the set rotation style (), forever, move () steps, turn () degrees, and if on edge, bounce blocks to animate the cat and dog. In the balloon project, these same blocks are moving a balloon around the stage and creating a different effect, essentially by changing the values assigned to the blocks.
The biggest difference we see is the pick random () to () block, which resides in the Operators palette. This block takes two values, which correspond to a range, meaning the turn block is randomly picking a number between -30 and 30. That gives the balloon the variation in the movement and gets it traveling up, down, right, and left. We'll encounter the pick random () to () block again.
One of the other reasons for opening this project is that it demonstrates one of Scratch 2.0's features—video sensing. This feature has a lot of eye candy because it incorporates live video from the web cam into the project. However, we can't actually record videos for playback. It's limited to sensing motion and direction.
We're not going to work with video sensing in any of our future projects. Now that you know this feature, I recommend you explore video sensing after you learn some more of the basics behind Scratch programming.
Have a go hero – remixing ideas with our starter project
The one thing about learning to program with Scratch (or any language) is that sometimes you can use scripts, snippets, and ideas from another project to accomplish a task in your project. Can you take the motion of the balloon project and apply it to the cat in the starter project? Likewise, now that you have the video-sensing project open, you can take a stab at customizing in some way. We haven't covered much to this point, but there's nothing stopping you from a bit of exploration.
In this article, we covered a lot of ground and got a quick introduction to creating our first project in Scratch. We focused on moving the sprite around the stage. We made the cat travel across the stage continuously using a forever loop while the dog chased its tail. We learned that sprites can have multiple costumes, and when we create a script to access those costumes, we can animate the sprite's behavior.
In the next article, we will animate a birthday card, and in the process, we will learn to use Scratch's built-in paint editor. We'll also apply graphical effects and continue to work with events to ensure we get the time of our animations just right.
Resources for Article:
- Creating an Application from Scratch [Article]
- Building HTML5 Pages from Scratch [Article]
- Games of Fortune with Scratch 1.4 [Article]