Check out a free preview of the full Get Kids into Coding with Scratch course

The "Tour of the Scratch Editor" Lesson is part of the full, Get Kids into Coding with Scratch course featured in this preview video. Here's what you'd learn in this lesson:

Steve walks through the contents and terminology of the Scratch editor, including sprites, costumes, backgrounds, code blocks, and the backpack. How some code blocks relate to JavaScript concepts and the purpose of a code block's shape are also discussed in this segment.

Preview
Close

Transcript from the "Tour of the Scratch Editor" Lesson

[00:00:00]
>> So let me give you a tour of the scratch editor, we can see all the different pieces so that we're familiar when I use terms or when I point at things or when I reference something, we know what I'm talking about. Over here we have the stage, this is where all of our hard work becomes manifest.

[00:00:12]
If you need more room, you can make it a little smaller. You can make it bigger. You can make it really big if you just want to see the end result and just like revel in all of your amazing work. Then we have a bunch of sprites. Right now we have one sprite.

[00:00:26]
I had to look this up. The cat's name is Arnold, okay? He has a name. It's Arnold. That's his name. Just sprites you program each sprite independently. If you want to make a new sprite, you can go over here where you can search through the entire library of sprites.

[00:00:43]
With a whole bunch of different options. You can upload one that you have, or what I like, and I might spend, I will not do too much during this workshop because let me tell you the rabbit hole that I will go into of you can kind of paint and draw your own sprite and kinda create your own art as you go along.

[00:01:00]
On a given sprite, they have multiple costumes. Now if you can see, these costumes can be used for a bunch of different things. They can be totally different looks if you're making a story. In this case, the two costumes, if you went back and forth real quick, almost look like Arnold is walking, right?

[00:01:16]
So you might rotate between two different costumes on a sprite to create the look that your sprite is walking. On a sprite, you can also just kind of go back and forth between these two tabs costumes, code, costumes, code. There is also a tab called sounds. Now, I used to be a middle school teacher.

[00:01:35]
I know how this goes. I'm going to act like this tab does not exist. [LAUGH] At no point are we touching this tab. Because I know what happens. Cool, so we've got the code, we got the costumes on a given sprite, you can switch between them. One way if you're in the code to see what sprite you're working with is, doesn't really help with a blank one.

[00:01:58]
But you can go ahead, you'll see this sprite up in this corner. At one point today, either you or me will add code to the wrong sprite and then wonder why our stuff isn't working, right? At one point you could even add some code to the backdrop. At one point I might look in here which has fewer options and wonder where my code is.

[00:02:22]
Someone to remind me or it might be you, but at one point you'll be in the wrong area. It's okay. It happens to the best of us. You can also click on the sprite itself, double click on it, to switch over to that sprite as well. All right, so we talked about adding a sprite.

[00:02:36]
I'm going to get rid of this blank one. We've got the code. We've got the costumes. We'll talk about the blocks in a second. There's also the ability to add backdrops, so you can choose a backdrop. Do we have a favorite one right now? Which one?
>> The basketball 1.

[00:02:51]
>> Basketball.
>> Which is right there.
>> Which is right there. There we go, cool. So now I can set the scene. Again, you can upload your own art. You can draw your own art. You can do whatever you want. We will do some of that today when we need it.

[00:03:04]
You can have multiple backdrops and switch between them the same way that you switch between costumes. All right, we're almost, we got like one or two more things left here. Next, we've got the main event which is all the different code blocks that we can snap together. Let's talk about some of the categories here.

[00:03:21]
Motion, does what you think it does. It moves your sprite a whole bunch of different ways whether it's left and right and we'll talk about what that means in a second, turning it in a given direction, all sorts of different options. Looks, this is useful if you want to make it talk, you want to change the costume from one with the right foot forward to the one with the left foot forward.

[00:03:39]
Or if you're writing a story, if they want to change actual costumes. You can do color effects, which at one point you will do, just because I can't stop you. Sound doesn't exist. Events, these are the main thing, which is something has to happen in order to trigger your code to run.

