Skip to content

Please update your browser

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


This add-on walks you through how to program your model to animate when you place an accessory on it. In this example, the model sprite turns its head.

First, you’ll need to edit your model in the backdrops editor, then code your program.

To begin, click on the stage backdrop image. Then, click on the backdrops tab above your code menu. Here, you can modify or customize your backdrops for any project. To start editing, right click on the backdrop in your program, and click “duplicate.” Now there are two copies of your backdrop. The tools on the side of the image allow you to edit the backdrop. To change the way the model looks, click on the “select” tool, then click on the model. To work with separate pieces of the sprite, click the “ungroup” tool. Cool. All of the shapes are separate, so you can change the different shapes that make up the model. This example modifies the head. To move a group of shapes all at once, click near the shapes, then drag the select tool around the shapes that you want to group together. Then click the “group” tool. To rotate the head, click and drag the circle at the top of the select tool. Play around with the selected area to blend it with the rest of the image as best you can. The smaller the changes you make to your image, the smoother the animation will look.

If you don’t like what you did or would like to go back a step, use the “undo” button at the top of the backdrop editor. Next, if you would like, duplicate another background image and modify it. The starter project contains both a male and a female model. Delete the model that you aren’t going to animate. To add it back later, go to the Image Library on the CS First website.

To code the animation, click on your accessory sprite then the scripts tab. Since you modified the backdrop, drag out a “switch backdrop” block from the looks menu. Click the dropdown menu and select “next backdrop.” When you click this block, it’ll cycle through the different backdrops of your model that you created.

For your model to appear animated, drag out a repeat loop, place it around the “switch backdrop” block, and add a “wait” block inside the loop. Tinker with the values in the “repeat” loop and the “wait” block until you like the way the animation looks.

This example repeats the backdrops 3 times, since there are 3 different costumes, and uses a wait time less than 1 second so that the loop happens quickly. This makes the animation look smooth. Test your code! When you double click on the new block stack, your model should appear to animate. Finally, place this block stack under the “stamp” block in your original code. Now, your model will react once you place an accessory on it! Try it out! Now it’s your turn: Duplicate your backdrop and make small modifications to the image.

Remember that you can undo any changes in the backdrops editor.

Add a repeat loop, a “switch backdrop” block, and a “wait” block to animate your model, and place this code stack under the “when space key pressed” and “stamp” code stack.

Once you’re done coding this add-on, share your project animation with your neighbor!

Scegli un’estensione
Fare il restyling
Crea un nuovo accessorio per il tuo progetto.
Il mouse vistoso
Programma il tuo strumento stilista per creare una scia colorata che si muove all'interno dello schermo.
Il gioco dello stilista
Trasforma il tuo strumento da stilista in un gioco che permetta all'utente di sfidare il timer per abbigliare la modella.
Anima la modella
Programma la tua modella ad animarsi quando gli si pone sopra un accessorio.
Il critico di moda
Crea un critico di moda e programmalo affinché fornisca un feedback per il progetto dello stilista.
Il suono (Sfida)
Aggiungi dei suoni al tuo progetto
arrow_backward Indietro
Avanti arrow_forward
  1. Fai clic su qualsiasi casella per controllare il video sui componenti aggiuntivi.
  2. Quando hai terminato, torna sulla schermata dei componenti aggiuntivi e prova un altro componente aggiuntivo.