1
00:00:00,000 --> 00:00:02,940
[MUSIC PLAYING]

2
00:00:02,940 --> 00:00:17,962


3
00:00:17,962 --> 00:00:19,920
BRIAN YU: Welcome,
everyone, to an introduction

4
00:00:19,920 --> 00:00:21,255
to Programming with Scratch.

5
00:00:21,255 --> 00:00:23,130
My name is Brian Yu and
in this course, we're

6
00:00:23,130 --> 00:00:26,370
going to be exploring Scratch, which
is a visual block-based programming

7
00:00:26,370 --> 00:00:29,640
language developed by the
team over at MIT's Media Lab.

8
00:00:29,640 --> 00:00:32,790
Using Scratch, by putting together
little Scratch puzzle pieces,

9
00:00:32,790 --> 00:00:36,840
that we'll see shortly, you'll be able
to build visual stories and animations

10
00:00:36,840 --> 00:00:40,020
and games and other programs that
you'll be able to share with others.

11
00:00:40,020 --> 00:00:42,397
And along the way, as
we're exploring Scratch,

12
00:00:42,397 --> 00:00:44,730
you'll be introduced to the
fundamentals of programming.

13
00:00:44,730 --> 00:00:48,270
We'll take a look at concepts like
functions and loops and conditions

14
00:00:48,270 --> 00:00:51,810
and variables and other types of
ideas that you'll see in programming.

15
00:00:51,810 --> 00:00:55,150
And even though the Scratch programming
language looks a little bit different,

16
00:00:55,150 --> 00:00:58,440
it uses blocks instead of the more
traditional text-based programming

17
00:00:58,440 --> 00:01:01,080
that you might see in other
programming languages later,

18
00:01:01,080 --> 00:01:03,810
really Scratch is based on
the same fundamental ideas.

19
00:01:03,810 --> 00:01:08,170
And it's going to use the same
principles of computational thinking.

20
00:01:08,170 --> 00:01:10,860
So with that, let's go ahead and
take a look at Scratch and dive

21
00:01:10,860 --> 00:01:14,900
in to our very first Scratch project.

22
00:01:14,900 --> 00:01:18,490
So once you go to Scratch's website,
when you click on the Create button

23
00:01:18,490 --> 00:01:20,530
to create a new project
you'll end up seeing

24
00:01:20,530 --> 00:01:22,450
an interface that looks like this.

25
00:01:22,450 --> 00:01:25,280
And we'll be exploring this
interface during this course.

26
00:01:25,280 --> 00:01:27,520
But it's broken down
into a couple of parts.

27
00:01:27,520 --> 00:01:30,760
Over here on the left-hand
side is our block library.

28
00:01:30,760 --> 00:01:33,100
You're going to build
Scratch projects, ultimately,

29
00:01:33,100 --> 00:01:35,590
by putting together
blocks in some sequence

30
00:01:35,590 --> 00:01:38,080
in order to get the
project to do something

31
00:01:38,080 --> 00:01:39,520
that you would like for it to do.

32
00:01:39,520 --> 00:01:42,370
And you can assemble those blocks
together from the block library,

33
00:01:42,370 --> 00:01:45,887
bringing them into this middle
part of the Scratch window,

34
00:01:45,887 --> 00:01:48,970
which is the Block Editor, where you're
going to put these blocks together

35
00:01:48,970 --> 00:01:52,010
to decide how it is that
your project should work.

36
00:01:52,010 --> 00:01:54,610
But before we even get to
those blocks and how they work

37
00:01:54,610 --> 00:01:56,410
and how to put them
together, today we're

38
00:01:56,410 --> 00:01:59,950
going to be mostly focusing on
this part of the Scratch window.

39
00:01:59,950 --> 00:02:03,640
This rectangle you see here is
what Scratch calls the stage.

40
00:02:03,640 --> 00:02:06,340
And it's inside of the stage
that our Scratch project

41
00:02:06,340 --> 00:02:07,870
will live and ultimately run.

42
00:02:07,870 --> 00:02:10,389
And this is, when someone
runs your Scratch project,

43
00:02:10,389 --> 00:02:13,150
what that person is
ultimately going to see.

44
00:02:13,150 --> 00:02:17,290
We see that right now, in the Scratch
stage, we just have one character,

45
00:02:17,290 --> 00:02:19,480
this default Scratch cat here.

46
00:02:19,480 --> 00:02:22,690
And each of these characters
Scratch calls a sprite.

47
00:02:22,690 --> 00:02:25,223
A sprite, in the world of
Scratch, is just some object.

48
00:02:25,223 --> 00:02:27,140
It could be a character,
like an animal, or it

49
00:02:27,140 --> 00:02:30,580
could be some other object, that
lives somewhere on the stage.

50
00:02:30,580 --> 00:02:32,920
And ultimately, we're going
to learn to have the ability

51
00:02:32,920 --> 00:02:36,190
to program these sprites to do
what we would like for it to do.

52
00:02:36,190 --> 00:02:38,583
Down below we see a listing
of all of the sprites

53
00:02:38,583 --> 00:02:40,000
that are currently in our project.

54
00:02:40,000 --> 00:02:43,480
Right now it's just this default
cat, which is called Sprite1.

55
00:02:43,480 --> 00:02:46,730
And we'll start to see other
parts of this interface as well.

56
00:02:46,730 --> 00:02:50,170
But let's start today by exploring
this stage and the sprites

57
00:02:50,170 --> 00:02:53,540
that live on that stage and
how we can manipulate them.

58
00:02:53,540 --> 00:02:57,370
So what we'll see right now is that
our default Scratch cat is currently

59
00:02:57,370 --> 00:03:01,660
just in the center of this stage
here, but I can move it around.

60
00:03:01,660 --> 00:03:04,850
And I can move it around just by
clicking and holding on the cat.

