Skip to content

Please update your browser

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


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 the 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 will use the knight. Then, click the “costumes” tab. Note that this add-on only works with “vector” sprites. To check what type of sprite you have, look in the bottom right corner. If you only have “bitmap” sprites, add a new sprite by clicking “choose sprite from library,” then click “Vector” under “Type.”

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. When you select the knight’s head, the box around it is orange. That means 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. 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. Click the “scripts” tab. Drag out a “next costume” block. Since there are 5 costumes in this example, the knight will need to switch costumes 4 times to cycle through all the costumes. To do this, add a “repeat” block around the “next costume” block, and change its value to 4. Click this stack to test it out.

Whoah, 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 “when flag clicked” 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.

Great, it works! Now, it’s your turn!

Create a new animation frame by duplicating a sprite’s costume, ungrouping it, and making small changes. Add the first 1 or 2 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.

Choisir une extension
Programme ton personnage pour qu’il s'échappe de la scène !
Dialogue dynamique
Crée une conversation entre deux personnages de ton histoire.
Entre les scènes
Programme une transition en fondu pour changer la scène dans ton histoire !
Deus Ex Machina
Ajoute un nouveau lutin qui dénoue le conflit et résout la prémisse de l'histoire.
Termine ton histoire par une animation sympa.
Entrée fracassante
Ajoute un autre lutin à ton histoire.
arrow_backward Retour
Suivant arrow_forward
  1. Sélectionne les modules qui t'intéressent !