Creating Animations with Code

Introduction

Animation makes still pictures seem to move. In coded animation, you give a computer a set of instructions that control what appears on the screen, where it moves, when it changes, and how it reacts. You can create a dancing character, a moving background, a short story, a science model, or a simple game.

In this aiMOOC, you will learn the main ideas behind Animation, programming, and Scratch. Scratch is used for many examples because its colorful blocks make code easier to read, but the same ideas also appear in other programming tools: sequence, events, loops, timing, coordinates, sprites, frames, and debugging.

You do not need to be an expert artist. Clear ideas, careful testing, and small improvements are more important than perfect drawings.

A flipbook is a useful model for understanding animation. Each page is still, but when the pages change quickly, your eyes and brain connect them into movement. Digital animation also uses changing images, positions, shapes, or colors over time.

What You Will Learn

By the end of this course, you should be able to:

Explain animation: Describe how changing images or positions can create the appearance of movement.
Plan instructions: Put coding steps in a sensible order.
Use events: Start actions when something happens, such as clicking a flag or pressing a key.
Use loops: Repeat actions without copying the same instructions again and again.
Control position: Use horizontal and vertical coordinates to place and move objects.
Test and debug: Find problems, change code, and test again.
Create a short animated project: Combine movement, timing, pictures, text, and optional sound.

How Animation Works

Frames, Changes, and Motion

An animation is built from changes over time. A frame is one still image in a sequence. If later frames are a little different from earlier frames, the result can look like motion.

In code, you do not always draw every frame yourself. You can tell a character to move a little, wait briefly, change its picture, and repeat. The computer produces the changing screen for you.

When you plan an animation, ask:

What changes?: Position, direction, size, costume, color, backdrop, or text.
When does it change?: Immediately, after a wait, or after an event.
How often does it change?: Once, a fixed number of times, or continuously.

Sprites and Costumes

A sprite is a picture or character that your code can control. A sprite can move, turn, speak, change size, make sounds, and react to events. In Scratch, one sprite can have several costumes. A costume is a different picture for the same sprite.

Switching between costumes can make a character seem to walk, blink, flap, or change expression.

A sprite sheet shows several images that can be used as animation frames. Even when your coding tool stores images differently, the basic idea is the same: slightly different pictures shown in sequence can create movement.

The Coding Workspace

A block-based coding tool gives you pieces of code that fit together. In Scratch, you can choose blocks for motion, looks, sound, events, control, sensing, operators, and variables.

The stage is where your animation appears. The sprite list shows the objects in the project. The coding area is where you connect instructions into scripts.

A simple script is an algorithm: an ordered set of steps that tells the computer what to do.

The Building Blocks of Coded Animation

Sequence: Put Instructions in Order

A sequence is a set of instructions in a particular order. Computers follow the order you give them.

Imagine these instructions:

Start when the green flag is clicked.
Move 30 steps.
Wait for a short moment.
Turn 15 degrees.
Say hello.

If you change the order, the animation may look different. For example, saying hello before moving creates a different scene from moving first and speaking later.

Try it: Build a tiny script with three actions. Run it. Then swap two blocks and observe what changes.

Events: Decide When Action Starts

An event tells a script when to begin. Common events include:

A project starts.
A key is pressed.
A sprite is clicked.
A message is received.

Events make animations interactive. Instead of watching the same scene every time, a viewer can press a key or click a character to cause something new to happen.

For example, pressing the space bar could make a bird flap, while pressing the right arrow could make it fly across the screen.

Loops: Repeat Efficiently

A loop repeats instructions. Loops are useful because animations often contain repeated motion.

Instead of writing "move, change costume, wait" ten separate times, you can put those actions inside a repeat block. This makes the code shorter and easier to change.

A loop can create:

A walking cycle.
A blinking light.
A bouncing ball.
A spinning planet.
A repeating background movement.

When you use a loop, choose the number of repeats and the wait time carefully. Very long waits can make an animation feel slow. Very short waits can make changes hard to see.

Timing: Control Speed and Rhythm

Timing helps an animation feel smooth and understandable. A wait block creates a pause between actions. A longer wait usually makes the action look slower; a shorter wait usually makes it look faster.

You can use timing to create:

A pause before a surprise.
A steady walking rhythm.
A quick jump.
A slow fade or costume change.
Dialogue that gives the viewer enough time to read.

Good timing is something you discover by testing. There is no single perfect speed for every animation.

Coordinates: Tell Sprites Where to Go

Most 2D coding environments use a coordinate system. The horizontal position is often called x, and the vertical position is often called y.

Changing x can move a sprite left or right. Changing y can move it up or down. Combining both can create diagonal movement.

For example:

Increase x to move right.
Decrease x to move left.
Increase y to move up.
Decrease y to move down.

