Tynker 301

Mrs. Hulstrom

Computer Science Home

6th Grade Tech Ed

7th Grade Computer Science

8th Grade Computer Science A

Gmail     
Google Drive    
Google Classroom

Infinite Campus

Typing.com
(Join Class through Google Classroom)

Schoology

Code.org

Tynker Coding Website

Tynker Resource Page

Tynker Online Support Video Help

Quizlet | Quizlet LIVE

Everfi

Khan Academy

Social Media Tips

Netsmartz

Code HS
Karel the Dog class code: 1251

CSTA Standards

ISTE Standards

301 Parallax Scrolling) ***

Introduction

New Code Blocks

Vocabulary

• Parallax scrolling: When distant Actors (including backgrounds) move slower than closer Actors, which creates a depth effect.

Objectives

• Use code blocks to layer Actors and program a scrolling parallax background effect
• Use code blocks to solve a puzzle module
• Create a multi-level game

Notes:

• Tell your students that they are going to use layering techniques today using Tynker.
• Gather three different-colored pieces of paper, layer them, and show them to your students. Explain that they can think of layers in Tynker as these pieces of paper stacked on top of each other.
• While providing a visual with the colored pieces of paper, ask students these questions:
• If an entire piece of paper is completely visible, is there a layer in front of it? (Answer: No.)
• If there is a piece of paper that is not visible, is there a layer in front of it? (Answer: Yes.)
• How can we rearrange the three pieces of paper to make it look like one piece of paper is layered between the other two pieces of paper? Who can describe the layering position for each piece of paper?
• Are there any questions you or someone you know might have about layering?

Activities (45 minutes)

• Dan, the dragon rider, introduces three coding concepts:
• Layers- Layers are used to make objects appear in front of or behind other objects. If an object’s layer is greater than another object’s layer, it will be in front of the other object.
• Parallax Scrolling- Students will watch a short video on how to add a parallax effect.
• Change X/Y By- Students will watch interactive examples of “change X/Y by” code blocks.

• In this DIY (do-it-yourself) project, students will follow step-by-step directions to make the dragon appear to fly forward by programming the background to slowly move to the left.
• Point out to students that parallax scrolling needs two copies of the same background to be used as Actors. Optional: Help your students understand this concept by going into the drawing tools and editing the background images. Draw a large letter “A” on the first background (i.e., “adventure overhead 1”) and a large “B” on the second background (i.e., “adventure overhead 2”). The letters will help clarify that the background is actually two overlapping images.

• In this DIY project, students will use layers to change the background, making sure the dragon stays visible.
• Point out to students that the layer that an Actor is set to determine what is behind, in front of, or underneath it.
• Optional: Demonstrate what happens when your layers are in the wrong order. For example, if you set the dragon Actor’s layer to “1” and the adventure overhead 2 Actor’s layer to “2,” you will not be able to see the dragon.

• To solve this puzzle module, students will need to layer 7 different buildings in the correct order. Students are provided a sample of what their end result should look like.
• Give a hint: Ask students…
• Which building should be in front? (Answer: The yellow building needs to be up front, so it should have the highest layer number.)
• Which building should be furthest back? (Answer: The pink building needs to be the furthest back, so it should have the lowest layer number.)

• In this DIY project, students will create a parallax scrolling background.
• Optional: Explain to students that a parallax effect is like watching the clouds slowly pass by while birds appear to move faster--the farther away something is, the slower it moves across your view.
• If students finish early, ask them to experiment with the value of their “wait” code block to make the Actors scroll faster or slower until the scene has a convincing sense of depth.

• In this DIY project, students will create a game that switches to a different level once a goal is reached. The project starts off blank, so students will need to add their own background, Actors, and code.
• Are students struggling to locate the code blocks? Tell them to select the “Blocks” tab that’s located to the right of the “Tutorial” tab.
• Optional: Remind students to check out the Tynker support videos if they get stuck: https://www.tynker.com/support/videos.

7. Quiz (Multiple-choice)

U.S. Standards

• K-12 CTSA Computer Science Standards (Revised 2017)
  Computer Science Teachers Association: 
  • 1B-AP-10
  • 1B-AP-11
  • 1B-AP-12
  • 1B-AP-15
  • 2-AP-12
  • 2-AP-13
  • 2-AP-15
  • 2-AP-16
  • 2-AP-17
  CCSS-Math: MP.1
  
• CCSS-ELA: RF.5.4.A, 6-8.RST.3, 6-8.RST.4, 6-8.RST.7
  
• CS CA: 3-5.AP.10, 3-5.AP.12, 3-5.AP.13, 3-5.AP.14, 3-5.AP.17, 6-8.AP.12, 6-8.AP.13, 6-8.AP.16, 6-8.AP.17
• ISTE: 1.c, 1.d, 4.d, 5.c, 5.d, 6.b

***All lesson information is from https://www.tynker.com/