[00:03:55]
The most common one is this when green flag is clicked. This is the green flag. When you click the green flag, whatever comes after when green flag is clicked is what happens next. That's how this works. You can also do stuff when a given key is pressed. You can do, when the sprite is clicked, various things.

[00:04:16]
For my adult friends in the room, yeah, it's kind of like events in JavaScript, right? Various things happen, you can have a callback, same basic concept. You might be like, well, what happens if I have two green flags? It's almost like there's an event loop under the hood that is processing it with everything, the same way it works in the browser cuz it's in the browser.

[00:04:37]
There's also this idea to receive a message. So any given event is a node, any given sprite can trigger a message that gets broadcast and then any other sprite that cares can listen to it. If that'll make sense to you, we will talk about it in context later.

[00:04:53]
Control, here we have a bunch of different ways to rationalize our code. We can say, like, hey, if this, then do that. Otherwise, do the other thing. Or repeat this ten times. Different ways to kind of have control flow in our code. Then we've got sensing, which is like, okay, if it's touching the mouse pointer, if it's touching this other sprite, if a given key is being pressed.

[00:05:17]
A bunch of ways of like what is going on in terms of the actual interaction with other sprites in the game. Operators because it's summer who doesn't love math, right? At some point you might need to add thing see if your health is less than 0, game over, right or your points are more than 100 you win, right?

[00:05:38]
A lot of different kinds of ways to think about the different values in your game. If the word apple contains the letter A, various things you might slot into the different control blocks. Now, if you look, each one of these has a different shape and at no point, if we look in the control section, there's a diamond shape.

[00:05:59]
Guess what goes in the diamond shape in the control blocks? The diamond shaped ones here, right? It's like Legos, if you try to put the circle blocks into the diamond holes, it's not going to work super well for you, right? And yeah, it's okay. We've got this idea of variables, which is occasionally we need to hold on and store information.

[00:06:20]
We'll talk about that in a little bit. We can change them, stuff that. And then blocks, which are the ability make our own custom blocks that we might need at various points. Yeah Chloe.
>> You can go to the bottom left corner-
>> Right here.
>> And get more blocks.

[00:06:38]
>> Yep we will do that towards the end there's also a bunch of extensions that you can install. We will be using the Pen one today. And I'll show you the video sensing one cause it's cool. But you can also if you've got like Makey Makey skills like this little controller, you can hook up to a banana, or you make your banana into a game controller.

[00:06:57]
As well some Lego Mindstorms and some other hardware stuff that you can plug in as well. You can also make music as if there was sound supported on this, but I don't think there is. There is. And then lastly, down here very subtly is this thing called the backpack.

[00:07:15]
The backpack is a way to transfer stuff in between projects.
>> If you go to search first right and you're too lazy to type in donut, you can type homer and you'll get a donut.
>> [LAUGH]
>> Today I learned [LAUGH] today I learned bonus lesson from my teaching assistant.

[00:07:39]
You all saw the backpack. So a backpack is a way let's say you made a bunch of really cool sprites for one game and you're making the SQL. Write the backpack is a way that you can take stuff from one project, put in the backpack. You can bring it to the next project, right?

[00:07:54]
You can't really copy and paste between projects, but you can move it into the backpack, move it out of the backpack. You can take like common code blocks that you might use. And put them in or out the backpack various sprites so on and so forth. So anything that you might be using more than once, you can put it the backpack, or if you need to just move something from one project to the next cuz yeah, I love this sprite that I made, you put in the backpack.

[00:08:20]
You take it out of the backpack, you're good to go. The only other thing to kind of point out is there's some zoom controls. We'll talk about some of the sprite controls in a little bit. But also right clicking or to finger clicking for most of us born in the modern era will give you the ability to delete a block.

[00:08:37]
The other way that is a lot easier. Take it, you drag it back where you got it from, it goes away, right? That's the large amount of the editor. You can save stuff. You can make a new one. Other than that, I think we've got most of what we need to kind of we understand the lay of the land.

[00:08:55]
And we can go and start to get our first sprite moving.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now