Projects

Surprise! animation
Create an animation of a story with a surprise

Step 1 You will make

Create a short animation 🎥 with a fun surprise 🎉!

You will:
Create your own animation
Test and debug your code
Build your animation one part at a time

Get ideas 💭
You will make design decisions and think of a story for your animation with a surprise. Think about what your story
might be, and to get more ideas, See inside example projects in the ‘Surprise! animation — Examples’ Scratch
studio: https://scratch.mit.edu/studios/29075822/
The animation has three parts:

Curiosity
Surprise!
Reaction
Step 2 Create your scene

Have you got an idea about your animation?

Add a backdrop 🖼️, main character 🐙👩‍🦼🦖, and interesting object 🎂🎾🎁 of your choice to create the first
part of your animation.

Animation creates the effect of movement by changing pictures quickly. The first animators carved pictures
out of wooden blocks and used them as stamps. It is much faster to use Scratch to code your animation!

Open the starter project

Open the Surprise! animation starter project (https://scratch.mit.edu/projects/582222532/edito

r).
⏱️Not much time? You can start from one of the examples (https://scratch.mit.edu/studios/290758
22).

There are people called narrative designers who do storytelling for apps and video games. Digital
storytelling allows everyone to share their stories and creative imaginings with other people.

Design your scene

Choose: a theme for your animation. You could choose:

🐯 Land Animals
🐠 Sea animals
👽 Aliens
🌿 Nature
🌈 Weather
🌮 Food
🚀 Travel
⚾ Sport
…. Or something else
 Choose: Choose a sprite to be the 🐙👩‍🦼🦖 main character, another sprite to be the 🎂🎾🎁
interesting object and a 🖼️backdrop to set the scene.

Prepare your sprites

Where do you want your sprites to start? How big do you want them to be? How do you want them to look?
Add a when green flag clicked block, then, underneath, add blocks to set up your sprites at the
start of your animation.
Tip: Remember to set up both your 🐙👩‍🦼🦖 main character and your 🎂🎾🎁 interesting object
sprites.

Position your sprites

Move the 🐙👩‍🦼🦖 main character to the position of your choice on the Stage, then add a go to x:
y: block to your code:

go to x: 0 y: 0 add the sprite's position

Repeat this task for the 🎂🎾🎁 interesting object.

Resize your sprites

To change the size of a sprite for the whole project, change the number in the Size property in the
Sprite pane:

To change the size of a sprite for part of the project, add code to set size to the size of your
choice. This option is good if you want your sprite to change size in the project.

set size to 100 % <100 is smaller, >100 is bigger

Set the costumes of your sprites

To change the costume of a sprite for the whole project, click on the Costumes tab and select one of
the available costumes:

To change the costume of a sprite for part of the project, add a switch costume to block to your
code and update it to show the costume of your choice:
 switch costume to update this for your chosen costume

To hide a sprite at the start of the project, add a hide block to your code:

hide

Set the direction of your sprites

Your sprites might be facing the wrong way when you add them to your project.
To change the direction of a sprite for the whole project, change the Direction and rotation style in
the Sprite pane:

To change the direction of a sprite for part of the project, add blocks to your code to change the
rotation style and direction:

set rotation style left-right

point in direction -90 turn to the left

Save your project.

Save your Scratch project

First, to give your program a name, type the name of your program in the project name box at the top
of the screen:

Then, to save your project, click on File, and then on Save now:

Note: If you are not online or you do not have a Scratch account, you can click on Save to your
computer to save a copy of your project.
Step 3 Show curiosity

Will the object do something to attract attention? How will the character react? You decide! Create the second
part of your animation.

Decomposition is breaking a project down into parts that are smaller and easier to understand. This means
that you can build a project one part at a time until you have completed it. In this step you will focus only on
the curiosity part of your animation.
The object

Choose: If you want the 🎂🎾🎁 interesting object to do something to attract attention, choose what
the object will do.

Add blocks to the end of the 🎂🎾🎁 interesting object’s when green flag clicked setup script.

Jiggle a sprite

repeat 8

turn 15 degrees

wait 0.1 seconds

turn 15 degrees

wait 0.1 seconds

turn 15 degrees

wait 0.1 seconds

