The Scratch website is a powerful tool that enables students to integrate many different skills, collaborate and construct some wonderful digital creations. Previously students used it to animate their name, create games, stories and animations/graphics to support our ‘Jesus light of the world’ conference.

One of the great features of Scratch projects is the ability to easily share them with others and embed them into websites like this one. You can also use screen capture/recording to convert them into graphics or videos to use on other platforms. Digital creations in Scratch therefore have a potential worldwide audience and can be used to serve others in many different ways.

The first Scratch project we will create this year will be… (pssst, click the green flag)

Now that (above) is not a good example of song lyric animation as you would never have a song with just 3 words.

You might recognise the font I used above as having a Minecraft theme. You don’t have to do that of course, but you can use different sources for your words. I used the site textcraft.net which you may remember I documented on the post about creating posters – it has heaps of great fonts from many different sources. You could also use the fancy text feature in PosterMyWall.com which is what I did for a recent project I did for church. Do you know what song this came from?

You do NOT have to do the lyrics for the whole song. You may choose to only do the chorus or one of the verses – that’s fine. The goal is experiment with different ways of animating the words to make it match the mood and message of the song.

You also do NOT need to add the song to Scratch.

Step 1 – Choose a song

Follow the guidelines below and google the lyrics just to make sure you know the correct lyrics. Also decide on what part of the song you will animate the lyrics for. If you don’t already have access to the song then you will also have to find somewhere you can play it from e.g. YouTube.

You should pick a song that:

1. Is appropriate for our classroom (no rude or explicit language)

2. Has positive and encouraging lyrics

3. You have access to (YouTube, Spotify etc)

Step 2 – Login to Scratch

Students have new school logins this year. If you have a personal scratch account I ask that you do NOT use it for school work. Only school accounts can share projects to the class studio which you will need to do to have the project assessed. I will be sending these details via email. If you don’t have it you can email me directly and I will reply as soon as I can. Login using this link: https://scratch.mit.edu

Step 3 – Start Scratching

I will be adding some tips here over time so if you’ve forgotten how to use Scratch or need some ideas please revisit and refresh this page. Here are a few to get started:

What is Scratch?

If you are totally new to Scratch or have forgotten everything we did last year here’s a quick recap. Scratch is a free website and coding environment in which you can create almost anything. From complex games to animated stories and there’s a whole community of thousands of people who use it and publish their creations. You can browse or search for projects and best of all you can ‘see inside’ to examine how they made it and even duplicate their project so you can experiment and change it. It has been around for many years and is made available to us by a famous university in the US called MIT (Massachusetts Institute of Technology).

Where do I start?

It’s best to jump in, watch some tutorials and experiment. You can have a look at the example project that I included above. You may also remember there are a number of tutorials that provide video and step-by-step instructions on how to achieve certain animation effects (e.g. Animate a name). Look for the ‘Tutorials’ button at the top of the project page.

When you create a new project in Scratch you get a complicated screen like this:

You will notice on the image above that there’s a cat in the Sprites area and it is selected (blue). You may also notice the same cat in the Preview area and also in the ‘Main workarea’ (icon in top left). The code blocks on the left of the screen can be dragged into the main work area and will affect the selected sprite (Scratch the cat).

Sprite – isn’t that a soft drink?

A sprite is the main programmable object in Scratch (like Scratch the cat). In fact, there’s only 2 things you can program in Scratch – sprites and backdrops. Each word can be a separate sprite. You could even make each letter a separate sprite, but that could take a long time unless the lyrics you are animating only have a few words and you want to make the letters do different things or have separate effects.

Often students will put a lot of detail into the background image only to realise that they have limitations. You can change backgrounds, apply colour effects, but you can’t move them or interact with them.

Add code, costumes and sounds to each Sprite

Each sprite can have code, costumes and sounds. When you select a sprite the work area on the left of the screen shows 3 tabs containing the code, costumes and sounds for that sprite.

Add backdrops, code and sounds to the stage

There’s only 1 stage, but you can have multiple backdrops, sounds and code segments. The code in the stage can only really control backdrops and sounds. The code in a sprite can control the sprite and also change the backdrops.

It all starts with an Event

There are dozens of code blocks to experiment with and you can make them ‘run’ by clicking on them in the work area. However, that’s not how normal code works. All code starts with an event that is programmed to trigger the code when that event occurs. The most important event in Scratch is ‘when the green flag clicked‘. You will find the green flag button just on top of the preview area. There’s also a stop button right next to it. You can probably guess what the stop button does.

All code in Scratch must be connected to an Event block as demonstrated above. There are 6 events that can trigger code for both sprites and the stage.

