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 Your Image

Transcript

In this video, you'll learn how to change the image displayed in your program.

The starter project contains three image sprites with multiple costumes.

All of the pictures in the nature sprite are related to nature and animals.

Select the nature sprite, and click the costumes tab to see the different costumes.

Click on any of the costumes to change the image displayed.

The pictures in the people sprite are all of people.

To change the image to one of the costumes in the people sprite, select the people sprite, click the scripts tab, and click the looks menu.

Click the “show” block and the "go to front" block.

Now, the people sprite shows in front of the nature sprite.

Click the costumes tab and check out the different costumes.

The photos in the things sprite are of other various items.

To show a costume from the things sprite, follow this same process.

Select the things sprite, select a costume, and click the “show” block.

Click the "go to front" block.

Once you've selected which sprite will show in the front, select the other two image sprites, and click the "hide" block in the looks menu.

This will keep these images from showing through when effects are applied to the displayed image.

Earlier, you programmed the nature sprite to receive messages from each of the button sprites.

To program the people and things sprites to also receive messages, copy your code from the nature sprite.

Select the nature sprite.

Click and drag a code stack from nature to the people sprite.

Select the people sprite to check that the code copied correctly.

Repeat this process to copy the "when I receive" code stacks to the people sprite.

Repeat this process six more times to copy the code stacks to the things sprite.

You can also add your own images from a saved location on your computer.

If you have an image that you’d like to add, select the image sprite for the category that your picture falls into, click the costumes tab, and click "upload costume from file."

Select your image from its saved location.

To make the image fit the space, you may need to crop it, change its size, and change its placement on the stage.

To crop the image, click the select icon.

Select part of the image to cut off, then click "delete."

To change the image size, click the select icon, select the entire image, then click and drag one of the notches to make it bigger or smaller.

To move the image to another spot on the stage, click the "set costume center" icon in the upper right corner of the costumes editor, and click the center of the image.

Change the placement of the image by clicking and dragging the entire image to a spot on the stage.

Now that you know how to change the image displayed in your program, you can customize your program with add-ons.

On the next page, you'll see all the add-ons you can try to add fun features to your project and get creative.

Now it's your turn: Select another image to display in your program.

If you choose a costume from the people or things sprites, copy the code from the nature sprite.

If you upload your own image, edit the image so it fits in the image slot on the stage.

arrow_backward Back
Next arrow_forward
Instructions
  1. Select another image to display in your program.
  2. If you choose a costume from the people or things sprites, copy the code from the nature sprite.
  3. If you upload your own image, edit the image so it fits in the image slot on the stage.