Lesson 4

Walk in Place

Subject: Computer Science

Level of Difficulty: Beginner

Duration: 45 minutes

Objectives
By the end of class, students will be able to…
● use costumes to animate a sprite;
● locate and use the Costumes Interface;
● justify the use of a loop in a computer program;
● explain the difference between the “forever” and “repeat ()” blocks;
● determine when to use the “wait () seconds” block.

Overview
Through an exploration in digital 2D animation, students learn to give sprites the appearance of
movement. They are introduced to the Costumes Interface in mBlock and learn how to change a sprite’s
costume using programming blocks. They examine using loops to control the flow of a program’s
execution and to build programs of increasing complexity.

Key Focus
● Use a loop to control a program in mBlock.

Pre-lesson Checklist
For Teacher:
● A computer with mBlock software installed or access to the mBlock software website
● Slides Presentation: Lesson 4 - Walk in Place - Visual
For Student:
● A computer with mBlock software installed or access to the mBlock software website

Standards
● CSTA 2-AP-13: Decompose problems and subproblems into parts to facilitate the design,
implementation, and review of programs.

© education.makeblock.com
1
 ● ISTE-1D: Students understand the fundamental concepts of technology operations, demonstrate
the ability to choose, use and troubleshoot current technologies and are able to transfer their
knowledge to explore emerging technologies.
● ISTE-5C: Students break problems into component parts, extract key information, and develop
descriptive models to understand complex systems or facilitate problem-solving.
● ISTE-6A: Students choose the appropriate platforms and tools for meeting the desired objectives
of their creation or communication.
● ISTE-6B: Students create original works or responsibly repurpose or remix digital resources into
new creations.
● ISTE-6D: Students publish or present content that customizes the message and medium for their
intended audiences.

Lesson Plan

Warm-Up [5 min]

In the previous lesson, students learned how to use multiple events to trigger actions for a sprite.
Review and discuss the following examples:
(Note, animations are included in the Lesson 4 - Walk in Place - Visual slides presentation).

Example Effect
When the space key is pressed, the
Panda says, “Too hot, I’m going to
bloat!” for 2 seconds, and then its size
increases by 10; then it says “I’m about
to melt!” for 2 seconds, and then the
pixelated effect increases by 25.

When the up arrow key is pressed, the

sprite says “It’s too cold!” for 2 seconds,
then the size will change by -10; then it
says “I’m freezing my toes off!” for 2
seconds, and then the mosaic effect
increases by 25.

© education.makeblock.com
2
 Motion with 2D Animation
Let’s explore the basics of digital 2D animation.

Flipbook Animation – See video included in the slide presentation.

With a flipbook, each page has a drawing that has small changes from the page before and after.
When the pages are flipped quickly, they look like a moving cartoon. When digital animators create 2D
animations, they use individual drawings to make a character look like it is moving. When the images
are played quickly, they look like a moving cartoon. The blowfish animation is created using four
different images or costumes to create the animation.

Animated Blowfish – See animation included in the slide presentation.

© education.makeblock.com
3
 Costumes in mBlock
Some sprites in mBlock have multiple costumes available to animate different actions. Let’s look at
Panda’s costumes.

1. Open the mBlock software. Create a new file and click the Sprites tab in the Stage Area to

ensure that the Panda sprite is selected. Click the button in the Stage Area
to enter the Costumes interface.

© education.makeblock.com
4
 2. Notice, when in the Costumes interface, the button will become an

button. You can exit the Costume interface and return to the Programming

interface by clicking the button.

3. The costumes appear on the left column of the costume editing area. Each costume has a
unique name. Click on each costume to see the sprite change in the Stage Area.

Notice, Panda has two costumes. Have students predict what action Panda will appear to be doing if
these costumes are played quickly to make a moving cartoon.

costume1 costume2

© education.makeblock.com
5
 Students can click on costume1 and then costume 2 quickly, alternating between both costumes. They
should observe that switching fast between the costumes will create the illusion of Panda walking in
place.

