Teaching kids how to program is made very easy using Scratch. Let’s show you how to get Scratch working at home or in the classroom.

WRITTEN FOR AGES: 10+
ASSUMED CODING KNOWLEDGE: NONE

In this article, you will learn how to code using Scratch. You will require a computer with Internet access that has an up-to-date web browser.

When we see people programming in TV shows or movies, they are usually staring at a plain-looking monochrome computer screen, while typing long and complicated looking commands into a keyboard. This type of text-based programming can look like a different language with all of the unusual characters being used; curly brackets “{}”, for example. Programming using Scratch, however, is visual, with colour-coded blocks that you drag-and-drop, and snap together like a jigsaw puzzle.

Learning to code using Scratch is now part of the STEM curriculum in many schools. It is a great way for children to learn essential skills for the 21st century, including creative thinking, problem solving and how to work collaboratively with others.

This quick start guide will help get you started if you’re wanting to learn more about Scratch at home or in the classroom. By the end of this article, you will be familiar with the Scratch interface, know how it works, and know how to start coding your own Scratch programs.

THE BROAD OVERVIEW

Scratch is a programming language aimed at teaching children, between the ages of 8 and 16, how to code. It is free to use, and uses colourful graphics to make it easy to program your own interactive stories, games, music, and animations. You can then share your amazing creations with others in the online Scratch community so they can enjoy and learn from what you made.

The Scratch program (called the Scratch Editor) can be downloaded and installed onto your computer or used online, provided that you have a computer connected to the Internet. It does help to create an online account though, so it remembers your projects.

There are over 30 million people around the world who have setup a Scratch account, and over 34 million different projects shared that you can access. This means there is plenty of support in the community if you need advice on your project, or just to give you ideas on what projects to make.

USING SCRATCH ONLINE

If you are “online”, meaning your computer is connected to the Internet, you can start using Scratch straight away with the online Scratch Editor. Go to the Scratch website: https://scratch.mit.edu then Press the ‘Try It Out’ button, which takes you straight into the Scratch Editor

Using the Editor online will mean you need to create an account if you want to save your work. If you don’t want to set up an account you will need to download and upload your projects each time you want to work on them.

By creating a Scratch login, your projects will automatically save. This is a very handy feature so you will never lose your hard work.

Using Scratch Editor Offline

Using Scratch “offline” means you download the Scratch Editor to your computer. Downloading Scratch and installing onto your computer has a few benefits. Firstly, you do not need to create an account, which is great if you don’t have an email address. It also means you can work on your projects on your computer when you are not connected to the Internet. For example, you could use Scratch on your laptop if you are away on holidays.

Go to the Scratch website: https://scratch.mit.edu/download. If you don’t already have it, install Adobe Air by selecting the Mac or Windows option that matches your computer. Follow the computer prompts to complete the Adobe Air installation.

Next, download the Scratch Offline Editor by selecting the Mac or Windows option that matches your computer. Again, follow the computer prompts to complete this task.

Once installed, you can start the Scratch Editor, just like any other program on your computer.

Note: This article has been written for Scratch version 2.0, released in 2013. There is a trial of version 3.0 that you can download, but this is in what they call “BETA” testing, which means it may not work 100% as planned i.e. It may have bugs in it that causes it to stop working.

Creating an Online Account

If you have your own email address you can create a Scratch account. The online account is free to join, and helps you save your work if you are using Scratch online. An account also allows you to share your work and to join in on conversations about other users online projects. Please note that it will ask some personal questions, so adult supervision is recommended when you register.

To get started, go to the Scratch website https://scratch.mit.edu and press the ‘Join Scratch’ link. A pop-up screen will appear. Complete the following steps to sign up.

Name and Password

To create an account you will need to come up with a username and password.

• Make up a username (don’t use your own name). Be creative. You can use letters, number, dashes ‘-’ and underscore ‘_’ if you need.
• Enter a password that you will be able to remember, but not easy for someone to guess. You will need to enter this password in two places where requested.
• Select the ‘Next’ button.

Details about you

Scratch needs to know a little about you. This will be kept private.

• Enter the month and year you were born
• Select whether you are Male, Female or type in your answer
• Select the country you live in
• Select the ‘Next’ button

Enter Email Address

If you don’t have your own email address you will need to ask your parent or guardian for theirs.

• Enter the email address in two places where requested
• Tick the box if you want to get updates by email from Scratch
• Select the ‘Next’ button

Confirmation

This screen confirms that the account has been created. Select the ‘OK Lets Go!’ button

