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, we'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 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.
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'd like,
duplicate another backdrop image and modify it.
The starter project contains both a male and 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.
Since you modified the backdrop,
drag out a switch backdrop block from the Looks menu.
Click the drop-down 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 in the wait block
until you like the way the animation looks.
This example repeats the backdrops three times
since there are three different costumes
and uses a wait time less than one second,
so the loop happens very quickly.
This makes the animation look smooth.
Test your code.
When you click on the new block stack,
your model should appear to animate.
Finally, place this block stack
under the stamp 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.
