Lesson: Frame-Based Animation
Time: 45+ mins
IntroductionIn this lesson, campers will have more practice using keyboard (for web) or tilt (for mobile) controls to move Actors as they complete space-themed projects and solve a puzzle module. They'll also learn how to use loops to animate Actors and create their own Space Adventure game! Coding concepts include change x/y by, costumes and animation, and code blocks and loops.
- Computer, laptop, or tablets (1 per camper)
New Code Blocks
: Start the program when the Play button is selected. : Keep repeating the blocks inside this loop forever. : Repeat the blocks inside this loop a specified number of times. : Make the Actor switch to the next costume. : Pause the program for a specific number of seconds. : Make an Actor change direction if it is touching the edge of the screen. : Move the Actor a specified number of units. : Change the x-coordinate of an Actor by the specified number of units. : Change the y-coordinate of an Actor by the specified number of units. : Run code attached to this block when you press a specified key. : Point the Actor at the specified degree. : If the condition is true, then run the code inside the block. : Play the specified sound file (for example, puppy bark). : Make the Actor disappear from the screen.
- Coding: Using a computer language to tell the computer what to do
- Sequence: The order in which steps or events happen
- Actors: Tynker characters and objects that can talk and interact with each other
- Costume: Different appearances for an Actor, such as poses used in a character’s animation
- Command: A specific action or instruction that tells the computer to do something
- Loop: An action that repeats one or more commands over and over
- Infinite loop: A loop that repeats forever and does not end until the program stops
- Counting loop: A loop that repeats one or more commands a specific number of times
- Animation: Changing costumes (pictures) of an Actor many times to give the illusion of movement
- Frames: The still images displayed in sequence to create animations.
- Use code blocks to animate Actors and program them to move using keyboard (for web) or tilt (for mobile) controls
- Apply coding concepts to solve a puzzle
- Create a Space Adventure project
Getting Started (5 minutes)
- Ask campers, "When you're playing a video or computer game, how do you make the main character move?" (Answers: You press buttons, use a game controller, use keys on the keyboard, etc.)
- Explain that in today's coding lesson, they'll learn how to make Actors move using keyboard (for web) or tilt controls (for mobile). Additionally, they'll review how to animate Actors.
- Optional: Explain that cartoons like Pokémon and Adventure Time are examples of frame-based animations. Each frame needs to be drawn out by animators, who quickly switch between frames to give the illusion of movement. Remind campers that in Tynker, an animation is created by switching between several costumes.
Coding Activities (40+ minutes)The lessons are intended for self-directed learning. Your role will be to facilitate as campers complete the Frame Based Animation modules on their own:
1. Concepts (Video)
- Peter, the archer, introduces motion and animation concepts:
- Change X-Y By- Campers will view a demonstration of the "change x by" and "change y by" code blocks. Make sure they manually change the value inside the code blocks. For example, what happens when they add a minus sign (-) in front of a number?
- Costumes and Animation- Campers will learn that they can add more than one costume to an Actor to make the Actor look like it's moving. Make sure campers watch the short video that shows them how to add a costume.
- Code Blocks and Loops- Campers will watch a short video on how to add and remove code blocks. Additionally, campers will learn that the "repeat" loop stops repeating code after a specified number of times. This is different from the "forever" loop, which repeats forever and does not end until the program stops.
- In this tutorial, campers will learn how to animate and move Actors.
- Coding activities include adding a space-themed background, Actors, and explosion costumes. Additionally, campers will need to program Earth and Venus to explode when the comet collides with them.
- Remind campers that an animation is created by switching between several costumes.
- In this tutorial, campers will program a space rocket to move in four different directions using the arrow keys (for web) or tilt controls (for mobile).
- Make sure campers know where to find the negative sign (-) on their device. They'll need to use it when they manually type negative values into the "change y by" and "change x by" code blocks.
- To solve this puzzle module, campers need to program the spaceship to move up, down, right, and left when the user presses the arrow keys (for web)/tilts their device (for mobile).
- Give a hint: Tell students that they need to change the parameters inside the "when pressed" code block. They'll also need to manually change the values of the "change y by" and "change x by" code blocks.
- Make sure campers understand that setting a negative value inside the "change x by" code block will make the spaceship move to the left. Also point out that setting a negative value inside the "change y by" code block will make the spaceship move down.
- After campers finish programming the spaceship, ask them to try collecting 3 power cells within 45 seconds!
- In this DIY (do-it-yourself) project, campers will follow step-by-step directions to create their own space adventure game!
- Step 1 of the tutorial tab provides a completed project example. How to play: Use the arrow keys (for web)/ tilt the device (for web) to move the spaceship. How many power cells can they collect while avoiding enemies?
- Coding activities include animating Actors, adding background music, programming the enemy and player Actors to move in four different directions, programming the game to end when the player Actor touches the enemy Actor, and adding a bonus Actor that will disappear when the player Actor touches it.
- Step 7 of the tutorial includes a bonus section that encourages campers to add more enemies to their game. What other ways can campers modify their game? Can they add sound effects? Power-ups?
Wrap UpUnplugged Activity: Discussion
Review today’s coding adventure by leading a discussion. Ask campers:
- True or False: Having Actors change costumes many times to give the illusion of movement is an example of animation. (Answer: True.)
- Who can give an example of a frame-based animation?
- How can we move Actors in four different directions? (Answer: Use keyboard or tilt controls.)
- Were there any parts of this lesson that you found tricky? How did you problem-solve?
These student-facing slide presentations help educators seamlessly run Tynker lessons in a virtual or physical classroom setting. Each lesson has its own set of slides that introduce the big ideas, suggest unplugged activities, and include a section for each activity module. While running lesson slides, you can switch back and forth between the activity, the slides, answer keys and other lesson materials.
A sample slide presentation is available for your review. Please log in to view all the class presentations available with your plan..
Lights, Music, Action
Make Games - Animated Greeting Card
Make Games - Music Video
Make Games - Maze Game
Make Games - 2-Player Battle Game
Make Games - Animated Story