[MUSIC PLAYING] BRIAN YU: Welcome back, everyone, to An Introduction to Programming with Scratch. And last time we took a look at the fundamentals of programming-- putting together a sequence of instructions that we called Functions by assembling these different colored Scratch blocks. And by putting together these different colored Scratch blocks, we were able to bring our projects to life. 

We were able to take characters, or sprites, on the stage, and have them move around, or draw pictures, and play sound, and more. And so today, let's take those concepts of programming and build upon them a little bit more. I'll go ahead and open up Scratch again, and let's start with a program that we've seen before. 

I'll go ahead and go into the Looks section of the blocks and pull out this Say Hello For 2 Seconds block. And as you might recall, when I click on this block to run this Stack, or script of code, you'll see that my cat over on the stage says "hello" for two seconds, and then it stops. And so that seems to work well, but notice that in order to run this program, I had to click on the code that I wanted the cat to run. 

And that might be fine, but if you've used programs on your computer or on your phone before, then you probably haven't specifically told the program which part of the code you want it to run when. You open up an app and some code runs, or you click a button and some code runs, or you type something onto your keyboard and some code runs-- you're not specifically pointing to what lines of code in a program you generally want to run. 

And one other problem here might be what might happen if I have multiple scripts across multiple sprites maybe. Imagine that it's not just the cat saying "hello, " but the cat talking to-- let's pick another sprite, let's pick the dinosaur. So I'll go into Animals and choose the dinosaur, and maybe I want these two to say hello to each other. 

So I'll move it so that the cat and the dinosaur are next to each other, and I want to turn the dinosaur around so that they're facing each other. And I can do that recall by going into the direction for the dinosaur and having it face the left instead of facing the right. 

And now it seems like the dinosaurs upside down, so I just need to remember to change the rotation style to left and right instead of all around-- and so now the cat and the dinosaur are facing each other. And if I want them both to say hello to each other, well then this dinosaur-- notice the dinosaur is now selected-- is also going to need a block that lets it say hello. 

So I'll also give it a block that says Say Hello For 2 Seconds-- but now if I want the cat to say hello to the dinosaur, well, then I'll need to go to the cat, click the Say Hello block, but then very quickly click on the dinosaur and click Say Hello too so that they can both say hello to each other. 

It was a bit tedious for me to have to quickly jump back and forth between two sprites, and you could imagine that at a more complex project where a sprite might have multiple different scripts that we want to run, or you might have many more sprites-- it's not going to be possible for me to, in any reasonable amount of time, go to all of the different sprites and start up all of the different blocks that I want to run. 

It would be better if I could just say, let's start the project, and when the project starts then that I want all of these scripts of code to run automatically. And we can do just that via this button-- it's in the upper right of the Scratch window-- this is the flag. And generally when you click on this green flag, that marks the start of your Scratch project. 

Of course right now, when I click on this green flag-- nothing's happening, and so here is where we're going to introduce a new concept in programming and that's the concept of an Event. And we can see the Event blocks as one of the options along the left hand side of the Scratch window. And an Event is just something that happens inside of our program that we could have some code respond to. 

We could say that, when something happens-- for example, when the flag is clicked-- then I want the cat to say hello for two seconds, or I want the dinosaur to say hello for two seconds as well. And so, we do have this very first Event block here, When Flag Clicked, and I'm going to take this block and drag it on top of the Say Hello For 2 Seconds block. 

And so now I've attached my code to a particular Event-- this block here is called When Flag Clicked. It means that when this Event happens, when the flag is clicked, we are going to run all of the code that is attached beneath it. And notice that nothing can be attached on top of this event block-- this event is the beginning of the script of these blocks of code that I want to now run. 

And so now, when I click on the green flag, the dinosaur is going to respond by saying hello for two seconds. So I go back to the project here, click on the green flag, and the dinosaur says "hello. " And now if I want the cat to say hello too, well, then all I need to do is click on the cat in the sprite chooser down below, and add the When Flag Clicked Event to it as well. 

