WEBVTT X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000 00:00:00.000 --> 00:00:02.940 [MUSIC PLAYING] 00:00:17.962 --> 00:00:19.920 BRIAN YU: Welcome, everyone, to an introduction 00:00:19.920 --> 00:00:21.255 to Programming with Scratch. 00:00:21.255 --> 00:00:23.130 My name is Brian Yu and in this course, we're 00:00:23.130 --> 00:00:26.370 going to be exploring Scratch, which is a visual block-based programming 00:00:26.370 --> 00:00:29.640 language developed by the team over at MIT's Media Lab. 00:00:29.640 --> 00:00:32.790 Using Scratch, by putting together little Scratch puzzle pieces, 00:00:32.790 --> 00:00:36.840 that we'll see shortly, you'll be able to build visual stories and animations 00:00:36.840 --> 00:00:40.020 and games and other programs that you'll be able to share with others. 00:00:40.020 --> 00:00:42.397 And along the way, as we're exploring Scratch, 00:00:42.397 --> 00:00:44.730 you'll be introduced to the fundamentals of programming. 00:00:44.730 --> 00:00:48.270 We'll take a look at concepts like functions and loops and conditions 00:00:48.270 --> 00:00:51.810 and variables and other types of ideas that you'll see in programming. 00:00:51.810 --> 00:00:55.150 And even though the Scratch programming language looks a little bit different, 00:00:55.150 --> 00:00:58.440 it uses blocks instead of the more traditional text-based programming 00:00:58.440 --> 00:01:01.080 that you might see in other programming languages later, 00:01:01.080 --> 00:01:03.810 really Scratch is based on the same fundamental ideas. 00:01:03.810 --> 00:01:08.170 And it's going to use the same principles of computational thinking. 00:01:08.170 --> 00:01:10.860 So with that, let's go ahead and take a look at Scratch and dive 00:01:10.860 --> 00:01:14.900 in to our very first Scratch project. 00:01:14.900 --> 00:01:18.490 So once you go to Scratch's website, when you click on the Create button 00:01:18.490 --> 00:01:20.530 to create a new project you'll end up seeing 00:01:20.530 --> 00:01:22.450 an interface that looks like this. 00:01:22.450 --> 00:01:25.280 And we'll be exploring this interface during this course. 00:01:25.280 --> 00:01:27.520 But it's broken down into a couple of parts. 00:01:27.520 --> 00:01:30.760 Over here on the left-hand side is our block library. 00:01:30.760 --> 00:01:33.100 You're going to build Scratch projects, ultimately, 00:01:33.100 --> 00:01:35.590 by putting together blocks in some sequence 00:01:35.590 --> 00:01:38.080 in order to get the project to do something 00:01:38.080 --> 00:01:39.520 that you would like for it to do. 00:01:39.520 --> 00:01:42.370 And you can assemble those blocks together from the block library, 00:01:42.370 --> 00:01:45.887 bringing them into this middle part of the Scratch window, 00:01:45.887 --> 00:01:48.970 which is the Block Editor, where you're going to put these blocks together 00:01:48.970 --> 00:01:52.010 to decide how it is that your project should work. 00:01:52.010 --> 00:01:54.610 But before we even get to those blocks and how they work 00:01:54.610 --> 00:01:56.410 and how to put them together, today we're 00:01:56.410 --> 00:01:59.950 going to be mostly focusing on this part of the Scratch window. 00:01:59.950 --> 00:02:03.640 This rectangle you see here is what Scratch calls the stage. 00:02:03.640 --> 00:02:06.340 And it's inside of the stage that our Scratch project 00:02:06.340 --> 00:02:07.870 will live and ultimately run. 00:02:07.870 --> 00:02:10.389 And this is, when someone runs your Scratch project, 00:02:10.389 --> 00:02:13.150 what that person is ultimately going to see. 00:02:13.150 --> 00:02:17.290 We see that right now, in the Scratch stage, we just have one character, 00:02:17.290 --> 00:02:19.480 this default Scratch cat here. 00:02:19.480 --> 00:02:22.690 And each of these characters Scratch calls a sprite. 00:02:22.690 --> 00:02:25.223 A sprite, in the world of Scratch, is just some object. 00:02:25.223 --> 00:02:27.140 It could be a character, like an animal, or it 00:02:27.140 --> 00:02:30.580 could be some other object, that lives somewhere on the stage. 00:02:30.580 --> 00:02:32.920 And ultimately, we're going to learn to have the ability 00:02:32.920 --> 00:02:36.190 to program these sprites to do what we would like for it to do. 00:02:36.190 --> 00:02:38.583 Down below we see a listing of all of the sprites 00:02:38.583 --> 00:02:40.000 that are currently in our project. 00:02:40.000 --> 00:02:43.480 Right now it's just this default cat, which is called Sprite1. 00:02:43.480 --> 00:02:46.730 And we'll start to see other parts of this interface as well. 00:02:46.730 --> 00:02:50.170 But let's start today by exploring this stage and the sprites 00:02:50.170 --> 00:02:53.540 that live on that stage and how we can manipulate them. 00:02:53.540 --> 00:02:57.370 So what we'll see right now is that our default Scratch cat is currently 00:02:57.370 --> 00:03:01.660 just in the center of this stage here, but I can move it around. 00:03:01.660 --> 00:03:04.850 And I can move it around just by clicking and holding on the cat. 00:03:04.850 --> 00:03:06.100 And then I can drag it around. 00:03:06.100 --> 00:03:07.960 I can move it to one corner of the screen 00:03:07.960 --> 00:03:10.960 or I could click and drag and move it to the other corner of the screen, 00:03:10.960 --> 00:03:12.020 for example. 00:03:12.020 --> 00:03:15.940 And what you'll notice, as I start to move the Scratch cat around 00:03:15.940 --> 00:03:20.140 on the stage, is that down below a couple of values are changing, 00:03:20.140 --> 00:03:21.880 the x-value and the y-value. 00:03:21.880 --> 00:03:27.910 Right now, for example, the x-value is 177 and the y-value is 42. 00:03:27.910 --> 00:03:30.760 But if I move the Scratch cat a little bit, move it somewhere else, 00:03:30.760 --> 00:03:37.150 now the x-value is negative 156 and the y-value is negative 77. 00:03:37.150 --> 00:03:39.940 So sprites in Scratch exist on the stage. 00:03:39.940 --> 00:03:44.240 And in particular, they exist at a particular location on that stage, 00:03:44.240 --> 00:03:47.110 which is organized into an x,y coordinate grid. 00:03:47.110 --> 00:03:50.320 And so if you imagine that this rectangle here is the stage, 00:03:50.320 --> 00:03:53.650 this looks similar to an x,y coordinate grid you might have seen in a geometry 00:03:53.650 --> 00:03:56.780 class, for example, where we have the x-value, 00:03:56.780 --> 00:04:00.850 which just represents how far to the left or to the right is our character 00:04:00.850 --> 00:04:01.750 on the stage. 00:04:01.750 --> 00:04:05.410 And we have the y-value, which represents how far up or down 00:04:05.410 --> 00:04:07.750 the sprite is on the stage as well. 00:04:07.750 --> 00:04:10.780 The perfect center of the stage is point 0,0. 00:04:10.780 --> 00:04:14.050 If x is equal to 0 and y is equal to 0, then our sprite 00:04:14.050 --> 00:04:16.269 is going to be exactly at the middle of the stage. 00:04:16.269 --> 00:04:19.269 But if we increase the x-value, make it a positive value, 00:04:19.269 --> 00:04:22.029 it'll move further towards the right part of the stage. 00:04:22.029 --> 00:04:24.885 And if we decrease the x-value, make it more negative, 00:04:24.885 --> 00:04:27.760 then the sprite is going to be further to the left side of the stage. 00:04:27.760 --> 00:04:31.210 And likewise, the same thing goes for y but in the up and down direction. 00:04:31.210 --> 00:04:33.460 If I have a sprite where y is equal to 0, 00:04:33.460 --> 00:04:36.400 it's going to be perfectly level at the middle vertically. 00:04:36.400 --> 00:04:38.505 But if I increase the y-value, then our sprite 00:04:38.505 --> 00:04:40.510 is going to move up along this stage. 00:04:40.510 --> 00:04:42.790 And if I decrease the y-value, then our sprite 00:04:42.790 --> 00:04:46.070 is going to move down along that stage as well. 00:04:46.070 --> 00:04:48.187 So we'll see those x and y values come up, 00:04:48.187 --> 00:04:50.020 not only in this interface here where we see 00:04:50.020 --> 00:04:52.930 where the sprite is on the stage but also a little bit 00:04:52.930 --> 00:04:55.780 later, once we start putting blocks together to program 00:04:55.780 --> 00:04:59.870 where our sprites are going to be on the stage at any given time. 00:04:59.870 --> 00:05:01.870 So right now if I wanted to take my sprite 00:05:01.870 --> 00:05:04.330 and move it back to the perfect center of the stage, 00:05:04.330 --> 00:05:07.210 I could take it and drag it to about where I think the center is. 00:05:07.210 --> 00:05:10.570 And I might be pretty close, but if I want to be even more precise, 00:05:10.570 --> 00:05:15.550 I can go down to the X field here and change what's right now 10 to 0. 00:05:15.550 --> 00:05:17.920 And I can do the same thing for y, changing what's 00:05:17.920 --> 00:05:20.780 currently negative 8 to 0 as well. 00:05:20.780 --> 00:05:26.320 And that will perfectly center the cat in the middle of the stage here. 00:05:26.320 --> 00:05:29.650 In addition to being able to change the position of the sprite, 00:05:29.650 --> 00:05:31.720 we also have a few other controls that are 00:05:31.720 --> 00:05:34.210 in this part of the Scratch interface. 00:05:34.210 --> 00:05:37.120 Over here I have the ability to give my sprite a name. 00:05:37.120 --> 00:05:39.400 Right now my sprite is just called Sprite1, 00:05:39.400 --> 00:05:42.550 which is the default name that Scratch gives to a sprite that I create. 00:05:42.550 --> 00:05:45.530 But I could rename this, I could call this the Cat, for example. 00:05:45.530 --> 00:05:49.090 And what you'll notice is that when I rename the sprite, call it my Cat, 00:05:49.090 --> 00:05:52.510 then down below in this bottom portion of the Scratch interface, 00:05:52.510 --> 00:05:55.150 this is where I see all of the sprites in my project. 00:05:55.150 --> 00:05:57.340 Right now there's just one, but each one is 00:05:57.340 --> 00:05:59.800 labeled by its name, which right now is the Cat. 00:05:59.800 --> 00:06:01.900 And as we start to get more and more sprites that 00:06:01.900 --> 00:06:03.730 will be added to our projects, it's going 00:06:03.730 --> 00:06:06.010 to be helpful to keep track of which sprite is which 00:06:06.010 --> 00:06:10.330 by knowing what the name of any given sprite is. 00:06:10.330 --> 00:06:13.240 Underneath the place where I can name any individual sprite, 00:06:13.240 --> 00:06:16.590 I also have a toggle where I can decide whether or not that sprite should 00:06:16.590 --> 00:06:18.258 be shown on the stage. 00:06:18.258 --> 00:06:21.300 Right now we are showing the cat, but I could click this button over here 00:06:21.300 --> 00:06:23.280 to hide the cat from the stage. 00:06:23.280 --> 00:06:25.770 And if I want to bring it back, I can show it again. 00:06:25.770 --> 00:06:29.940 So I can show and hide the cat to decide whether, for any particular sprite, 00:06:29.940 --> 00:06:33.480 that sprite appears on the stage or not. 00:06:33.480 --> 00:06:35.760 I also have these other two controls. 00:06:35.760 --> 00:06:38.460 This control here controls the size of the sprite. 00:06:38.460 --> 00:06:42.360 Right now the size is 100, meaning it is at 100% size, which 00:06:42.360 --> 00:06:44.850 is the normal size for any sprite. 00:06:44.850 --> 00:06:45.870 But I can change that. 00:06:45.870 --> 00:06:48.210 If I want the sprite to be half as big, I 00:06:48.210 --> 00:06:50.800 could change the size to be 50, for example. 00:06:50.800 --> 00:06:52.440 And now the sprite is much smaller. 00:06:52.440 --> 00:06:56.680 If I want to make my sprite larger I would change it to let's say 200, 00:06:56.680 --> 00:06:57.610 for example. 00:06:57.610 --> 00:06:59.970 And now the sprite is going to be larger. 00:06:59.970 --> 00:07:02.187 But for now, I'll go ahead and keep it at 100. 00:07:02.187 --> 00:07:04.020 And over time we'll start to see that we can 00:07:04.020 --> 00:07:07.020 change the size as well by way of the blocks that 00:07:07.020 --> 00:07:09.640 will be introduced a little bit later. 00:07:09.640 --> 00:07:12.690 And then finally in these controls, I have a direction control. 00:07:12.690 --> 00:07:17.070 And the direction control, controls which way that my cat, in this case, 00:07:17.070 --> 00:07:18.390 happens to be facing. 00:07:18.390 --> 00:07:21.370 Right now it's at 90, meaning 90 degrees. 00:07:21.370 --> 00:07:23.850 In other words, the cat is facing to the right. 00:07:23.850 --> 00:07:28.290 But I could rotate the cat, spin it around, and watch as I turn this dial, 00:07:28.290 --> 00:07:32.100 I can rotate spin the cat around and have it face a different direction 00:07:32.100 --> 00:07:33.030 if I want to. 00:07:33.030 --> 00:07:35.670 And when I do, you'll notice that this direction value 00:07:35.670 --> 00:07:38.020 changes and to some number of degrees. 00:07:38.020 --> 00:07:40.740 So right now it's pointing at a 39-degree angle, 00:07:40.740 --> 00:07:42.820 but I could change that back to 90. 00:07:42.820 --> 00:07:46.990 And when I do that, now the cat is facing to the right as well. 00:07:46.990 --> 00:07:49.800 So I have this ability, using this editor here, 00:07:49.800 --> 00:07:51.600 to control a lot about the sprite. 00:07:51.600 --> 00:07:52.630 I can change its name. 00:07:52.630 --> 00:07:54.720 I can change its position, its size, what 00:07:54.720 --> 00:07:58.680 direction it's facing, whether or not it shows up on the stage or not. 00:07:58.680 --> 00:08:01.150 But really, to make our programs more interesting, 00:08:01.150 --> 00:08:04.230 we don't just want to have a cat that lives in this environment. 00:08:04.230 --> 00:08:08.800 I'd like to add some other sprites to my stage as well. 00:08:08.800 --> 00:08:12.990 So let's go ahead now and try and create a new sprite. 00:08:12.990 --> 00:08:15.300 Down here at the bottom, you'll notice that inside 00:08:15.300 --> 00:08:18.450 of this region of the Scratch editor where all of my sprites live, 00:08:18.450 --> 00:08:21.540 right now it's just the cat, there's a little plus button. 00:08:21.540 --> 00:08:24.040 And this is the Create a New Sprite button 00:08:24.040 --> 00:08:26.040 and I have a couple of options for how to do so. 00:08:26.040 --> 00:08:28.498 But if I just click on this main circular button that says, 00:08:28.498 --> 00:08:29.610 choose a Sprite. 00:08:29.610 --> 00:08:33.570 I'll end up getting a whole list of different kinds of sprites 00:08:33.570 --> 00:08:34.350 that I can create. 00:08:34.350 --> 00:08:36.720 There are animals, there are people, there's 00:08:36.720 --> 00:08:38.580 different types of sports-related sprites, 00:08:38.580 --> 00:08:41.590 or food-related sprites, and more than that. 00:08:41.590 --> 00:08:44.580 And I can look through this and try and find whatever I'd like. 00:08:44.580 --> 00:08:48.720 And let's say I want to add an animal, for example, another animal other 00:08:48.720 --> 00:08:51.360 than the cat to my Scratch program. 00:08:51.360 --> 00:08:53.640 Well up here at the top I can filter down 00:08:53.640 --> 00:08:55.950 what I'm looking for by a particular category, 00:08:55.950 --> 00:08:59.430 or if I knew exactly what I was looking for, I could search for a sprite 00:08:59.430 --> 00:09:00.060 as well. 00:09:00.060 --> 00:09:03.330 But let me go to animals, for now, just to see the various different kinds 00:09:03.330 --> 00:09:06.480 of animals that can exist here. 00:09:06.480 --> 00:09:10.500 And I think I like the fish, so we'll go ahead and take the fish 00:09:10.500 --> 00:09:13.515 and add that to my stage. 00:09:13.515 --> 00:09:16.140 And so once I do that, you'll notice a couple of things happen. 00:09:16.140 --> 00:09:19.860 One, down below in this region, where I'm keeping track of all of the sprites 00:09:19.860 --> 00:09:22.260 that are a part of my project, I now have two. 00:09:22.260 --> 00:09:24.780 I have the cat and I have the fish. 00:09:24.780 --> 00:09:28.200 And you'll notice that both now appear in the main stage 00:09:28.200 --> 00:09:29.613 area of my Scratch program. 00:09:29.613 --> 00:09:31.530 And I can move them around so that they're not 00:09:31.530 --> 00:09:32.697 overlapping with each other. 00:09:32.697 --> 00:09:36.450 So I now have one cat and one fish. 00:09:36.450 --> 00:09:39.510 Whichever one is selected, highlighted in blue down here 00:09:39.510 --> 00:09:41.970 at the bottom, that's the one I'm currently working with, 00:09:41.970 --> 00:09:43.920 where I'll currently be able to add code to it 00:09:43.920 --> 00:09:47.370 or manipulate its position or size or any of the other attributes 00:09:47.370 --> 00:09:49.470 we've seen that these sprites happen to have. 00:09:49.470 --> 00:09:55.380 So this fish, for example, is currently located at x equals 73 and y equals 70. 00:09:55.380 --> 00:09:59.290 But if I switch to the cat by clicking on the cat down at the bottom, 00:09:59.290 --> 00:10:00.630 now I'm selecting the cat. 00:10:00.630 --> 00:10:03.480 And now I see the cat's position and the cat's name 00:10:03.480 --> 00:10:07.540 and the cat's size and the cat's direction as well. 00:10:07.540 --> 00:10:10.140 So using that ability, we can add new characters. 00:10:10.140 --> 00:10:13.260 We can add new objects to our Scratch project. 00:10:13.260 --> 00:10:15.840 And if we wanted multiple of a given character 00:10:15.840 --> 00:10:18.060 we can even duplicate a particular sprite. 00:10:18.060 --> 00:10:21.510 So let's imagine that I want two fish, for example, inside 00:10:21.510 --> 00:10:22.530 of this environment. 00:10:22.530 --> 00:10:25.710 I'm going to click on the fish and then I can either right-click 00:10:25.710 --> 00:10:28.060 or I can control-click on the fish. 00:10:28.060 --> 00:10:30.990 And when I do that a little menu will pop up where I can here say, 00:10:30.990 --> 00:10:32.430 let me duplicate the fish. 00:10:32.430 --> 00:10:33.840 Let's get a second fish. 00:10:33.840 --> 00:10:36.150 And you'll notice that it's called Fish2 by default. 00:10:36.150 --> 00:10:39.690 I could change that if I wanted to but Fish2 is OK. 00:10:39.690 --> 00:10:43.800 And I'll take the two fish and separate them a little bit on the stage 00:10:43.800 --> 00:10:45.520 just by moving them around. 00:10:45.520 --> 00:10:47.550 And so now I'm starting to construct this scene. 00:10:47.550 --> 00:10:51.540 And this is why you can use Scratch to tell stories or create animations 00:10:51.540 --> 00:10:53.610 or create pieces of art, just by deciding 00:10:53.610 --> 00:10:56.520 what it is that you want to exist on this stage, 00:10:56.520 --> 00:11:00.190 and then add them to the stage as well. 00:11:00.190 --> 00:11:02.190 Now one thing you might notice is that right now 00:11:02.190 --> 00:11:05.920 because I duplicated the fish, both of the fish look identical. 00:11:05.920 --> 00:11:07.098 They're exactly the same. 00:11:07.098 --> 00:11:08.890 They're both pointed in the same direction. 00:11:08.890 --> 00:11:11.948 And I could change the direction or change the size of one of the fish 00:11:11.948 --> 00:11:13.740 to make it a little bit smaller, to make it 00:11:13.740 --> 00:11:15.730 look a little bit different from the other fish 00:11:15.730 --> 00:11:18.940 if I want a variety of different types of fish in my scene. 00:11:18.940 --> 00:11:22.670 But what I'd really like to do is change its entire overall appearance, 00:11:22.670 --> 00:11:27.850 so I have two different fish that exist on the stage instead of just two copies 00:11:27.850 --> 00:11:29.470 of what looks like the same. 00:11:29.470 --> 00:11:32.650 And so here's where we're going to introduce another concept in Scratch, 00:11:32.650 --> 00:11:34.390 which is that of costumes. 00:11:34.390 --> 00:11:36.940 Every sprite can take on different costumes. 00:11:36.940 --> 00:11:40.910 And a costume is just what that sprite happens to look like. 00:11:40.910 --> 00:11:45.130 And so let's explore now how we can change the costume for one 00:11:45.130 --> 00:11:46.690 of these fish, for example. 00:11:46.690 --> 00:11:50.560 Up at the top of the Scratch window, you'll notice a couple of tabs. 00:11:50.560 --> 00:11:53.565 The tab that's selected by default is called the Code tab. 00:11:53.565 --> 00:11:55.690 And while we haven't added any code to our projects 00:11:55.690 --> 00:11:59.020 just yet, ultimately as you start to build more complex projects, 00:11:59.020 --> 00:12:01.660 you'll be using the Code tab to take blocks of code 00:12:01.660 --> 00:12:04.090 and drag them into this code editor in order 00:12:04.090 --> 00:12:08.080 to decide what it is that you're Scratch sprites are going to do. 00:12:08.080 --> 00:12:11.330 But the tab that we're interested in now is this second tab, 00:12:11.330 --> 00:12:13.480 which is called the Costumes tab, which is 00:12:13.480 --> 00:12:16.870 going to allow us to see and edit and modify the costumes that 00:12:16.870 --> 00:12:19.270 belong to any given sprite. 00:12:19.270 --> 00:12:21.430 So let's go ahead and take one of our fish. 00:12:21.430 --> 00:12:25.420 We'll go ahead and take fish2 and head over to the Costumes tab 00:12:25.420 --> 00:12:28.870 by clicking on the Costumes tab, which is next to the Code tab 00:12:28.870 --> 00:12:31.090 up at the top of the window. 00:12:31.090 --> 00:12:33.760 And when I do that, you'll see that by default the fish 00:12:33.760 --> 00:12:40.090 has four different costumes, fish-a, fish-b, fish-c, and fish-d. 00:12:40.090 --> 00:12:44.152 Right now fish-a is selected, but I could change the costume just 00:12:44.152 --> 00:12:45.610 by clicking on a different costume. 00:12:45.610 --> 00:12:48.383 If I click on fish-b, for example, now I've 00:12:48.383 --> 00:12:50.050 got a different costume that's selected. 00:12:50.050 --> 00:12:53.330 And now you immediately see in the stage that the fish looks different. 00:12:53.330 --> 00:12:55.150 It's taken on a different costume. 00:12:55.150 --> 00:12:57.340 Even though it's the same fish, it appears 00:12:57.340 --> 00:13:01.557 visually to look different because we've changed what costume it has. 00:13:01.557 --> 00:13:02.890 And I can try changing it again. 00:13:02.890 --> 00:13:06.560 Here's fish-c, and then I can try looking at fish-d as well. 00:13:06.560 --> 00:13:09.160 So you can experiment and take a look at what costumes 00:13:09.160 --> 00:13:12.340 happen to be built in by default into any given sprite 00:13:12.340 --> 00:13:14.110 and change them if you'd like to. 00:13:14.110 --> 00:13:16.092 The cat also has different costumes. 00:13:16.092 --> 00:13:18.550 They don't look nearly as different, but what you'll notice 00:13:18.550 --> 00:13:22.390 is that the cat can be in two different costumes that 00:13:22.390 --> 00:13:24.340 are just in different leg positions. 00:13:24.340 --> 00:13:29.200 So in costume1, the legs are straight, in costume2, the legs are bent. 00:13:29.200 --> 00:13:33.283 And if you watch this sprite carefully, as I switch between the costumes, 00:13:33.283 --> 00:13:35.200 it almost looks like the cat is walking, which 00:13:35.200 --> 00:13:37.150 is why we've got those two different costumes, 00:13:37.150 --> 00:13:40.960 to give the appearance of walking if we would like to. 00:13:40.960 --> 00:13:44.290 But let's go back to the fish, which has four different costumes that I 00:13:44.290 --> 00:13:47.200 can choose from, each of which looks very different. 00:13:47.200 --> 00:13:49.270 And I'm not limited to just those four. 00:13:49.270 --> 00:13:51.610 If I wanted to create additional costumes 00:13:51.610 --> 00:13:55.040 I have the ability to create additional costumes too. 00:13:55.040 --> 00:13:56.330 How could I do that? 00:13:56.330 --> 00:13:59.230 Well, here in the costume editor, down at the bottom 00:13:59.230 --> 00:14:01.810 underneath where all of these costumes are, 00:14:01.810 --> 00:14:05.260 there is another plus button that looks very much like that button 00:14:05.260 --> 00:14:08.350 for creating a new sprite that we saw a moment ago. 00:14:08.350 --> 00:14:12.460 But this time, this is the button for creating a new costume. 00:14:12.460 --> 00:14:14.170 And here I have a couple of choices. 00:14:14.170 --> 00:14:17.740 I could search inside of Scratch's own library of costumes 00:14:17.740 --> 00:14:20.560 to find a costume that I might want. 00:14:20.560 --> 00:14:22.270 I could also paint a new costume. 00:14:22.270 --> 00:14:25.470 So if you're feeling artistic, you'd like to create a costume of your own, 00:14:25.470 --> 00:14:26.720 we could try painting our own. 00:14:26.720 --> 00:14:28.970 So I could paint my own fish, for example. 00:14:28.970 --> 00:14:31.210 And here I have a bunch of different tools 00:14:31.210 --> 00:14:32.950 that I can use to paint the costume. 00:14:32.950 --> 00:14:35.530 So I'll go ahead and use the Paintbrush tool that will just 00:14:35.530 --> 00:14:38.950 let me draw a new costume for my fish. 00:14:38.950 --> 00:14:41.450 And I can choose what color I'd like the costume to be too. 00:14:41.450 --> 00:14:45.190 So I'll go ahead and choose maybe this color, 00:14:45.190 --> 00:14:51.620 and I can start to draw something like a fish. 00:14:51.620 --> 00:14:53.020 We'll draw a fish. 00:14:53.020 --> 00:14:54.320 We'll give the fish an eye. 00:14:54.320 --> 00:14:56.987 So if you are feeling a little more creative, a little artistic, 00:14:56.987 --> 00:14:58.820 you can try and draw fish for yourself. 00:14:58.820 --> 00:15:04.190 I can use the Fill tool if I want to pick a different color maybe and fill 00:15:04.190 --> 00:15:06.110 in the fish with a particular color. 00:15:06.110 --> 00:15:08.630 So you can be creative about this too. 00:15:08.630 --> 00:15:09.270 Now of course. 00:15:09.270 --> 00:15:11.672 I do think that the fish that Scratch provided for me 00:15:11.672 --> 00:15:14.630 look a little bit nicer than the fish that I was able to draw on my own 00:15:14.630 --> 00:15:15.680 just now. 00:15:15.680 --> 00:15:18.800 But I can modify the existing costumes too. 00:15:18.800 --> 00:15:21.500 Using the same costume editor, if I wanted 00:15:21.500 --> 00:15:24.120 to fill in part of the fish with a different color, 00:15:24.120 --> 00:15:26.750 maybe I want a little bit of green in this fish. 00:15:26.750 --> 00:15:28.730 I could take a green that I happen to like 00:15:28.730 --> 00:15:33.230 by just adjusting these dials to specify what color I want. 00:15:33.230 --> 00:15:36.890 And still using the Fill tool, I could fill in parts of the fish 00:15:36.890 --> 00:15:39.680 with a little bit of green, for example, just to make the fish 00:15:39.680 --> 00:15:42.120 look exactly how I want it to look. 00:15:42.120 --> 00:15:44.930 So you have a lot of creative freedom in this costume editor. 00:15:44.930 --> 00:15:49.130 You have the ability to create an entirely new costume just 00:15:49.130 --> 00:15:52.070 by drawing it and painting it yourself, or you have the ability 00:15:52.070 --> 00:15:54.560 to take a costume that already exists and add 00:15:54.560 --> 00:15:58.160 to it by painting over it or filling it in with different colors 00:15:58.160 --> 00:15:59.460 if you'd like to. 00:15:59.460 --> 00:16:02.690 And you even have the ability, if you want, to upload a costume. 00:16:02.690 --> 00:16:04.930 If you have a photo or an image on your computer 00:16:04.930 --> 00:16:07.430 that you'd like to use as a costume in your Scratch program, 00:16:07.430 --> 00:16:08.690 you can upload it there. 00:16:08.690 --> 00:16:11.148 Or you could even take a photo with your computer's camera, 00:16:11.148 --> 00:16:16.820 if it has one, in order to add that photo as a costume as well. 00:16:16.820 --> 00:16:20.340 In addition to changing what these sprites look like, 00:16:20.340 --> 00:16:23.567 we also have the ability to give these sprites sounds that they can play. 00:16:23.567 --> 00:16:25.400 And so up at the top, you've noticed that we 00:16:25.400 --> 00:16:28.070 have a Code tab and a Costume tab, there's 00:16:28.070 --> 00:16:31.388 also a Sounds tab for the sounds that are associated 00:16:31.388 --> 00:16:32.930 with each of these different sprites. 00:16:32.930 --> 00:16:35.210 And later on, we'll see ways that we can include 00:16:35.210 --> 00:16:37.410 those sounds as part of our project. 00:16:37.410 --> 00:16:39.650 So right now the fish, by default in Scratch, 00:16:39.650 --> 00:16:41.630 has two different sounds that it has. 00:16:41.630 --> 00:16:44.210 One is called bubbles and I can play that if I'd like to. 00:16:44.210 --> 00:16:48.590 [UNDEWATER BUBBLING] 00:16:48.590 --> 00:16:50.180 And one is called ocean wave 00:16:50.180 --> 00:16:55.620 [WAVES CRASHING] 00:16:55.620 --> 00:16:58.667 So those are the sounds that are built-in as just part of the fish. 00:16:58.667 --> 00:17:01.500 And later on, as we're building stories with it, maybe at some point 00:17:01.500 --> 00:17:02.833 we'll want to play those sounds. 00:17:02.833 --> 00:17:06.030 And later in the course, we'll see ways that we can do just that. 00:17:06.030 --> 00:17:09.569 And different sprites have different sounds built-in by default. The cat, 00:17:09.569 --> 00:17:12.900 for example, if I click on the cat, has one sound by default, which is just 00:17:12.900 --> 00:17:14.520 the meow sound, which I can play. 00:17:14.520 --> 00:17:16.010 [CAT MEOWING] 00:17:16.010 --> 00:17:18.140 But if I wanted to, I could add more sounds 00:17:18.140 --> 00:17:20.810 as by recording something myself. if I wanted 00:17:20.810 --> 00:17:23.000 to record a sound to give to a sprite. 00:17:23.000 --> 00:17:25.035 And you can also upload a sound if you have 00:17:25.035 --> 00:17:27.410 a sound file on your computer that you'd like to include, 00:17:27.410 --> 00:17:31.350 maybe some music you want to go along with your project, or a sound effect, 00:17:31.350 --> 00:17:34.647 you have the ability to upload those sounds too. 00:17:34.647 --> 00:17:37.730 But let's go back to the Code tab, which we'll look at a little bit later. 00:17:37.730 --> 00:17:39.050 And now we've got our stage. 00:17:39.050 --> 00:17:41.930 We've got our stage with a cat and two fish. 00:17:41.930 --> 00:17:44.810 But right now, what's a little bit boring about my project 00:17:44.810 --> 00:17:45.657 is the background. 00:17:45.657 --> 00:17:47.990 Right now I'm just dealing with a plain white background 00:17:47.990 --> 00:17:49.160 with nothing else on it. 00:17:49.160 --> 00:17:52.800 And I'd like to make that background a little more creative as well. 00:17:52.800 --> 00:17:55.430 And so this background, we've been calling the stage. 00:17:55.430 --> 00:17:59.120 The stage is this rectangle where our sprites live. 00:17:59.120 --> 00:18:01.610 And each stage is allowed to have backdrops. 00:18:01.610 --> 00:18:06.170 The backdrop just decides what image appears behind all of the sprites. 00:18:06.170 --> 00:18:09.080 And by default when you create a Scratch project for the first time, 00:18:09.080 --> 00:18:12.830 the backdrop is just going to be solid white, but we can change that. 00:18:12.830 --> 00:18:15.680 Down at the bottom right, here we see the stage. 00:18:15.680 --> 00:18:18.650 And I have the ability by clicking on this button in the bottom right, 00:18:18.650 --> 00:18:21.900 to choose a backdrop for my project too. 00:18:21.900 --> 00:18:23.810 And so if I click Choose a Backdrop you'll 00:18:23.810 --> 00:18:26.598 see that I have a whole variety of different backdrops 00:18:26.598 --> 00:18:28.640 that I can choose from in different environments. 00:18:28.640 --> 00:18:31.670 I see I have a wintry scene if I want to create a wintry scene. 00:18:31.670 --> 00:18:35.900 We have some indoor scenes if I want to, some outside, like city scenes. 00:18:35.900 --> 00:18:38.930 And this one looks nice, it's an underwater scene, maybe. 00:18:38.930 --> 00:18:42.000 And I'll use that because I've got a bunch of fish on my stage. 00:18:42.000 --> 00:18:45.320 And so maybe it'll make sense to put my fish in an underwater scene, 00:18:45.320 --> 00:18:46.380 for example. 00:18:46.380 --> 00:18:47.630 So I'll choose that backdrop. 00:18:47.630 --> 00:18:52.470 It's called underwater1 by default, and let's use that one. 00:18:52.470 --> 00:18:54.830 So I'll click underwater1 and you'll see, 00:18:54.830 --> 00:18:57.380 immediately, the backdrop now changes. 00:18:57.380 --> 00:19:01.430 And I can now have my two fish that are living inside of this underwater scene. 00:19:01.430 --> 00:19:05.450 And much as was the case with costumes or with sounds, if I had my own image, 00:19:05.450 --> 00:19:10.760 or I wanted to draw my own image to use as the backdrop for my Scratch project, 00:19:10.760 --> 00:19:13.790 I could certainly do that as well. 00:19:13.790 --> 00:19:17.900 At this point now, the cat though is starting to feel a little out of place. 00:19:17.900 --> 00:19:19.400 I'm designing an underwater scene. 00:19:19.400 --> 00:19:20.840 I've got two different fish here. 00:19:20.840 --> 00:19:22.980 The cat, maybe, doesn't belong here. 00:19:22.980 --> 00:19:26.750 And so if ever I want to remove a sprite, here's how you could do that. 00:19:26.750 --> 00:19:28.832 I'm going to click on the cat because that's 00:19:28.832 --> 00:19:30.290 the one that I'm currently editing. 00:19:30.290 --> 00:19:33.110 And if I don't want the cat, there's a little Trash icon 00:19:33.110 --> 00:19:36.530 that appears next to whichever sprite happens to currently be selected. 00:19:36.530 --> 00:19:41.030 And if I don't want the cat to be there, I can just press that Trash icon, 00:19:41.030 --> 00:19:43.340 and that's going to remove the cat. 00:19:43.340 --> 00:19:46.940 And so now, I have this scene with these two fish 00:19:46.940 --> 00:19:48.920 that happen to be swimming around in the water. 00:19:48.920 --> 00:19:50.810 And I could change the scene if I wanted to. 00:19:50.810 --> 00:19:53.990 Maybe I want to take fish2, this yellow and green fish, 00:19:53.990 --> 00:19:56.812 and flip it around so that it's facing the other direction. 00:19:56.812 --> 00:19:58.520 So that one fish is swimming to the right 00:19:58.520 --> 00:20:01.740 and one fish is swimming to the left, for example. 00:20:01.740 --> 00:20:03.390 So how could I do that? 00:20:03.390 --> 00:20:06.350 Well, next, every fish, remember we've got a direction control 00:20:06.350 --> 00:20:10.370 for any given sprite, that controls what direction that fish 00:20:10.370 --> 00:20:11.780 happens to be facing. 00:20:11.780 --> 00:20:15.470 So if I want to take a fish and have it face to the left, for example, 00:20:15.470 --> 00:20:19.230 I could rotate, rotate, rotate, have it face towards the left, 00:20:19.230 --> 00:20:23.510 at like negative 88 or negative 90 degrees or so. 00:20:23.510 --> 00:20:27.590 But this isn't quite perfect because, as you're probably noticing, 00:20:27.590 --> 00:20:29.360 the fish is upside down now. 00:20:29.360 --> 00:20:31.970 So normally with this direction control, when 00:20:31.970 --> 00:20:33.860 I'm trying to control the direction, it's 00:20:33.860 --> 00:20:38.570 just rotating whatever the sprite is in whatever direction I tell it to rotate. 00:20:38.570 --> 00:20:40.970 But what that means is that if it starts facing the right 00:20:40.970 --> 00:20:46.100 and I rotated 180 degrees all the way to face the other direction, now suddenly 00:20:46.100 --> 00:20:47.810 it's going to be upside down. 00:20:47.810 --> 00:20:50.900 And that's maybe not what I want for it to do. 00:20:50.900 --> 00:20:53.150 But it turns out Scratch has a fix for this. 00:20:53.150 --> 00:20:57.260 And every sprite can be in a number of different rotation styles, what 00:20:57.260 --> 00:21:00.320 style it's going to use when rotating. 00:21:00.320 --> 00:21:02.720 By default, it uses this all-around style, 00:21:02.720 --> 00:21:06.170 where it can be facing any direction that we want, rotating all around. 00:21:06.170 --> 00:21:09.713 But there's also the second one that's just called Left and Right 00:21:09.713 --> 00:21:12.380 and that will just let the sprite face in one of two directions. 00:21:12.380 --> 00:21:15.630 Either it's looking to the right or it's looking to the left. 00:21:15.630 --> 00:21:17.750 And so if I change the rotation style to Left, 00:21:17.750 --> 00:21:19.640 Right by clicking on this middle button here 00:21:19.640 --> 00:21:23.360 that's got one arrow facing the right and one arrow facing the left, 00:21:23.360 --> 00:21:26.420 now when I rotate a little bit nothing happens 00:21:26.420 --> 00:21:30.150 because it's only ever going to face to the right or face to the left. 00:21:30.150 --> 00:21:33.150 But if I rotate it all the way around to the other side, 00:21:33.150 --> 00:21:37.190 now I have the sprite that's facing the other direction. 00:21:37.190 --> 00:21:40.430 And that's how I can get one sprite that's looking over to the right 00:21:40.430 --> 00:21:43.477 and there's one sprite that's looking over to the left. 00:21:43.477 --> 00:21:44.810 And I happen to like this scene. 00:21:44.810 --> 00:21:46.940 If I wanted to see it in full-screen there's 00:21:46.940 --> 00:21:50.330 a full screen icon in the upper right, where if I click on that button 00:21:50.330 --> 00:21:52.190 I now see my stage in full screen. 00:21:52.190 --> 00:21:55.980 I can see exactly what it's going to look like, which is quite nice. 00:21:55.980 --> 00:21:58.160 And I now have my first Scratch project. 00:21:58.160 --> 00:22:00.350 I haven't added any code just yet, but I've 00:22:00.350 --> 00:22:03.410 added some sprites, some characters that are part of my scene. 00:22:03.410 --> 00:22:07.547 I've added a different backdrop that I can use to my scene as well. 00:22:07.547 --> 00:22:09.380 And if I wanted to save this, because I want 00:22:09.380 --> 00:22:11.840 to make sure I can keep this and use it a little bit later, 00:22:11.840 --> 00:22:13.590 I have a few options. 00:22:13.590 --> 00:22:17.837 One option in the File menu, I can save a project to my computer. 00:22:17.837 --> 00:22:19.920 And that will download the project to my computer, 00:22:19.920 --> 00:22:22.140 such that later if I want to open it up again, 00:22:22.140 --> 00:22:26.090 I can click Load from your computer and load that file that I've just saved. 00:22:26.090 --> 00:22:28.550 But also, if you create a Scratch account 00:22:28.550 --> 00:22:31.850 by clicking on this Join Scratch button, if you don't already have it, and then 00:22:31.850 --> 00:22:34.010 sign into your account, you'll have the ability 00:22:34.010 --> 00:22:36.290 to save projects to Scratch's own website. 00:22:36.290 --> 00:22:38.090 And once you do that if you'd like to, you 00:22:38.090 --> 00:22:41.570 could share your project with the world, to send it to friends and family, 00:22:41.570 --> 00:22:44.780 and to let other people that are using Scratch have an opportunity to see 00:22:44.780 --> 00:22:48.270 your project and try it out as well. 00:22:48.270 --> 00:22:51.920 So now that we have the ability to create these sprites 00:22:51.920 --> 00:22:55.100 and put them onto the stage, we can create whatever environment 00:22:55.100 --> 00:22:58.280 we want for the story, or for the animation, or for the game, 00:22:58.280 --> 00:23:02.120 or for the other program, that we might be trying to create in Scratch. 00:23:02.120 --> 00:23:05.120 But right now these sprites aren't really doing anything. 00:23:05.120 --> 00:23:06.930 The stage is always staying the same. 00:23:06.930 --> 00:23:08.600 The fish are always the same. 00:23:08.600 --> 00:23:10.670 And, ultimately, what we're going to look at next 00:23:10.670 --> 00:23:13.760 is about programming, how it is that we can write code. 00:23:13.760 --> 00:23:17.210 And in particular, by using these blocks and assembling them together 00:23:17.210 --> 00:23:21.260 into stacks of blocks that perform various different activities and tasks, 00:23:21.260 --> 00:23:24.830 we're going to be programming these sprites in the backdrop and the stage, 00:23:24.830 --> 00:23:27.140 to do what we want them to do, to create all the more 00:23:27.140 --> 00:23:30.140 interactive stories and games and animations 00:23:30.140 --> 00:23:33.080 that we can create all through the use of Scratch. 00:23:33.080 --> 00:23:34.650 But we'll explore that next time. 00:23:34.650 --> 00:23:36.780 That's it for an introduction to Scratch for today. 00:23:36.780 --> 00:23:39.500 And next time, we'll take a look at how we can take that stage 00:23:39.500 --> 00:23:42.610 and begin programming with it as well.