e book level up

MAKE APPLY SOLVE PROBLEM IMPLEMENT

Creative Computing (E571A)

Project-based learning on Scratch and digital tools.

Details of this courseware can be
found at http://chumbaka.asia

Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab. It is provided free of charge. With Scratch, you can
program your own interactive stories, games, and animations — and share your creations with others in the online community. Pivot
Animator is a stickman animation software that is provided free for personal use and commercial use. Piskel is a free online editor
for animated sprites or pixel art. Some illustrations on the front cover was created by freepik—www.freepik.com.

The information in this manual has been obtained from sources believed to be reliable. The author does not guarantee the accuracy
or completeness of any information presented herein, and shall not be responsible for any errors, omissions or damages as a result of
the use of this information. No part of this manual may be reproduced, copied, or distributed in any form or by any means without
expressed written consent from Chumbaka Sdn Bhd.

© 2020 Chumbaka Sdn Bhd Version A.01.03

2

Read Me First

Before starting the lesson, please have the following items ready.
1. Computer (with heavy use of mouse or touchpad) running Windows or macOS

installed with the following software:
• Google Chrome
• Adobe Reader

2. E571A Mentor Folder.zip (download from https://forum.chumbaka.asia →
mentor’s thumb drive → student’s desktop)

3. E571A Scorecard printout for each student in order to award them digital
badges (available from E571A Mentor Folder)

4. Brief Internet connection is required for some parts of this manual.

3

Lesson Scorecard

A1 - Understand coding concepts.

Get Ready Prepare the mentor folder. 8
10
Blockly Play Blockly to understand coding concepts.
18
B1 - Get to know Scratch. 22

Scratch Create a simple program. 28
35
Explore Scratch Discover fun features.
39
C1 - Learn to use a pixel editor. 41

Piskel Learn to use a pixel editor. 45
48
Animation Design Create your own animation.
56
D1 - Add your sprite into Scratch. 58

My Scratch Sprite Upload your sprite into Scratch. 66
67
Adding More Sprites Discover other sprites and backdrops.
69
E1 - Learn animation. 69

Flipbook Learn to create a flipbook. 74
77
Pivot Animator Learn to create a digital flipbook.
83
F1 - Learn to animate sprites. 85

Sprite Animation Learn to animate sprites in Scratch.

Your Name Make your name come to life.

G1 - Greeting card project: Ideate.

Preparation Do these things before starting your project.

Ideate Get some ideas.

H1 - Greeting card project: Test.

Test Get feedback from others.

Improve Make you greeting card even better.

I1 - Learn to create music in Scratch.

Music Learn to create music.

Video Sensing Interact with the webcam.

J1 - Learn about audio in Scratch.

Voice Edit Learn about audio in Scratch.

Text to Speech Convert text to speech.

4

K1 - Create a story.

Story Tell a story with Scratch. 89
90
Group Tell-A-Story Create a story in a group.
96
L1 - Transfer the storyboard to Scratch.
99
Story in Scratch Create the story in Scratch. 100

M1 - Learn to make a game on Scratch. 104

Make a Game Learn to make a game on Scratch. 108
110
Level Up: Clicker Game Make the game better.
112
N1 - Learn about relative motion. __________

Let’s Fly Make the sprite fly. Total Score
of 29
O1 - My project: Ideate.

Challenge Create a teaching tool using Scratch.

Ideate Get some ideas.

P1 - My project: Test.

Test Get feedback from others.

5

Challenge Scorecard

Signature

Project Guardian Mentor Guardian Mentor

Green Challenge Red Challenge

A2 Reinforce learning with unplugged 12 – –
activities.

B2 Program a story. 25 ––

C2 Create your own sprite. 36 ––

D2 Explore different scenes. 43 ––

E2 Create a story with Pivot Animator. 53 ––

F2 Create a short clip with sprites. 60 ––

G2 Greeting card project: Prototype. 68 ––

H2 Greeting card project: Improve. 70 ––

I2 Sound and motion. 78 ––

J2 Use voices, languages, and sounds. 87 ––

K2 Create a storyboard. 93 ––

L2 Turn the story into a movie. 97 ––

M2 Make a Scratch game. 101 ––
––

N2 Add relative motion to the game. 106 ––

O2 My project: Prototype. 111 ––

Total Score ______ –
of 16

6

Final Project Scorecard

Project Signature
P2 My Project: Share.
Total Score Guardian Mentor

113

______
of 1

Digital Badge Criteria

Feedback Completed Completed
Lesson Min 27 Min 27
Green Challenge Min 15 Min 15
Red Challenge — —
Final Project —
Completed

