Skip to content

Please update your browser

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

arrow_back Color Change


In this add-on, you will program your style board to allow the user to change the color of each category item.

Click on the apparel sprite.

From the looks menu, drag out a “change color effect by” block.

When you click this block, the color of the apparel item changes.

Changing the value inside the “change color effect” block changes how the color effect looks.

Making the number smaller or larger makes the color change either more subtle or more intense.

Tinker with the value until you like the way the color effect looks in your project.

Next, make the apparel sprite change colors only when the backdrop category is on “apparel.”

Duplicate the “when right arrow key pressed” event block stack to make this happen.

Right click on the block stack, and select duplicate.

Then, place the new code stack in another area of the scripts editor.


Change the keypress event to something different, like the space bar, and replace the “next costume” block with the “Change color effect” by block.


Click the flag to test this out.

Now, when you press the right arrow key, the costume changes, and when you press the spacebar, the color changes.

Further customize your style board by repeating these steps to change the color effect of the food, animals, and miscellaneous sprites.

Now it’s your turn Duplicate the “when key pressed” event stack, change the keypress event to the spacebar, and replace the “next costume block” with a “change color effect” block for each of the sprites.

Choose an Add-On
Color Change
Program your style board to allow the user to change the color of each category item.
Suggest Button
Program a feature that auto-suggests a costume for your style board.
Descriptive Objects
Program your images on screen to give an overview or description when the mouse hovers over them.
Surprise Features
Code a unique and unexpected action
Last Minute Costume Change
Code your project to allow the user to make a last minute change to the style board
Sprite Shares
Program your style board to have a sprite appear on stage and talk about your program.
arrow_backward Back
Next arrow_forward
  1. Choose an Add-On, and click "watch" to learn how to build it.
  2. Once you finish one Add-On, try another one below the video!