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

Time to end your story with a cool animation and the words "The End".

To do this, you'll add some costumes to one of your sprites, each one slightly different from the one before it.

You'll also add letters to spell out "The End".

Then, you'll quickly change between the costumes, creating an animated effect.

Each picture that makes up an animation is called a frame.

In each frame, the character changes a tiny bit to create an animated effect when the frames are run one after another.

First, click the sprite you will use.

This example, we use the knight.

Then, click the "Costumes" tab.

Note that this add-on only works with vector sprites.

Duplicate one of the sprite's costumes by right-clicking on it, then clicking "duplicate".

Next make small changes to the new costume to create a frame.

In this example, the knight will raise its helmet plume and arms, then drop its sword in celebration.

Use the Zoom tool to zoom into the sprite so it's easier to work with.

Then, click the sprite.

You can't edit the knight's arms or helmet separately.

To change this, click the "Ungroup" tool.

Neat.

Now you can work with the knight's head, body, limbs, and sword individually.

Click and drag each part to move it or use the handle to rotate it.

Don't worry if you make a mistake.

Just use the Undo tool to take the sprite back to how it looked previously.

To preview what you've made, click back and forth between the original costume and the new costume.

Move the knight's arm, plume, and sword slightly upwards.

But wait, the knight's head moves as a whole, but only the plume should move.

You can ungroup it further.

Click the knight's head, then use the "Ungroup" tool again.

Neat.

Now you can move just the plume.

Use the Text tool to write the letter "T" in your favorite font and color somewhere next to the sprite.

This is the start to the words "The End".

Once you're done with this frame, duplicate it.

Then edit the new frame the same way.

Add more letters.

(silence)

Duplicate this again and repeat editing these costumes until the animation is complete and you've spelled out "The End".

For the last frame in this example, the knight will move its right arm to the side.

To do this, select the arm, then click the "Flip" left-right button.

Drag the flipped arm into place.

Cool.

Next, create code to animate this.

Drag out a "next costume" block.

Since there are five costumes in this example, the knight will need to switch costumes four times to cycle through all the costumes.

To do this, add a "repeat" block around the next "costume" block and change its value to four.

Click the stack to test it out.

Whoa, that was fast.

Use a "wait" block to slow down the animation.

Tinker with the value in this block until the animation looks good to you.

To make sure that the story starts on the right costume, add a "switch-costume" block after the "wind-flag click" block and select the first costume in the dropdown.

Click the flag to test it.

The story plays, but not the animation.

That's because there's no broadcast message telling the animation to play.

Add a "broadcast" block to the end of the story.

Open the dropdown and click "New message".

Name this message "The End".

Then add a "When I receive The End" block to the block stack that animates the ending.

Click the flag to test again.

(silence)

Great, it works.

Now it's your turn.

Create the new animation frame by duplicating a sprite's costume, ungrouping it, and making small changes.

Add the first one or two letters of "The End".

Duplicate this costume and add more letters.

Repeat this process until you create all of the frames for the ending animation.

Animate the sprite using the "next costume", "wait", and "repeat" blocks.

Make sure the program starts with the right costume by adding a "switch costume" block.

Start the ending animation with a broadcasted message using a "broadcast" and "when I receive" block.

Choose an Add-On
Escape!
Program your character to escape the scene!
Dynamic Dialogue
Make a conversation happen between two characters in your story.
Between the Scenes
Program a fading transition to change the scene in your story!
Deus Ex Machina
Add a new sprite that fixes the conflict and resolves the premise in your story.
The End
End your story with a cool animation.
arrow_backward Back
Next arrow_forward
Instructions
  1. Select modules that interest you!
Attributions
  • In the video "Dynamic Dialogue," the song “Blue Skies” is © YouTube-- CC-BY-SA 4.0 does not apply.