So I'll take the When Flag Clicked block, drag it on top of the Say block, and now-- when I click the green flag-- I just have to click once and both the cat and the dinosaur are going to say hello rather than me having to click one block immediately very quickly, jump to another sprite, and then click on the block as well. 

And the nice thing now is that someone can run my project without ever looking at my code and the code will still work. They don't have to know which blocks to click on-- they can just click on the green flag and see the project work. And in fact, that's what happens if you were to share your Scratch project on Scratch's website-- sending it to friends or family for example. They'll usually just see your project without seeing the code at first, and they can run your project, and see that both the cat-- and the dinosaur, in this case, are going to say hello. 

So these are Events, where when something happens in the project, we can respond to that happening by having some blocks of code run. But there are other Events that we can use as well-- and let's take a look at another Event now. I'll delete the cat and the dinosaur for now, and let's add a new sprite-- let's pick an animal, and let's go back to the duck here. 

So we have the duck and the Event that we'll take a look at now is this one here-- it's called When This Sprite Clicked. Meaning, when this sprite is clicked on, some code is going to run in response to the fact that I've clicked on the duck in this case. And I can have anything happen, and maybe what I'll have happened just for now is I'll go into Motion, and I'll have the duck go to a random position. 

So every time I click on the duck, it's going to go now to a random position. So go into the stage, I'll click on the duck, and the duck moves. I'll click the duck again and it moves, I click the duck again and it moves-- and If I wanted it to move a little bit more smoothly, remember that Go To will immediately jump to a random position. But I could instead, by removing this block and replacing it with this one, have the duck glide to a random position-- take one second and just glide smoothly to a different position. 

Now every time I click on the duck, you'll notice the duck glide across the stage to a different random position on that stage. And it's responding, again, not to when I'm clicking on the code itself, but when I'm clicking on the duck, and the duck is responding because it's an Event. 

The Event is when the sprite is clicked on, we're going to glide. And what you'll notice too is that, on the left side of the Scratch window, when the sprite is clicked-- you'll see this script light up to tell us and indicate to us that this script is currently running. Right now it's not running, but notice that as soon as I click on the duck it lights up for one second as the duck is moving, and then it stops being lit. 

And while it's lit, that's when we know that this particular script happens to be running. And so the ability to have sprites respond when we click on something-- on the stage, when we click on that sprite-- on the stage gives us a lot of flexibility and creative potential for creating new types of user interfaces-- for letting the user interact with our project in different ways. 

In fact, you might think of this as something like a button where, when you click on a button on a computer program, something happens in response to clicking on that button. And now that we have this Event, When Clicked, we can create buttons of our own inside of our Scratch projects. And so let's try just that-- I'll get rid of the duck for now, and let's add some backdrops that we might want for our project. 

I'll add a new backdrop and-- I like the Arctic backdrop, so we'll pick that one first-- and let's choose a couple that I might like to use in this project. So I'll choose another one, and let's go now to the jungle-- that one seems interesting, slightly different. And we'll do one more, and we'll go back to the underwater one that we were using with the fish before. 

And so I've got three different backdrops that are part of my project-- I've got the Arctic backdrop, I've got the jungle backdrop, and I've got the underwater backdrop here. Of course, only one backdrop can be active at one time-- we can switch between them-- but only one can be there at any given time. 

So let's add some buttons to let the user control which backdrop is going to be selected. I will add a sprite, and notice that there are a couple of different types of buttons that I can choose from-- I'll go ahead and choose this button, Button2. And I'll drag the button down to maybe the left side of the screen-- and let's first modify the button-- I'll go to the Costumes and I'll add some text to the button. 

I'll add some text and the text will say Arctic, for example-- I'll select the text, change its color, and I'll make sure that this is by clicking on the arrow. Make the text a little bit bigger and center the text approximately on the button-- and so now I have one button that says Arctic on my project. 

