Scratch Tutorial Finalv02
Scratch Tutorial Finalv02
in focus:
Supporting implementation of Digital Technologies
Scratch tutorial
Initiative of and funded by the Australian Government Department of Education and Training
Acknowledgements
The Curriculum group of ACARA has developed this professional learning program to
support teachers in the 3-year National Innovation and Science Agenda (NISA) project
known as Digital Technologies in focus: Supporting implementation of Digital Technologies.
Julie King
Permission to use Scratch user-generated content, and support materials is permitted under
the Creative Commons Attribution-ShareAlike 2.0 license.
Initiative of and funded by the Australian Government Department of Education and Training. ©
Australian Government Department of Education and Training.
CONTENTS Page
About this tutorial 3
Thought provoker 3
Your challenge 3
Your mission 3
Setting the scene 3
Section 1: Introductory tutorial 5
Starting a new project 8
Let’s revise 11
Opening a saved file (multiplier program) 12
Variables 13
Let’s recap 16
Next step: Joining the blocks 17
Joining it all together 18
Testing the code 19
Defining key terms 23
How can this look in your classroom? 24
Section 2: Creating a game 25
Setting up the game 26
Resizing a sprite 26
Editing the backdrop 26
Adding another sprite 28
The logic (an algorithm) 29
Making the cat move smoothly 29
Testing the cat’s movements 30
Keeping the cat within the track 32
Check your progress 33
Broadcasting a message 34
Coding a second sprite 36
Adding a sound effect 37
Placing a second sprite exactly where a first sprite is located 38
Creating some variables 39
Setting the variable to a known location 39
Setting up a constant start 42
Thought provoker
‘Design and programming are human activities; forget that and all is lost.’
Source: Bjarne Stroustrup, Danish computer scientist and developer of the C++ programming language
Your challenge
Understand the basics of simple code – this works equally well for visual programming
(block) and general-purpose coding – and how this applies to the Australian Curriculum:
Digital Technologies.
Your mission
● understand coding practices and use coding tools effectively
● analyse the complexities and logic of code using block (or visual) code
● use the visual programming language, Scratch, in either its online or offline versions,
to gain an understanding of input, output, sequences, looping, conditional branching
and variables
● explore teaching and learning opportunities in other areas of learning
● create valid assessment opportunities for students to demonstrate the required
standards and progress in their learning.
Figure 1: Scratch layout (there are slight variances, depending on your version)
To control your actor or sprite, click on it so Scratch knows you are writing scripts for it and
then drag the script elements shown in Figure 2 (page 6), across to the scripting area on the
right. Each script element has a characteristic shape, and not all shapes will fit into all slots.
This is intentional (it’s based on the behaviour of Lego™) as it disguises the syntax issues
normally associated with general-purpose coding. Scratch is able to accept a variety of ways
of inputting instructions, such as clicking and pressing the space bar, as shown in Figure 2.
In each of these input cases, when the brown event is triggered, do what it says under it and
observe the result. You can have more than one script or code fragment available, each
responding to a different input event.
There are a variety of ways that you can start a program segment.
You can do the same thing to interact further with the user. Figure 3 (page 7) shows four
different bits of code that become increasingly useful. Try them out.
The fourth script in Figure 3 is repeated in Figure 4 – it’s a bit wobbly, isn’t it? Pull the script
apart and add a few new elements to give a better conditional branch.
This is better, but notice that a right answer plays up a bit – it just goes straight to the finish.
You miss out on the recognition you deserve. Why is that? Because computers are so fast,
you need to add a delay so you can see the result. This is done by putting a loop around the
question so you get more than one opportunity to answer a little later on.
Let’s demonstrate the speed of the computer with some movement.
You are going to code a new project to get the sprite to move in a square.
You will be using this old code later on, so best to save it.
Figures 6, 7 and 8 show the results of right-clicking on the top blue block of code and
selecting ‘duplicate’ this line, and everything under it will be duplicated. Soon the code will be
ready to run.
Now when you run your code, you can see what is happening because of the ‘wait’
commands. You can also use the sprite to draw the results of your code.
You can make the code work smarter by using a command that allows you to not type
repetitive instructions.
In the orange control block there is a repeat command, as shown in Figure 10.
If you did, then great. If not, then you might have found another way that works – that’s great
too!
Let’s revise
You’ve learnt that there are different ways to start the code working, such as green flag and
clicking on the sprite, as shown in Figure 12.
You’ve also learnt about a conditional situation – if something is true, do this or else do
something else, as shown in Figure 14. This is the third of the big three things that
algorithms can represent and code needs to do.
There is just one more thing that you need to go through – getting feedback from the user in
a useful way.
Go back to the original code that you saved in a folder on your desktop.
Another problem here is that this code only works for one problem – ‘4 times 10’ – this is
referred to as being hard coded. This is great if you want to concentrate on just that problem
but if you want to change the numbers you have to rewrite the program code every time.
This is not an efficient way of coding.
So let’s fix it so the code picks a random number for each multiplicand.
Variables
You’ll need to create three variables (reddish data blocks) – one each to hold the value of
the first and second numbers and one for the value of the result of the multiplication
(product).
You’ll have to create and name each variable needed first.
To do that, click on Make a variable and give it a suitable
name. ‘X’ would be okay but ‘first number’ is much more
descriptive and easier to remember if the code gets bigger
and it is easier for another coder to interpret. You will use it
for this sprite only in this example, as shown in Figure 16.
That makes it a local variable – something that will come up
as you and your students get more into coding. (In this
example, it makes no difference.)
If you want to test the code, you can put it in the coding area and click on it. A random
number will appear each time you click it. Give it a go.
The next step is to set your variables ‘first number’ and ‘second number’ to random numbers
between 1 and 10.
In the Data block of commands you will see a block ‘set product to 0’. Note that ‘product’ has
a down arrow next to it.
Select first number and then add pick random 1 to 10 to the little square after ‘to’ where
the 0 is, as shown in Figure 20. If you have trouble placing things in the white circles or
squares, try dragging with the mouse arrow at the left end of the block you are dragging.
Figure 23: Scratch commands for multiplication with random selections for variables
Now you need to work out where to put them in the code. Good coding practice states that
you should initialise variables first. Put the code straight after when f key is pressed.
Your code should now look like Figure 24.
Let’s recap
You have decided to make the code choose random numbers to multiply each time you
press the ‘f’ key.
You have set up variables for the two random numbers ‘first number’ and ‘second number’.
You have set up a variable to store the result of the computation: ‘product = first number
x second number’.
You have placed all those variables at the start so later code can use them and know what
they are.
Next add the other join in the space that is left, as shown in Figure 27.
Now, if you read the command (without the join words and left to right) it reads how we want
it: ‘What is first number times second number’. This is something you will need to teach to
students as a great way to think about joins.
Next you need to put the complete join statement into the Ask block, as shown in Figure 28.
Figure 28: Scratch example of joining statements into the Ask block
If you haven’t moved your command blocks around too much the whole code will look like
Figure 29.
Figure 29: Scratch example of using variables, joins, ask and wait, loop commands
The next step is to go into the reddish data blocks and drop the product variable into the
box that currently says 40, as shown in Figure 31.
If you run the code now it will work brilliantly, but only once, and then you have to press
f again each time you want to run it.
Are you happy with the result? What happens with this code is when the question is asked, it
looks like what is shown in Figure 36. The ‘6times6’ format is neither conventional nor
attractive. It can be easily fixed by adding some white spaces (a space bar) to either side of
‘what is’ and ‘times’, as shown in Figure 37.
There is another part of this solution that needs fixing. While you see nicely spaced writing
on the stage, you also see the variables being displayed and one of them is the answer, as
shown in Figure 39.
There are times when variables on the stage are great, for example, for timers and scores,
but not for this project. You can hide the variables by going into the reddish data blocks and
unticking the little boxes, as shown in Figure 40. They will disappear from the stage as you
do this.
Term Meaning
Input
Output
Looping
Variables
Conditional
statements
Figure 42 shows an image of a sample wire loop circuit and its underlying principles, which
form the basis of the game. School programs that take an integrated approach to this project
would need to initially focus on content related to electrical energy circuits before starting to
create this game. This resource focuses only on the programming aspect of the game.
Students make a game that focuses on the curved loop part of a circuit, with the user having
to negotiate the loop or ‘track’ to get from left to right. Each time a user touches the wall of
the track he or she will get a ‘zap’ (indicated by a buzzing noise) and lose a life.
There are many permutations on determining a winner of this game, such as the fastest time
to move from left to right, the highest score based on number of hits divided by fastest time
the least lives lost.
Resizing a sprite
To shrink Cat1, choose the icon that is circled in red, as shown in Figure 43, and then move
to Cat1 and click. Note that the icon to the left of the shrinker will enlarge the cat.
Figure 45: Scratch example of selecting Backdrops tab and brush tool
The next step is to draw a track that Cat1 follows. The track must be wide enough to let
Cat1 move through it without hitting the sides. It will have a left and right side, like a road. A
sample track is shown in Figure 46.
Note the size of the track compared to Cat1 – it is small enough to fit all the way around the
track and this is important. Of course, you can reduce or enlarge the size of Cat1 to suit your
track, as shown in Figure 43 (page 26).
If you make a mistake there is an eraser tool within the Backdrops edit screen as well as a
text tool, which will be discussed later.
To do: Draw your own track on the backdrop. Make sure it is just one colour!
Cat1 will be used until it hits the side of the track. When this happens, the second cat
(referred to as Shocked cat) will be used because it has a shocked expression, in keeping
with the wire loop game theme. Cat1 will then reappear. It should be effective, especially if
you add some other special effects. See ‘Adding a sound effect’ (page 37).
You can find a range of sprites on the Scratch Wikia website at:
http://scratch.wikia.com/wiki/File:Cat1_sprites_(game).png It is suggested that you save
a selected sprite in the file where you keep all your Scratch programs. In this instance the
Shocked cat was saved as shocked cat.png and then this allows you to retrieve it from the
‘Upload sprite from file’ function, as shown in Figure 48. This Shocked cat will also appear in
your sprites area.
In Figure 49 you can also see a donut sprite that was chosen from the sprite library. You do
this by clicking on the sprite icon (little figure with big hair) to the left of the brush. The donut
sprite will be added to the game later.
To do: Get another sprite to use for when Cat1 touches the edge. There is a lightning bolt
within the built-in library if you don’t want to use a ‘shocked’ cat.
You make Cat1 move by including some if statements inside a loop that checks forever if the
condition is true. Let’s start with when green flag clicked.
Figure 51: Code to start Cat1 moving to the right of the track
To do: Try changing ‘change x by 2’ to some other number and see if there is still smooth
movement.
You want a low number like ‘2’ so that Cat1 can be controlled in small increments.
Now you need three other if statements to cover the other three arrow keys (left, up, down).
See if you can code it yourself. The answer is shown in Figure 53 (over page) but you should
try it to learn how to do it for yourself.
Figure 52: An additional sprite (a donut) is added at the end of the track
Figure 53: Code showing if statements for moving Cat1 around the stage
You are going to finish with the code you have created (like that shown in Figure 53) and
begin a new set of blocks, which will also start working when the green flag is clicked. You
can put this new set of instructions right beside the one you have already created. At the
start it will look like Figure 54.
You will build this new block by using another forever loop to make the program check
constantly if the edge of the track has been touched, and some if statements to work out
how to move back a couple of steps. After that you will make the Shocked cat appear.
Now that you can choose a colour, move the hand over the track and when the little colour
square is the same colour as the track edge, click to lock in that colour. Hopefully you made
your track only one colour, as suggested earlier.
You want a forever loop to constantly check and you want two levels of if statements (nested
conditional statements). The first if statement will check if the edge is being touched – if it
isn’t being touched you don’t want it to do anything. The second-level if statement will
determine what key is being pressed, so you know which way to go back a couple of steps.
The first nested loop looks like Figure 56.
The forever loop checks forever if Cat1 is touching an edge (touching something black, the
colour of the track shown in Figure 52). If this is the situation, then if the right arrow key is
being pressed, you need to change the x axis by –2 to move Cat1 away from the edge.
To do (maybe): You could talk to your students about Cartesian maths and x and y
coordinates at this point.
Figure 57: Code for moving away from an edge if right or left
arrows were pressed
To do: Code this much and then try it out in your program.
See if you can complete the code to deal with the situations when Cat1 touches the track
edge when moving up or down. The finished code is shown in Figure 58 (page 34), but again
it would be good for you to try it first.
Now you will get the rest of the code working, starting with logic point 3, which has three
parts to it:
If Cat1 hits any track edges (in black) I want it to do three things:
a. Swap to the Shocked cat and play a sound. The Shocked cat needs to be in exactly
the same spot as Cat1. When it is being shocked the cat should hide.
b. After being shocked, Cat1 should return to its normal elf and the Shocked cat should
hide.
c. After being shocked, Cat1 should return a couple of steps back from where it hit the
track edge.
Before you start coding, just check that your code is like that shown in Figure 58 (page 34).
Broadcasting a message
Scratch has an interesting way of letting other parts of the program know what is happening.
It is called broadcasting and it means letting other code know when something is happening
that it is waiting for.
You are going to use broadcasting to make the Shocked cat appear, make Cat1 disappear,
play a sound and then get Cat1 to reappear. It should look pretty good if you do it correctly.
Start by choosing the Event block that looks like Figure 59.
Drag the block into the coding area for Cat1 (where all the code is at this stage). Click the
down arrow on the block and choose new message. Call the new message ‘Zapped’. Drag
another similar ‘Event block’ into the coding area and create another new message called
‘zapped_over’. You should have two blocks that look like Figure 60.
The logic is: Check to see if Cat1 is touching the edge. If it is, then work out which key is
being pressed and move back two steps. Then broadcast ‘Zapped’. If ‘Zapped’ is received,
then hide Cat1.
Remember: If using the offline editor, go to File on the top ribbon, choose Save as and pick
a location you will remember.
If in Scratch Online, choose File/Download to your computer and drill to somewhere you will
remember.
If the Shocked cat cannot be seen anywhere on the stage area (anywhere near your track or
donut or Cat1), then drag it in from the sprites area.
In the Shocked cat coding area, choose another when I receive Zapped Event block (as
shown in Figure 65). Also choose a when green flag clicked block. The first thing you want
to do is when the green flag is clicked you need to make sure the Shocked cat doesn’t
appear. When the program starts, it needs to hide.
Your code for Shocked cat should look like Figure 66.
To do: Try doing this before looking at the code shown in Figure 67.
The logic: When the green flag is clicked, Shocked cat will hide and Cat1 will be able to
move around and crash into the edge of the track. If it does, a message called ‘Zapped’ will
be broadcast. Shocked cat is waiting for this message. When it comes, it will flash twice and
then hide. It will also broadcast ‘zapped_over’. Cat1 is waiting for this message. It will alert
Cat1 to reappear (show).
The code for this is shown in Figure 67.
Remember, the code is in the Shocked cat coding area. You’ve probably tried it out and
have noticed a big problem. Can you identify the problem?
Before you tackle the problem, you are going to add a sound effect.
Notice the block has a dropdown arrow. When you click it there are no more presets but you
get the choice to record. You are not going to do that. Instead, go up to the ‘Scripts,
Costumes, Sounds’ tabs and click on ‘Sounds’, as shown in Figure 69. Choose New sound
from library (as shown in Figure 70), go to Effects, click on rattle and choose OK at the
bottom right of the window.
Figure 69: Use Scripts, Costumes and Sounds Figure 70: Function to select New sound
tab to access sounds from a sound library
Click on ‘Make a Variable’ again and this time call it ‘xpos’ (for x position). Again, make it For
all sprites. Do the same a third time, this time calling it ‘ypos’ and making it ‘For all sprites’.
Your three variables should look like Figure 75. Notice that each has a little grey box next to
it. This is how variables are depicted in Scratch.
You are now going to add these blocks to the bottom of the first block of code you created,
making it look like Figure 79.
Remember you have created two variables that are holding the current x and y coordinates
of Cat1. You are going to use them now.
Go into Data block and choose the variable xpos. Drag it into the blue go to x: block
Figure 81.
Do the same thing with the ypos variable. You should have a block of code that now looks
like Figure 82.
Note: If you made your ‘xpos’ and ‘ypos’ variables ‘For this sprite only’, then you would not
see them in the Shocked cat sprite coding area.
To do: Try out your program now and see where Shocked cat appears.
The other variable you created, ‘counter’, is going to be used to count up how many times
the track edge is touched. In this case you do want the variable to appear at the top of the
stage area.
The best place to put the code for this is when ‘Zapped’ is broadcast, as it is broadcast each
time the edge is touched. So still in the Shocked cat coding area, go to Data blocks and
choose the change counter by 1 block. Place this block after (or just before) the broadcast
‘zapped_over’ command at the end of the code. Your code should now look like Figure 85.
To do: Try out your program now and see if the counter works accurately.
There are only a couple more quick things to do to make the code complete. You have
finished with the Shocked cat code, so go back to the Cat1 coding area by choosing its
sprite in the sprites area.
Now drag Cat1 to its starting position. You will notice that at the bottom of the stage area is
an x and y coordinate readout, as shown in Figure 87.
To do: Try working out how to do this last little bit. The code is in Figure 89 if you get stuck.
Note where the new if touching Donut then block is located. It is at the same level as the if
touching color then block. It cannot be inside that block as that scenario (touching both the
edge and the donut) might not happen.
Run the code to see if it works. Obviously, you could add quite a bit more to this game to
make it more challenging – more levels, limited lives, timers. Try some!
This section provides two short exercises that extend advice provided in Section 2, a list of
resources, including projects and online coding resources that feature other visual
programming languages, as well as assessment advice.
Extension exercises
The following two extension exercises enhance your skills in controlling movement and
playing sounds.
Controlling movement
This exercise extends what is covered in Section 2: Creating a game. Controlling movement
has great applications in learning mathematics, designing games and animation, as it can be
very precise.
Choose File/New to start a new coding session. Select Stage and click on the left-most icon
underneath to select a new backdrop from the library, as shown in Figure 90.
Now your stage looks like a Cartesian plane with horizontal and vertical number lines.
Click on any of the Motion (blue) commands to see what they do.
Figure 92: Scratch uses 0,0 as the origin (centre of the stage) and 0°,
90°, 180° and 270° for north, east, south and west, respectively. Just
like a compass, 0° is the same direction as 360°
Playing sounds
Have fun exploring sounds (use headphones) and costumes. Combine these to make
something interesting happen. Also try using the Broadcast blocks – they add a whole new
dimension to what you can do with block coding.
Resources
You don’t have to look far in Scratch to find help. It has lots of tips that come up when you
click on ‘Tips’ on the menu bar, as shown in Figure 93. These help you go through projects
step by step – a great way to challenge students if you are not so sure yourself! There are
other tips as well, such as creating effects, animation and games; telling stories, and working
with music.
Figure 93: You can access lots of tips from the menu bar
There is also a tab that provides a lot of information on every block in Scratch, as shown in
Figure 94 (page 48). If students come to you asking about how, for example, broadcast
works, you can send them here in the first instance.
The tips are really useful in encouraging student-led activities as well as student self-
sufficiency.
They are also useful for teachers to brush up on their skills.
Apart from tips, there are thousands of projects available online where students can see how
other programmers got things working.
These are available in the online version only under ‘Explore’, as shown in Figure 95
(page 49).
In Explore, students can load and play the programs that others have created.
Students can also click on 'See inside’ (the blue button) to see the code, as shown in
Figure 96 (page 49).
In Scratch, students are also encouraged to change the code of others (as long as credit is
given). This is called remixing and it helps students to learn more about coding. Students
can upload their own code or remixed code for other users to play and use. It is very
collaborative and many students really enjoy the site. You might want to think about getting
all your students to sign up. They can save their work online and continue working on it
anywhere they have internet access and a computer.
It should be noted that most of the content of this resource focuses on using a visual
programming language to implement a solution – this forms just one part of students
becoming innovative creators of digital solutions.
Assessment opportunities
When creating assessment opportunities, it is important that there are direct connections
between what is taught (as stated in the Content Descriptions) and what knowledge and
skills are being assessed. The Content Descriptions form the boundaries, in terms of breadth
and depth, of the Achievement Standards, and they should be foremost when determining
what evidence of student performance needs to be captured.
Listed are some assessment suggestions to help you measure student progress.