1. Review and demonstration (2+ minutes):
Begin by asking coders to talk with a neighbor for 30 seconds about something they learned last time; assess for general understanding of the practices and concepts from the previous project.

Explain that today we are going to create a photo editor that allows you to change the appearance of a photo by pressing different buttons. Display and demonstrate the sample project (or your own remixed version).

Video: Project Preview (0:54)
Video: Lesson pacing (1:48)

This can include a full class demonstration or guided exploration in small groups or individually. For small group and individual explorations, you can use the videos and quick reference guides embedded within this lesson, and focus on facilitating 1-on-1 throughout the process.

Example review discussion questions:

• What’s something new you learned last time you coded?
  • Is there a new block or word you learned?
• What’s something you want to know more about?
• What’s something you could add or change to your previous project?
• What’s something that was easy/difficult about your previous project?

2. Discuss (3+ minutes):
Have coders talk with each other about how they might create a project like the one demonstrated. If coders are unsure, and the discussion questions aren’t helping, you can model thought processes: “I noticed the sprite change appearance when a button was pressed, so I think they used looks blocks. What looks block(s) might be in the code? What else did you notice?” Another approach might be to wonder out loud by thinking aloud different algorithms and testing them out, next asking coders “what do you wonder about or want to try?”

After the discussion, coders will begin working on their project as a class, in small groups, or at their own pace.

Note: Discussions might include full class or small groups, or individual responses to discussion prompts. These discussions which ask coders to predict how a project might work, or think through how to create a project, are important aspects of learning to code. Not only does this process help coders think logically and creatively, but it does so without giving away the answer.

Example discussion questions:

• What would we need to know to make something like this in Scratch?
• What kind of blocks might we use?
• What else could you add or change in a project like this?
• What code from our previous projects might we use in a project like this?
• What kind of buttons could we create for our features?
  • What kind of code might they have?

4. Add a photo to your project (10+ minutes):
5 minute review and demonstration
Explain we can add a picture into our project that we find online.

Demonstrate how to save an image from a website or image search, then use the folder to add a sprite from your device. Demonstrate how to give credit on the project page by indicating where sprites were obtained from and copy and paste the original link.

5+ minutes to add images and 1-on-1 facilitating
Give coders time to add an image to their project. Encourage peer-to-peer assistance and facilitate 1-on-1 as needed.

Video: Add a photo to your project (2:13)
Quick reference guide: Click here

Note: This can lead to a discussion on intellectual property rights and when you can and cannot use images created by other people. Click here for a blog post with resources on the topic, and click here for videos on the topic.

Alternative suggestions: Instead of finding pictures online, coders could select a sprite from the sprite library in Scratch, select from a group of pictures on your class website, or turn a backdrop photo into a sprite by dragging the image on a blank sprite.

A note on using the “Coder Resources” with your class: Young coders may need a demonstration (and semi-frequent friendly reminders) for how to navigate a browser with multiple tabs. The reason why is because kids will have at least three tabs open while working on a project: 1) a tab for Scratch, 2) a tab for the Coder Resources walkthrough, and 3) a tab for the video/visual walkthrough for each step in the Coder Resources document. Demonstrate how to navigate between these three tabs and point out that coders will close the video/visual walkthrough once they complete that particular step of a project and open a new tab for the next step or extension. Although this may seem obvious for many adults, we recommend doing this demonstration the first time kids use the Coder Resources and as friendly reminders when needed.

5. Create custom buttons (10+ minutes):
5 minute demonstration
Explain we want to use buttons to allow the user to change our photo when they press a button. Ask what kinds of blocks might be used to change the appearance of the photo; guide them toward thinking through various looks blocks and motion blocks.

Demonstrate how to make customized buttons in Scratch and briefly talk about how we want to label them so a user can figure out what they will do before they press them.

5+ minutes to create custom buttons and 1-on-1 facilitating
Give coders time to add several custom buttons to their project. Encourage peer-to-peer assistance and facilitate 1-on-1 as needed.

Video: Create custom buttons (2:03)
Quick reference guide: Click here

Suggested questions:

• Will each effect have its own button or can you combine effects?
• Will you create presets (always looks the same way) or make it so clicking the button more than once will continue to change the picture?
• How might we randomize or reset effects?
• Can we undo effects or will they always add more effects to our picture?

6. Code your buttons (15+ minutes)
5 minute demonstration
Demonstrate what happens when the button is pressed and we use the code “when this sprite clicked, change color effect by 25.” Ask the class why our button changed colors and not our picture.

Explain how we want to make it so we can press the button sprite, but have the Picture sprite change appearances instead of the Button sprite. Talk about how we can use the broadcast and receive message blocks to send messages to other sprites; for example, when we press a button sprite, another sprite responds to the button press. In coding terms, this can also be called a “function.” Demonstrate creating a new message and adding the code to your Button and Picture sprites.

When finished demonstrating, ask the class if we can use the same message for each button in our project or if we need different messages for different buttons (we need different messages, or every button will do the same thing).

10+ minutes to code their buttons and 1-on-1 facilitating
Give coders time to code each of the buttons in their project. Encourage peer-to-peer assistance and facilitate 1-on-1 as needed.

Video: Code your buttons (2:41)
Quick reference guide: Click here

Facilitation Suggestion: Some coders may not thrive in inquiry based approaches to learning, so we can encourage them to use the Tutorials to get more ideas for their projects; however, we may need to remind coders the suggestions provided by Scratch are not specific to our projects, so it may create some unwanted results unless the code is modified to match our own intentions.

Suggested questions:

• Will each effect have its own button or can you combine effects?
• Will you create presets (always looks the same way) or make it so clicking the button more than once will continue to change the picture?
• How might we randomize or reset effects?
• Can we undo effects or will they always add more effects to our picture?

7. Reset a sprite’s appearance (10+ minutes)
5 minute demonstration
Demonstrate several buttons in your project so the Picture sprite looks very different from its original state. Ask the class how we might reset our image so it goes back to its original state.

Discuss how there are multiple events blocks we can use to trigger our reset (e.g., green flag, pressing a certain key on the keyboard, or pressing a button). Ask the class to list off what kinds of blocks they are using to change the way their Pictures look (most likely looks and motion blocks), and to discuss with a neighbor what block would reset it back to its original state. See the quick reference guide or video for examples.

Demonstrate how to add a reset option in your own project and encourage coders to figure out how to use messages to give the user multiple reset options.

5+ minutes to add a reset option and 1-on-1 facilitating
Leave your code on the screen and give coders time to create a reset option in their project. Encourage peer-to-peer assistance and facilitate 1-on-1 as needed.

Video: Reset a sprite’s appearance (3:41)
Quick reference guide: Click here

Note: There are multiple ways to reset an image using different events and block combinations, so encourage coders to pick a method that matches their project.

Facilitation suggestion: When walking around and asking questions, encourage coders to explain why they need to match blocks within their reset option with the algorithms triggered by the user. Sometimes coders might copy displayed code without questioning if they even need all of the blocks. For example, they might use the “go to” and “point in direction” blocks in their reset algorithm; however, these blocks would be unnecessary if the user cannot change the position or angle of their picture.