Note: In order to share your project in the Scratch community, you will first need to confirm your email. Open the email that Scratch sent you and follow the instructions in the email to Confirm your account.

THE SCRATCH EDITOR

Let’s show you all of the different parts of the Scratch Editor screen.

The Stage

Ths Stage is where the action happens when you run your project. Sprites will move about the stage, following the program you create. The Backdrop Pane area in the lower left allows you to change the Stage backdrop.

Sprites

Sprites are the characters or objects that appear on your stage. You could think of them as actors or props that perform actions on your stage. When you start a new project you see the orange Cat Sprite. There are many other Sprites included with Scratch, including letters, people, animals, cars, trucks, sports balls, fruit, trees, musical instruments, and fancy lettering.

Sprites can be set to do all different actions such as changing colour, moving or spinning around. They can play sounds or deliver messages on the stage screen.

You can even design and upload your own sprites too. We will show you how to do this later in this article.

Blocks and Scripts Palette

Blocks are the multi-coloured instructions that tell your Sprite what action do to. For example, the blue ‘Move’ block instructs your Sprite to move a specified number of spaces.

Blocks have the action they perform written on each block, and are grouped together into different families depending on what actions they perform.

MOTION: Used to control your sprite’s movement. For example, Turn 90-degrees clockwise

LOOKS: Used to control how your sprite looks on the stage. For example, Make a speech bubble appear for 5 seconds.

SOUND: Used to make and control sound of your Sprite. For example, Play a drum for 10 beats.

PEN: Used to make your Sprite draw lines or stamp its image on the Stage. For example, Pen down or Pen Up.

DATA: Used to hold values and strings. For example, Set ‘x’ to 0.

EVENTS: Used to control when your Sprite needs to perform an action. For example, activate script when space bar pressed.

CONTROL: Used to control your script. For example, repeat 10 times.

SENSING: Used to detect things on the stage. For example, when your Sprite is touching your mouse pointer.

OPERATORS: Used to perform maths functions or string handling. For example, adding two numbers together.

MORE BLOCKS: Where you store your custom made Blocks.

Scripts

Scripts are created when you stack the instruction Blocks together in the Scripts area. The blocks are designed to lock together, similar to putting pieces together in a jigsaw puzzle. This ensures the Script runs properly and also makes the Script easier to duplicate or move around the Script Pane to make room for more scripts.

Costumes

Costumes allow you to change the appearance of a Sprite, just like an actor changing their costume to look different on stage. A common use for Costumes is when making an animation. A good example would be a stick figure in a flipbook doing star jumps. You would draw the stick figure in different positions on each page so you can show the arms and legs doing the star jump action. Each figure would be a different costume.

Sounds

You can make Sounds or Notes in Scratch. Sounds can be imported to the computer or recorded using the computer’s microphone. Notes are sounds from 21 pre-programmed musical instruments such as a drum, piano, organ, flute, guitar, etc. You can change the volume, tempo, beats and more.

Backpack

The Backpack is a handy place to store useful scripts, sprites, costume, etc. that you have created. This saves you having to redo them each time you start a new project.

Controls

Other important controls on the Scratch Editor are:

Makes your Stage go full screen

Starts your Scripts running

Stops all Scripts

Zoom in and out of the Script

Stage coordinates

This diagram shows you the coordinates of the Stage if you need to position your Sprite. 'x' is the horizontal position and 'y' is the vertical position. The middle of the Stage is 0.

LET’S CODE YOUR FIRST PROJECT

One great way to learn is to jump in and start doing. We will take you step-by-step through the process of creating your very first project. We recommend you don’t skip ahead because each project is based on the previous project.

If you read our ‘Think Like A Computer’ article in Issue 16, you would be familiar with our autonomous car that drove from one car park to another. We will use the same car as our Sprite, and the same street scene for our Backdrop.

Before we start creating our program, the car and street scene images need to be downloaded from the DIYODE website:

• Using your internet browser, go to https://diyode.io/017qpgb
• Scroll to the bottom of the DIYODE web page to access the downloadable resource files. (If you don’t have a login you can sign up for free.)
• Download the street.png and car.png files to your computer (Remember the folder you are saving them to).

With the car and street image files saved to your computer, we can now code our first program.

Our first program will allow us to drive our car Sprite around a street Backdrop using the arrow keys on your computer keyboard.

Preparing the Scratch Editor

• Open the Scratch Editor.

