Join David Gassner for an in-depth discussion in this video Programming animations: Scratch, part of Foundations of Programming: Programming for Kids.
In the previous chapter, I described animation tools for kids that are available for the iPad. The next logical step is to move to more complex tools that work on PCs and Macs. And so now, I'd like to introduce you to Scratch. Scratch is the model on which apps like Daisy the Dinosaur and Hopscotch are based. It's hosted on this website at scratch.mit.edu. It was created by the MIT media lab in 2003.
Registration and use of Scratch is completely free, and it can be used by everyone from young kids to adults. When you register on the Scratch website, you get an area called My Stuff, which you can get to right here under your ID. This is where your projects are stored. I have a few existing projects, and I'll show you how to create a project from scratch. Your Scratch projects are stored in the cloud, that is on the website's servers, so you don't have to keep track of them on your computer's hard disk.
You can log into Scratch from any computer, and your projects will be available. To create a new project, just click the New Project button. And that'll take you to the development workspace. Every new Scratch project starts with something called a sprite. The default sprite is a picture of a cat. Just as with the iPad apps I've described, the sprite is a cartoon like graphic. You can use the graphics that are supplied with Scratch, or you can create and upload your own. The area in the top left is the stage.
In a brand new project, the sprite is in the center of the stage, but you can click and drag it anywhere on the stage you'd like, and that will be its starting spot. When you drag the sprite, you'll see the coordinates of the mouse pointer are displayed in the lower-right corner of the stage. A Scratch animation is always triggered by some event. You can choose to run the animation by clicking on the Go flag at the top of the stage, or you can use other mouse and keyboard events. I'll go to the Events category under Scripts, and here are all of my events.
And I'll choose this event. When a key is pressed, and I'll accept the default. And that means that my script will be played when I press the space on the keyboard. Now, I can add other commands that will be executed when that event happens. I'll go to the Motion category. And then I'll drag in a move command. And when I drop it in, it locks to the event. And that means that it'll run when the event occurs. And I'm already ready to test my little script.
I'll press the spacebar, and the cat moves a little bit. And each time I press the spacebar, it moves a little bit more. I'm executing the move command each time I press that key on the keyboard. If I want to change the key, I can pull down the list and choose a different one. For example, the cat is moving from left to right, so I might choose the right arrow. And now the cat moves when I press that key. I'll go back to using the spacebar, and I'll drag the cat back a little bit to a new starting position.
And now, I can add other commands. For example, along with moving, I might want to turn the sprite. So I'll drag in a turn command. And then I'll test my script again. Pressing the spacebar, and now the cat is moving in a circle. For a longer animation, you might want to explicitly set the sprite's beginning position and orientation. I'll get rid of these commands by dragging them back into the command list and dropping them. And then I'll drag in a couple of commands for the starting point.
I'll drag in a point in direction and then test that by pressing the spacebar. And that turns the cat the way I want it. Then I'll move the cat to my preferred starting position, and then I'll drag in a command called go to x and y. And notice that the values for x and y are set at the cat's current position. So now each time I re-run the program, I'll be resetting the cat's position and orientation. Next, I'll create a simple animation causing the cat to move smoothly from left to right.
I'll drag in a glide command. Now before I do that, I'm going to place the cat at the preferred ending position of the animation. I'll click and drag and place him way over on the right side of the screen. Then I'll drag in a glide command, and I immediately see what that animation will do. Then I'll change the number of seconds for the glide command from one second to three seconds. And now I'm ready to test my animation. I'll press the spacebar, and the cat restarts on the left side of the screen and moves smoothly over to the right.
If you've used animation products before, like perhaps Adobe's Flash, this is the equivalent of a tween. You set a starting and an ending point, and then the program fills in everything in between. In addition to events and motion, you also have control over appearance, sound, drawing things on the screen, setting and using variables. Control flow operations including conditionals and looping. Sensing colors, the position of objects, and other aspects of the stage.
Logical operations, like comparing values to each other. And you can also create your own custom programming blocks. Let's take a look at an existing project that I've already created that's a little bit more complex. I'll go back to My Stuff, and I'll open this project named Boy Walking. If I click the link for the project, it takes me to this preview screen. And I can just run the project. This project is run by clicking on the Go flag, and I'll see that it's a simple animation.
When I clicked the flag, the boy starts at a certain position, and then keeps walking until he gets to the mouse cursor. Let's see how that's being done. I'll click the See Inside button. And that takes me to my programming environment. And here's the entire program. It says when I click on the Go flag, set an initial position, and set a variable named speed to a value of 0.1. In the animation itself, that value is being displayed right up here in the top left corner.
Then there's a loop. With each loop, you can set a condition. And I've chosen one that says keep on looping until the sprite touches the mouse pointer. Within the loop, there are three move commands and three changes of costume. Each costume is a graphic. And again, I'm using a graphic that's provided with Scratch, but I could create and use my own. After each move and costume change, there's a wait command. And this is where the speed variable is being used. It's being used in the first, second, and third wait commands.
And then the loop keeps on executing until the graphic gets to the mouse cursor. So let's try it again. Now, place the mouse cursor. And when he gets there, he stops. Once you've created your project, you can then rename it and save it. So I've named it Boy Walking. And you can also share it with the world with a single click of the mouse. If you go to the project page, you'll see that you can add instructions, notes, and credits, and tags which let people easily search for your project.
And there are many tools that you can use to share your project. For example, the Share to button will let you get a link to HTML that you can add to a web page. And it will show your project and a link, and Scratch users can go find the project very easily. And you can also download your projects easily as archive files to your local hard disk, so you can share your projects through email or on disks. If you click on the Explore link at the top of the Scratch webpage, you'll see a gallery of existing projects that other Scratch users have shared.
If a project is on this page, you can download it and try it yourself. And then you can make changes to your copy of it, in the process know as remixing. There are many other features available on this Scratch website. Explore it with your programmer kids and see what's available. You might find that kids can get very involved in Scratch, creating animation and sharing them with their friends. Animations in Scratch are easy and fun to create, and kids can use the existing graphics, or they can create and add their own artwork very easily to their own Scratch projects.
- Understanding your child's learning style
- Graphical programming on iPads and computers
- Making things move
- Learning about algorithms
- Programming animations, apps, and games
- Programming virtual and real robots
- Programming hardware: Arduino and Raspberry Pi
Skill Level Beginner
Q: This course was updated on 11/10/2014. What changed?
A: We updated the "Programming Android apps: MIT App Inventor" video to incorporate new device footage, so you can see how the app performs on an Android phone.