Skip to content

Please update your browser

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

4. Choose an Image


In this video, you will program the sprites to change costumes when the arrow keys are pressed.

This will let the user choose the items that appeal to them.

To start, click on the “apparel” sprite.

Since the apparel sprite has different costumes, you can change how it looks using the “next costume” block.

Click on the looks menu, and drag this block into the scripts area.

Click it to see the different costumes for apparel.

To run this “next costume” block, use an event.

From the events menu, drag out a “when key” pressed block.

Click the dropdown menu, and change the keypress event to the right arrow key.

Try it out.


Pressing the arrow key makes the sprite’s costume change.

This project has multiple sprites, each with its own costumes and matching backdrop.

If you copy the code you just created to every sprite, they will all change costumes when the right arrow key is pressed.

The sprites should change costumes only if their backdrop is shown.

For example, if the backdrop is the animals’ backdrop, then the arrow key should change only the animal costume.

To do this, select the control menu, and drag an “if-then” block around “next costume.”

“If-then” blocks run code “if” something is true.

Program the apparel sprite to change costumes if the “apparel backdrop” is shown.

From the operators menu, drag an “equals” block into the if block.

Drag a “backdrop name” block from the looks menu into the "equals" block.

In the other space, type the name of the backdrop: “apparel.”

The spelling must exactly match the name of the backdrop, which you can see in the backdrops tab.


Now the block stack says, “if backdrop name equals (or is the same as) apparel, then… go to the next costume.

To test this, click the flag, press the arrow key, and choose sprites.

Once you get to the “my page” backdrop, notice that the arrow key changes all the sprite’s costumes except for the apparel sprite’s, which you just programmed.

Now that you’ve programmed one sprite, program the rest.

Select the “animals” sprite.

Place an “if-then” block around the “next costume” block.

Add an equals operator.

In one side of the operator, add a “backdrop name” block.

In the other, type the name of this backdrop: “animals.”

This example will fast forward through this code for the other two sprites.

Test out your program.

Click the flag, and press the right arrow key to change costumes.

Choose the one you like best, then click the sprite to change to the next category.

When you get to the “My page” backdrop, all your image choices appear.

Now, it’s your turn Program all the sprites to go to the next costume when the right arrow key is pressed if their backdrop is displayed.

When you’re done, click the green arrow to try some add-ons to can customize your program.

arrow_backward Back
Next arrow_forward
  1. Make the sprites rotate through their costumes.
  2. Make the sprites rotate through their costumes when the backdrop matches.