INTRODUCTION TO

SCRATCH!
Dr Suhazlan Suhaimi
 WHAT IS SCRATCH?
• Scratch is a free programmable toolkit that enables kids
to create their own games, animated stories, and
interactive art
• and share their creations with one another over the
Internet.
 WHAT IS SCRATCH?
• Scratch builds on the long tradition of Logo and
LEGO/Logo, but takes advantage of new
computational ideas and capabilities to make it easier
for kids to get started with programming (lowering the
floor) and to extend the range of what kids can create
and learn (raising the ceiling).
 WHAT IS SCRATCH?
• The ultimate goal is to help kids become fluent with
digital media, empowering them to express themselves
creatively and make connections to powerful ideas.
 WHAT IS SCRATCH?
• Scratch is built on top of the Squeak environment
developed by Alan Kay and colleagues.
 WHAT IS SCRATCH?
• Scratch is being developed by the Lifelong
Kindergarten research group at the MIT Media Lab, in
collaboration with KIDS research group at the UCLA
Graduate School of Education & Information Studies.
 LET’S GET STARTED!
• To Open Scratch, double-click on the Scratch (cat)
icon or click on Scratch.exe
 GETTING STARTED WITH
SCRATCH
Once you’ve opened Scratch, you should see this
default screen:
 WATCH A QUICK
INTRODUCTION TO
SCRATCH!
 LET’S LOOK AT SOME
SCRATCH EXAMPLES

• Go to Open > Projects and choose the

category Animation
• Look through them and see what you will
be able to do in Scratch!
 CHOOSE YOUR SPRITE!
• You will notice that the default sprite is an
orange cat.
(A sprite is a small graphic that can be
moved independently around the screen,
producing animated effects.)
• You can choose a different sprite to
program from a library in Scratch, or you
can draw your own! You will create your
own sprite later.
 CHOOSE YOUR SPRITE!

• To choose a sprite
from the Scratch
library, click on the
Folder with a Star
icon. When you
hover your mouse
over it, it will say
“Choose new
sprite from file”.
 CHOOSE YOUR SPRITE!
Open the folders of the
different categories of
sprites. Choose one
that you’d like to
experiment with by
double clicking on it.
You can have more
than one sprite in your
animation!
 CHOOSE YOUR SPRITE!
• Once you have a sprite that
you’d like to program, you
can delete the orange cat
sprite by clicking the scissor
icon and clicking on the cat!
• Make sure that you click on
the arrow icon before you do
anything else – otherwise,
you’ll delete something that
you really wanted!
• You can also right click on
the icon to delete that sprite
 RESIZE YOUR SPRITE!
• You can make your sprite larger or smaller
by using the “grow sprite” or “shrink sprite”
icons.
• You click on one of these icons, then click
on your sprite until it is the size you’d like.
 CHOOSE YOUR
BACKGROUND!
• Right now, you have a plain, white
background – boring!
• You can also change your background by
choosing one from the Scratch library or
creating your own!
 CHOOSE YOUR
BACKGROUND!
• Click on the Stage:

• Now, select the

“Backgrounds”
tab!
 CHANGE YOUR
BACKGROUND!
• You can experiment with creating or
importing your own background later, but,
for right now – choose one from the library
by selecting Import.
 CHANGE THE
BACKGROUND!
From this screen, you can choose one of
the category folders, and select a
background that you like by double
clicking on it!
 NOW, WE’RE READY TO
PROGRAM!
Now, you should have a sprite and a
background that you’d like to work
with!
 PROGRAMMING IN
SCRATCH!
• The first thing you need to do is to click on
the sprite you want to program, and select
the “Scripts” tab.
• Since your sprite is the only thing that can
be animated, make sure you have it
selected.
• The Scripts area is where you “build” your
program by using the programming blocks.
 PROGRAMMING IN
SCRATCH!
• In the upper, left-hand corner of your
Scratch window, you will see 8 buttons .
• Each of these buttons have programming
blocks in those particular areas.
• We will first experiment with the Motion
blocks.
 MOTION!
• When you click on the motion button, you
will see the programming blocks that can
be used with your sprite.
• Let’s all program our sprites with the same
code first, and then you’ll be allowed to
experiment on your own!
 MOTION!
• Drag out the “move 10 steps” block.

• Change the “10” to “50” by clicking in the

block and typing in 50.
• To see your sprite move 50 pixels to the
right, double click on the block in the Script
area. Cool, isn’t it?!
 MOTION
• You can also set the motion block to move
a negative number of pixels by typing a
negative number in the block.
• This will move your sprite that number of
pixels in the opposite direction.
 WHAT IS A PIXEL?
• We’ve been talking about pixels – what is a
pixel?
• A pixel is one of the small units that make
up an image on a computer or television
screen.
• It is derived from the words picture and
element to make pixel!
 THE SCRATCH STAGE
• The Scratch stage is 480 pixels wide and
360 pixels high. 180

-240 240

-180
 MORE MOTION!
• Now, add the “turn 15 degrees” block to
the other block of code.
• When you see the white bar between the 2
blocks of code, you can release your
mouse. That white bar means that the 2
blocks will “snap” onto the other block.
 MORE MOTION!
