>> This semester we will be programming in a language called Snap! and today's voiceover
is going to get you started on how to actually run Snap in your browser and have you get
started on making your first program. So this should run in any web browser that runs javascript.
Although I do want to show you that it has had a couple of errors, just so that you know
you've got the right browser working. So, if you bring it up in Chrome, it should look
a lot like this. You bring up snap.berkeley.edu, and it'll bring up a webpage that looks like
this. And then scroll down and click on the big Run Snap Now button. And you should get
a screen that looks a lot like this. What could happen, now keep in mind I'm going to
be doing all of my voiceovers on a Mac this semester. It should work just fine on Windows
as well, but if you do see an error that looks like this, I want you to be aware that you
need to switch browsers.
So I bring it up, and it looks like it's working fine, and I click on run Snap now, and it
gives me a blank screen. If you get that, switch browsers. It has worked in Firefox
for me, but the most reliable browser so far has been Chrome. If you get any errors other
than the blank screen or even the blank screen, and you can't get it fixed try using Chrome,
which is a free browser, that's available for all of the OS's and if that doesn't work,
post to the discussion board for help. Now we're going to switch back over to the full
screen view, so that you can see how everything is working. So, when you got Snap started,
you're going to have eight little buttons up here, in the upper left-hand corner. There's
one labeled motion, looks, sound, pen, control, sensing, operators, and variables. And we're
going to focus today just for the quick intro to make sure that Snap is actually running
for you on the motion thing. This big gray area in the middle is where you write your
programs, and we'll get to that in just a second and then the white area over in the
right is where you can actually make this little thing. It's called a sprite and you
can make it move around the screen. And you can make that bigger, if you want, you can
click on this arrow thing here, and that'll make it full screen. So that we can actually
see our programs, we're going to leave it in the small mode. So you might notice that
there is sort of little snapping motions to these blocks. See I can drag this block over
here, and it says move 10 steps and what that means is it's going to move this little sprite
thing over 10 steps.
Now, where the name came from: I'm going to switch really quickly to the control panel,
we'll talk about controls in a whole lot more depth, but for right now you need some way
to just start your program, and so I'm going to drag this little wind flag clipped icon,
and you notice that it like snapped together with the other block. That's where the name
came from. So now I can make my first program, when I click the flag the little sprite will
move. See? Every time I click the flag the little sprite goes somewhere. Not too exciting,
but at least you know now how to make your program work.
Some other fun beginning things in addition to making it move around. I'd encourage you
to just play around in the motion thing here to just see what happens. So I'm going to,
for example, have it move 10 steps and then turn 15 degrees and then move 10 steps, turn
15 degrees, every time I click the flag. That's going to make my sprite turn as it goes around
the screen. Okay? Lots of other interesting buttons that one can play with in here. And
so, since this is just an introduction here, we're going to look at, we've been focusing
on the scripts tabs here, let's move over to the costumes tab. And in the costumes tab
you can actually change what your little sprite looks like. So if you click on the little
button that says paint a new costume, you can draw a picture. I will draw something
that approximates a smiley face.
Oh, well I didn't really want it up there, let's try that again, there we go. When you
draw your picture, it's really important to know where the center of your picture is,
and it guesses that it's over there but since I didn't draw my circle in the center, I'm
actually just going to move the center to the center of the circle. And now my sprite
is giant, but it shows up as a smiley face. So if I wanted to do that I can. I encourage
you to go around and play with those. You can also import pictures from the net if you
just want to have like a specific picture bounce around the screen.
So for right now the other part of the introduction script, we're going to get to the lots more
fun stuff and actually making games and other fun programs and all of the other voiceovers.
But for this we wanted to make sure you can start Snap, that you can write a program,
and that you can save it. And so that's the next thing that we're going to talk about.
If you go up here to the menus, it says Snap, and then there is a little picture of a piece
of paper with a corner folded over. That's the menu where you can actually save. And
we're going to say, now you're being tempted to go in here and click save, and you could
do that and it will work, but it won't work in a way that you can actually submit it in
for grading. So what save does is it will enable you to save. You can either save it
in your browser or you can save it in the cloud. And I highly suggest that you create
a cloud account. So let's click here and just show you where to do that. Click on the little
cloud icon and you, if you're not logged in, I was already logged in, you can click on
sign up and you can create yourself an account. And when you do that and bring up the save
and go to the cloud you can see all the other things that you've saved. And that's useful
so that you can work on any computer, and you can load your programs on any computer.
So when you go to the file menu what you're going to do is you're going to go in and instead
of saving, and saving's fine saving will give it to the cloud but it won't be able to turn
it in for grading. Go to the export project,t and it'll bring up a little menu and it wants
to know what you want to name it. I'm going to name it "Test Save." Say OK. And it brings
up a window that looks like this. This looks sort of awful if you don't have any idea what
it is. Don't worry about what it is. All you need to do now is actually just save this.
So go into Chrome and say "Save page as" and save it somewhere. I'm going to save mine
to my desktop. OK? So that file saves and that's the file you're going to turn in when
you turn anything in for grading.
Let's go back over here, let's create a new one so that our thing is gone. And then let's
show you how to load it back in. So you go to the same menu, and then you click on import,
and remember I said I saved it to my desktop. And I'm just going to click on "Test Save"
and there it is.
So this was just a quick introduction to make sure that Snap actually runs in your browser.
If you have any troubles or you just get stuck in any way, make sure you post to the discussion
forum ,because in order to complete the semester you need to be able to have Snap run.