Animation in Scratch 3.

Trainer:

Dr Sarah Samson Juan

Faculty of Computer Science and Information Technology
 Copyright of the materials belongs to FCSIT, UNIMAS and the
training material will be only used to train students participating
the TEGAS Makers Workshops and Challenge

2
Table of Contents
Introduction to Scratch 3.0 interface ........................................................................................... 5
Cat wants to dance with Catherine ............................................................................................ 6
Saving your program file.................................................................................................................. 9
Cat moves and cat flies ................................................................................................................ 10
Exercise 1 ............................................................................................................................................ 12
Create a story using Scratch: Cat meets Duck at a park .................................................... 13
Create a story using Scratch: Cat waits for Duck to go fishing at the boardwalk ....... 17
Create a story using Scratch: Add extra character .............................................................. 19
Exercise 2 ............................................................................................................................................ 20
Scratch Challenge: Create your own digital story ................................................................ 21

3
Introduction

Animation in Scratch 3.0 is designed for beginners who wish to know how to create a
digital story or animation using programming blocks in Scratch. This training module is
an accompanying material for participants of the TEGAS Makers Workshop and
Challenge 2020.

Background of trainer

Dr Sarah Samson Juan is a senior lecturer at the Faculty of Computer Science and
Information Technology in Universiti Malaysia Sarawak. She received her PhD from
Grenoble-Alpes University in Computer Science in the field of Automatic Speech
Recognition Systems. She loves to code when she has time and she is passionate in
teaching basic programming to children, particularly, using Scratch. To date, she has
taught Scratch to teachers and children for the past three years.

Software

Offline editor for Scratch 3.0: https://scratch.mit.edu/download

Google Classroom

Join my class: atncozb

For inquiries, contact me at: [email protected]

4
Introduction to Scratch 3.0 interface

Stop program
Widescreen / Fullscreen
Run program / Green flag

Programming Programming The stage /

blocks area backdrop Sprite
(character)

Sprite’s position
(coordinates)
Sprite’s name

Current
backdrop

Add new
backdrop

Sprite’s size
Chosen sprite Add new sprite

5
Cat wants to dance with Catherine
Step 1: Start a new project: File -> New

Step 2: Rename the sprite (cat) to ‘Cat’

Step 3: Add another sprite called ‘Anina Dance’ from the Sprite Library.
Then, rename the sprite to ‘Catherine’.

Step 4: Click on the ‘Cat’ and let’s put these codes in the programming
area:

6
Step 5: Fix the direction of the sprite to ‘Left/Right’ to avoid the cat from
turning upside down.

Step 6: Add more codes on the cat to see different movement.

Step 7: Now, click Catherine and then add these codes:

7
Step 8: Let’s run the program and see our first animation. Click
the green flag to start.

We are missing an important part of the dance. Music!

Step 9: Click the cat and add these codes. This set of codes will
run in parallel with the other set of codes in the same area. Click
on the green flag to see what happens.

Step 10: Next, we will change the backdrop. Add a new backdrop
called ‘Concert’ from the Backdrop library.

8
Saving your program file
Now you have your first program in Scratch. Let’s save it.

Step 1: Click File -> Save to your computer.

Step 2: Rename your file (see image for example) and select the correct
folder to keep the file. Then, click Save.

Important: Always save your project and you must remember where
your files are kept.

9
Cat moves and cat flies
Code a program to make a cat walks and then flies in the air.

Step 1: Start a new project and then rename your sprite.

Step 2: Program the cat to walk.

To see what type of costumes that the sprite has, go to the ‘Costumes’
tab. Not all sprites in the library have multiple costumes.

Click the green flag to see the cat walks.

10
Step 3: Program the cat to fly. First, we add two more costumes for the
cat. From the ‘Costumes’ tab (not add new sprite), add these two
costumes from the costume library:

Step 4: Go back to the programming area for Cat, and continue to

code these on the cat:

Step 5: Click on the green flag to test your program. Save the file.

Try to add:

• A suitable backdrop for this animation.

• A background music.

• Another sprite flying / walking

• Hide the sprite after it glides to the last position and show the
sprite again after the green flag is clicked.
11
Exercise 1

I. How to rename a sprite?

II. How can we see a full screen of the animation?

III. How to make the sprite move 10 steps?

IV. How to know what are the sprite’s coordinates in the stage?

V. How to draw my own sprite?