You will also notice that each code block is colour coded to match the categories on the far left of the screen (e.g. Events are yellow). Whenever you look at code and are trying to find it, you simply click on the matching colour category. For example, the blue ‘glide’ block above matches the colour of the ‘motion’ category. When you click the ‘motion’ category you will find lots of blocks related to the movement of a sprite on the screen.

Adding Sounds

Sound effects and music are fun to add to Scratch, but for this project you do NOT need to add the actual audio track to your project. They aren’t easy to get these days and can be quite big files. Scratch comes with lots of built in sounds and you can record your own using a microphone or upload mp3 files if you can safely (and legally) obtain them. You should avoid any dodgy sites that allow you to download any song for free – chances are they are illegal or will install something bad on your computer (probably both). If you want to read more about adding audio, converting an audio/video file into an mp3 or trimming an audio file then I have created a separate post about this process. Here’s a brief summary.

In my example project I use a Scratch sound called ‘Dance Energetic’ under the ‘Loops’ category. I added it to the stage – you can see the ‘Stage’ is highlighted blue. You have to also click on the ‘Sounds’ tab to find the 4 options for adding sounds.

As I’m using a sound loop in my example my code simply plays the sound over and over forever. I use the ‘play sound… until done’ block because I don’t want to play the sound again until it’s finished playing it the first time. It would be really confusing to use the ‘start sound’ block for a loop, but you might want to try it and see what happens – use headphones! Time to experiment and make some noise.

Coordinates x and y

So far this project is using lots of different skills: literacy, art, music, coding and now … maths! Understanding the coordinates system is essential in Scratch as we need it to position sprites, move them around and then reset them. It’s pretty hard to animate something without using x, y coordinates. If you’ve had bad experiences with graphs don’t worry – it’s much easier and fun in Scratch.

In the code example above I have a forever loop that does 3 things over and over to the ‘song’ sprite:

• glides for 1 second to x = 0, y = 78 (current location)
• wait 1 second
• goto x = 347, y = 66 (at the far right edge of the screen)

Whenever you move the sprite with your mouse within the preview area you will see the x, y coordinates change in the box I’ve highlighted (red). If you move the sprite to the right the x value should increase. It will be zero in the middle of the preview area and negative to the left of the middle. A similar thing happens with the y coordinate. It is zero around the middle, increases as you move it up and decreases as you move it down. Makes sense right?

Sprites can actually be quite big so which part of the sprite is located at the x, y coordinates? It can’t be all of it. Maybe the top left edge?

Whenever you create a sprite you should make sure the centre of it is right over the crosshair. This is especially important if you want your sprites to collide or somehow interact with each other. When the centre of 2 sprites touch you can write code to do something in response.

The ‘change’ and ‘set’ blocks seem to do exactly the same thing, but there’s an important difference. Some students use the wrong one and are puzzled when their sprites don’t do what they expect. ‘Set’ changes the position of the sprite to an exact location (kind of like teleporting). ‘Change’ moves a sprite a certain amount.

If you wanted your sprite to appear to walk across the screen which block would you use? The answer is… you could use either, but ‘change’ would be better. You would have to have a loop to ‘change’ the x coordinate by a small amount (depending how big you want the steps to be) each time with a small delay. You would also have to reset to the starting location. So your code might look something like:

• Goto x =0, y = 0 (move to centre)
• Repeat 10 times
  • Change x by 20
  • Wait 0.5 seconds

Uploading, downloading and reloading

If you want to use sites like postermywall or textcraft to create fancy text graphics then these tips might help you add them into your Scratch project. I’ve also created a seperate post for using textcraft with Scratch.

• Make sure the backgrounds are transparent – textcraft does this automatically, but in postermywall you have to select a transparent background. Of course, you could use postermywall to create a background too.
• Know your filename – before you download files you should name them properly. This makes it so much easier to manage later when you might have lots of different files that you’ve downloaded. In textcraft the filename is automatically set to the first word. Textcraft uses the title of your poster. When you click the download button in either of them you should see the filename in the status bar at the bottom of your browser screen. All files should be saved into your ‘downloads’ folder.
• Upload your picture – once you have downloaded your picture onto your computer it’s now time to upload it into Scratch. This will copy the image onto the Scratch server so you can access it from any computer afterwards. The picture below shows the sprite upload option.

Once you have uploaded the image you can use Scratch to modify the sprite. They aren’t professional graphic manipulation tools but they aren’t bad. You can edit uploaded sprites in 2 different ‘modes’ – bitmap and vector.

Uploading videos into Scratch

I mentioned animated GIFs in the image above so I thought I would create a separate post for how to do this. Animated GIFs are the closest we can get to videos in Scratch and they are essentially the same thing. You can find lots of animated GIFs on sites like giphy.com and lots of others, but if you want to record a video and convert it into a GIF you can find out how on this link:

Sharing your project to the studio

Every class should have a class studio created that you can easily share with. Here are the steps: