CS50 Video Player
    • 🧁
      • 🍫
      • 🥥
      • 🍿
    • 0:00:00Introduction
    • 0:02:13Sprites
    • 0:11:00Costumes
    • 0:17:52Backdrops
    • 0:00:00[MUSIC PLAYING]
    • 0:00:17BRIAN YU: Welcome, everyone, to an introduction
    • 0:00:19to Programming with Scratch.
    • 0:00:21My name is Brian Yu and in this course, we're
    • 0:00:23going to be exploring Scratch, which is a visual block-based programming
    • 0:00:26language developed by the team over at MIT's Media Lab.
    • 0:00:29Using Scratch, by putting together little Scratch puzzle pieces,
    • 0:00:32that we'll see shortly, you'll be able to build visual stories and animations
    • 0:00:36and games and other programs that you'll be able to share with others.
    • 0:00:40And along the way, as we're exploring Scratch,
    • 0:00:42you'll be introduced to the fundamentals of programming.
    • 0:00:44We'll take a look at concepts like functions and loops and conditions
    • 0:00:48and variables and other types of ideas that you'll see in programming.
    • 0:00:51And even though the Scratch programming language looks a little bit different,
    • 0:00:55it uses blocks instead of the more traditional text-based programming
    • 0:00:58that you might see in other programming languages later,
    • 0:01:01really Scratch is based on the same fundamental ideas.
    • 0:01:03And it's going to use the same principles of computational thinking.
    • 0:01:08So with that, let's go ahead and take a look at Scratch and dive
    • 0:01:10in to our very first Scratch project.
    • 0:01:14So once you go to Scratch's website, when you click on the Create button
    • 0:01:18to create a new project you'll end up seeing
    • 0:01:20an interface that looks like this.
    • 0:01:22And we'll be exploring this interface during this course.
    • 0:01:25But it's broken down into a couple of parts.
    • 0:01:27Over here on the left-hand side is our block library.
    • 0:01:30You're going to build Scratch projects, ultimately,
    • 0:01:33by putting together blocks in some sequence
    • 0:01:35in order to get the project to do something
    • 0:01:38that you would like for it to do.
    • 0:01:39And you can assemble those blocks together from the block library,
    • 0:01:42bringing them into this middle part of the Scratch window,
    • 0:01:45which is the Block Editor, where you're going to put these blocks together
    • 0:01:48to decide how it is that your project should work.
    • 0:01:52But before we even get to those blocks and how they work
    • 0:01:54and how to put them together, today we're
    • 0:01:56going to be mostly focusing on this part of the Scratch window.
    • 0:01:59This rectangle you see here is what Scratch calls the stage.
    • 0:02:03And it's inside of the stage that our Scratch project
    • 0:02:06will live and ultimately run.
    • 0:02:07And this is, when someone runs your Scratch project,
    • 0:02:10what that person is ultimately going to see.
    • 0:02:13We see that right now, in the Scratch stage, we just have one character,
    • 0:02:17this default Scratch cat here.
    • 0:02:19And each of these characters Scratch calls a sprite.
    • 0:02:22A sprite, in the world of Scratch, is just some object.
    • 0:02:25It could be a character, like an animal, or it
    • 0:02:27could be some other object, that lives somewhere on the stage.
    • 0:02:30And ultimately, we're going to learn to have the ability
    • 0:02:32to program these sprites to do what we would like for it to do.
    • 0:02:36Down below we see a listing of all of the sprites
    • 0:02:38that are currently in our project.
    • 0:02:40Right now it's just this default cat, which is called Sprite1.
    • 0:02:43And we'll start to see other parts of this interface as well.
    • 0:02:46But let's start today by exploring this stage and the sprites
    • 0:02:50that live on that stage and how we can manipulate them.
    • 0:02:53So what we'll see right now is that our default Scratch cat is currently
    • 0:02:57just in the center of this stage here, but I can move it around.
    • 0:03:01And I can move it around just by clicking and holding on the cat.
    • 0:03:04And then I can drag it around.
    • 0:03:06I can move it to one corner of the screen
    • 0:03:07or I could click and drag and move it to the other corner of the screen,
    • 0:03:10for example.
    • 0:03:12And what you'll notice, as I start to move the Scratch cat around
    • 0:03:15on the stage, is that down below a couple of values are changing,
    • 0:03:20the x-value and the y-value.
    • 0:03:21Right now, for example, the x-value is 177 and the y-value is 42.
    • 0:03:27But if I move the Scratch cat a little bit, move it somewhere else,
    • 0:03:30now the x-value is negative 156 and the y-value is negative 77.
    • 0:03:37So sprites in Scratch exist on the stage.
    • 0:03:39And in particular, they exist at a particular location on that stage,
    • 0:03:44which is organized into an x,y coordinate grid.
    • 0:03:47And so if you imagine that this rectangle here is the stage,
    • 0:03:50this looks similar to an x,y coordinate grid you might have seen in a geometry
    • 0:03:53class, for example, where we have the x-value,
    • 0:03:56which just represents how far to the left or to the right is our character
    • 0:04:00on the stage.
    • 0:04:01And we have the y-value, which represents how far up or down
    • 0:04:05the sprite is on the stage as well.
    • 0:04:07The perfect center of the stage is point 0,0.
    • 0:04:10If x is equal to 0 and y is equal to 0, then our sprite
    • 0:04:14is going to be exactly at the middle of the stage.
    • 0:04:16But if we increase the x-value, make it a positive value,
    • 0:04:19it'll move further towards the right part of the stage.
    • 0:04:22And if we decrease the x-value, make it more negative,
    • 0:04:24then the sprite is going to be further to the left side of the stage.
    • 0:04:27And likewise, the same thing goes for y but in the up and down direction.
    • 0:04:31If I have a sprite where y is equal to 0,
    • 0:04:33it's going to be perfectly level at the middle vertically.
    • 0:04:36But if I increase the y-value, then our sprite
    • 0:04:38is going to move up along this stage.
    • 0:04:40And if I decrease the y-value, then our sprite
    • 0:04:42is going to move down along that stage as well.
    • 0:04:46So we'll see those x and y values come up,
    • 0:04:48not only in this interface here where we see
    • 0:04:50where the sprite is on the stage but also a little bit
    • 0:04:52later, once we start putting blocks together to program
    • 0:04:55where our sprites are going to be on the stage at any given time.
    • 0:04:59So right now if I wanted to take my sprite
    • 0:05:01and move it back to the perfect center of the stage,
    • 0:05:04I could take it and drag it to about where I think the center is.
    • 0:05:07And I might be pretty close, but if I want to be even more precise,
    • 0:05:10I can go down to the X field here and change what's right now 10 to 0.
    • 0:05:15And I can do the same thing for y, changing what's
    • 0:05:17currently negative 8 to 0 as well.
    • 0:05:20And that will perfectly center the cat in the middle of the stage here.
    • 0:05:26In addition to being able to change the position of the sprite,
    • 0:05:29we also have a few other controls that are
    • 0:05:31in this part of the Scratch interface.
    • 0:05:34Over here I have the ability to give my sprite a name.
    • 0:05:37Right now my sprite is just called Sprite1,
    • 0:05:39which is the default name that Scratch gives to a sprite that I create.
    • 0:05:42But I could rename this, I could call this the Cat, for example.
    • 0:05:45And what you'll notice is that when I rename the sprite, call it my Cat,
    • 0:05:49then down below in this bottom portion of the Scratch interface,
    • 0:05:52this is where I see all of the sprites in my project.
    • 0:05:55Right now there's just one, but each one is
    • 0:05:57labeled by its name, which right now is the Cat.
    • 0:05:59And as we start to get more and more sprites that
    • 0:06:01will be added to our projects, it's going
    • 0:06:03to be helpful to keep track of which sprite is which
    • 0:06:06by knowing what the name of any given sprite is.
    • 0:06:10Underneath the place where I can name any individual sprite,
    • 0:06:13I also have a toggle where I can decide whether or not that sprite should
    • 0:06:16be shown on the stage.
    • 0:06:18Right now we are showing the cat, but I could click this button over here
    • 0:06:21to hide the cat from the stage.
    • 0:06:23And if I want to bring it back, I can show it again.
    • 0:06:25So I can show and hide the cat to decide whether, for any particular sprite,
    • 0:06:29that sprite appears on the stage or not.
    • 0:06:33I also have these other two controls.
    • 0:06:35This control here controls the size of the sprite.
    • 0:06:38Right now the size is 100, meaning it is at 100% size, which
    • 0:06:42is the normal size for any sprite.
    • 0:06:44But I can change that.
    • 0:06:45If I want the sprite to be half as big, I
    • 0:06:48could change the size to be 50, for example.
    • 0:06:50And now the sprite is much smaller.
    • 0:06:52If I want to make my sprite larger I would change it to let's say 200,
    • 0:06:56for example.
    • 0:06:57And now the sprite is going to be larger.
    • 0:06:59But for now, I'll go ahead and keep it at 100.
    • 0:07:02And over time we'll start to see that we can
    • 0:07:04change the size as well by way of the blocks that
    • 0:07:07will be introduced a little bit later.
    • 0:07:09And then finally in these controls, I have a direction control.
    • 0:07:12And the direction control, controls which way that my cat, in this case,
    • 0:07:17happens to be facing.
    • 0:07:18Right now it's at 90, meaning 90 degrees.
    • 0:07:21In other words, the cat is facing to the right.
    • 0:07:23But I could rotate the cat, spin it around, and watch as I turn this dial,
    • 0:07:28I can rotate spin the cat around and have it face a different direction
    • 0:07:32if I want to.
    • 0:07:33And when I do, you'll notice that this direction value
    • 0:07:35changes and to some number of degrees.
    • 0:07:38So right now it's pointing at a 39-degree angle,
    • 0:07:40but I could change that back to 90.
    • 0:07:42And when I do that, now the cat is facing to the right as well.
    • 0:07:46So I have this ability, using this editor here,
    • 0:07:49to control a lot about the sprite.
    • 0:07:51I can change its name.
    • 0:07:52I can change its position, its size, what
    • 0:07:54direction it's facing, whether or not it shows up on the stage or not.
    • 0:07:58But really, to make our programs more interesting,
    • 0:08:01we don't just want to have a cat that lives in this environment.
    • 0:08:04I'd like to add some other sprites to my stage as well.
    • 0:08:08So let's go ahead now and try and create a new sprite.
    • 0:08:12Down here at the bottom, you'll notice that inside
    • 0:08:15of this region of the Scratch editor where all of my sprites live,
    • 0:08:18right now it's just the cat, there's a little plus button.
    • 0:08:21And this is the Create a New Sprite button
    • 0:08:24and I have a couple of options for how to do so.
    • 0:08:26But if I just click on this main circular button that says,
    • 0:08:28choose a Sprite.
    • 0:08:29I'll end up getting a whole list of different kinds of sprites
    • 0:08:33that I can create.
    • 0:08:34There are animals, there are people, there's
    • 0:08:36different types of sports-related sprites,
    • 0:08:38or food-related sprites, and more than that.
    • 0:08:41And I can look through this and try and find whatever I'd like.
    • 0:08:44And let's say I want to add an animal, for example, another animal other
    • 0:08:48than the cat to my Scratch program.
    • 0:08:51Well up here at the top I can filter down
    • 0:08:53what I'm looking for by a particular category,
    • 0:08:55or if I knew exactly what I was looking for, I could search for a sprite
    • 0:08:59as well.
    • 0:09:00But let me go to animals, for now, just to see the various different kinds
    • 0:09:03of animals that can exist here.
    • 0:09:06And I think I like the fish, so we'll go ahead and take the fish
    • 0:09:10and add that to my stage.
    • 0:09:13And so once I do that, you'll notice a couple of things happen.
    • 0:09:16One, down below in this region, where I'm keeping track of all of the sprites
    • 0:09:19that are a part of my project, I now have two.
    • 0:09:22I have the cat and I have the fish.
    • 0:09:24And you'll notice that both now appear in the main stage
    • 0:09:28area of my Scratch program.
    • 0:09:29And I can move them around so that they're not
    • 0:09:31overlapping with each other.
    • 0:09:32So I now have one cat and one fish.
    • 0:09:36Whichever one is selected, highlighted in blue down here
    • 0:09:39at the bottom, that's the one I'm currently working with,
    • 0:09:41where I'll currently be able to add code to it
    • 0:09:43or manipulate its position or size or any of the other attributes
    • 0:09:47we've seen that these sprites happen to have.
    • 0:09:49So this fish, for example, is currently located at x equals 73 and y equals 70.
    • 0:09:55But if I switch to the cat by clicking on the cat down at the bottom,
    • 0:09:59now I'm selecting the cat.
    • 0:10:00And now I see the cat's position and the cat's name
    • 0:10:03and the cat's size and the cat's direction as well.
    • 0:10:07So using that ability, we can add new characters.
    • 0:10:10We can add new objects to our Scratch project.
    • 0:10:13And if we wanted multiple of a given character
    • 0:10:15we can even duplicate a particular sprite.
    • 0:10:18So let's imagine that I want two fish, for example, inside
    • 0:10:21of this environment.
    • 0:10:22I'm going to click on the fish and then I can either right-click
    • 0:10:25or I can control-click on the fish.
    • 0:10:28And when I do that a little menu will pop up where I can here say,
    • 0:10:30let me duplicate the fish.
    • 0:10:32Let's get a second fish.
    • 0:10:33And you'll notice that it's called Fish2 by default.
    • 0:10:36I could change that if I wanted to but Fish2 is OK.
    • 0:10:39And I'll take the two fish and separate them a little bit on the stage
    • 0:10:43just by moving them around.
    • 0:10:45And so now I'm starting to construct this scene.
    • 0:10:47And this is why you can use Scratch to tell stories or create animations
    • 0:10:51or create pieces of art, just by deciding
    • 0:10:53what it is that you want to exist on this stage,
    • 0:10:56and then add them to the stage as well.
    • 0:11:00Now one thing you might notice is that right now
    • 0:11:02because I duplicated the fish, both of the fish look identical.
    • 0:11:05They're exactly the same.
    • 0:11:07They're both pointed in the same direction.
    • 0:11:08And I could change the direction or change the size of one of the fish
    • 0:11:11to make it a little bit smaller, to make it
    • 0:11:13look a little bit different from the other fish
    • 0:11:15if I want a variety of different types of fish in my scene.
    • 0:11:18But what I'd really like to do is change its entire overall appearance,
    • 0:11:22so I have two different fish that exist on the stage instead of just two copies
    • 0:11:27of what looks like the same.
    • 0:11:29And so here's where we're going to introduce another concept in Scratch,
    • 0:11:32which is that of costumes.
    • 0:11:34Every sprite can take on different costumes.
    • 0:11:36And a costume is just what that sprite happens to look like.
    • 0:11:40And so let's explore now how we can change the costume for one
    • 0:11:45of these fish, for example.
    • 0:11:46Up at the top of the Scratch window, you'll notice a couple of tabs.
    • 0:11:50The tab that's selected by default is called the Code tab.
    • 0:11:53And while we haven't added any code to our projects
    • 0:11:55just yet, ultimately as you start to build more complex projects,
    • 0:11:59you'll be using the Code tab to take blocks of code
    • 0:12:01and drag them into this code editor in order
    • 0:12:04to decide what it is that you're Scratch sprites are going to do.
    • 0:12:08But the tab that we're interested in now is this second tab,
    • 0:12:11which is called the Costumes tab, which is
    • 0:12:13going to allow us to see and edit and modify the costumes that
    • 0:12:16belong to any given sprite.
    • 0:12:19So let's go ahead and take one of our fish.
    • 0:12:21We'll go ahead and take fish2 and head over to the Costumes tab
    • 0:12:25by clicking on the Costumes tab, which is next to the Code tab
    • 0:12:28up at the top of the window.
    • 0:12:31And when I do that, you'll see that by default the fish
    • 0:12:33has four different costumes, fish-a, fish-b, fish-c, and fish-d.
    • 0:12:40Right now fish-a is selected, but I could change the costume just
    • 0:12:44by clicking on a different costume.
    • 0:12:45If I click on fish-b, for example, now I've
    • 0:12:48got a different costume that's selected.
    • 0:12:50And now you immediately see in the stage that the fish looks different.
    • 0:12:53It's taken on a different costume.
    • 0:12:55Even though it's the same fish, it appears
    • 0:12:57visually to look different because we've changed what costume it has.
    • 0:13:01And I can try changing it again.
    • 0:13:02Here's fish-c, and then I can try looking at fish-d as well.
    • 0:13:06So you can experiment and take a look at what costumes
    • 0:13:09happen to be built in by default into any given sprite
    • 0:13:12and change them if you'd like to.
    • 0:13:14The cat also has different costumes.
    • 0:13:16They don't look nearly as different, but what you'll notice
    • 0:13:18is that the cat can be in two different costumes that
    • 0:13:22are just in different leg positions.
    • 0:13:24So in costume1, the legs are straight, in costume2, the legs are bent.
    • 0:13:29And if you watch this sprite carefully, as I switch between the costumes,
    • 0:13:33it almost looks like the cat is walking, which
    • 0:13:35is why we've got those two different costumes,
    • 0:13:37to give the appearance of walking if we would like to.
    • 0:13:40But let's go back to the fish, which has four different costumes that I
    • 0:13:44can choose from, each of which looks very different.
    • 0:13:47And I'm not limited to just those four.
    • 0:13:49If I wanted to create additional costumes
    • 0:13:51I have the ability to create additional costumes too.
    • 0:13:55How could I do that?
    • 0:13:56Well, here in the costume editor, down at the bottom
    • 0:13:59underneath where all of these costumes are,
    • 0:14:01there is another plus button that looks very much like that button
    • 0:14:05for creating a new sprite that we saw a moment ago.
    • 0:14:08But this time, this is the button for creating a new costume.
    • 0:14:12And here I have a couple of choices.
    • 0:14:14I could search inside of Scratch's own library of costumes
    • 0:14:17to find a costume that I might want.
    • 0:14:20I could also paint a new costume.
    • 0:14:22So if you're feeling artistic, you'd like to create a costume of your own,
    • 0:14:25we could try painting our own.
    • 0:14:26So I could paint my own fish, for example.
    • 0:14:28And here I have a bunch of different tools
    • 0:14:31that I can use to paint the costume.
    • 0:14:32So I'll go ahead and use the Paintbrush tool that will just
    • 0:14:35let me draw a new costume for my fish.
    • 0:14:38And I can choose what color I'd like the costume to be too.
    • 0:14:41So I'll go ahead and choose maybe this color,
    • 0:14:45and I can start to draw something like a fish.
    • 0:14:51We'll draw a fish.
    • 0:14:53We'll give the fish an eye.
    • 0:14:54So if you are feeling a little more creative, a little artistic,
    • 0:14:56you can try and draw fish for yourself.
    • 0:14:58I can use the Fill tool if I want to pick a different color maybe and fill
    • 0:15:04in the fish with a particular color.
    • 0:15:06So you can be creative about this too.
    • 0:15:08Now of course.
    • 0:15:09I do think that the fish that Scratch provided for me
    • 0:15:11look a little bit nicer than the fish that I was able to draw on my own
    • 0:15:14just now.
    • 0:15:15But I can modify the existing costumes too.
    • 0:15:18Using the same costume editor, if I wanted
    • 0:15:21to fill in part of the fish with a different color,
    • 0:15:24maybe I want a little bit of green in this fish.
    • 0:15:26I could take a green that I happen to like
    • 0:15:28by just adjusting these dials to specify what color I want.
    • 0:15:33And still using the Fill tool, I could fill in parts of the fish
    • 0:15:36with a little bit of green, for example, just to make the fish
    • 0:15:39look exactly how I want it to look.
    • 0:15:42So you have a lot of creative freedom in this costume editor.
    • 0:15:44You have the ability to create an entirely new costume just
    • 0:15:49by drawing it and painting it yourself, or you have the ability
    • 0:15:52to take a costume that already exists and add
    • 0:15:54to it by painting over it or filling it in with different colors
    • 0:15:58if you'd like to.
    • 0:15:59And you even have the ability, if you want, to upload a costume.
    • 0:16:02If you have a photo or an image on your computer
    • 0:16:04that you'd like to use as a costume in your Scratch program,
    • 0:16:07you can upload it there.
    • 0:16:08Or you could even take a photo with your computer's camera,
    • 0:16:11if it has one, in order to add that photo as a costume as well.
    • 0:16:16In addition to changing what these sprites look like,
    • 0:16:20we also have the ability to give these sprites sounds that they can play.
    • 0:16:23And so up at the top, you've noticed that we
    • 0:16:25have a Code tab and a Costume tab, there's
    • 0:16:28also a Sounds tab for the sounds that are associated
    • 0:16:31with each of these different sprites.
    • 0:16:32And later on, we'll see ways that we can include
    • 0:16:35those sounds as part of our project.
    • 0:16:37So right now the fish, by default in Scratch,
    • 0:16:39has two different sounds that it has.
    • 0:16:41One is called bubbles and I can play that if I'd like to.
    • 0:16:44[UNDEWATER BUBBLING]
    • 0:16:48And one is called ocean wave
    • 0:16:50[WAVES CRASHING]
    • 0:16:55So those are the sounds that are built-in as just part of the fish.
    • 0:16:58And later on, as we're building stories with it, maybe at some point
    • 0:17:01we'll want to play those sounds.
    • 0:17:02And later in the course, we'll see ways that we can do just that.
    • 0:17:06And different sprites have different sounds built-in by default. The cat,
    • 0:17:09for example, if I click on the cat, has one sound by default, which is just
    • 0:17:12the meow sound, which I can play.
    • 0:17:14[CAT MEOWING]
    • 0:17:16But if I wanted to, I could add more sounds
    • 0:17:18as by recording something myself. if I wanted
    • 0:17:20to record a sound to give to a sprite.
    • 0:17:23And you can also upload a sound if you have
    • 0:17:25a sound file on your computer that you'd like to include,
    • 0:17:27maybe some music you want to go along with your project, or a sound effect,
    • 0:17:31you have the ability to upload those sounds too.
    • 0:17:34But let's go back to the Code tab, which we'll look at a little bit later.
    • 0:17:37And now we've got our stage.
    • 0:17:39We've got our stage with a cat and two fish.
    • 0:17:41But right now, what's a little bit boring about my project
    • 0:17:44is the background.
    • 0:17:45Right now I'm just dealing with a plain white background
    • 0:17:47with nothing else on it.
    • 0:17:49And I'd like to make that background a little more creative as well.
    • 0:17:52And so this background, we've been calling the stage.
    • 0:17:55The stage is this rectangle where our sprites live.
    • 0:17:59And each stage is allowed to have backdrops.
    • 0:18:01The backdrop just decides what image appears behind all of the sprites.
    • 0:18:06And by default when you create a Scratch project for the first time,
    • 0:18:09the backdrop is just going to be solid white, but we can change that.
    • 0:18:12Down at the bottom right, here we see the stage.
    • 0:18:15And I have the ability by clicking on this button in the bottom right,
    • 0:18:18to choose a backdrop for my project too.
    • 0:18:21And so if I click Choose a Backdrop you'll
    • 0:18:23see that I have a whole variety of different backdrops
    • 0:18:26that I can choose from in different environments.
    • 0:18:28I see I have a wintry scene if I want to create a wintry scene.
    • 0:18:31We have some indoor scenes if I want to, some outside, like city scenes.
    • 0:18:35And this one looks nice, it's an underwater scene, maybe.
    • 0:18:38And I'll use that because I've got a bunch of fish on my stage.
    • 0:18:42And so maybe it'll make sense to put my fish in an underwater scene,
    • 0:18:45for example.
    • 0:18:46So I'll choose that backdrop.
    • 0:18:47It's called underwater1 by default, and let's use that one.
    • 0:18:52So I'll click underwater1 and you'll see,
    • 0:18:54immediately, the backdrop now changes.
    • 0:18:57And I can now have my two fish that are living inside of this underwater scene.
    • 0:19:01And much as was the case with costumes or with sounds, if I had my own image,
    • 0:19:05or I wanted to draw my own image to use as the backdrop for my Scratch project,
    • 0:19:10I could certainly do that as well.
    • 0:19:13At this point now, the cat though is starting to feel a little out of place.
    • 0:19:17I'm designing an underwater scene.
    • 0:19:19I've got two different fish here.
    • 0:19:20The cat, maybe, doesn't belong here.
    • 0:19:22And so if ever I want to remove a sprite, here's how you could do that.
    • 0:19:26I'm going to click on the cat because that's
    • 0:19:28the one that I'm currently editing.
    • 0:19:30And if I don't want the cat, there's a little Trash icon
    • 0:19:33that appears next to whichever sprite happens to currently be selected.
    • 0:19:36And if I don't want the cat to be there, I can just press that Trash icon,
    • 0:19:41and that's going to remove the cat.
    • 0:19:43And so now, I have this scene with these two fish
    • 0:19:46that happen to be swimming around in the water.
    • 0:19:48And I could change the scene if I wanted to.
    • 0:19:50Maybe I want to take fish2, this yellow and green fish,
    • 0:19:53and flip it around so that it's facing the other direction.
    • 0:19:56So that one fish is swimming to the right
    • 0:19:58and one fish is swimming to the left, for example.
    • 0:20:01So how could I do that?
    • 0:20:03Well, next, every fish, remember we've got a direction control
    • 0:20:06for any given sprite, that controls what direction that fish
    • 0:20:10happens to be facing.
    • 0:20:11So if I want to take a fish and have it face to the left, for example,
    • 0:20:15I could rotate, rotate, rotate, have it face towards the left,
    • 0:20:19at like negative 88 or negative 90 degrees or so.
    • 0:20:23But this isn't quite perfect because, as you're probably noticing,
    • 0:20:27the fish is upside down now.
    • 0:20:29So normally with this direction control, when
    • 0:20:31I'm trying to control the direction, it's
    • 0:20:33just rotating whatever the sprite is in whatever direction I tell it to rotate.
    • 0:20:38But what that means is that if it starts facing the right
    • 0:20:40and I rotated 180 degrees all the way to face the other direction, now suddenly
    • 0:20:46it's going to be upside down.
    • 0:20:47And that's maybe not what I want for it to do.
    • 0:20:50But it turns out Scratch has a fix for this.
    • 0:20:53And every sprite can be in a number of different rotation styles, what
    • 0:20:57style it's going to use when rotating.
    • 0:21:00By default, it uses this all-around style,
    • 0:21:02where it can be facing any direction that we want, rotating all around.
    • 0:21:06But there's also the second one that's just called Left and Right
    • 0:21:09and that will just let the sprite face in one of two directions.
    • 0:21:12Either it's looking to the right or it's looking to the left.
    • 0:21:15And so if I change the rotation style to Left,
    • 0:21:17Right by clicking on this middle button here
    • 0:21:19that's got one arrow facing the right and one arrow facing the left,
    • 0:21:23now when I rotate a little bit nothing happens
    • 0:21:26because it's only ever going to face to the right or face to the left.
    • 0:21:30But if I rotate it all the way around to the other side,
    • 0:21:33now I have the sprite that's facing the other direction.
    • 0:21:37And that's how I can get one sprite that's looking over to the right
    • 0:21:40and there's one sprite that's looking over to the left.
    • 0:21:43And I happen to like this scene.
    • 0:21:44If I wanted to see it in full-screen there's
    • 0:21:46a full screen icon in the upper right, where if I click on that button
    • 0:21:50I now see my stage in full screen.
    • 0:21:52I can see exactly what it's going to look like, which is quite nice.
    • 0:21:55And I now have my first Scratch project.
    • 0:21:58I haven't added any code just yet, but I've
    • 0:22:00added some sprites, some characters that are part of my scene.
    • 0:22:03I've added a different backdrop that I can use to my scene as well.
    • 0:22:07And if I wanted to save this, because I want
    • 0:22:09to make sure I can keep this and use it a little bit later,
    • 0:22:11I have a few options.
    • 0:22:13One option in the File menu, I can save a project to my computer.
    • 0:22:17And that will download the project to my computer,
    • 0:22:19such that later if I want to open it up again,
    • 0:22:22I can click Load from your computer and load that file that I've just saved.
    • 0:22:26But also, if you create a Scratch account
    • 0:22:28by clicking on this Join Scratch button, if you don't already have it, and then
    • 0:22:31sign into your account, you'll have the ability
    • 0:22:34to save projects to Scratch's own website.
    • 0:22:36And once you do that if you'd like to, you
    • 0:22:38could share your project with the world, to send it to friends and family,
    • 0:22:41and to let other people that are using Scratch have an opportunity to see
    • 0:22:44your project and try it out as well.
    • 0:22:48So now that we have the ability to create these sprites
    • 0:22:51and put them onto the stage, we can create whatever environment
    • 0:22:55we want for the story, or for the animation, or for the game,
    • 0:22:58or for the other program, that we might be trying to create in Scratch.
    • 0:23:02But right now these sprites aren't really doing anything.
    • 0:23:05The stage is always staying the same.
    • 0:23:06The fish are always the same.
    • 0:23:08And, ultimately, what we're going to look at next
    • 0:23:10is about programming, how it is that we can write code.
    • 0:23:13And in particular, by using these blocks and assembling them together
    • 0:23:17into stacks of blocks that perform various different activities and tasks,
    • 0:23:21we're going to be programming these sprites in the backdrop and the stage,
    • 0:23:24to do what we want them to do, to create all the more
    • 0:23:27interactive stories and games and animations
    • 0:23:30that we can create all through the use of Scratch.
    • 0:23:33But we'll explore that next time.
    • 0:23:34That's it for an introduction to Scratch for today.
    • 0:23:36And next time, we'll take a look at how we can take that stage
    • 0:23:39and begin programming with it as well.
  • CS50.ai
Shortcuts
Before using a shortcut, click at least once on the video itself (to give it "focus") after closing this window.
Play/Pause spacebar or k
Rewind 10 seconds left arrow or j
Fast forward 10 seconds right arrow or l
Previous frame (while paused) ,
Next frame (while paused) .
Decrease playback rate <
Increase playback rate >
Toggle captions on/off c
Toggle mute m
Toggle full screen f or double-click video