To be eligible for a digital badge, you need to meet the criteria above. Ask your mentor and
guardian for their signatures as proof of completion. When you’ve completed the programme, take
a photo of your scorecards and upload it to your Chumbaka backpack account.

7

A1Understand coding concepts.

Get Ready

Prepare the mentor folder.

1 Extract E571A Mentor Folder.zip to the Desktop.

Open the zip file.

E571A Mentor Folder.zip

+ Copy to Desktop Desktop

E571A Mentor Folder

8

2 Move this manual into the Mentor Folder.

E571A Level Up E571A Mentor Folder

9

Blockly

Play Blockly to understand coding concepts.

1 Launch Blockly.

Click to launch the offline version of Blockly*.

2 Play Puzzle and learn about Blockly shapes.

Complete Puzzle.

* This program is also available online at http://blockly.games.

10

3 Play Maze and learn about sequence.

Complete Maze
to level 5.

3 Play Bird and learn about conditionals.

Complete Bird
to level 3.

11

A2Reinforce learning with unplugged activities.

Recap

Learning from previous chapter.

1 A computer program is like a recipe for making a cake.

add butter and sugar It follows a sequence of
add eggs steps that tells the
add flour and cocoa computer what to do.
mix until smooth

repeat until skewer is clean Loop makes a set of codes
do run multiple times.

insert skewer into cake

check if skewer is clean

12

if finished dinner Condition is used to
do eat the cake decide which option to
follow.

13

Graph Paper Programming

Learn about code and program.

1 Watch this video (1:29).

Graph Paper Programming.mp4
Source: http://bit.ly/2unWgkT

What is a code and a program?

Code Program

Move Right

Move Left

Paint

14

Programmer and Computer

Create drawings on paper with your buddy using graph paper programming.

1 Prepare the materials.

logbook color pencils or
marker pens

START In your
HERE logbook, draw
an 8×8 grid.

15

2 Decode this program to find out the secret shape.

Code Program

Move right

Move left

Move up

Move down
Colour the box

In your logbook, draw the shape
that this program creates.

Begin from

Did everyone get the
same shape?

16

3 Program your own secret shape for your buddy to decode.

When you’re done, show each
other. Was the image decoded
correctly?

A programmer creates a program. A computer then does
exactly what the program tells it to do.
In the earlier exercise,
who is the programmer
and who is the
computer?

17

B1Get to know Scratch.

Scratch

Create a simple program.

1 Set up Scratch Desktop.

Open E571A Mentor Folder.
For Windows, double-click Scratch Desktop
3.6.0.exe and follow the instructions.

For macOS, double-click Scratch Desktop
3.6.0.dmg. Move Scratch Desktop into
Applications.

18

2 Follow the Getting Started tutorial.

Launch Scratch Desktop.
Show available
tutorials.

Select this tutorial.

19

Watch this video.

Getting Started.mp4
Source: scratch.mit.edu

Use the arrow keys and
follow the tutorial to
make the cat say Hello!

Use these blocks and try
to make the cat dance
around the Stage.

20

Save your program. Let’s
call it Hello World.

21

Explore Scratch

Discover fun features.

1 Follow this tutorial.

Select this tutorial.

Watch how to add a sprite.

22

2 Watch these videos to add effects to your sprite.

Change Size.mp4
Source: scratch.mit.edu
Add Effects.mp4
Source: scratch.mit.edu

23

2 Make your earlier program more interesting.

Restore your Hello
World program.

Use the blocks you
learned earlier to
make your program
more interesting.
Don’t forget to
explore other blocks
and surprise your
friends with your
discovery.

24

B2Create a Scratch program.

Recap

Learning from previous chapter.

1 You can use Scratch to create animation, music, games,

and many other interesting projects.
Watch this video (0:58) for what’s possible.

Scratch 3 Overview.mp4
Source: http://bit.ly/2nwBsER

2 A Scratch program is made up of sprites.

Each sprite has its own program.

25

3 Some blocks in Scratch lets you put in positive or

negative numbers.
Here’s an example. Try them out.
Which block makes the sprite
grow larger and which makes the
sprite shrink smaller?

Watch this video (1:50) about negative numbers.

Negative Numbers.mp4
Source: http://bit.ly/2MTKDbN

26

Program a Story

Create a program.

1 Create a story in Scratch.

The cat is enjoying his time in the woods.
A bat appears suddenly and says “boo”!
The cat is scared and runs away.
…

Create this story in Scratch.
Then, continue to add to the story.

27

C1Learn to use a pixel editor.

Piskel

Learn to use a pixel editor.

1 Install and launch Piskel.

