Skip to content

Please update your browser

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

3. Reset the Style Board

Transcript

In this video, you will code your style board to display all of the sprites at once on the “my page” backdrop and reset the program when the flag is clicked.

When the miscellaneous sprite is clicked, the “my page” backdrop appears.

The sprites should all show when your program changes to the “my page” backdrop.

For the apparel sprite, add a “when backdrop switches” event, and change the value to “my page.”

Then, add a show block.

Once you’ve done this for the apparel sprite, copy that code to each of the other sprites.

Drag and drop the block stack on top of each sprite.

Click each sprite to make sure the code copied over.

Great!

Try it out.

Click the flag, then each sprite, and...

You can’t see all the sprites on the “my page” backdrop because they are too large.

To make the sprites all fit on this page, change their size and location.

Select the apparel sprite, and drag out a “set size” block from the looks menu.

A sprite’s default size is 100%.

When you change the values to something smaller, the sprite will appear smaller.

Tinker with the values to find what works best for your program.

This example uses 40%.

Test it by clicking on the block.

Cool.

Next, make the sprite go to a specific spot on the “my page” backdrop.

Click and drag the apparel sprite to the upper left box.

You may need to move the other sprites out of the way.

Then, select the motion menu.

The “go to” block will have updated values for the current position of this sprite.

When this block runs, the sprite will go to this location.

Drag the “go to” block under the “set size” block.

Now that the apparel sprite resizes and goes to a position on the stage, repeat this process for the other sprites.

Click on the food sprite, add a “set size” block, and update the value.

Then drag the sprite to another box, and add a “go to” block.

Do this again for the animal sprite.

Add a “set size to” block, move the sprite, then add a “go to” block.

And, finally, do this for the other sprite, add a “set size to” block, move the sprite, then add a “go to” block.

Great.

Click the flag to restart.

Oh uh The apparel sprite looks smaller and starts in the corner of the stage.

Fix this by resetting each sprite’s size and location when the flag is clicked.

Click on the apparel sprite, and move it to the center of the screen.

Select motion, and drag a “go to” block under the “when flag clicked” event.

Then, click looks and add a “set size to 100%” block.

Click the flag to try this out, and see if the apparel sprite goes to the middle of the screen and resizes to 100%.

Now that it works for the apparel sprite, you add the same code to the food, animals, and miscellaneous sprites.

Awesome.

Now test this.

Every time the flag is clicked, the sprites are at 100% size and in the center of the stage.

Once the sprite is clicked, the program goes to the next backdrop and the next sprite shows.

When the backdrop switches to “my page”, the sprites appear smaller and in separate locations.

Now it’s your turn: Code the sprites to appear when the backdrop is on “my page."

Next, change the size and location of the sprites when they appear on the final backdrop.

Finally, set the size and location of the sprites when the flag is clicked.

In the final video, you’ll program the sprites to change costumes in order to personalize your style board.

arrow_backward Back
Next arrow_forward
Instructions
  1. Make the sprites appear with the last backdrop.
  2. Make the sprites fit on the last backdrop.
  3. Reset the Style Board at the start of the program.