61
00:03:04,850 --> 00:03:06,100
And then I can drag it around.

62
00:03:06,100 --> 00:03:07,960
I can move it to one
corner of the screen

63
00:03:07,960 --> 00:03:10,960
or I could click and drag and move
it to the other corner of the screen,

64
00:03:10,960 --> 00:03:12,020
for example.

65
00:03:12,020 --> 00:03:15,940
And what you'll notice, as I start
to move the Scratch cat around

66
00:03:15,940 --> 00:03:20,140
on the stage, is that down below
a couple of values are changing,

67
00:03:20,140 --> 00:03:21,880
the x-value and the y-value.

68
00:03:21,880 --> 00:03:27,910
Right now, for example, the x-value
is 177 and the y-value is 42.

69
00:03:27,910 --> 00:03:30,760
But if I move the Scratch cat a
little bit, move it somewhere else,

70
00:03:30,760 --> 00:03:37,150
now the x-value is negative 156
and the y-value is negative 77.

71
00:03:37,150 --> 00:03:39,940
So sprites in Scratch
exist on the stage.

72
00:03:39,940 --> 00:03:44,240
And in particular, they exist at a
particular location on that stage,

73
00:03:44,240 --> 00:03:47,110
which is organized into
an x,y coordinate grid.

74
00:03:47,110 --> 00:03:50,320
And so if you imagine that this
rectangle here is the stage,

75
00:03:50,320 --> 00:03:53,650
this looks similar to an x,y coordinate
grid you might have seen in a geometry

76
00:03:53,650 --> 00:03:56,780
class, for example, where
we have the x-value,

77
00:03:56,780 --> 00:04:00,850
which just represents how far to the
left or to the right is our character

78
00:04:00,850 --> 00:04:01,750
on the stage.

79
00:04:01,750 --> 00:04:05,410
And we have the y-value, which
represents how far up or down

80
00:04:05,410 --> 00:04:07,750
the sprite is on the stage as well.

81
00:04:07,750 --> 00:04:10,780
The perfect center of
the stage is point 0,0.

82
00:04:10,780 --> 00:04:14,050
If x is equal to 0 and y is
equal to 0, then our sprite

83
00:04:14,050 --> 00:04:16,269
is going to be exactly at
the middle of the stage.

84
00:04:16,269 --> 00:04:19,269
But if we increase the x-value,
make it a positive value,

85
00:04:19,269 --> 00:04:22,029
it'll move further towards
the right part of the stage.

86
00:04:22,029 --> 00:04:24,885
And if we decrease the
x-value, make it more negative,

87
00:04:24,885 --> 00:04:27,760
then the sprite is going to be
further to the left side of the stage.

88
00:04:27,760 --> 00:04:31,210
And likewise, the same thing goes for
y but in the up and down direction.

89
00:04:31,210 --> 00:04:33,460
If I have a sprite
where y is equal to 0,

90
00:04:33,460 --> 00:04:36,400
it's going to be perfectly
level at the middle vertically.

91
00:04:36,400 --> 00:04:38,505
But if I increase the
y-value, then our sprite

92
00:04:38,505 --> 00:04:40,510
is going to move up along this stage.

93
00:04:40,510 --> 00:04:42,790
And if I decrease the
y-value, then our sprite

94
00:04:42,790 --> 00:04:46,070
is going to move down
along that stage as well.

95
00:04:46,070 --> 00:04:48,187
So we'll see those x
and y values come up,

96
00:04:48,187 --> 00:04:50,020
not only in this interface
here where we see

97
00:04:50,020 --> 00:04:52,930
where the sprite is on the
stage but also a little bit

98
00:04:52,930 --> 00:04:55,780
later, once we start putting
blocks together to program

99
00:04:55,780 --> 00:04:59,870
where our sprites are going to be
on the stage at any given time.

100
00:04:59,870 --> 00:05:01,870
So right now if I
wanted to take my sprite

101
00:05:01,870 --> 00:05:04,330
and move it back to the
perfect center of the stage,

102
00:05:04,330 --> 00:05:07,210
I could take it and drag it to
about where I think the center is.

103
00:05:07,210 --> 00:05:10,570
And I might be pretty close, but
if I want to be even more precise,

104
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.

105
00:05:15,550 --> 00:05:17,920
And I can do the same thing
for y, changing what's

106
00:05:17,920 --> 00:05:20,780
currently negative 8 to 0 as well.

107
00:05:20,780 --> 00:05:26,320
And that will perfectly center the
cat in the middle of the stage here.

108
00:05:26,320 --> 00:05:29,650
In addition to being able to
change the position of the sprite,

109
00:05:29,650 --> 00:05:31,720
we also have a few
other controls that are

110
00:05:31,720 --> 00:05:34,210
in this part of the Scratch interface.

111
00:05:34,210 --> 00:05:37,120
Over here I have the ability
to give my sprite a name.

112
00:05:37,120 --> 00:05:39,400
Right now my sprite is
just called Sprite1,

113
00:05:39,400 --> 00:05:42,550
which is the default name that Scratch
gives to a sprite that I create.

114
00:05:42,550 --> 00:05:45,530
But I could rename this, I could
call this the Cat, for example.

115
00:05:45,530 --> 00:05:49,090
And what you'll notice is that when
I rename the sprite, call it my Cat,

116
00:05:49,090 --> 00:05:52,510
then down below in this bottom
portion of the Scratch interface,

117
00:05:52,510 --> 00:05:55,150
this is where I see all of
the sprites in my project.

118
00:05:55,150 --> 00:05:57,340
Right now there's just
one, but each one is

119
00:05:57,340 --> 00:05:59,800
labeled by its name, which
right now is the Cat.

120
00:05:59,800 --> 00:06:01,900
And as we start to get
more and more sprites that

121
00:06:01,900 --> 00:06:03,730
will be added to our
projects, it's going

