Coding Ireland STEM Report 2024 Have Your Say
Scratch
Intermediate
30 mins
125 points
What you need:
  • Computer/laptop

GIFtastic

GIFs are images that can be used to create animations, in this project we'll step through the frames of a GIF to make an animation.

1 - Create a new project in Scratch

A GIF (Graphics Interchange Format), pronounced "gif" or "jiff", is just an image file. Like the JPEG or PNG file formats, the GIF format can be used to make still images. But the GIF format has a special feature, it can also be used to create animated images.

Go to the Scratch website, create a new project and delete the cat sprite.

scratch.mit.edu

2 - Upload the Earth Rotating GIF

Included with this step is a GIF of the earth rotating. Save it to your computer and then upload into your Scratch project as a sprite.

Once you have uploaded it into your project, click on the 'Costumes' tab. You will see that it has 44 costumes and each one of these is an image where the earth has rotated a small bit from the last image.

This is how GIFs work, they are just a series of still images that when you flick through them they create a animation. In fact this is how all videos work, even high resolution 4K videos, they are just a series of still images (or frames) that are displayed quickly. This is called FPS or "Frames Per Second". The difference between GIFs and videos, is GIFs do not have any sound.



3 - Make it "animate"

Now let's add some code to quickly step through the costumes to make the GIF's animation play.

Add the following code to the earth rotating sprite.

when green flag clicked forever next costume end

Once you've added the code click on the green flag and you will see the GIF animate as it steps through the still images.


4 - Upload the Homer GIF

Delete or hide the earth rotating sprite as we will be uploading and coding a new GIF sprite.

Included with this step is a GIF of Homer Simpson moving backwards into a hedge. Save it to your computer and then upload into your Scratch project as a sprite.


5 - Make it "animate"

Again, let's add some code to quickly step through the costumes to make the GIF's animation play.

Add the following code to the homer sprite.

when green flag clicked forever next costume end

Once you've added the code click on the green flag and you will see the GIF animate as it steps through the still images.

You will notice that it moves very fast so let's use a wait 0.1 seconds block to slow it down a little.

when green flag clicked forever next costume wait (0.1) seconds // add this block here end

Now the animation should play a little bit slower.



Join our club 😃

To view the remaining 1 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu
🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more