Note: If you do not have Scratch loaded onto your computer you need to access it online. Refer back to the ‘Using Scratch Online’ earlier in this article. Our instructions will be written and illustrated assuming you are working online. The same instructions can be applied if you are working offline.

• Start a new project by selecting ‘File’ from the top menu, and then select ‘New’.

Give your project a title

• In the field above the Stage area, you can type in a name for your project. In our case, we wrote “My First Project - Driving a Car on a Street Scene”, but feel free to make your own title.
• Next, save your project by selecting ‘File’ from the top menu and selecting ‘Save now’.

Deleting the Cat Sprite

• We don't need the cat sprite in this project. Using your mouse, right-click on the Cat Sprite in the Sprites panel and select ‘Delete’. If you are using a Mac, just hold down the Control key on your keyboard while you click, then select ‘Delete’.

Uploading a background

• Select the ‘Upload backdrop from file’ icon in the Stage Info area.
• Find and choose the street.png file that you downloaded from the DIYODE website to your computer.

Uploading a Sprite

• Select the ‘Upload sprite from file’ icon in the Sprites panel.
• Find and choose the car.png file that you downloaded from the DIYODE website to your computer.

Next, we will create our first Script.

SCRIPTING A SPRITE

When we first uploaded the car Sprite it went to a random position on the Stage. Let’s make a script that positions the car Sprite in the top left corner of the Stage when we press the space bar on the keyboard.

• Select the car Sprite in the Sprites List.
• Select the ‘Scripts’ Tab.
• Select the ‘Events’ option in the Scripts menu.
• Drag-and-drop the ‘when [space] key pressed’ Event into the Script Area.
• Select the ‘Motion’ option from the Scripts menu.
• Drag-and-drop the ‘go to x:[] y:[]’ Motion block into the Script area.
• Set the x to ‘-210’ and the y to ‘151’ (these are the coordinates on the stage where the centre of the car Sprite will go to).
• Drag-and-drop the ‘point in direction []’ Motion block into the Script area.
• Set the direction to ‘90’.

To test your first script, simply press the ‘space bar’ on your computer keyboard. The car should move to the top left corner outside the Police station. Nice work!

Note: To see the x and y coordinates on the Stage, simply hover your mouse over the Stage area and read the x and y numbers shown in the lower right of the Stage.

MOVING THE SPRITE USING ARROW KEYS

To make the car move right to the next grid on the street, we need to move the car 60 pixels right when we press the right arrow on the keyboard.

• Drag-and-drop the ‘when [space] key pressed’ Events block into the Scripts area.
• Change the ‘[space]’ key setting to ‘right arrow’.
• Drag-and-drop the ‘point in direction []’ Motion block into the Scripts area.
• Change the ‘[90]’ setting to ‘(90) right’ (90 stands for 90 degrees).
• Drag-and-drop the ‘move [10] steps’ Motion block into the Scripts area.
• Change the ‘[10]’ steps setting to ‘60’ (60 is the number of pixels the car needs to travel to get to the next street grid).

If you press the ‘Right Arrow’ on your keyboard the car will now travel to the right. Good job! To move the car back to the original starting position we press the ‘Space Bar’.

Next, we will add the Scripts to make the car move when we press the other three arrow keys.

• To make scripts for the Left, Up and Down arrows, repeat the previous steps or right-click on the Script to duplicate it. Be sure to change the following settings.
• Set the ‘left arrow’ to a direction of ‘-90’
• Set the ‘up arrow’ to a direction of ‘0’
• Set the ‘down arrow’ to a direction of ‘180’
• All three move blocks should be set to 60 steps

Test all of your Scripts by pressing the Up, Down, Left and Right arrow keys. If the car does not go in the same direction as the arrow you are pressing, you need to double-check the settings for that key. Remember to press the space bar to position the car back to the starting position if your car drives off the street grid.

Well done, you have successfully made your first program! To ensure your program has saved select ‘File’ and ‘Save now’ in the main menu.

Did you notice that the car goes out of alignment if you drive it off the street into the edges of the Stage? This is because our car couldn’t move the entire 60 pixels. It changes the coordinates of the car, putting it off course. We could simply press the Space Bar to reset the car position, but it would be better a better idea to improve the program so the car stops before driving off the Stage.

Edge Detection

To stop the car going off the Stage, we can detect when the car is touching the edge of the Stage and stop it going any further. We do this using an ‘If’ statement and Sensing if the Sprite (the car) is touching the Stage edge.

If the car is touching the Stage edge we need the car to do a different action. In our case, we are going to use a Control block called ‘If then’.

