Do you love writing stories and drawing characters with Tynker? Well, now you can make your projects even better by creating your own animated artwork.
Animation uses still images called frames to create movement. Here are some frames of a running horse animation:
With enough still images, animators can create the illusion of movement by displaying frames quickly, one-after-another:
Tynker’s new Animation Tool makes creating animations fast and easy!
Tynker’s Animation Tool
If you’d like to follow along, open Tynker Workshop using the +Create Project button on your dashboard and then select Blank Project. Now choose Add Actor and create a new one with the Drawing Tool. Or you can open an actor like the Coin (Add Actor > Media Library), which already has a series of costumes that create an animation.
On the right, notice a list of all the costumes for an Actor. This area has a bunch of handy features for previewing and controlling animations. Let’s take a look:
1. Preview Animation ▶️
Plays a video preview of your costumes in sequence.
2. Copy Costume
This creates a duplicate of the current costume. You can edit costumes to quickly create frames of an animation.
3. Click and Drag
Move costumes up-and-down to reorder the sequence of your costumes (frames)
4. Trash 🗑️
Discard a costume (frame).
You don’t need that many costumes to create an animation. In fact, you only need two!
Animate Between Two Key Frames
Start by drawing two key frames of your animation: The starting and the ending positions. Try to add frames that are in-between these two positions to create a smooth transition from one frame to the next. Use the Preview Animation button to see how it looks. Keep adding frames until you’re happy with the effect.
Consider the ideas of anticipation, follow-through, and exaggeration.
Don’t want to draw?
Don’t want to draw? You can make objects appear to shake and shudder.
Create costumes by duplicating the original with the Copy Costume button—then move the costume a little bit in a random direction, each frame, using the Selection tool.
The result is a jittery kind of animation:
Make a cloud move by and enhance the effect!
Make a Button Grow and Shrink
You don’t have to use an actor’s costumes to create an animation, either. This script will make a button grow, then shrink in response to getting clicked.
Make a Rollover Animation
Want your users to get a hint that they can click on a button? Use this conditional code, which adds a glowing effect on mouseover:
Make It Flash
The show and hide blocks can make simple animations, too. Here’s one that lets the player know that an enemy has been defeated by flashing:
Keep At It!
Here are some other ideas for improving your animations:
- Zoom in and out to get a closer look at your costumes. Use the (+) and (-) buttons in the Drawing Tool or the keyboard shortcuts. You can get close enough to see individual pixels and take fine-grained control of your art:
- Have an animation-style you want to mimic? Try watching the video as slowly as possible, frame-by-frame, to see how the artist achieved the effect
- Look up the “12 Rules of Animation” and practice with them (as described in The Illusion of Life, written by Disney animators Frank Thomas and Ollie Johnston)
- Want to draw realistic hands or people? Take photos and work from a reference
- Practice with pen and paper—but try out a tablet or touchscreen if you get a chance, too
- Look at flipbooks and stop-motion video for ideas of what’s possible with animation
Don’t forget you can import your artwork and photos into Tynker (Add Actor > File Upload).
Want to use this tutorial in your class? Go ahead. And if you make a cool animation that you’d like to share with the Tynker community, email us at email@example.com and we’ll post it in our next round of Tynker Toolbox.
Here are some other fun animated projects from the Tynker community to inspire you!
This dancing character is animated with move and turn blocks! Each part of the character is a separate actor, but each one has only a single costume. Do the Caipirinha Dance!
Watch the Pokemon Eevee evolve into new forms! This animation uses costume-switching.
Watch the dogs dance and hamsters DJ at the Animal Talent Show—then vote for your favorite performer. This animation uses costumes AND events to coordinate the action, which has an unexpected twist. Cool project!
This Street Fighter game has character selection, an opening animation, on-screen player controls, a CPU-controlled player, and custom fight moves. Impressive work!