{% trans 'Watch it here now.' as msg_meta_extra} Switch Costume - 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

You can code a sprite to repeatedly change between two costumes to create an animation.

To celebrate Earth Day, you can create an animation to show sustainable, environmentally friendly sources of energy, like a windmill spinning.

To start, select a sprite to animate.

This example use an L, but you can use any sprite you like.

Then, click the costumes tab.

This sprite has many costumes to choose from.

To animate a costume, first create a duplicate by right-clicking and selecting duplicate.

Give the costume a name that makes sense for your project.

Once you have a duplicate costume, move or change part of it to create your animation.

Use the grouping tools to group or ungroup objects.

(light music)

Click and drag to move an object, or use the handle to rotate.

If you make a mistake, click undo.

(light music)

To test your animation, click between costumes repeatedly.

(light music)

Next, code the sprite to change costumes.

Click back to the code tab.

Select the looks menu.

Click, hold, and drag out a switch costume to block.

Click the block to see what it does.

The sprite changes to a specific costume.

Click the dropdown menu and select the costume that was just created.

Try again.

Woo hoo!

Drag out another switch costume to block, and select the original costume.

(light music)

Attach the blocks and click to run.

(light music)

Nothing happened?

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

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

Select the control menu and add a wait block between the two switch costume to blocks.

Click to try it out.

(light music)

Great!

The letter changes costumes!

Next, code the sprite to repeatedly change costumes.

Select control and drag a repeat block around the block stack.

Click the block to run.

(light music)

All right!

The costumes change really fast.

The repeat block is a type of loop.

It runs the block stack 10 times, but it does it very quickly.

Add another wait block to the repeat loop.

The computer waits one second between costume changes.

To slow down or speed up the change, adjust the value in the wait block.

(light music)

Experiment with the values in these blocks until you're happy with the speed of the animation.

Then, add an event to tell the computer when to run this code.

Select events.

This example will use a when this sprite clicked block.

But you can use any event you like for your logo.

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

(light music)

Now it's your turn.

Select a sprite to code.

Duplicate and edit the sprite's costume.

Add switch costume to, repeat, and wait blocks.

And an event like when this sprite clicked.

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

Once you've finished 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/)