122
00:06:03,730 --> 00:06:06,010
to be helpful to keep track
of which sprite is which

123
00:06:06,010 --> 00:06:10,330
by knowing what the name
of any given sprite is.

124
00:06:10,330 --> 00:06:13,240
Underneath the place where I
can name any individual sprite,

125
00:06:13,240 --> 00:06:16,590
I also have a toggle where I can decide
whether or not that sprite should

126
00:06:16,590 --> 00:06:18,258
be shown on the stage.

127
00:06:18,258 --> 00:06:21,300
Right now we are showing the cat, but
I could click this button over here

128
00:06:21,300 --> 00:06:23,280
to hide the cat from the stage.

129
00:06:23,280 --> 00:06:25,770
And if I want to bring it
back, I can show it again.

130
00:06:25,770 --> 00:06:29,940
So I can show and hide the cat to decide
whether, for any particular sprite,

131
00:06:29,940 --> 00:06:33,480
that sprite appears on the stage or not.

132
00:06:33,480 --> 00:06:35,760
I also have these other two controls.

133
00:06:35,760 --> 00:06:38,460
This control here controls
the size of the sprite.

134
00:06:38,460 --> 00:06:42,360
Right now the size is 100,
meaning it is at 100% size, which

135
00:06:42,360 --> 00:06:44,850
is the normal size for any sprite.

136
00:06:44,850 --> 00:06:45,870
But I can change that.

137
00:06:45,870 --> 00:06:48,210
If I want the sprite
to be half as big, I

138
00:06:48,210 --> 00:06:50,800
could change the size
to be 50, for example.

139
00:06:50,800 --> 00:06:52,440
And now the sprite is much smaller.

140
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,

141
00:06:56,680 --> 00:06:57,610
for example.

142
00:06:57,610 --> 00:06:59,970
And now the sprite is
going to be larger.

143
00:06:59,970 --> 00:07:02,187
But for now, I'll go
ahead and keep it at 100.

144
00:07:02,187 --> 00:07:04,020
And over time we'll
start to see that we can

145
00:07:04,020 --> 00:07:07,020
change the size as well
by way of the blocks that

146
00:07:07,020 --> 00:07:09,640
will be introduced a little bit later.

147
00:07:09,640 --> 00:07:12,690
And then finally in these controls,
I have a direction control.

148
00:07:12,690 --> 00:07:17,070
And the direction control, controls
which way that my cat, in this case,

149
00:07:17,070 --> 00:07:18,390
happens to be facing.

150
00:07:18,390 --> 00:07:21,370
Right now it's at 90,
meaning 90 degrees.

151
00:07:21,370 --> 00:07:23,850
In other words, the cat
is facing to the right.

152
00:07:23,850 --> 00:07:28,290
But I could rotate the cat, spin it
around, and watch as I turn this dial,

153
00:07:28,290 --> 00:07:32,100
I can rotate spin the cat around and
have it face a different direction

154
00:07:32,100 --> 00:07:33,030
if I want to.

155
00:07:33,030 --> 00:07:35,670
And when I do, you'll notice
that this direction value

156
00:07:35,670 --> 00:07:38,020
changes and to some number of degrees.

157
00:07:38,020 --> 00:07:40,740
So right now it's pointing
at a 39-degree angle,

158
00:07:40,740 --> 00:07:42,820
but I could change that back to 90.

159
00:07:42,820 --> 00:07:46,990
And when I do that, now the cat
is facing to the right as well.

160
00:07:46,990 --> 00:07:49,800
So I have this ability,
using this editor here,

161
00:07:49,800 --> 00:07:51,600
to control a lot about the sprite.

162
00:07:51,600 --> 00:07:52,630
I can change its name.

163
00:07:52,630 --> 00:07:54,720
I can change its
position, its size, what

164
00:07:54,720 --> 00:07:58,680
direction it's facing, whether or
not it shows up on the stage or not.

165
00:07:58,680 --> 00:08:01,150
But really, to make our
programs more interesting,

166
00:08:01,150 --> 00:08:04,230
we don't just want to have a cat
that lives in this environment.

167
00:08:04,230 --> 00:08:08,800
I'd like to add some other
sprites to my stage as well.

168
00:08:08,800 --> 00:08:12,990
So let's go ahead now and
try and create a new sprite.

169
00:08:12,990 --> 00:08:15,300
Down here at the bottom,
you'll notice that inside

170
00:08:15,300 --> 00:08:18,450
of this region of the Scratch
editor where all of my sprites live,

171
00:08:18,450 --> 00:08:21,540
right now it's just the cat,
there's a little plus button.

172
00:08:21,540 --> 00:08:24,040
And this is the Create
a New Sprite button

173
00:08:24,040 --> 00:08:26,040
and I have a couple of
options for how to do so.

174
00:08:26,040 --> 00:08:28,498
But if I just click on this
main circular button that says,

175
00:08:28,498 --> 00:08:29,610
choose a Sprite.

176
00:08:29,610 --> 00:08:33,570
I'll end up getting a whole list
of different kinds of sprites

177
00:08:33,570 --> 00:08:34,350
that I can create.

178
00:08:34,350 --> 00:08:36,720
There are animals, there
are people, there's

179
00:08:36,720 --> 00:08:38,580
different types of
sports-related sprites,

180
00:08:38,580 --> 00:08:41,590
or food-related sprites,
and more than that.

181
00:08:41,590 --> 00:08:44,580
And I can look through this and
try and find whatever I'd like.

182
00:08:44,580 --> 00:08:48,720
And let's say I want to add an animal,
for example, another animal other

183
00:08:48,720 --> 00:08:51,360
than the cat to my Scratch program.

184
00:08:51,360 --> 00:08:53,640
Well up here at the
top I can filter down

185
00:08:53,640 --> 00:08:55,950
what I'm looking for by
a particular category,

