{% trans 'Watch it here now.' as msg_meta_extra} Bouncing Sprites - Create your own Google logo for Earth Day - CS First Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more.

Transcript

One way to call attention to a sprite is to make it move.

In this video, you will animate a sprite to make it bounce.

By doing this you will call attention to actions people can take to protect the environment.

Select a sprite to program.

This example uses the G, but use any sprite you'd like.

Next, program the sprite to move up.

Select the motion menu.

Click, hold and drag out a change y by block.

Click the block to see what it does.

Wow, each click moves the letter up.

Next, program the sprite to move down.

Drag out another change y by block.

Change the value to -10.

Click the block.

Awesome.

Each click moves the sprite down.

If you click these blocks repeatedly, the sprite looks like it's bouncing.

Next, program the computer to run these blocks in order.

Attach the blocks and click to run.

Nothing happened?

The computer runs these blocks so quickly, you can't see the sprite move.

To fix this, program the computer to wait between actions.

Select the control menu and add a wait block between the two change y by blocks.

Click to try it out.

Great, the letter bounces once.

Next, program the computer to repeat this action.

Select the control menu.

Click, hold and drag out a repeat block.

Place it around the block stack and click to run.

The sprite bounces but not so smoothly.

Add a wait block after the change y by -10 block to make the sprite wait between moving up and moving down.

To change how the sprite bounces, tinker with the values in these code blocks.

For example, to make the sprite bounce faster, change the value in the wait block to a smaller number.

To make it bounce higher, change the values in the change y by blocks.

To make it bounce more, change the value in the repeat block.

Add an event to tell the computer when to run this code.

This example uses a when this sprite clicked block, but you can use any event you like for your Earth Day logo.

You could run this code when you press a key for example, or click the flag.

To copy this code to other sprites, click, drag and drop the code on another sprite.

Click the sprite to check that it copied correctly and run the code.

Copy this code to as many sprites as you like.

Now it's your turn.

Select a sprite to program.

Add change y by 10, wait and change y by -10 blocks.

Add a repeat block around this stack.

Add an event like when this sprite clicked.

Copy this code to as many sprites as you'd like.

Once you finish these steps, return to this page to select another video.

Choose an Add-On
Say Something
Tell a story with talking letters.
Add Backdrop
Add an image or new landscape behind the logo.
Change Color
Create an interactive logo by changing letter colors when a key is pressed.
Bouncing Sprites
Animate your letters to make them bounce.
Change Scene
Add a button that changes the scene behind your logo.
Disappearing Sprites
Make a letter disappear.
Switch Costume
Change the style of a letter each time it's clicked.
Next arrow_forward
Instructions
  1. Watch the introduction video.
  2. Open the Starter Project below.
  3. Return to this page and watch more videos to customize your Earth Day logo.
Attributions
  • "Doodle 4 Google 2012- Behind the Scenes with the Doodle Team" by Google (https://www.youtube.com/watch?v=i6RWpg7oVgc) -- Licensed by Standard Youtube License (https://www.youtube.com/static?template=terms)
  • ® ‘WWF’ and ‘World Wildlife Fund’ are WWF Registered Trademarks. © 1986 Panda Symbol WWF.
  • "Living With Asian Elephants" by World Wildlife Fund (https://www.worldwildlife.org/videos/living-with-asian-elephants) -- Licensed by CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0/)