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

arrow_back Animate

Transcript

In this video, you'll learn how to animate the androids representing you and your friend.

Animations occur when a series of still pictures, with small changes, are shown one after the other quickly.

This animation was created by switching between these costumes.

To animate the sprites in your story, you need to create the costumes.

To do this, click on one of the androids then on the costumes tab.

You are now in the scratch paint editor.

You can use the paint editor to change how your sprite looks.

First, remove the costumes you don't want to be part of your animation.

To delete a costume, select it, then click the X in the upper right corner.

Now, create a copy of a costume to change.

You're going to edit or change the sprite's costume, so it looks like it's dancing.

To do that, right click on the costume and select duplicate.

You now have a copy of the costume to work with.

In this example, the last costume was duplicated in order to continue the animation.

Next, you'll learn about the cool stuff you can do to edit sprites.

Use the select tool and click on the sprite.

You'll know that you've selected the sprite, when you see a box around it.

With the sprite selected, you can move it by clicking and dragging, rotate it, or change it's size, by dragging the squares on the corners and sides.

If you make a mistake while editing the sprite, that's okay!

Computer scientists make mistakes all the time, and they use those mistakes to learn what they should do differently next time.

You can use the undo button to undo your last action, then, try again until you have something you like.

Now you can move, rotate, and resize your sprite.

But it would be nice to be able to change only one part of the sprite, like it's arms or legs.

To make that happen, select the sprite, then click the ungroup button.

The sprite now splits into many parts that you can move, rotate or resize individually.

Move the arms and the legs a tiny bit to create your first animation frame.

There is one more drawing tool to try, the reshape tool.

Use this tool to edit points and lines.

For example, click on the reshape tool, then on your sprite's hair.

Drag the points and lines on the sprites hair to make it move.

Once you are happy with your new frame, duplicate the costume you just created, then make further changes to it to create your second frame.

Repeat this process until you are happy with your animation.

Test the animation by clicking quickly between costumes.

To program scratch to animate for you, from the looks menu, place a next costume block in the script area.

Click on it.

The sprite changes costumes.

To make the costume keep changing, from the control menu, place a repeat loop around the next costume block.

Click on the code to run it.

The sprite changes costumes really quickly.

Slow it down by going to the control menu, and placing a wait block inside the repeat loop.

Tinker with the values until you like the animation.

Finally, add the animation to your story.

Place the loop wherever in your code you want the animation to happen.

This example's animation shows a dance.

The sprite dances as soon as she meets her friend.

Now it's your turn.

Create a dance for your sprite.

Try the following tools; select, undo, ungroup, reshape.

Program the animation using repeat, next costume, and wait blocks.

Tinker with the values.

Place the animation anywhere in your code that makes sense.

Choose an Add-On
Changing Backdrops and Costumes
Add different scenes to your story.
Changing Looks with Code
Learn what the "looks" blocks can do.
Move Around the Stage
Discover ways to make sprites move.
Animate
Animate sprites by creating new costumes.
Secret Password
Make a password to protect your story.
arrow_backward Back
Next arrow_forward
Instructions
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!