186
00:08:55,950 --> 00:08:59,430
or if I knew exactly what I was looking
for, I could search for a sprite

187
00:08:59,430 --> 00:09:00,060
as well.

188
00:09:00,060 --> 00:09:03,330
But let me go to animals, for now,
just to see the various different kinds

189
00:09:03,330 --> 00:09:06,480
of animals that can exist here.

190
00:09:06,480 --> 00:09:10,500
And I think I like the fish, so
we'll go ahead and take the fish

191
00:09:10,500 --> 00:09:13,515
and add that to my stage.

192
00:09:13,515 --> 00:09:16,140
And so once I do that, you'll
notice a couple of things happen.

193
00:09:16,140 --> 00:09:19,860
One, down below in this region, where
I'm keeping track of all of the sprites

194
00:09:19,860 --> 00:09:22,260
that are a part of my
project, I now have two.

195
00:09:22,260 --> 00:09:24,780
I have the cat and I have the fish.

196
00:09:24,780 --> 00:09:28,200
And you'll notice that both
now appear in the main stage

197
00:09:28,200 --> 00:09:29,613
area of my Scratch program.

198
00:09:29,613 --> 00:09:31,530
And I can move them
around so that they're not

199
00:09:31,530 --> 00:09:32,697
overlapping with each other.

200
00:09:32,697 --> 00:09:36,450
So I now have one cat and one fish.

201
00:09:36,450 --> 00:09:39,510
Whichever one is selected,
highlighted in blue down here

202
00:09:39,510 --> 00:09:41,970
at the bottom, that's the one
I'm currently working with,

203
00:09:41,970 --> 00:09:43,920
where I'll currently be
able to add code to it

204
00:09:43,920 --> 00:09:47,370
or manipulate its position or size
or any of the other attributes

205
00:09:47,370 --> 00:09:49,470
we've seen that these
sprites happen to have.

206
00:09:49,470 --> 00:09:55,380
So this fish, for example, is currently
located at x equals 73 and y equals 70.

207
00:09:55,380 --> 00:09:59,290
But if I switch to the cat by clicking
on the cat down at the bottom,

208
00:09:59,290 --> 00:10:00,630
now I'm selecting the cat.

209
00:10:00,630 --> 00:10:03,480
And now I see the cat's
position and the cat's name

210
00:10:03,480 --> 00:10:07,540
and the cat's size and the
cat's direction as well.

211
00:10:07,540 --> 00:10:10,140
So using that ability, we
can add new characters.

212
00:10:10,140 --> 00:10:13,260
We can add new objects
to our Scratch project.

213
00:10:13,260 --> 00:10:15,840
And if we wanted multiple
of a given character

214
00:10:15,840 --> 00:10:18,060
we can even duplicate
a particular sprite.

215
00:10:18,060 --> 00:10:21,510
So let's imagine that I want
two fish, for example, inside

216
00:10:21,510 --> 00:10:22,530
of this environment.

217
00:10:22,530 --> 00:10:25,710
I'm going to click on the fish
and then I can either right-click

218
00:10:25,710 --> 00:10:28,060
or I can control-click on the fish.

219
00:10:28,060 --> 00:10:30,990
And when I do that a little menu
will pop up where I can here say,

220
00:10:30,990 --> 00:10:32,430
let me duplicate the fish.

221
00:10:32,430 --> 00:10:33,840
Let's get a second fish.

222
00:10:33,840 --> 00:10:36,150
And you'll notice that it's
called Fish2 by default.

223
00:10:36,150 --> 00:10:39,690
I could change that if I
wanted to but Fish2 is OK.

224
00:10:39,690 --> 00:10:43,800
And I'll take the two fish and
separate them a little bit on the stage

225
00:10:43,800 --> 00:10:45,520
just by moving them around.

226
00:10:45,520 --> 00:10:47,550
And so now I'm starting
to construct this scene.

227
00:10:47,550 --> 00:10:51,540
And this is why you can use Scratch
to tell stories or create animations

228
00:10:51,540 --> 00:10:53,610
or create pieces of
art, just by deciding

229
00:10:53,610 --> 00:10:56,520
what it is that you want
to exist on this stage,

230
00:10:56,520 --> 00:11:00,190
and then add them to the stage as well.

231
00:11:00,190 --> 00:11:02,190
Now one thing you might
notice is that right now

232
00:11:02,190 --> 00:11:05,920
because I duplicated the fish,
both of the fish look identical.

233
00:11:05,920 --> 00:11:07,098
They're exactly the same.

234
00:11:07,098 --> 00:11:08,890
They're both pointed
in the same direction.

235
00:11:08,890 --> 00:11:11,948
And I could change the direction or
change the size of one of the fish

236
00:11:11,948 --> 00:11:13,740
to make it a little
bit smaller, to make it

237
00:11:13,740 --> 00:11:15,730
look a little bit different
from the other fish

238
00:11:15,730 --> 00:11:18,940
if I want a variety of different
types of fish in my scene.

239
00:11:18,940 --> 00:11:22,670
But what I'd really like to do is
change its entire overall appearance,

240
00:11:22,670 --> 00:11:27,850
so I have two different fish that exist
on the stage instead of just two copies

241
00:11:27,850 --> 00:11:29,470
of what looks like the same.

242
00:11:29,470 --> 00:11:32,650
And so here's where we're going to
introduce another concept in Scratch,

243
00:11:32,650 --> 00:11:34,390
which is that of costumes.

244
00:11:34,390 --> 00:11:36,940
Every sprite can take
on different costumes.

245
00:11:36,940 --> 00:11:40,910
And a costume is just what that
sprite happens to look like.

246
00:11:40,910 --> 00:11:45,130
And so let's explore now how we
can change the costume for one

247
00:11:45,130 --> 00:11:46,690
of these fish, for example.