You can also send a sprite to a chosen x and y position. This is useful when you want a scene to begin in the same place every time.

Build Your First Short Animation

Step 1: Plan a Tiny Story

Keep your first project small. A good beginner plan has one main character, one setting, and one clear action.

Example idea: A robot enters a room, waves, says "Hello!", and exits.

Before coding, create a simple storyboard with three to five boxes. In each box, draw what the viewer should see and write one note about the action.

A storyboard saves time because it helps you decide what needs to happen before you start building code.

Step 2: Choose or Draw a Sprite

Choose a sprite that fits your idea, or draw your own. If you want costume animation, prepare at least two slightly different costumes.

For a walking character, one costume might show the left leg forward and another might show the right leg forward. Switching between them while the sprite moves can create a walking effect.

Step 3: Add an Event and a Sequence

Start with one event, such as the green flag. Under it, place a short sequence:

Go to a starting position.
Show the sprite.
Move or glide.
Change costume.
Wait.
Say a short line.

Run the project after adding only a few blocks. Frequent testing helps you notice problems early.

Step 4: Add a Loop

If an action repeats, place it inside a loop. For example, a walk cycle might repeat:

Move a few steps.
Switch to the next costume.
Wait briefly.

Change one value at a time. If the character moves too quickly, change the wait. If it travels too far, reduce the movement amount.

Step 5: Add a Backdrop or Scene Change

A backdrop is the background of the stage. Backdrops can show different places, times, or moods. You can change a backdrop when a message is received or when one scene ends.

A background can also be animated. For example, two wide background sprites can move left again and again while a character stays near the center. This can make it look as if the character is traveling.

Add Expression and Storytelling

Movement with Meaning

Movement should help tell the story. Think about what the audience should understand.

A fast movement can suggest excitement or danger. A slow glide can suggest calmness. A sudden turn can show surprise. A small repeated movement can make a character look nervous or energetic.

Do not add motion only because you can. Ask, What does this movement communicate?

Dialogue and Sound

Speech bubbles can help characters talk. Keep each line short enough to read. If two characters speak, use waits or messages so their lines do not appear on top of each other.

Sound can add emotion, rhythm, or information. You might use footsteps, a bell, wind, a short musical pattern, or your own recorded sound. Always make sure that any sound you use is allowed to be reused.

Stop Motion and Code

Stop motion is another way to make animation. You move real objects a tiny amount, take a picture, move them again, and take another picture. Those pictures become frames.

Code can help you display the frames, control timing, add sound, or make the stop-motion scene interactive.

Testing and Debugging

What Is a Bug?

A bug is a problem in a program that makes it behave differently from what you intended. Debugging means finding the cause and improving the code.

Bugs are a normal part of programming. A bug gives you information about what to investigate.

Common animation bugs include:

A sprite starts in the wrong place.
A costume changes too quickly.
Two characters speak at the same time.
A loop never stops.
A sprite points the wrong way.
A scene begins before the previous one finishes.

A Simple Debugging Routine

Use this routine when something does not work:

Describe what you expected.
Describe what actually happened.
Find the smallest part of the script that might cause the problem.
Check the order of the blocks and the values inside them.
Change one thing.
Test again.

If you change many things at once, it becomes hard to know which change fixed the problem. Small tests are easier to understand.

Designing Responsibly

Copyright, Sharing, and Kindness

When you create an animation, use drawings, sounds, photos, and music that you made yourself or that you are allowed to reuse. If a resource requires credit, give credit.

When you share a project, do not include private information such as your full home address, private passwords, or personal contact details.

If you use someone else's project as inspiration, explain what you changed or learned. In communities that allow remixing, respectful remixing means adding your own ideas and following the community rules.

Make Your Animation Easy to Follow

A good animation is not only technically correct. It should also be clear for the audience.

Check that:

Text is large enough to read.
Speech stays on screen long enough.
Important characters are easy to see.
Sound is not painfully loud.
Motion is not so fast or flashing that it becomes uncomfortable.
The viewer can understand when the animation starts and ends.

Interactive Tasks

Quiz: Test Your Knowledge

What is a sprite in a coded animation? (A picture or character controlled by code) (!A password for opening the project) (!A sound played at the end) (!A folder that stores homework)

What does a loop do? (Repeats one or more instructions) (!Deletes every sprite) (!Turns pictures into passwords) (!Stops all code from running)

Why are costumes useful in animation? (They can show different appearances of one sprite) (!They make the computer screen larger) (!They replace all events) (!They remove the need for timing)

What usually happens when x increases? (The sprite moves to the right) (!The sprite becomes quieter) (!The sprite changes its name) (!The backdrop disappears)

What usually happens when y decreases? (The sprite moves downward) (!The sprite moves to the right) (!The sprite becomes larger) (!The project restarts)