But of course, when I click on the Arctic button, nothing's happening just yet. So let's add an Event such that, when I click on this button, something is going to happen. I'll go back into Events, the Event I want is When This Sprite Clicked. And when this sprite is clicked, what do I want to happen? Well, I want the backdrop to change to the Arctic backdrop. 

The backdrop changing, that has to do with the look of the project, so we'll go to the Look section of blocks and let's switch backdrop to Arctic. And now when I click on the button, you'll notice the backdrop change. I clicked on the button and, because we have that Event, it's responding to us as well. 

And so now let's add buttons for each of the other backdrops that I might want to switch to in this project-- and I could do that by doing exactly what I've just done, by adding a new sprite, choosing the button again, adding some text. But it'll be a little bit easier actually for now to just duplicate the sprite that I already have-- this button here. 

So I'll go ahead and Right-click or Control-click on the sprite and click Duplicate-- I've got another button, these are just called Button2 and Button3 for now. It'll be a little bit nicer if I give them names-- I'll call this button Arctic Button, and I'll call this button Jungle Button. What do I need to do? Well, let's go into Costumes and first change this text. 

Let's change the text to Jungle, recenter the text a little bit there, and now when this sprite is clicked-- when the jungle button is clicked-- I can switch the backdrop to the jungle instead. 

And notice that in the upper right portion of the Code Editor, you'll always see a slightly transparent image of what sprite you're currently working on-- in case you ever forget, it's also selected down below-- but right now I can tell because I see this slightly faded Jungle Button that right now I'm editing the code for this Jungle Button. 

And now when I click on the button, the backdrop changes to the jungle-- and I can drag this so that it's underneath the Arctic Button. And let's add one more button by Control-click and duplicate this button-- I'll change the name of the button to Underwater Button, and now we'll go into costumes-- and change the text, change this to Underwater. 

The text is a little too long, so I'll need to make it a bit smaller to fit on the button-- that's OK-- I can just click on the arrow and that will let me drag and resize various different elements on my costume. So now I've got a button that says Underwater, and I'll switch back to the Code tab now instead of the Costumes tab. 

And now, when this sprite is clicked, let's switch the backdrop to Underwater 1, which was the name of that backdrop. And now when I click Underwater, we switch to the underwater backdrop. I'll stack these buttons on top of each other-- and now what I have are three buttons that the user can click on to switch between the various different backdrops. 

Depending on which button they click, they'll be able to see the backdrop respond to the buttons that they're clicking on as well. And so using this we really have the ability to let the user interact with the stage-- click on the stage and see something actually happen. 

And I'll show you one more example of this-- I'll get rid of our buttons for now, and I'll go back to backdrops, and go ahead and switch us back to the plain white backdrop. But let's add some sprites that the user might interact with, I'll go ahead and add sprites. And so far I've mostly been using animals, but let's jump to the Music tab for now and add a few instruments. 

Let's add a snare drum, and let's add one more-- let's add the conga drums, and let's add one more-- let's add the cymbal. So we'll go ahead and move these around-- I've got three different drums. And now, when I click on each of them-- let me go to Events and drag out this When This Sprite Clicked button. 

We'll go into Sound and we can play a sound, and I'll play-- we have a bunch of different snare drum sounds I can choose from-- which is like the tap snare, for example. And let's add a sound to each of these various different drums for when I click on that sprite-- so for the conga drums, I'll go back to Events, When This Sprite Clicked, I go back to Sounds and say let's play a sound. 

Let's play the-- let's go with the high conga sound-- and finally we go into the cymbal, and say-- now when the cymbal is clicked, let's go ahead and play the sound crash cymbal. And just with that, with two blocks of code for each of my three drums-- one Event and one block that plays a sound-- now I have a drum kit that I've built just using Scratch. 

When I click on any one of these drums, you hear some sounds, and you can have fun with that adding other instruments, playing music-- remember we have that music extension that we took a look at last time that gives you various different options for playing notes and playing other instrumental sounds. 