12
Create a story using Scratch: Cat meets Duck at a park
• Using dialog (say)

• Using multiple scenes (backdrop)

• Using multiple characters (sprites)

Scene 1: Cat meets Duck at a park.

Cat: Hi Duck, how are you?

Duck: Hi Cat, I’m feeling great. Where are you going?

Cat: I’m going to fish at the lake. Do you want to come?

Duck thinks for a while (Hmm…)

Duck: Okay, I don’t have anything to do. Let’s go!

Step 1: Start a new project and import two sprites, ‘Cat’ and ‘Duck’.

Step 2: Click backdrop to go the backdrop’s programming area. Then,

choose a new backdrop that is suitable for a scene at the park.

13
Step 3: Then use broadcast block to send a message for ‘Scene 1’:

Step 4: Click on the cat and program the cat to walk a few steps. Below
are the codes:

Step 5: Click on the duck and program the sprite to glide into the stage.

14
Step 6: Then, click the cat again to add the first dialog. After that, we
need to send a cue (broadcast) for the Duck to say something.

Step 7: Click on the duck again to add codes for its dialog.

Step 8: Go back to the cat’s programming area and continue to add

another dialog.

Step 9: Lastly, add the final dialog for the duck. Save the program file.

15
Try to add:

• Background music for this story.

• In the same direction, make the cat and duck move to the
end of the stage. Then, both disappear from the stage.

16
Create a story using Scratch: Cat waits for Duck to go
fishing at the boardwalk

Scene 2: Cat waits for Duck to go fishing at the boardwalk

Cat: I wonder where’s Duck?

Duck appeared after two seconds.

Duck: I’m very sorry Cat. I met a friend of mine while I was on the way
here. We talked for a while.

Cat: It’s okay. I’m done fishing and I want to go home.

Duck: Okay, see you next time!

Step 1: Upload the previous file to continue from the previous story.

Step 2: Click backdrop to go the backdrop’s programming area. Then,

add a new backdrop that is suitable for a scene at the boardwalk.

Step 3: Then, in the backdrop’s programming area, add this code to

broadcast scene 2:

17
Step 4: Click on the cat to program the dialog for the second scene.

Step 5: Then, we will program the duck to enter the scene quickly and
then say its dialog.

Step 6: There is one more dialog for Cat, so we will add more codes to
the cat:

Step 7: Click on the duck to add its last dialog.

18
Create a story using Scratch: Add extra character
Some stories have extra actors such as people passing by, a bird is flying
in the sky and many more. Let’s add the missing fish in scene 2.

Step 1: Choose a fish sprite from the library.

Step 2: Program the fish to turn its body as it lie on the boardwalk.

Step 3: Then finally, click on the green flag to watch your story in Scratch.
Save your work.

Try to change:

• The colour of the cat or fish in the costume editor.

• The position of the sprites according to your preference.

Try to add:

• A title (as a word sprite) to your story in the first scene. Make
the title disappear after a few seconds.

19
Exercise 2
Create a program that tells three random facts about you. For example:

a. I like to dance like a ballerina.

b. My hobby is to plant flowers.

c. I like to eat chocolate.

You may use multiple sprites to tell your facts. The program must have:

• Background music

• Sprites moving in the stage

• One backdrop

20
Scratch Challenge: Create your own digital story

The theme: How can we fight Covid-19?

You are given the chance to use Scratch to tell a story about how we
can fight Covid-19. You can tell about, but not limited to:

• The dangers of the virus

• Physical distancing and practice good hygiene

• Dos and don’ts at a public area

• Public health messages and advices

Maximum duration of the story: not more than 3 minutes

Rubric Criteria:

• Text and sounds

• Multiple sprites and backdrops (scenes)

• Dialogs or voice or text narration

• Title and end credits

• Creative design and artwork

• Creative content and delivery

• Story development

You may use images from the Internet or draw your own sprites or
backdrop.

Due date: Saturday, 29 August 2020.

THREE best animation winners will have the chance to compete at the
Workshop Challenge (Science).

21
You can use the following template to create your storyboard before you start
to program in Scratch.

Scene 1:
Backdrop to choose:
Sprites in this scene:
Dialog:

Scene 2:
Backdrop to choose:
Sprites in this scene:
Dialog:

Scene 3:
Backdrop to choose:
Sprites in this scene:
Dialog:

22