Scratch
Easy
60 mins
395 points
What you need:
  • Computer/laptop

Flying Animation

In this lesson we will program a cat to run, jump and fly through the air while background scenery flies by.

This message will be visible to everyone. Send

    This code along has finished! ⌚

    You can watch it back by playing the video!

    The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!

    1 - Create a new Scratch project

    Create a new Scratch project, we will use the cat sprite that's added by default.

    2 - Colour the backdrop blue

    We're going to colour the backdrop blue to make it appear like the sky.

    1. Click on the backdrop underneath the stage area to select it.
    2. Then click on the 'Backdrops' tab to open the backdrop editor.
    3. Click the 'Conver to Bitmap' button.
    4. Select the paint bucket tool.
    5. Choose a sky blue colour.
    6. Click anywhere on the backdrop and it will change to blue.

    3 - Upload and add the ground sprite

    At the beginning our cat will be standing on the ground so we need to upload a 'ground' image as a new sprite.

    Included with this lesson is a file called 'flan ground.sprite3' that we're going to upload into our Scratch project. Download the file onto your computer and then upload it into your project.

    Once you've uploaded it, the new ground sprite appear in the stage area.


    If for some reason you can't save the sprite file to your computer and upload it, you can just use this starter project which already has the sprite added to it. https://scratch.mit.edu/projects/576644340/editor/

    4 - Make the cat run

    At the start the cat should appear on the left, middle of the stage area so add the following code to the cat:

    when green flag clicked go to x [-185] y [0] show go to [front v] layer

    We use the show and the go to front blocks as we will be hiding this sprite in a later step and also it needs to appear in front of the ground sprite.

    Next program the cat to start running when it is clicked, add the following code to the cat:

    when this sprite clicked repeat [50] move [5] steps next costume end hide broadcast [jump v]

    We hide this sprite and send a message at the end because we're going to use a different sprite for the flying animation.


    5 - Move the ground

    To make it look like our cat is jumping in the air, we're going to make the ground start moving down. As the cat will be staying in the same place it will look like it's jumping in the air.

    First place the sprite at the correct position for the start, add the following code to the ground sprite:

    when green flag clicked go to x [0] y [-30]

    Next add the code to move the sprite downwards when it receives the jump message:

    when I receive [jump v] repeat [100] change y by [-2] end broadcast [fly v]


    6 - Add and code the 'Cat Flying' sprite

    Open the sprite library and add the Cat Flying sprite, we're going to use this sprite to animate jumping and flying.

    Add the following code to this flying cat sprite to set it up for the start, make it jump and then make it fly.

    Set it up

    when green flag clicked hide go to [front v] layer

    Make it jump

    when I receive [jump v] go to [Sprite1 v] // this puts it in the same place as the other cat sprite switch costume to [cat flying-b v] show

    Make it fly

    when I receive [fly v] switch costume to [cat flying-a v]



    7 - Add and code the buildings sprite

    Open the sprite library and add the 'Buildings' sprite. This sprite has a number of different costumes that we will use.

    We're going to make the building appear on the right hand side of the stage area and then move leftwards across the stage. As the building will appear behind the cat it will look like the cat is moving.

    Add the following code:

    Set it up

    when green flag clicked hide

    Make it move

    when I receive [fly v] show forever go to x [280] y [0] // start it off the screen on the right next costume // so a different building appears each time repeat [100] change x by [-5] // move it to the left end end



    8 - Add and code the cloud sprite

    Open the sprite library and add the 'Cloud' sprite.

    Similar to the building, we're going to make the cloud appear on the right hand side of the stage area and then move leftwards across the stage. Again as the cloud will appear behind the cat it will look like the cat is moving.

    Add the following code:

    Set it up

    when green flag clicked hide

    Make it move

    when I receive [fly v] show forever go to x (280) y (pick random (-50) to (170)) // start it off the screen on the right but at a random height repeat [250] change x by [-2] // the clouds will move at a slower speed than the buildings end end



    9 - Try it out!

    That's all the code for animating the cat, ground, buildings and clouds. Click the green flag to set it up and then click the cat to begin the animation!

    Have you any ideas to add to this animation?

    Join our club 😃

    Create your profile, earn points & badges and learn how to code!

    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