Skip to content

Please update your browser

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

2. Match the Sprite and Stage


This starter project has 4 sprites that match the categories on the backdrop: apparel, food, animals, and misc or “miscellaneous.”

Miscellaneous means consisting of diverse things.

The costumes in this sprite relate to diverse things such as music, sports and flowers.

Each sprite has different costumes, so you can choose your favorite!

In this video, you will program the different sprites to show on stage with their matching backdrops.

When each sprite is clicked, it will hide and the next sprite and backdrop will appear.

To start, click the apparel sprite.

When the program is run, the apparel sprite should show.

Click looks and select a “show” block.

Click to test.

The sprite should now show.

Add a “when flag clicked” block to ensure that this sprite shows at the start of the program.

Next, when this sprite is clicked it should hide.

Select a “when this sprite clicked” event.

Then, select looks, and add a “hide” block.

Click the flag and click the sprite to test this.

OK, great.

Now that the sprite hides, the backdrop should change to “food” and the food sprite should show.

Add a “switch backdrop” block after the “hide” block, and change the value to “food”.

Click to test this.

Now that the sprite hides, and the backdrop changes to “food,” the food sprite should show.

Click the food sprite, and select the looks menu.

Drag a “show” block into your program and click it.

The food sprite should appear.

This block needs to be triggered when the backdrop changes, so click events and select a “when backdrop switches” block.

Change the value to “food.”

Click the flag to try this all together.

Hrmm, the food sprite is still showing.

To make the food sprite hide when the program starts, add a "when flag clicked" block and a "hide" block.

Try it out again.

When the flag is clicked, the apparel sprite shows.

When the apparel sprite is clicked, it hides, and the food sprite shows.


Now, program the last two sprites to also show when their backdrop appears.

When the food sprite is clicked, it should also hide, and change the backdrop to animals.

Click events and add a "when this sprite clicked" block, a "hide" block, and a "switch backdrop" block.

Select "animals" from the dropdown menu.

Test it out.

Click the food sprite, and the backdrop should switch to animals.

Next, program the animal sprite.

You will code it in a similar way to the food sprite.

Select the animal sprite.

When the backdrop switches to animals, the sprite should show, when the flag is clicked, the sprite should hide, and when the sprite is clicked, the sprite should hide and the backdrop should switch to miscellaneous.

Test it.

Click the flag, then click each sprite that appears.


All that’s left in this step, is to repeat that code for the miscellaneous sprite.

This sprite will change the backdrop to “My Page.”

Once you have coded all four sprites, try it all out together.

OK, great!

But, the program should start on the “apparel” backdrop.

Select the apparel sprite, and click the looks menu.

Add a “switch backdrop to” block after the “when flag clicked” event, and change the value to apparel.


Everything works!

Now, it’s your turn.

Program the food, animals, and miscellaneous sprites to hide when the flag is clicked.

Then, program the backdrops to switch when each sprite is clicked.

Finally, code each sprite to appear when its backdrop switches.

arrow_backward Back
Next arrow_forward
  1. Make the sprites hide when the program starts.
  2. Make the backdrops change.
  3. Make the sprites appear with their matching backdrops.