In this article I'm going to use some projects I made to illustrate the topic and you can find the first one here:

Coding for Primary Schools

Back to Title

A Simple Animation


If you look at the top right of the project you'll see a blue button that says "See Inside" which if you click on it will take you to the build area of the project where you can code it, add sprites, etc. Here's the anatomy of the window:


Viewing Window

Sprite Window

Object Window


The viewing window, as the name implies, lets you see the animations you have created. The sprite window allows you to load new sprites or work with the ones you have already. In the above case I have only one sprite, the cat. The term sprite refers to an image that can be moved across the screen. The image is held in a container and the image within the container can be changed. One container can hold only one image at a time but the images can be changed and switched between. In the above project that was how the cat was made to look as though its legs were moving. Here's a closer look:


From Library

Paint New

From Library

From Camera

Above you can see the sprite highlighted with a blue border. This means it is selected.When the sprite is selected we can code for it or alter it in some way. Marked in arrows at the top are the four ways of loading new sprite images into your project; from the library of pre-made images that comes with Scratch, from the built-in image painter, as an external file and from a camera. By far the easiest way to create custom sprites is to use a drawing program such as Inkscape to create them, and a manipulation package such as Photoshop or Photo Plus to export them as PNG files. Don't worry if you don't understand that - that's a much later lesson. The cat is the default sprite. It will always come up in a new file. You can delete it if you want to. Right click on it and select delete.

To the left of this window you can see the backdrop controls. The backdrop is of course the scene in which the sprites move around. The controls are the same as for those of the sprites.


So now with the sprite highlighted let's look at the object window and see what we have.

object window 1 object window 2

To the left is a view of the window showing the scripts tab open (the tabs are the things on top and you click on them to open them ). To the right the same window with the costumes tab open. Notice how the open type is in a darker type than the others.


Let's do the costumes first. Remember that I said a sprite is a container for images. If we have a list of images to put in that container, we can switch between images as we please. In Scratch the images are called costumes. Notice how the arms and legs of the cat are in different positions. By switching quickly we can make him appear to be moving in a walking fashion. This is done by the code we put in.



To the left is the scripts window. If you read lesson 1 you will remember I wrote about algorithms and said they were merely a set of instructions. In Scratch, an algorithm is called a script. Scripts are made up of flowblocks and you can see thirteen of them in the window, from move 10 steps to if on edge, bounce (I think I'll assume that as a motto........)


Flowblocks fit together like jigsaw pieces and next we will have a look at the script for making this sprite move but for the moment direct your attention please to the bit just above the flowblocks. You'll see it's seperated into ten categories. These are the meat and two veg of the coding because all the blocks fit into these categories. Motion deals with moving sprites, looks with their images and colours. Sound allows you to play sound files, pen to draw with, data to make variables, events to handle clicks, drags, and other human interactions, control for routine actions, sensing for sprite collisions, edge movements etc, operators for mathematical and logic work, and more blocks to customise your own flow blocks.


It may well be at this stage that you understood little of the above. Don't worry about it, because over the page is coming a step-by-step guide as to how to construct the code for this sprite to walk. Then we are going to walk through it and see in detail what each bit does.

More >