What is an event in programming? (A signal that can start a script) (!A drawing tool for making circles) (!A list of every costume) (!A type of computer screen)

Why is a storyboard helpful? (It helps plan scenes before coding) (!It automatically fixes every bug) (!It makes all animations the same speed) (!It removes the need for sprites)

What does debugging mean? (Finding and fixing problems in code) (!Adding random blocks to a project) (!Copying every script twice) (!Turning off the computer immediately)

How can you make a costume animation slower? (Add a longer wait between costume changes) (!Delete the starting event) (!Move every block to a new sprite) (!Remove all pictures from the project)

Which choice is a responsible way to use media? (Use media you created or have permission to reuse) (!Copy any image without checking) (!Share private passwords with viewers) (!Hide the names of project partners)

Memory Game

Sprite	A picture or character controlled by code
Costume	One visual appearance a character can switch to
Event	A signal that starts an action
Loop	Code that repeats instructions
Coordinate	A value that helps describe position
Debugging	Finding and fixing problems in code

Drag and Drop

Match the correct terms.	Topic
Starts a script after something happens	Event
Repeats a group of instructions	Loop
Changes how a sprite looks	Costume
Plans scenes before coding	Storyboard
Finds and fixes coding problems	Debugging

Match each description with the correct coding idea.

Crossword Puzzle

Sprite	What do we call a picture or character controlled by code?
Costume	What is one visual appearance of a sprite called?
Sequence	What is an ordered set of instructions called?
Repeat	Which word names an action that happens again?
Debugging	What is the process of finding and fixing coding problems?
Backdrop	What is the background of a Scratch stage called?

LearningApps

Cloze Text

Open-Ended Tasks

Easy

Flipbook animation: Draw a six-frame paper flipbook in which one shape moves from one side of the page to the other, then explain how the small changes create motion.
Sprite design: Create a character with two costumes that show a simple change such as blinking, waving, or stepping, then test the costume switch.
Sequence challenge: Build a five-action animation and write the actions in order before coding them.
Coordinate hunt: Place a sprite in four different stage positions and record whether x and y increase or decrease as it moves.

Standard

Walking cycle: Code a sprite to walk across the stage by combining movement, costume changes, waits, and a loop, then adjust the speed after testing.
Animated conversation: Create a short conversation between two sprites using events, timing, and readable speech bubbles.
Stop motion: Photograph a small object in at least eight slightly different positions, import or arrange the frames in a digital project, and add suitable timing.
Animation interview: Interview a classmate, teacher, artist, or programmer about how they plan creative digital work, then present three useful ideas you learned.

Advanced

Interactive animation: Create a scene in which at least two different keys or clicks cause different animated responses.
Scrolling background: Build the illusion of travel by moving background elements while the main character stays near the center, then explain how the illusion works.
Science animation: Animate a process from science or mathematics, such as the water cycle, a food chain, or a geometric transformation, and check that the explanation is accurate.
Debugging documentary: Record a short screen video that shows one real bug in your animation, your testing steps, the change you made, and the final result.

Learning Assessment

Animation explanation: Explain how frames, costume changes, movement, and timing can each create or strengthen the appearance of motion, using an example from your own project.
Code reading: Study a short animation script provided by your teacher, predict what will happen, run it, and explain any difference between your prediction and the result.
Debugging strategy: Fix an animation in which a sprite starts in the wrong place and changes costumes too quickly, then justify each change you make.
Design transfer: Plan how you would change a one-character animation into an interactive scene controlled by the viewer, identifying the events and responses you would add.
Creative evaluation: Compare two versions of the same animation with different timing or movement and argue which version communicates the idea more clearly.
Responsible media use: Review the images and sounds in a project and explain which ones you made, which ones you have permission to reuse, and how you would give credit when needed.

Evidence of Learning

Evidence of learning can include your knowledge, your coding process, and the project you create.

Knowledge: You can explain sprites, costumes, frames, sequences, events, loops, timing, coordinates, backdrops, and debugging in your own words.
Skills: You can build and change a short script, use repeated actions efficiently, control a sprite's position, and test one change at a time.
Products: You can produce a storyboard, a working coded animation, and a short explanation of how your code creates movement.
Problem solving: You can identify a bug, describe what you expected, test a possible cause, and improve the code.
Communication: You can make movement, text, and sound clear enough for another learner to follow.
Transfer: You can use the same coding ideas in a new animation, story, game, science model, or digital-art project.

OERs on the Topic

You can explore the English Wikipedia article on Computer animation for broader background about how computers are used to create animated images.

You can also explore Scratch, Animation, Stop motion, Storyboard, Computer graphics, and Digital art to connect coding with art, storytelling, and technology.

Linked Learning Areas

Creating Animations with Code

aiMOOC Projects