turn 15 degrees

wait 0.1 seconds

Use graphic effects

Rooster effects: See inside (https://scratch.mit.edu/projects/435730522/editor)
The set color effect to and change color effect by blocks both have drop-down menus
in which you can choose from a range of different graphic effects that can be used to change your
sprite’s appearance:

color: from 0 to 199 (bigger numbers will wrap around, so 200 is the same as 0)
fisheye: 0 means no effect, bigger numbers cause a bigger ‘fisheye’ effect, and negative
numbers cause a reverse ‘fisheye’ effect
whirl: 0 means no effect, big numbers make a big whirl to the left, and big negative numbers
make a big whirl to the right
pixelate: 0 means no effect, and bigger numbers create more pixels
mosaic: 0 means no effect, and bigger or negative numbers affect the number of copies
brightness: 0 means no effect, numbers up to 100 make the sprite lighter, and negative
numbers down to -100 make the sprite darker
ghost: 0 means no effect, and numbers up to 100 make the sprite more transparent

Try to set the different effect values to see what each one does. Explore how different effect changes
make your sprite look.

set whirl effect to 100

set pixelate effect to 50

Tip: A color effect of 225 is the same as a color effect of 25, so you can keep changing the
colour. For other graphic effects, no other changes will be made after you reach the maximum or
minimum number for the effect.

forever

change color effect by 25

wait 0.5 seconds

Use the clear graphic effects block to start again. Clicking on the green flag also clears all
graphic effects.
To set a graphic effect for a sprite when the project is started, place a set graphic effect to
block under a when green flag clicked block:
 when clicked

set ghost effect to 25

Tip: You can also set and change graphic effects for the Stage.
The character

Get the 🐙👩‍🦼🦖 main character to show interest in the object. Add blocks to the end of the 🐙👩‍🦼🦖
main character’s setup script.

If you need the 🐙👩‍🦼🦖 main character to wait until the 🎂🎾🎁 interesting object has done
something, add a wait block.

You could use say or think blocks, or even use the Text to Speech extension to make the character
talk out loud!

Make a sprite talk with the Text to Speech extension

Pico and Giga talk with the speech extension: See inside (https://scratch.mit.edu/projects/499
373708/editor)
Click on Add Extension:

Choose Text to Speech:

You will get a new Text to Speech blocks menu:

You can use the blocks in the Text to Speech blocks menu to make your sprites talk out loud.

You can make a sprite talk out loud when clicked:

when this sprite clicked

set voice to alto

set language to Spanish

speak Hola

You can even give your sprite a kitten voice!

set voice to kitten

speak Cat gotta haz milk.

The character could emote, like in the Space talk (https://projects.raspberrypi.org/en/projects/spac
e-talk) project.

Show the mood of a sprite with costumes

Abby thinks “Hmm”: See inside (https://scratch.mit.edu/projects/498767227/editor)

You can use switch costume to blocks before and after a say for, think for, play sound, or
wait block to make your character show their feelings.

switch costume to abby-a starting costume

wait 1 seconds

switch costume to abby-b show feelings

think Hmm... for 2 seconds

switch costume to abby-a back to starting costume

Tip: Make sure that you use a block that has a time value, not a start sound, say, or think block,
otherwise, you will not see the costume change.
The character could be brave and move closer to check out the object.

Animate sprite movement with costumes

Hedgehog walking: See inside (https://scratch.mit.edu/projects/499398615/editor)
You can use switch costume to and move blocks in a repeat loop to animate a moving
character. Change the time in the wait block to change the speed.
 when clicked switch between two costumes

repeat 20

switch costume to hedgehog-a

move 3 steps

wait 0.1 seconds

switch costume to hedgehog-b

move 3 steps

wait 0.1 seconds

Tip: If you want to use all the costumes that a sprite has, you can just use the next costume block
in a loop.

Tip: Increase the number of steps in each move block to make the sprite go faster. Change the
number in the repeat loop to adjust the distance.

Tip: To make the sprite move backwards, you can use negative numbers, for example, move -3
steps. Or, you can use a point in direction -90 block to change the sprite’s direction before
the sprite moves (-90 points to the left).
Test: Click on the green flag to test your project. The 🐙👩‍🦼🦖 main character should show curiosity
about the object.
Click on the green flag again. If you changed the 🎂🎾🎁 interesting object or 🐙👩‍🦼🦖 main
character sprite’s position or looks, you will need to make sure that they are set back to their starting
position or looks when you run the project again.

Set the starting position and looks for a sprite

Choose the blocks that you need to set the position and looks for a sprite at the start.

when clicked add blocks to set up the start

switch costume to costume1

set size to 100 % starting size

go to x: -200 y: 50 starting position

point in direction 90

set brightness effect to 80

show

Tip: All graphic effects are cleared when you click on the green flag, so you don’t need to clear them,
but you might need to set the effects that you want the sprite to have.

Debug:

The sound is not working

Check that the volume on your computer or tablet is loud enough and that your speakers or
headphones are connected and working properly.

My animation does not reset properly when I click on the green flag
Check that your project has when green flag clicked scripts for the sprites that need them, and
check that they reset the position, size, and looks for the sprites. For help with this, see the Set the
starting position and looks for a sprite task above.
Step 4 Add a surprise!

Now, you need to add a surprise. What could happen to the object?
Will it turn into another object?
Will it turn into a character?
Will it disappear and reveal another sprite?
You decide! Create the third part of your animation.

Have you written a story with a plot twist or a surprise? Have you watched a show or read a book with an
unpredictable ending? You can use the same methods when you create a digital story or animation.

When will the surprise happen?

Select the 🎂🎾🎁 interesting object sprite. Add a script to make the surprise start when you want it
to.
You will need to choose a time delay that works for your project. If you have a character that spends a
long time being curious, you will need to choose a longer delay.

when clicked

wait 5 seconds change the number to create your time delay

Now, create the surprise!

The object could play a sound, switch costume, change graphic effects, or change size.

You could add a surprising costume to the sprite, then the sprite could switch costume to reveal it.

Add a costume to a sprite

Click on the Costumes tab and then on Choose a Costume to add any costume to the sprite from
the Costume Library:

You will need to position and resize the added costume in the Paint editor, to match the sprite’s other
costumes.
Tip: If you position a sprite on the Stage and then change its costume, the sprite might appear to
‘jump’ or change size. You will need to position and resize the costumes in the Paint editor so that
they all appear in the right position on the Stage.
You could make the sprite seem to turn into a different sprite — to do this, hide the 🎂🎾🎁
interesting object sprite at the same time as you show another sprite.

Hide and show sprites

The 🎂🎾🎁 interesting object sprite:
 when clicked

show

wait 5 seconds

hide

The 🎷👻⚡surprise object sprite:

when clicked

hide

wait 5 seconds

show

Tip: If you make a 🎷👻⚡surprise object sprite show, you will need to make it hide when green
flag clicked.

Test: Click on the green flag. Does the surprise happen at the right time? Does the animation reset
properly?
Debug:
If you need a sprite to be in front of or behind another sprite, you can use layers:

Position sprites with layers

There are two ways to position your sprites into layers.

You can drag a sprite on the Stage to move it to the front layer:

Alternatively, you can use a go to front layer or go to back layer block to position a sprite.

If you want a sprite to always stay at the front or back, use a forever loop to make the sprite
move back to the correct layer if you accidentally move it:

when clicked

forever

go to front layer or back

If the surprise happens at the wrong time, you can fix that:

The surprise starts at the wrong time

You might need to change the amount of time in some or all of the wait blocks, or add more wait
blocks, to get the timing just right.
Upgrade your project
You could upgrade your project by adding a reaction. How will your main character react?
You decide!
What will they do? Will they say something, make a sound, change costumes, or move?

Show the mood of a sprite with costumes

Abby thinks “Hmm”: See inside (https://scratch.mit.edu/projects/498767227/editor)

You can use switch costume to blocks before and after a say for, think for, play sound, or
wait block to make your character show their feelings.

switch costume to abby-a starting costume

wait 1 seconds

switch costume to abby-b show feelings

think Hmm... for 2 seconds

switch costume to abby-a back to starting costume

Tip: Make sure that you use a block that has a time value, not a start sound, say, or think block,
otherwise, you will not see the costume change.

Use graphic effects

Rooster effects: See inside (https://scratch.mit.edu/projects/435730522/editor)
The set color effect to and change color effect by blocks both have drop-down menus
in which you can choose from a range of different graphic effects that can be used to change your
sprite’s appearance:
color: from 0 to 199 (bigger numbers will wrap around, so 200 is the same as 0)
fisheye: 0 means no effect, bigger numbers cause a bigger ‘fisheye’ effect, and negative
numbers cause a reverse ‘fisheye’ effect
whirl: 0 means no effect, big numbers make a big whirl to the left, and big negative numbers
make a big whirl to the right
pixelate: 0 means no effect, and bigger numbers create more pixels
mosaic: 0 means no effect, and bigger or negative numbers affect the number of copies
brightness: 0 means no effect, numbers up to 100 make the sprite lighter, and negative
numbers down to -100 make the sprite darker
ghost: 0 means no effect, and numbers up to 100 make the sprite more transparent

Try to set the different effect values to see what each one does. Explore how different effect changes
make your sprite look.
 set whirl effect to 100

set pixelate effect to 50

Tip: A color effect of 225 is the same as a color effect of 25, so you can keep changing the
colour. For other graphic effects, no other changes will be made after you reach the maximum or
minimum number for the effect.

forever

change color effect by 25

wait 0.5 seconds

Use the clear graphic effects block to start again. Clicking on the green flag also clears all
graphic effects.
To set a graphic effect for a sprite when the project is started, place a set graphic effect to
block under a when green flag clicked block:

when clicked

set ghost effect to 25

Tip: You can also set and change graphic effects for the Stage.

Make a sprite talk with the Text to Speech extension

Pico and Giga talk with the speech extension: See inside (https://scratch.mit.edu/projects/499
373708/editor)

Click on Add Extension:

Choose Text to Speech:

You will get a new Text to Speech blocks menu:

You can use the blocks in the Text to Speech blocks menu to make your sprites talk out loud.

You can make a sprite talk out loud when clicked:

 when this sprite clicked

set voice to alto

set language to Spanish

speak Hola

You can even give your sprite a kitten voice!

set voice to kitten

speak Cat gotta haz milk.

Animate sprite movement with costumes

Hedgehog walking: See inside (https://scratch.mit.edu/projects/499398615/editor)
You can use switch costume to and move blocks in a repeat loop to animate a moving
character. Change the time in the wait block to change the speed.

when clicked switch between two costumes

repeat 20

switch costume to hedgehog-a

move 3 steps

wait 0.1 seconds

switch costume to hedgehog-b

move 3 steps

wait 0.1 seconds

Tip: If you want to use all the costumes that a sprite has, you can just use the next costume block
in a loop.
Tip: Increase the number of steps in each move block to make the sprite go faster. Change the
number in the repeat loop to adjust the distance.

Tip: To make the sprite move backwards, you can use negative numbers, for example, move -3
steps. Or, you can use a point in direction -90 block to change the sprite’s direction before
the sprite moves (-90 points to the left).

Add a sound to a sprite or the Stage

Select the sprite that you want to have the new sound, then select the Sounds tab. Each sprite starts
with a default sound:

Scratch has a library of sounds that you can add to your sprites. Click on the Choose a Sound icon to
open the Sound Library:

To play a sound, hold your mouse cursor (or your finger, if you are using a tablet) over the Play icon:

Click on any sound to add it to your sprite. You will be taken straight back to the Sounds tab and you
will be able to see the sound that you have just added:
If you switch to the Code tab and look at the Sound blocks menu, you will be able to select the new
sound:

Tip: You can also add sounds to the Stage.

Record a sound
Select the sprite that you want to have the new recorded sound, then select the Sounds tab:

Go to the Choose a Sound menu and select the Record option:

When you are ready, click the Record button to start recording your sound:
Click the Stop recording button to stop recording your sound:

Your new recording will be shown. You can Re-record your sound if you are not happy with it.
Drag the orange circles to crop your sound; the part of the sound with a blue background (between
the orange circles) will be the part that is kept:

When you are happy with your recording, click the Save button. You will be taken straight back to the
Sounds tab and you will be able to see the sound that you have just added:

If you switch to the Code tab and look at the Sound blocks menu, you will be able to select the new
sound:
You could also:
Add to or improve your animation, with movement, looks, and graphic effects
Create or edit costumes in the Paint editor to make them look the way that you want
Record your voice or record sound effects and add the new sounds to your project

Professional programmers explore and take inspiration from code created by other programmers.

You can also look at the remixes for the Surprise animation starter project (https://scratch.mit.edu/
projects/582222532/remixes) to see what other creators have made.

Each project in the ‘Surprise! animation — Examples’ Scratch studio (https://scratch.mit.edu/studi

os/29075822) has a See inside link, which you can use to open the project in the Scratch editor and
look at the code to get ideas and see how the project works.

Doppelganger: See inside (https://scratch.mit.edu/projects/500767602/editor)

Take a look at our ‘Surprise! animation — Community’ Scratch studio (https://scratch.mit.edu/studi

os/29079784) to see projects created by community members.
Share and play
If you are in a club, why not share your project with friends and peers?
You could also show your family how your project works.

If you have a Scratch account, you can share your project through Scratch. You can send a link to people you
know, and the whole Scratch community will be able to find your project and try it out.

Share your Scratch project

Please make sure that you do not share any personal information about yourself when sharing your Scratch
projects.

Give your Scratch project a name.

Click the Share button to make the project public.

If you like, you can add instructions in the Instructions box, to tell other people how to use your project.

You can also fill in the Notes and Credits box: if you have made an original project, you can write some
short comments, or if you have remixed a project, you can credit the original creator.

Click the Copy Link button to get the link to your project. You can send this link to other people by email or
text, or on social media.
 Scratch provides the ability to comment on your own and other people’s projects. If you do not want to allow
people to comment on your project, you should turn off commenting. To turn off commenting, set the slider
above the Comments box to Commenting off.

Why not invite your friends to create a project? Let them know how you had fun.
If you have a Scratch account, and have shared your ‘Surprise! animation’ project, keep an eye out for comments
that others may make about your creation. Feedback is a great way to reflect on your work. Ignore any comments
that are unhelpful or irrelevant.

Comments and feedback in Scratch

Scratch provides the ability to comment on your own and other people’s projects. If you do not want to allow
people to comment on your project, you should turn off commenting. To turn off commenting, go to the Project
Page and set the slider above the Comments box to Commenting off:

If you are happy and feel safe to allow people to write comments on your project, you can leave the first
comment:

If you think a comment or project is mean, insulting, too violent, or otherwise inappropriate, click the Report
button to let the Scratch Team know about it. To report a comment, click the Report button above the
comment. To report a project, click the Report button on the Project Page:

Read the Scratch Community Guidelines (https://scratch.mit.edu/community_guidelines) so that you

know how you and others can maintain a friendly and creative community.

Inspire the Raspberry Pi Foundation community with your project!

To submit your project to our ‘Surprise! animation — Community’ Scratch studio (https://scratch.mi
t.edu/studios/29079784), please complete this form (https://form.raspberrypi.org/f/community-p
roject-submissions).
Community submissions

Take a look at these fabulous community projects from our ‘Surprise! animation — Community’
Scratch studio (https://scratch.mit.edu/studios/29079784):

Surprise eggs: See inside (https://scratch.mit.edu/projects/723810901/editor)

Scarify building: See inside (https://scratch.mit.edu/projects/578827663/editor)

You can also look at the remixes for the Surprise animation starter project (https://scratch.mit.edu/
projects/582222532/remixes) to see what other creators have made.
What next?
If you are following the Introduction to Scratch (https://projects.raspberrypi.org/en/pathway/scratch-intro)
pathway, you can move on to the I made you a book (https://projects.raspberrypi.org/en/projects/i-made-yo
u-a-book) project. In this project, you will make a book in Scratch based on your own idea.

If you want to have more fun exploring Scratch, then you could try out any of these projects (https://projects.ra
spberrypi.org/en/projects?software%5B%5D=scratch&curriculum%5B%5D=%201).

Published by Raspberry Pi Foundation (https://www.raspberrypi.org) under a Creative Commons

license (https://creativecommons.org/licenses/by-sa/4.0/).
View project & license on GitHub (https://github.com/RaspberryPiLearning/surprise-animation)