And so you could create some music, and let the user create some music just by clicking on things inside of their Scratch project. And so that then is the power of responding to a Click Event-- clicking is an Event, the user clicking somewhere on the stage. And just by adding this one block, When This Sprite Clicked, we were able to add functionality-- some behavior that happens, some functions that run when we click on a particular sprite. 

But clicking isn't the only way that users can interact with a project, they might also, for example, type something onto the keyboard-- press a key, for example, and that too is an Event. We've seen a couple of different types of Events now, but pressing a key on the keyboard is absolutely an Event too that we might want our Scratch projects to be able to respond to. 

So let's give that a try-- I'll get rid of our drums for now, and let's add a fish. We'll go back to the fish and we'll bring the fish into our project, and I would like for the fish to do something when I press a key. So let's start simple-- let's first figure out what Event do I need to use-- and well we have this block here that is When Space Key Pressed. 

Which I guess would mean that, when I press the space bar on my keyboard, something's going to happen. What do I want to have happen? Well, let's go into sound, and let's Play the Sound Bubbles Until Done. And so now, I'll go ahead and press the Space key-- and when I press Space key, you hear the bubbles-- and every time I press this Space key, that's a different Event and that's going to trigger the running of that code. 

But notice too that this block is actually customizable-- I can change it, parameterize it slightly, just by clicking on this arrow. And this opens up a menu where I can choose what key it's going to respond to-- it doesn't just have to be when the Space bar on my keyboard is pressed. I can have it respond to, let's say, the Right arrow or the Left arrow. 

So I go to Right arrow, and instead of playing a sound, when you get the right arrow-- let's go ahead and change the x value by 10. Remember that each sprite exists in this xy coordinate grid on the stage, where x refers to how far to the left or to the right a particular sprite is-- and y refers to how far up or down a particular sprite is. 

And so now, the Right arrow key is going to move the fish to the right by 10 spaces. So I'll press the Right arrow key and you'll see the fish move a little bit-- press it again, and it moves, and it keeps moving every time I press that key. Let's now add the ability for this Right to respond to the Left arrow key. 

And this is going to be very similar, I just want to move in the opposite direction-- I want to go left instead of going right. And I could drag the event out and then drag another change x by and change it to negative 10 instead of 10 this time. But in this case, because it's very similar to the code I've already written, I can actually Control-click or Right-click on this script and just say Duplicate. 

And when I Duplicate, I get a copy of what it is that I've just written and now I can modify it. Instead of responding to the Right arrow, let's have this script respond to the Left arrow. And instead of changing x by 10, let's change x by negative 10 to have the fish move in the negative direction instead. 

And just for fun, let's go ahead and click on the stage and change the backdrop to underwater so that it actually feels like the fish is swimming around underwater. And so now when I press the Right arrow, you'll see the fish moving to the right, and when I press the Left arrow, the fish is moving backwards? 

That may not be exactly what I want, but it is moving to the left at least. And I can make this a little better maybe by allowing its rotation to change-- let it face the left when it's moving to the left, let it face the right when it's moving to the right. And remember I can do that just by using this Point In Direction block. 

So when the Right arrow is pressed, let's go ahead and Point In Direction 90 degrees, meaning facing the right, and move 10 steps. And if the Left arrow key is pressed, let's Point In Direction negative 90. And if you didn't remember what number it was, you could use this dial of course to change the value as well and then change x by negative 10. 

And this might be closer, let's try it out-- I press Right and the fish moves to the right. Now I press the Left arrow key and the fish turns upside down-- OK, not quite what I wanted. 

Again, by default-- when you rotate a sprite, it's just going to rotate in a circle-- which means it might end up upside down. If you just want it to be able to go back and forth between left and right, be sure to go to Direction and change the fish's rotation style to left and right. And now, when it goes right, it faces the right, and when it goes left, it faces the left. 

Notice too that, if you wanted to change this with code, you also have this block here-- Set Rotation Style-- that will let you using a block of code decide what rotation style that particular sprite should have. And so now I have the ability to let this fish move left and right-- and I could add to this too. 

