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 Choose Image Category

Transcript

In this add-on, you'll program a dropdown menu that will allow the user to pick the image category displayed.

The menu will display when the user clicks on the category sprite.

Then, the image will change based on which category the user selects.

To start, click the category sprite, select the looks menu, and click the "show" block.

Broadcast a message to make the icons show when the category sprite is clicked.

Add a "when this sprite clicked" block and a "broadcast message" block.

From the dropdown menu, select "new message" and name the message "display categories."

Make the icon sprites receive this message then show.

Select the people icon, and add a "when I receive" block.

Make sure "display categories” is selected from the dropdown menu.

From the looks menu, add a "show" block.

Repeat this process for the nature icon and things icon sprites.

Click the category sprite to test.

Great!

The icons all appear.

To hide the icons when the program starts, select the nature icon sprite.

Add a "when flag clicked" and "hide" block.

Repeat this process for the other icon sprites.

Click the flag to test.

To create the cool dropdown menu effect, select the category sprite and drag out a "go to" block from the motion menu.

The x and y value in the "go to" block reflect the current location of this sprite.

Each of the icon sprites will start at the category sprite's location then glide to their current locations.

Click and drag this "go to" block to each of the icon sprites.

Select the nature icon, and add this block to the "when flag clicked" blockstack.

Then, add a "glide" block to the "when I receive" blockstack.

Click the flag, then the category sprite to test.

Cool!

The nature icon glides down from behind the category sprite.

If the nature icon appears in front of category sprite, select the category sprite, and add a "go to front" block from the looks menu.

Feel free to change the seconds value in the glide block.

This example uses 0.5 seconds.

Repeat this process for the people and things sprites.

Select the people sprite, and add the "go to" block, which you already copied over, to the "when flag clicked" event.

From the motion menu, add a glide block to the "when I receive" blockstack, and adjust the seconds value.

Do this one last time for the things icon.

Next, program the icons to broadcast a message when they are clicked.

Select the nature icon and add a "when this sprite clicked" block and a "broadcast message" block.

From the dropdown, select "new message" and call the message, "nature."

Program the nature sprite to show when it receives this message and program the other sprites to hide when they receive this message.

Select the nature sprite, and add a "when I receive message" block.

Select "nature" from the dropdown.

From the looks menu, add a show block.

Repeat this process for the people and things sprites, but add a "hide" block instead of a show block.

Next, repeat this process for the people category.

Select the people icon, add a "when this sprite clicked" block and a "broadcast message" block.

Create a new message called "people."

When the people message is received, the people sprite should show and the other image sprites should hide.

Select the people sprite, and add a "when I receive" block.

Select "people" from the dropdown, and add a show block from the looks menu.

Repeat this process for the nature and things sprite, but make them hide when they receive the people message.

Finally, repeat this process for the things sprite.

Program the sprite to broadcast a message called "things" when it is clicked.

Program the things sprite to show when it receives this message, and the other image sprites to hide when they receive this message.

Now it's your turn: Show the category sprite.

Program the category icons to glide down like a dropdown menu, and to broadcast messages when they are clicked.

Program the image sprites to show or hide based on which icon sprite is clicked.

Choose an Add-On
On to the Next One
Enable the user to scroll through different images using a keypress event.
Custom Filter
Create your own unique filter.
Secret Item
Add a surprise feature to your program
Choose Image Category
Program a dropdown menu to give the user a chance to pick the image category displayed [Note: to complete this add-on, you'll need to have already programmed all three image sprites from 4. Choose Your Image.]
Talking Pictures
Make the images respond to specific effects.
Sound Effects
Add sound to your project.
arrow_backward Back
Next arrow_forward
Instructions
  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!