Open E571A Mentor Folder.

For Windows, extract Piskel v0.14.0.zip.

Piskel.zip

Open the folder and
double-click this file.

Piskel

Piskel

For macOS, double-click Piskel v0.14.0.dmg.

Piskel.dmg

Piskel Applications
28

2 Create an animation.

Select the Pen tool.

29

Draw this circle using your mouse.
Left-click to draw Right-click to erase

30

Display the color palette.

Drag the slider and click on
the palette to choose
yellow.

Draw the fuse.

Complete the drawing
of a bomb.

31

Duplicate this frame 3 times.
Modify the new frames as follows:

32

3 Save the animation as GIF.

Export your animation.
Save the animation as a GIF.
Name your file and then Save.

33

4 Display your animation.

Double-click the file you created and see
your animation.

bomb.gif

34

Animation Design

Create your own animation.

1 Here is a video (1:04) with examples of pixel art drawing.

Pixel Animation Compilation.mp4
Source: http://bit.ly/36H0IJu

2 Create your own pixel animation using Piskel.

3 Showcase your creation to your friends!

35

C2Create your own sprite.

Recap

Learning from previous chapter.

1 Piskel is a graphic editor to create a picture, pixel by pixel.

2 You can create pixel art in the computer or in real life.

Pixel Art - Sonic the Hedgehog.mp4
Source: http://bit.ly/2upG5U8
Pixel Art - The Simpsons.mp4
Source: http://bit.ly/2QvrCyu

36

My Sprite

Design your own sprite.

1 You can use Piskel to create a sprite for Scratch. Here are

some examples.
Logo

Character

37

2 Design a sprite that you will use in Scratch later.

Source: http://bit.ly/2N3ipv9 Design your sprite in your
logbook.

Transfer your design to Piskel.
Make it walk, run, glide, fly, or
anything you fancy.

Save your work. You will use this file later.

pear
38

D1Add your sprite into Scratch.

My Scratch Sprite

Upload your sprite into Scratch.

1 Upload the sprite you created in the previous chapter into

Scratch.

Start a new Scratch
program.

Delete this sprite.

Upload the sprite you
created earlier.

39

2 Watch this video on how to animate a sprite.

Animate a Sprite.mp4
Source: scratch.mit.edu

Use these blocks from the
video to animate the sprite
you created earlier.

40

Adding More Sprites

Discover other sprites and backdrops.

1 Watch this video on how to add a backdrop.

Add a Backdrop.mp4
Source: scratch.mit.edu

There are many interesting
backdrops in Scratch. Go
explore and try them out.

2 There are also many sprites included in Scratch. Some

even have different costumes.
Check out this sprite.

41

3 You can also create your own sprites in Scratch.

Paint your own sprite.

4 Add more sprites and different backdrops to your earlier

program.
Try to make them move, interact, and make sounds. Here
are examples of blocks you can use.

42

D2Explore different scenes.

Recap

Learning from previous chapter.

1 Scratch includes many sprites and backdrops. Like sprites,

you can also upload your own images as backdrops.

2 Each sprite can have costumes.

By switching between costumes,
the sprite appears to animate.

43

Sprite the Explorer

Get your sprite to explore different places and meet new friends.

1 Bring your sprites on an exploration and meet new

friends.

Can the sprites interact with
each other?

44

E1Learn animation.

Flipbook

Learn to create a flipbook.

1 Watch a video (0:27) of a flipbook.

Flipbook Example.mp4
Source: http://bit.ly/2Q6mLVU

2 Prepare your materials.

Get your logbook and
a pencil.

45

3 Illustrate your flipbook.

Draw a picture starting at the bottom
sheet of paper.

Draw another picture at the same spot at the
second last sheet of paper.
This time, draw the picture with a slightly
different pose.

Continue with the next page, each time drawing the
picture at the same spot but with a slightly different
pose.

46

Flip through your book.
Does your drawing become animated?

47

Pivot Animator

Learn to create a digital flipbook.

1 Watch a video (15:14).

Pivot Animator Tutorial.mp4
Source: http://bit.ly/2Qaz9nG

2 Install Pivot Animator for Windows.

Open E571A Mentor Folder.
Double-click Pivot Animator v4.2.6.msi
and follow the instructions.

Work with your buddy if
you do not have a
Windows computer.

48

3 Create your first animation.

Click Start and key in pivot animator. Press Enter to launch the
software.

Click to animate the next frame.

49

c

Click and drag the red
points to move the
stickman’s hands and legs.

Click to animate the next frame.

c

Click and drag the orange
point to move the stickman.

Click to animate the next frame.

50