248
00:11:46,690 --> 00:11:50,560
Up at the top of the Scratch window,
you'll notice a couple of tabs.

249
00:11:50,560 --> 00:11:53,565
The tab that's selected by
default is called the Code tab.

250
00:11:53,565 --> 00:11:55,690
And while we haven't added
any code to our projects

251
00:11:55,690 --> 00:11:59,020
just yet, ultimately as you start
to build more complex projects,

252
00:11:59,020 --> 00:12:01,660
you'll be using the Code
tab to take blocks of code

253
00:12:01,660 --> 00:12:04,090
and drag them into this
code editor in order

254
00:12:04,090 --> 00:12:08,080
to decide what it is that you're
Scratch sprites are going to do.

255
00:12:08,080 --> 00:12:11,330
But the tab that we're interested
in now is this second tab,

256
00:12:11,330 --> 00:12:13,480
which is called the
Costumes tab, which is

257
00:12:13,480 --> 00:12:16,870
going to allow us to see and
edit and modify the costumes that

258
00:12:16,870 --> 00:12:19,270
belong to any given sprite.

259
00:12:19,270 --> 00:12:21,430
So let's go ahead and
take one of our fish.

260
00:12:21,430 --> 00:12:25,420
We'll go ahead and take fish2
and head over to the Costumes tab

261
00:12:25,420 --> 00:12:28,870
by clicking on the Costumes tab,
which is next to the Code tab

262
00:12:28,870 --> 00:12:31,090
up at the top of the window.

263
00:12:31,090 --> 00:12:33,760
And when I do that, you'll
see that by default the fish

264
00:12:33,760 --> 00:12:40,090
has four different costumes,
fish-a, fish-b, fish-c, and fish-d.

265
00:12:40,090 --> 00:12:44,152
Right now fish-a is selected, but
I could change the costume just

266
00:12:44,152 --> 00:12:45,610
by clicking on a different costume.

267
00:12:45,610 --> 00:12:48,383
If I click on fish-b,
for example, now I've

268
00:12:48,383 --> 00:12:50,050
got a different costume that's selected.

269
00:12:50,050 --> 00:12:53,330
And now you immediately see in the
stage that the fish looks different.

270
00:12:53,330 --> 00:12:55,150
It's taken on a different costume.

271
00:12:55,150 --> 00:12:57,340
Even though it's the
same fish, it appears

272
00:12:57,340 --> 00:13:01,557
visually to look different because
we've changed what costume it has.

273
00:13:01,557 --> 00:13:02,890
And I can try changing it again.

274
00:13:02,890 --> 00:13:06,560
Here's fish-c, and then I can
try looking at fish-d as well.

275
00:13:06,560 --> 00:13:09,160
So you can experiment and
take a look at what costumes

276
00:13:09,160 --> 00:13:12,340
happen to be built in by
default into any given sprite

277
00:13:12,340 --> 00:13:14,110
and change them if you'd like to.

278
00:13:14,110 --> 00:13:16,092
The cat also has different costumes.

279
00:13:16,092 --> 00:13:18,550
They don't look nearly as
different, but what you'll notice

280
00:13:18,550 --> 00:13:22,390
is that the cat can be in
two different costumes that

281
00:13:22,390 --> 00:13:24,340
are just in different leg positions.

282
00:13:24,340 --> 00:13:29,200
So in costume1, the legs are straight,
in costume2, the legs are bent.

283
00:13:29,200 --> 00:13:33,283
And if you watch this sprite carefully,
as I switch between the costumes,

284
00:13:33,283 --> 00:13:35,200
it almost looks like the
cat is walking, which

285
00:13:35,200 --> 00:13:37,150
is why we've got those
two different costumes,

286
00:13:37,150 --> 00:13:40,960
to give the appearance of
walking if we would like to.

287
00:13:40,960 --> 00:13:44,290
But let's go back to the fish, which
has four different costumes that I

288
00:13:44,290 --> 00:13:47,200
can choose from, each of
which looks very different.

289
00:13:47,200 --> 00:13:49,270
And I'm not limited to just those four.

290
00:13:49,270 --> 00:13:51,610
If I wanted to create
additional costumes

291
00:13:51,610 --> 00:13:55,040
I have the ability to create
additional costumes too.

292
00:13:55,040 --> 00:13:56,330
How could I do that?

293
00:13:56,330 --> 00:13:59,230
Well, here in the costume
editor, down at the bottom

294
00:13:59,230 --> 00:14:01,810
underneath where all
of these costumes are,

295
00:14:01,810 --> 00:14:05,260
there is another plus button that
looks very much like that button

296
00:14:05,260 --> 00:14:08,350
for creating a new sprite
that we saw a moment ago.

297
00:14:08,350 --> 00:14:12,460
But this time, this is the button
for creating a new costume.

298
00:14:12,460 --> 00:14:14,170
And here I have a couple of choices.

299
00:14:14,170 --> 00:14:17,740
I could search inside of
Scratch's own library of costumes

300
00:14:17,740 --> 00:14:20,560
to find a costume that I might want.

301
00:14:20,560 --> 00:14:22,270
I could also paint a new costume.

302
00:14:22,270 --> 00:14:25,470
So if you're feeling artistic, you'd
like to create a costume of your own,

303
00:14:25,470 --> 00:14:26,720
we could try painting our own.

304
00:14:26,720 --> 00:14:28,970
So I could paint my
own fish, for example.

305
00:14:28,970 --> 00:14:31,210
And here I have a bunch
of different tools

306
00:14:31,210 --> 00:14:32,950
that I can use to paint the costume.

307
00:14:32,950 --> 00:14:35,530
So I'll go ahead and use the
Paintbrush tool that will just

308
00:14:35,530 --> 00:14:38,950
let me draw a new costume for my fish.

309
00:14:38,950 --> 00:14:41,450
And I can choose what color
I'd like the costume to be too.