If I want to let it move up and down, then I'll add one more Event, and say-- not when the Space key is pressed, but when the Up arrow is pressed. Let's go ahead and have it move-- we're not changing x anymore, we're instead changing y because y refers to the up and down direction of the sprite. 

So when the Up arrow key is pressed, we're going to change y by 10, and I'll duplicate this by going to the Event block Control- or Right-clicking, clicking Duplicate. And now, when the Down arrow is pressed, let's change y by negative 10. And so now I can get my fish to move to the right, I can get my fish to move to the left, I can get it to move up or down as well. And I can get it to move across the stage all just by pressing keys on the keyboard. 

And using that ability, you could imagine trying to create some sort of game. Maybe you've played a game on a computer before where you use the arrow keys or other keys on the keyboard to move some character around. Now we have that exact same ability within Scratch itself too. By clicking and by pressing various different keys on the keyboard, we can get our sprite to respond to that as well. 

And it's not just the Space and the arrow keys-- it's letters of the alphabet that you could have be pressed, or numbers on the keypad for example that might be pressed. And so let's give that a try too just for fun-- I'll add a few more blocks here. Let's let the fish change in size-- maybe I want to be able to choose between how big or small the fish is going to be. 

And so when the 1 key is pressed-- let's make it small when you press 1. So we'll go into Looks and let's set the size to maybe 50%. And I'll duplicate this block again by clicking, or Right-clicking or Control-clicking on the Event block, clicking Duplicate. Now when the 2 key is pressed, let's make it normal size 100, and we'll duplicate one more time. 

Now, when the 3 key is pressed-- let's add the size to be bigger, we'll set it to be 200%. And so now, watch what happens-- I can still move the fish around, it's still responding to the arrow keys, but now I can also use the numbers to control how big or small the fish is going to be. 

If I press 1, the fish shrinks-- it's now 50% of the usual size. When I press 2, it goes back to normal size-- and when I press 3, the fish gets much larger-- it goes to 200% of its original size. And so by putting together these various different scripts, each of which is responding to a different key on the keyboard, you can allow the user to control your sprites in any number of ways. 

Allowing them to interact with the stage by telling them what to click on, what to press, in order to see a particular response appear on the stage as well. And so now we have the ability within our Scratch programs to respond to a number of Events that can respond to the flag Being Clicked, to a click of something on the stage, also responding to a press of a key. 

But there are a couple of other fun Events that we might let our sprites respond to, so let's try one of them now. I'll go ahead and get rid of the fish, and let's change the backdrop-- we'll go back to the plain white backdrop, and let's add a new sprite. And the sprite I want to add this time is the balloon-- we haven't really played around with that. 

I'll go ahead and center the balloon and I'll go into Events, and the Event I'm curious about now is this one here-- When Loudness Is Greater Than 10-- and loudness refers to input coming in from your computer's microphone. So when you use this block for the first time, your browser might ask you for permission to use your microphone because Scratch is going to be listening to that microphone. 

And what it's going to be doing is calculating how loudly it hears something, for example-- it's all going to be on a 0 to 100 scale where 0 is like complete silence and 100 is very, very loud. And so if I set this to maybe 30 or so, then this code is going to respond, and it's going to run some code whenever the loudness gets above 30 for example. 

And what I'm going to do is, when the loudness gets above 30, let's go to Looks and change the size by 10. We're going to increase the size of the balloon by 10-- and I haven't connected them yet because I don't want this code to start running just yet-- but once I connect it, what's going to happen is that whenever Scratch detects that the loudness has gone above 30-- and I might have to play around with that number a little bit-- then the size of the balloon is going to change by 10. 

And so this lets me have a little bit of fun-- I can try and blow up the balloon, for example. I'll connect these two blocks and every time I blow, that triggers the loudness threshold-- it goes above the 30-- and I've disconnected it for now so that the balloon doesn't get bigger and bigger while I'm talking right now. 