With our help, Panda has been able to speak and showcase transformations to new friends on Earth.
Where Panda is from, creatures teleport, so Panda does not know how to walk. Let’s begin by
programming Panda to walk in place.

Hands-On [20 min]

Review the following concepts and blocks that will be used to help Panda walk in place.

Switch Costumes

In the block area, there is a block , which can make the sprite switch costumes.

Block area Block Function Example

When a sprite has
multiple costumes,
switch the sprite
costume to the
next costume.

Instruct the students to write their program according to the steps below:

1 Open the mBlock software. Create a new file and click the Sprites tab in the Stage Area to ensure
that we are programming the Panda sprite.

2 Find and select from the Block Area. Click and drag the block to the
Script Area and then release it.

3 Find and select from the Block Area. Click and drag the block to the Script Area

and attach it beneath the block.

© education.makeblock.com
6
 4 Press the space key several times to run the program and observe Panda switching costumes.

Loop
In the previous exercise, the user had to press the space key multiple times for Panda to switch
costumes. In mBlock, actions can be programmed to occur multiple times using a loop. Blocks nested
inside of a loop will be repeated in the program. The following blocks are used to program Panda’s
walking animation.

Block area Block Function Example

Continuously repeat
the blocks nested
inside.

Repeat the nested

blocks 10 times and
then stop.

Instruct the students to write their program according to the steps below:
1 Open the mBlock software. Create a new file and click the Sprites tab in the Stage Area to ensure
that we are programming the Panda sprite.
2 Find and select the appropriate blocks from the Block Area to create the following program.

(Note, the block is located in in the Block Area.)

3 Press the space key to run the program and observe Panda switching costumes.

4 Repeat steps 2 and 3 using the block instead of the block.

5 Press the space key to run the program and observe Panda switching costumes.

© education.makeblock.com
7
 6 Have students describe the difference between these two programs.

Difference between Forever and Repeat

When the block is used, Panda

When the block is used, the program
continuously changes costumes, and the
stops running after Panda changed costumes 10
program will not stop running.
times.

Wait
In the previous exercise, you will see that Panda changes costumes very fast. The computer
processes the program so fast that each costume switch happens in a split second. To see the
animation more clearly and slow Panda’s walking down, we will use the following blocks:
Block area Block Function Example
Pause the program
and wait the
specified amount of
time.

Instruct the students to write their program according to the steps below:

1. Add the block beneath the block nested inside the loop.

2. Press the space key to run the program and observe Panda switching costumes slowly.

Time Out: Take a moment to review the following fundamentals for working in mBlock and saving
programs in mBlock.

1. How do I duplicate or copy a block or set of blocks in mBlock?

Right-click on a block, select Duplicate to copy this block and all the subsequent blocks. Click
in the Script Area to drop the blocks. You can change and adjust the copied blocks as needed.

Assessment
Have students answer the following questions:

1. Explain the difference between the two loops explored in this lesson.
© education.makeblock.com
8
 2. Which of the following would cause an animation in mBlock to be slower?

3. Which block should be used to make an animation appear slower in mBlock?

Try It [10 min]

Independent Practice
Instruct the students to program Panda walking in place. Their final project should do the following:
● Panda says, “I can walk in place!” and then starts moving.
● While moving, Panda shouts the costume number of “1” or “2”.
● Add an appropriate background.
The students who have spare time, can customize their sprites freely.

Example Program

Extension Activity
Challenge students with remaining time to do one or more of the following:
● After the Panda walks in place a number of times, say “I can stand still.”, and then take two
steps before stopping completely.
● Add transformation effects while Panda is walking.
● Change the event that triggers Panda to walk.

Wrap-Up [10 min]

© education.makeblock.com
9
 Quiz
1. Which of the following blocks is not in the control block area?

Answer: D
2. Which Block Area does “Next costume” belong to?

Answer: D
3. Which of the following programs can make the sprite say “I’m fine!” for 3 times?

Answer: D

© education.makeblock.com
10