Student Instructions

Laying Out Your Background

Before beginning this project, you should have already completed the Interactive Card Planning activity, and you'll want to have that paper with you as you develop your program. Preparation is one of the most important elements of successfully creating a program!

Do This

Refer to your planning activity sheet to help you lay out the shapes that will become the background to your card.

• First, figure out what the lowest layer in your image is (this should use the background() block) and add it to the very top of the draw loop.
• Next, layer each additional drawing block in the order you want them to appear in the stack.
• Finally, add a comment to the top of this section of code to describe what it does, and if you have any particularly complicated chunks of code within (such as code to draw a tree or a house), add a descriptive comment to that as well.

Challenge: Can you use variables or randomNumber() to add some subtle animation to your background layer?

Student Instructions

Adding Sprites

Now that you have the more static elements of your card layed out, it's time to add the Sprites. Your Sprites should provide the primary animations and interactions for your card - so feel free to get creative here and have fun.

Do This

Check out the Sprites table on the back of your planning sheet. For each Sprite in your table:

• Initialize the Sprite at the top of your program with createSprite().
• Find or create the image(s) for the Sprite and set it with setAnimation().
• Inside the draw() loop update any Sprite properties that we will be constantly animating (we'll deal with conditionals in a minute).

Student Instructions

User Input

You've got a background, you've got Sprites, now it's time to give your user something to do!

Do This

On the interactions table from your planning sheet, find all of the interactions that rely on user input (key presses and mouse movements). For each of those interactions:

• Add an if block (or if-else block if you need a fallback action) inside the draw() loop.
• Add the appropriate input block for your condition (such as keyDown() or mouseDown()).
• Add the necessary actions inside the if block.

Challenge: Can you create more sophisticated conditionals by nesting them or using compound booleans?

Student Instructions

Other Conditionals

The surprise in your card comes from conditionals that don't directly respond to user input, but to some other element of your card. This could be triggered by a variable that gets updated as the user interacts with your card, or a Sprite moving into a certain part of the screen.

Do This

For each of the remaining items on your interactions table:

• Add an if block (or if-else block if you need a fallback action) inside the draw loop.
• Add the appropriate Boolean comparison block to the condition (eg. <, >, or ==).
• Add the necessary actions inside the if block.

Challenge: Can you create more sophisticated conditionals by nesting them or using compound booleans?

Student Instructions

Finishing Touches

Now's your chance to put some finishing touches on your card. We've included some new blocks that you haven't seen before, so take some time to look around and try out some new blocks.

Do This

Consider adding any of the following to finish up your card:

• Text
• Additional images for your sprites
• Subtle animation in the background
• Sound effects (Can you figure out now to do this?)
• More ways for a user to interact with your card

Student Instructions