310
00:14:41,450 --> 00:14:45,190
So I'll go ahead and
choose maybe this color,

311
00:14:45,190 --> 00:14:51,620
and I can start to draw
something like a fish.

312
00:14:51,620 --> 00:14:53,020
We'll draw a fish.

313
00:14:53,020 --> 00:14:54,320
We'll give the fish an eye.

314
00:14:54,320 --> 00:14:56,987
So if you are feeling a little
more creative, a little artistic,

315
00:14:56,987 --> 00:14:58,820
you can try and draw fish for yourself.

316
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

317
00:15:04,190 --> 00:15:06,110
in the fish with a particular color.

318
00:15:06,110 --> 00:15:08,630
So you can be creative about this too.

319
00:15:08,630 --> 00:15:09,270
Now of course.

320
00:15:09,270 --> 00:15:11,672
I do think that the fish
that Scratch provided for me

321
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

322
00:15:14,630 --> 00:15:15,680
just now.

323
00:15:15,680 --> 00:15:18,800
But I can modify the
existing costumes too.

324
00:15:18,800 --> 00:15:21,500
Using the same costume
editor, if I wanted

325
00:15:21,500 --> 00:15:24,120
to fill in part of the fish
with a different color,

326
00:15:24,120 --> 00:15:26,750
maybe I want a little bit
of green in this fish.

327
00:15:26,750 --> 00:15:28,730
I could take a green
that I happen to like

328
00:15:28,730 --> 00:15:33,230
by just adjusting these dials
to specify what color I want.

329
00:15:33,230 --> 00:15:36,890
And still using the Fill tool, I
could fill in parts of the fish

330
00:15:36,890 --> 00:15:39,680
with a little bit of green, for
example, just to make the fish

331
00:15:39,680 --> 00:15:42,120
look exactly how I want it to look.

332
00:15:42,120 --> 00:15:44,930
So you have a lot of creative
freedom in this costume editor.

333
00:15:44,930 --> 00:15:49,130
You have the ability to create
an entirely new costume just

334
00:15:49,130 --> 00:15:52,070
by drawing it and painting it
yourself, or you have the ability

335
00:15:52,070 --> 00:15:54,560
to take a costume that
already exists and add

336
00:15:54,560 --> 00:15:58,160
to it by painting over it or
filling it in with different colors

337
00:15:58,160 --> 00:15:59,460
if you'd like to.

338
00:15:59,460 --> 00:16:02,690
And you even have the ability,
if you want, to upload a costume.

339
00:16:02,690 --> 00:16:04,930
If you have a photo or
an image on your computer

340
00:16:04,930 --> 00:16:07,430
that you'd like to use as a
costume in your Scratch program,

341
00:16:07,430 --> 00:16:08,690
you can upload it there.

342
00:16:08,690 --> 00:16:11,148
Or you could even take a photo
with your computer's camera,

343
00:16:11,148 --> 00:16:16,820
if it has one, in order to add
that photo as a costume as well.

344
00:16:16,820 --> 00:16:20,340
In addition to changing what
these sprites look like,

345
00:16:20,340 --> 00:16:23,567
we also have the ability to give these
sprites sounds that they can play.

346
00:16:23,567 --> 00:16:25,400
And so up at the top,
you've noticed that we

347
00:16:25,400 --> 00:16:28,070
have a Code tab and a
Costume tab, there's

348
00:16:28,070 --> 00:16:31,388
also a Sounds tab for the
sounds that are associated

349
00:16:31,388 --> 00:16:32,930
with each of these different sprites.

350
00:16:32,930 --> 00:16:35,210
And later on, we'll see
ways that we can include

351
00:16:35,210 --> 00:16:37,410
those sounds as part of our project.

352
00:16:37,410 --> 00:16:39,650
So right now the fish,
by default in Scratch,

353
00:16:39,650 --> 00:16:41,630
has two different sounds that it has.

354
00:16:41,630 --> 00:16:44,210
One is called bubbles and I
can play that if I'd like to.

355
00:16:44,210 --> 00:16:48,590
[UNDEWATER BUBBLING]

356
00:16:48,590 --> 00:16:50,180
And one is called ocean wave

357
00:16:50,180 --> 00:16:55,620
[WAVES CRASHING]

358
00:16:55,620 --> 00:16:58,667
So those are the sounds that are
built-in as just part of the fish.

359
00:16:58,667 --> 00:17:01,500
And later on, as we're building
stories with it, maybe at some point

360
00:17:01,500 --> 00:17:02,833
we'll want to play those sounds.

361
00:17:02,833 --> 00:17:06,030
And later in the course, we'll
see ways that we can do just that.

362
00:17:06,030 --> 00:17:09,569
And different sprites have different
sounds built-in by default. The cat,

363
00:17:09,569 --> 00:17:12,900
for example, if I click on the cat,
has one sound by default, which is just

364
00:17:12,900 --> 00:17:14,520
the meow sound, which I can play.

365
00:17:14,520 --> 00:17:16,010
[CAT MEOWING]

366
00:17:16,010 --> 00:17:18,140
But if I wanted to, I
could add more sounds

367
00:17:18,140 --> 00:17:20,810
as by recording something
myself. if I wanted

368
00:17:20,810 --> 00:17:23,000
to record a sound to give to a sprite.

369
00:17:23,000 --> 00:17:25,035
And you can also upload
a sound if you have

370
00:17:25,035 --> 00:17:27,410
a sound file on your computer
that you'd like to include,

371
00:17:27,410 --> 00:17:31,350
maybe some music you want to go along
with your project, or a sound effect,

372
00:17:31,350 --> 00:17:34,647
you have the ability to
upload those sounds too.

373
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.

374
00:17:37,730 --> 00:17:39,050
And now we've got our stage.

