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 uses 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.

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

If you make a mistake, click undo.

To test your animation, click between costumes repeatedly.

Next, code the sprite to change costumes.

Click back to the Scripts 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.

Woohoo!

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

Attach the blocks and click to run.

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.

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.

Alright! 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.

Experiment with the values in these blocks until you’re happy with 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.

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.

Add 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.