• Drag-and-drop an ‘If < > then’ Control block into the Script area, attaching it to our Script that is for when we press the right arrow.

We use a Sensing block to sense if our car is on the edge of the Stage.

• Drag-and-drop the ‘touching [mouse-pointer]?’ Sensing block and insert it into the space between ‘If’ and ‘then’.
• Drop down the ‘mouse-pointer’ setting and change it to ‘edge’.

If our car is on the right edge of the Stage we are going to set it’s x position to 210, to keep it centred on the street.

• Drag-and-drop a ‘set x to (0)’ Motion block to the Scripts area, inserting it into the gap in the ‘If’ block.
• Change the x setting from ‘0’ to ‘210’ (The x position of 210 puts the car in the centre of the right-hand street grid).

Next, we need to set the x or y position for the car if it is on the left, top or bottom edge of the Stage.

• Repeat the previous steps three times for our remaining 3 Scripts, but change the following settings.
• For the ‘left arrow’ Script set x to ‘-210’.
• For the ‘up arrow’ Script we need to change the Motion block to ‘set y to (0)’ and set y to ‘151’.
• For the ‘down arrow’ Script we need to use the ‘set y to (0)’ Motion block and set y to ‘-149’.

You can now test your program again. Press the ‘space bar’ to reposition the car at the starting position, then drive it around the screen using the arrow keys. If your car no longer goes off the Stage pat yourself on the back! If it does, double-check the settings in the relevant Script that is giving different results.

Note: If you are familiar with Scratch you may know that there is an ‘if on edge, bounce’ Motion block that stops Sprite’s going off the stage. In our case, it doesn’t centre the car on the street, which is why we chose to set the x or y position of the car, so it remains centred on the street.

We’re sure you are already getting the hang of Scratch programming after just doing the previous two programs. Let’s do something slightly different and use a mouse to control the direction of the car instead of the arrow keys.

Follow The Mouse

Let’s have some more fun and make the car follow our mouse arrow around the screen, and stop when we reach a blue car park.

Delete the previous Scripts because we don’t need them anymore.

• Right-click (Control+click for Mac) on each Script and select delete.
• Repeat so that all Scripts are deleted.

The green flag and red stop button above the Stage can be set to start or stop your program. Let’s use the green flag to start our Script.

• Drag-and-drop the ‘when FLAG clicked’ Events block onto the Scripts Area.

Similar to our previous program, we will give our car a starting position outside the Police Station on the Stage.

• Drag-and-drop the ‘go to x:() y:()’ Motion block and set x to ‘-210’ and y to ‘151’.
• Drag-and-drop the ‘point in direction ()’ Motion block and set it to ‘90’.

We want to car to continuously repeat and follow the mouse pointer until we reach a car park.

• Drag-and-drop the ‘repeat until < >’ Control block into the Scripts area.

Our car parks are all light blue. We can stop the car when it touches that colour.

• Drag-and-drop the ‘touching colour []’ Sensing block and drop it into the ‘repeat until’ block.
• Select the square colour setting. The mouse pointer will turn into a small hand. Hover the hand over the blue car park in the Stage and select it.

Now we need to get the car to follow the mouse pointer and move 3 steps at a time.

• Drag-and-drop the ‘point towards [mouse-pointer]’ Motion block into the ‘repeat until’ block
• Drag-and-drop the ‘move (10) steps’ Motion block into the ‘repeat until’ block, then change the steps setting to 3

Let’s try the program by pressing the green flag at the top of the Stage. The car should start at the top left position near the police station and start driving slowly towards your mouse pointer. Try to make the car follow your mouse along the street and into a blue car park. The program should stop once the car touches a blue car park.

If your car doesn’t follow the mouse check that your program matches our Script.

If your car doesn’t stop when it touches the blue car park you have not selected the correct colour.

Well done! You are well on your way to learning Scratch. We have only Scratched the surface though (see what we did there?!).

WHERE TO FROM HERE?

We have shown you just a small sample of what Scratch can do. In fact, there are probably other ways to create the same Scripts we’ve described.

Experiment with the Scripts we’ve created. For example, you could play a sound when the car goes to the edge of the Stage, or displays a message when you stop at a car park.

Visit the Scratch website and search through the millions of projects people have shared. Once you find one you like, you can see the code by pressing the “See Inside” button. You can then experiment by changing the code to see how that affects the program.

Once you have created some cool Scripts of your own, why not share them in the online Scratch community for others to use.

Have fun!