Skip to content

Please update your browser

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

Choose an Add-On
play_circle_filled
Refashion
Create a new accessory for your project.
arrow_forward
play_circle_filled
Flashy Mouse
Program your stylist tool create a colorful trail as it moves around the screen.
arrow_forward
play_circle_filled
Stylist Game
Make your stylist tool into a game that lets the user race against the timer to style the model.
arrow_forward
play_circle_filled
Animate Model
Program your model to animate when you place an accessory on it.
arrow_forward
play_circle_filled
Stylist Critique
Create a stylist critic and program it to give feedback for the stylist project.
arrow_forward
play_circle_filled
Sound (Challenge)
Add sound to your project.
arrow_forward
  • 1. Remix the Starter Project
  • 2. Forever Follow the Mouse
  • 3. Stamp the Accessory
  • 4. Change Up Your Accessories
  • 5. Add-Ons
  • 6. Reflection
  • 7. Wrap-up: Ultimate Stylist
  • 8. Wrap-up: Share Your Project
  • 9. Wrap-up: Show Your Project
arrow_backward Back Next arrow_forward
Transcript

This add-on walks you through how to program your model to animate when you place an accessory on it. In this example, the model sprite turns its head.

First, you’ll need to edit your model in the backdrops editor, then code your program.

To begin, click on the stage backdrop image. Then, click on the backdrops tab above your code menu. Here, you can modify or customize your backdrops for any project. To start editing, right click on the backdrop in your program, and click “duplicate.” Now there are two copies of your backdrop. The tools on the side of the image allow you to edit the backdrop. To change the way the model looks, click on the “select” tool, then click on the model. To work with separate pieces of the sprite, click the “ungroup” tool. Cool. All of the shapes are separate, so you can change the different shapes that make up the model. This example modifies the head. To move a group of shapes all at once, click near the shapes, then drag the select tool around the shapes that you want to group together. Then click the “group” tool. To rotate the head, click and drag the circle at the top of the select tool. Play around with the selected area to blend it with the rest of the image as best you can. The smaller the changes you make to your image, the smoother the animation will look.

If you don’t like what you did or would like to go back a step, use the “undo” button at the top of the backdrop editor. Next, if you would like, duplicate another background image and modify it. The starter project contains both a male and a female model. Delete the model that you aren’t going to animate. To add it back later, go to the Image Library on the CS First website.

To code the animation, click on your accessory sprite then the scripts tab. Since you modified the backdrop, drag out a “switch backdrop” block from the looks menu. Click the dropdown menu and select “next backdrop.” When you click this block, it’ll cycle through the different backdrops of your model that you created.

For your model to appear animated, drag out a repeat loop, place it around the “switch backdrop” block, and add a “wait” block inside the loop. Tinker with the values in the “repeat” loop and the “wait” block until you like the way the animation looks.

This example repeats the backdrops 3 times, since there are 3 different costumes, and uses a wait time less than 1 second so that the loop happens quickly. This makes the animation look smooth. Test your code! When you double click on the new block stack, your model should appear to animate. Finally, place this block stack under the “stamp” block in your original code. Now, your model will react once you place an accessory on it! Try it out! Now it’s your turn: Duplicate your backdrop and make small modifications to the image.

Remember that you can undo any changes in the backdrops editor.

Add a repeat loop, a “switch backdrop” block, and a “wait” block to animate your model, and place this code stack under the “when space key pressed” and “stamp” code stack.

Once you’re done coding this add-on, share your project animation with your neighbor!

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!