Scratch
Intermediate
40 mins
Teacher/Student led
+105 XP
What you need:
Chromebook/Laptop/PC or iPad/Tablet

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.

Lesson Files

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    whenclickedforevernextcostume

    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.

    whenclickedforevernextcostume

    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.

    whenclickedforevernextcostumewait0.1seconds add this block here

    Now the animation should play a little bit slower.



    Unlock the Full Learning Experience

    Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

    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