But every time the loudness goes above a particular threshold, well then the size of the balloon is going to change-- and you probably saw that balloon get a little bit bigger and bigger every time. And you can have fun with this playing around with that threshold deciding how loud something needs to be, or how quiet something needs to be in order to get a particular result to happen. 

And so loudness is another type of Event that Scratch will let you respond to. And just for one final example, notice here too that this loudness is a dropdown menu-- in the same way that pressing a key on the keyboard had a dropdown menu where I could say-- I don't just want the Scratch project to respond to when the space key is pressed, but I want it to respond to an arrow key, or a letter, or a number. 

I have another option here-- I can choose when loudness is greater than 30, or when Timer is greater than a particular number. And so every Scratch project, though we haven't seen it just yet, has a built-in timer and the timer is keeping track of how much time has passed since we started the project. 

So when the project starts, we start counting how much time has passed, and that timer is keeping track of that for us. And so originally, if you think back to our first program that we made earlier, where we had the cat and the dinosaur talking to each other and they both said hello at the same time, why did they both say hello at the same time? 

They both said hello at the same time because they were both responding to the same event, the When Flag Clicked Event that happened once. And as soon as I pressed the green flag, then both the cat and the dinosaur said hello. In an actual conversation, of course, they probably wouldn't both say hello at the same time-- the cat might say hello and the dinosaur might respond a few seconds later. 

And we can take advantage now of this Timer-- the ability to wait for the Timer to reach a particular number. And when the Timer reaches that number, then an Event is triggered-- that will let us time sprites a little bit more precisely. And so let's give that a try by going back to the project we created at the beginning of today. 

I'll delete the balloon, go into my sprites, and let's add our cat back-- we'll bring our cat over to the left. And I'll add one more sprite, I'll go ahead and bring our dinosaur back as well-- that dinosaur is going to have a rotation style of left right because I only want it to face the left or the right. 

And I'll change the direction to negative 90 so that the cat and the dinosaur are facing each other. And for the cat, the code is going to be the same-- we'll have the cat respond to an Event, the Event will be When Flag Is Clicked, I want the cat to say hello for two seconds. But I want the dinosaur not to immediately say hello when the flag is clicked, but to wait for the cat-- let the cat say hello and then the dinosaur can respond. 

So under the dinosaur, instead of using the When Flag Clicked Event which would happen right away, I'm instead going to use them When Timer Is Greater Than 2. In other words, after the Timer reaches 2, in other words, after two seconds have passed in my project-- we'll then and only then should the dinosaur say hello for two seconds as well. 

And so now notice what happens-- I'll press the green flag, the cat says "hello" for two seconds, and only once the cat is done the dinosaur then says "hello" as well. And that's because the dinosaur is waiting, it's not going right when the project starts, it's waiting for the Timer to reach 2. 

And the Timer, again, begins every time we click on the green flag-- but when the green flag is clicked, the Timer resets back to 0, and it's counting up in terms of how many seconds have passed since the beginning of the project. And there are other events that we can use inside of Scratch as well that we haven't yet taken a look at. 

There's one here, for example, that checks when the backdrop switches to a particular backdrop. So recall before we had those various different backdrops with the Arctic, and the jungle, and underwater? You could add Events that say, as soon as the backdrop switches to underwater, then play those bubbles or the ocean sounds for example, or do some other action depending on what backdrop happens to be switched to. 

But you can hopefully now start to see how these events really start to make our Scratch projects more powerful and more interactive. We no longer need to say, run this block of code now, run that block of code now-- we can add Events to our project and let our project decide when to run that code. 

Letting it respond to when the project begins, or when we click on something, or when we press a key on the keyboard, or when the loudness changes, or any number of other different types of events that Scratch now gives us the ability to use. And hopefully now using Events, we'll be able to create all the more interesting and interactive projects as well. That's it for An Introduction to Programming with Scratch for today. Next time, we'll take these ideas and build up on them even more, see you then.