375
00:17:39,050 --> 00:17:41,930
We've got our stage
with a cat and two fish.

376
00:17:41,930 --> 00:17:44,810
But right now, what's a little
bit boring about my project

377
00:17:44,810 --> 00:17:45,657
is the background.

378
00:17:45,657 --> 00:17:47,990
Right now I'm just dealing
with a plain white background

379
00:17:47,990 --> 00:17:49,160
with nothing else on it.

380
00:17:49,160 --> 00:17:52,800
And I'd like to make that background
a little more creative as well.

381
00:17:52,800 --> 00:17:55,430
And so this background,
we've been calling the stage.

382
00:17:55,430 --> 00:17:59,120
The stage is this rectangle
where our sprites live.

383
00:17:59,120 --> 00:18:01,610
And each stage is allowed
to have backdrops.

384
00:18:01,610 --> 00:18:06,170
The backdrop just decides what image
appears behind all of the sprites.

385
00:18:06,170 --> 00:18:09,080
And by default when you create a
Scratch project for the first time,

386
00:18:09,080 --> 00:18:12,830
the backdrop is just going to be
solid white, but we can change that.

387
00:18:12,830 --> 00:18:15,680
Down at the bottom right,
here we see the stage.

388
00:18:15,680 --> 00:18:18,650
And I have the ability by clicking
on this button in the bottom right,

389
00:18:18,650 --> 00:18:21,900
to choose a backdrop for my project too.

390
00:18:21,900 --> 00:18:23,810
And so if I click
Choose a Backdrop you'll

391
00:18:23,810 --> 00:18:26,598
see that I have a whole
variety of different backdrops

392
00:18:26,598 --> 00:18:28,640
that I can choose from in
different environments.

393
00:18:28,640 --> 00:18:31,670
I see I have a wintry scene if
I want to create a wintry scene.

394
00:18:31,670 --> 00:18:35,900
We have some indoor scenes if I want
to, some outside, like city scenes.

395
00:18:35,900 --> 00:18:38,930
And this one looks nice, it's
an underwater scene, maybe.

396
00:18:38,930 --> 00:18:42,000
And I'll use that because I've
got a bunch of fish on my stage.

397
00:18:42,000 --> 00:18:45,320
And so maybe it'll make sense to
put my fish in an underwater scene,

398
00:18:45,320 --> 00:18:46,380
for example.

399
00:18:46,380 --> 00:18:47,630
So I'll choose that backdrop.

400
00:18:47,630 --> 00:18:52,470
It's called underwater1 by
default, and let's use that one.

401
00:18:52,470 --> 00:18:54,830
So I'll click underwater1
and you'll see,

402
00:18:54,830 --> 00:18:57,380
immediately, the backdrop now changes.

403
00:18:57,380 --> 00:19:01,430
And I can now have my two fish that are
living inside of this underwater scene.

404
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,

405
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,

406
00:19:10,760 --> 00:19:13,790
I could certainly do that as well.

407
00:19:13,790 --> 00:19:17,900
At this point now, the cat though is
starting to feel a little out of place.

408
00:19:17,900 --> 00:19:19,400
I'm designing an underwater scene.

409
00:19:19,400 --> 00:19:20,840
I've got two different fish here.

410
00:19:20,840 --> 00:19:22,980
The cat, maybe, doesn't belong here.

411
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.

412
00:19:26,750 --> 00:19:28,832
I'm going to click on
the cat because that's

413
00:19:28,832 --> 00:19:30,290
the one that I'm currently editing.

414
00:19:30,290 --> 00:19:33,110
And if I don't want the cat,
there's a little Trash icon

415
00:19:33,110 --> 00:19:36,530
that appears next to whichever sprite
happens to currently be selected.

416
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,

417
00:19:41,030 --> 00:19:43,340
and that's going to remove the cat.

418
00:19:43,340 --> 00:19:46,940
And so now, I have this
scene with these two fish

419
00:19:46,940 --> 00:19:48,920
that happen to be swimming
around in the water.

420
00:19:48,920 --> 00:19:50,810
And I could change the
scene if I wanted to.

421
00:19:50,810 --> 00:19:53,990
Maybe I want to take fish2,
this yellow and green fish,

422
00:19:53,990 --> 00:19:56,812
and flip it around so that it's
facing the other direction.

423
00:19:56,812 --> 00:19:58,520
So that one fish is
swimming to the right

424
00:19:58,520 --> 00:20:01,740
and one fish is swimming
to the left, for example.

425
00:20:01,740 --> 00:20:03,390
So how could I do that?

426
00:20:03,390 --> 00:20:06,350
Well, next, every fish, remember
we've got a direction control

427
00:20:06,350 --> 00:20:10,370
for any given sprite, that
controls what direction that fish

428
00:20:10,370 --> 00:20:11,780
happens to be facing.

429
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,

430
00:20:15,470 --> 00:20:19,230
I could rotate, rotate, rotate,
have it face towards the left,

431
00:20:19,230 --> 00:20:23,510
at like negative 88 or
negative 90 degrees or so.

432
00:20:23,510 --> 00:20:27,590
But this isn't quite perfect
because, as you're probably noticing,

433
00:20:27,590 --> 00:20:29,360
the fish is upside down now.

434
00:20:29,360 --> 00:20:31,970
So normally with this
direction control, when

435
00:20:31,970 --> 00:20:33,860
I'm trying to control
the direction, it's

436
00:20:33,860 --> 00:20:38,570
just rotating whatever the sprite is in
whatever direction I tell it to rotate.

437
00:20:38,570 --> 00:20:40,970
But what that means is that
if it starts facing the right

438
00:20:40,970 --> 00:20:46,100
and I rotated 180 degrees all the way to
face the other direction, now suddenly

439
00:20:46,100 --> 00:20:47,810
it's going to be upside down.

440
00:20:47,810 --> 00:20:50,900
And that's maybe not
what I want for it to do.

441
00:20:50,900 --> 00:20:53,150
But it turns out Scratch
has a fix for this.

442
00:20:53,150 --> 00:20:57,260
And every sprite can be in a number
of different rotation styles, what

443
00:20:57,260 --> 00:21:00,320
style it's going to use when rotating.

444
00:21:00,320 --> 00:21:02,720
By default, it uses
this all-around style,

445
00:21:02,720 --> 00:21:06,170
where it can be facing any direction
that we want, rotating all around.

446
00:21:06,170 --> 00:21:09,713
But there's also the second one
that's just called Left and Right

447
00:21:09,713 --> 00:21:12,380
and that will just let the sprite
face in one of two directions.

448
00:21:12,380 --> 00:21:15,630
Either it's looking to the right
or it's looking to the left.

449
00:21:15,630 --> 00:21:17,750
And so if I change the
rotation style to Left,

450
00:21:17,750 --> 00:21:19,640
Right by clicking on
this middle button here

451
00:21:19,640 --> 00:21:23,360
that's got one arrow facing the
right and one arrow facing the left,

452
00:21:23,360 --> 00:21:26,420
now when I rotate a
little bit nothing happens

453
00:21:26,420 --> 00:21:30,150
because it's only ever going to face
to the right or face to the left.

454
00:21:30,150 --> 00:21:33,150
But if I rotate it all the
way around to the other side,

455
00:21:33,150 --> 00:21:37,190
now I have the sprite that's
facing the other direction.

456
00:21:37,190 --> 00:21:40,430
And that's how I can get one sprite
that's looking over to the right

457
00:21:40,430 --> 00:21:43,477
and there's one sprite that's
looking over to the left.

458
00:21:43,477 --> 00:21:44,810
And I happen to like this scene.

459
00:21:44,810 --> 00:21:46,940
If I wanted to see it
in full-screen there's

460
00:21:46,940 --> 00:21:50,330
a full screen icon in the upper
right, where if I click on that button

461
00:21:50,330 --> 00:21:52,190
I now see my stage in full screen.

462
00:21:52,190 --> 00:21:55,980
I can see exactly what it's going
to look like, which is quite nice.

463
00:21:55,980 --> 00:21:58,160
And I now have my first Scratch project.

464
00:21:58,160 --> 00:22:00,350
I haven't added any
code just yet, but I've

465
00:22:00,350 --> 00:22:03,410
added some sprites, some characters
that are part of my scene.

466
00:22:03,410 --> 00:22:07,547
I've added a different backdrop
that I can use to my scene as well.

467
00:22:07,547 --> 00:22:09,380
And if I wanted to save
this, because I want

468
00:22:09,380 --> 00:22:11,840
to make sure I can keep this
and use it a little bit later,

469
00:22:11,840 --> 00:22:13,590
I have a few options.

470
00:22:13,590 --> 00:22:17,837
One option in the File menu, I
can save a project to my computer.

471
00:22:17,837 --> 00:22:19,920
And that will download the
project to my computer,

472
00:22:19,920 --> 00:22:22,140
such that later if I
want to open it up again,

473
00:22:22,140 --> 00:22:26,090
I can click Load from your computer and
load that file that I've just saved.

474
00:22:26,090 --> 00:22:28,550
But also, if you create
a Scratch account

475
00:22:28,550 --> 00:22:31,850
by clicking on this Join Scratch button,
if you don't already have it, and then

476
00:22:31,850 --> 00:22:34,010
sign into your account,
you'll have the ability

477
00:22:34,010 --> 00:22:36,290
to save projects to
Scratch's own website.

478
00:22:36,290 --> 00:22:38,090
And once you do that
if you'd like to, you

479
00:22:38,090 --> 00:22:41,570
could share your project with the
world, to send it to friends and family,

480
00:22:41,570 --> 00:22:44,780
and to let other people that are using
Scratch have an opportunity to see

481
00:22:44,780 --> 00:22:48,270
your project and try it out as well.

482
00:22:48,270 --> 00:22:51,920
So now that we have the
ability to create these sprites

483
00:22:51,920 --> 00:22:55,100
and put them onto the stage, we
can create whatever environment

484
00:22:55,100 --> 00:22:58,280
we want for the story, or for
the animation, or for the game,

485
00:22:58,280 --> 00:23:02,120
or for the other program, that we
might be trying to create in Scratch.

486
00:23:02,120 --> 00:23:05,120
But right now these sprites
aren't really doing anything.

487
00:23:05,120 --> 00:23:06,930
The stage is always staying the same.

488
00:23:06,930 --> 00:23:08,600
The fish are always the same.

489
00:23:08,600 --> 00:23:10,670
And, ultimately, what
we're going to look at next

490
00:23:10,670 --> 00:23:13,760
is about programming, how it
is that we can write code.

491
00:23:13,760 --> 00:23:17,210
And in particular, by using these
blocks and assembling them together

492
00:23:17,210 --> 00:23:21,260
into stacks of blocks that perform
various different activities and tasks,

493
00:23:21,260 --> 00:23:24,830
we're going to be programming these
sprites in the backdrop and the stage,

494
00:23:24,830 --> 00:23:27,140
to do what we want them to
do, to create all the more

495
00:23:27,140 --> 00:23:30,140
interactive stories and
games and animations

496
00:23:30,140 --> 00:23:33,080
that we can create all
through the use of Scratch.

497
00:23:33,080 --> 00:23:34,650
But we'll explore that next time.

498
00:23:34,650 --> 00:23:36,780
That's it for an introduction
to Scratch for today.

499
00:23:36,780 --> 00:23:39,500
And next time, we'll take a look
at how we can take that stage

500
00:23:39,500 --> 00:23:42,610
and begin programming with it as well.

501
00:23:42,610 --> 00:23:43,405