• Again, you can change the number of
degrees by double clicking in that area
and typing in the number of degrees you’d
like your sprite to rotate.
• Double click on the blocks to see your
sprite move and rotate!
 EXPERIMENT WITH MOTION!
• We’ve only used 2 of the blocks in the
Motion category.
• For the next few minutes, I want you to
experiment with all of the other blocks in
the Motion category.
• If you’d like to see what a block does,
right click on the block and then click on
help.
• You can delete code easily by just
dragging it from the Script area!
• Have fun!
 CONTROL!
• The next category of programming buttons
we will experiment with is the Control
category.
• This is a very important category because it
controls how many times an event
happens, how long an event happens, or
when an event happens.
 CONTROL!
• The first block I’d like us to use is the “when
flag clicked” block:

• Drag this block out, and snap it on top of

the blocks you already have in your script.
 CONTROL!
Click here to start
• Now, instead of
having to double
click on your block
of code, you can
just click on the
flag icon to play
your animation!
 PRESENTATION MODE
• When you click on the presentation mode
button, your animation will fill the whole
screen!

• To exit presentation mode, click the arrow

in the top left of the screen, or just press
the Esc key.
 BACK TO CONTROL!

• Other powerful blocks in the Control

category are the blocks that handle
conditional statements.
• Conditional statements are commonly
called “if statements” or “if-else
statements”.
 CONDITIONAL
STATEMENTS

This code means that if the user presses the Space key on the
keyboard, the sprite will move 10 steps.
 SENSING!
• The conditional statements must be used
along with the sensing blocks. (Notice the
shape of some of the sensing blocks. They
are the ones that will fit inside the
“condition” since they have 6 sides)
 BACK TO CONTROL!
• For the next few minutes, experiment with
the blocks in Motion, Control, and Sensing.
• Right click on a block and select help to
get information about a block.
• When you get something cool, I’d like to
see it!
 SOUND!

• Now, let’s add some sound to our

animation!
• There are many different ways to get
sound in your animation.
• The first way we’re going to experiment
with is by importing a sound from the
Scratch sound library.
 IMPORTING SOUND FROM
THE SCRATCH SOUND
LIBRARY
• Click on the sprite you want to have sound.
• Click on the Sounds tab and select Import.
 SCRATCH SOUND LIBRARY
• You will see different categories of sounds
that you can use in your animation that
are available for you in the Scratch
library.
 INSERTING SOUND
• Once you find a sound that you like,
select it and click on OK.
• You will see the sound you just selected
show up under “New Sound”.
 PLAY YOUR SOUND
• If you click on the “Play” button, you can
preview your sound.
 ADDING THE SOUND TO
YOUR ANIMATION
• Now, you’re ready to add the sound to your animation!
• Click on the Script tab.
• Select the sprite you want to have sound.
• Now select the Sound button.

Adventures in Animation
 ADDING SOUND
• Now, select one of the blocks that says,
“play sound…”

• Select your sound from the drop-down

menu by clicking on the triangle next to
“pop”.
 RECORDING A SOUND

• Click on the record

button to record a
sound
• Click on the red button
to start recording
• Click on the square to
stop
• You can rename the
sound by typing over
the name
 INCORPORATE SOUND
INTO YOUR ANIMATION!
When I click the flag, my bee will move
and buzz.
 TIME TO PLAY!

• For the next few minutes, experiment with

Motion, Control, Sensing, and Sound!
• When you get something cool, let me see
it!
 USING THE PEN!

• When using the Pen

tools, your sprite
actually becomes
your writing
instrument!
• You can change
the Pen’s color, its
shade, and its size.
 USING THE PEN!
• Your first Pen challenge is to write your
initials using the Pen tools.
• It may sound easy, but, you have to
remember to lift your pen when necessary
and also to put it back down!
 PEN CHALLENGE #2
• Great job with Pen Challenge #1!
• Your second Pen Challenge is to use the
tools to create an interesting design.
• Remember that you can change Pen color
and shade!
 NUMBERS!
• There are many animation effects you can
create using Numbers in Scratch.
• One effect is random movement of a
sprite!
 RANDOM MOVEMENT
• Remember that the Scratch animation
area is 480 pixels wide and 360 pixels high.
• That means that the range on the
horizontal axis is from -240 to 240.
• The range on the vertical axis is
-180 to 180.
 RANDOM MOVEMENT
• This is the block of code I would use if I
wanted my sprite to randomly glide the
entire horizontal and vertical distance of
my Scratch animation area:
 NUMBERS!
• For the next few minutes, experiment with
the tools in Motion, Control, Sensing,
Sound, and Numbers.
• Click right on a block and select help to
see what it does.
• When you get something cool, let me see
it!
 VARIABLES!
• Variables are used mainly in the
development of games.
• Open some of the examples in Projects >
Games to see how variables are used to
keep score in a game.
 TIME TO HAVE FUN!
• Now it’s time for you to create your own
original animations or games!
• Each table has a set of 12 laminated cards
with different projects that you can try, to
give you ideas for your own animation.
 LEARN HOW TO:
• While you’re creating your own Scratch
animation, I want you to discover how to:
• Create your own sprite;
• Create your own background;
 LAST SLIDE!
• Remember to:
• Be appropriate;
• Be creative;
• Have fun!
• You will also be given a Scratch Help
Guide, complete with screenshots to help
you get started.