{"id":20402,"date":"2023-06-29T09:52:25","date_gmt":"2023-06-29T16:52:25","guid":{"rendered":"https:\/\/www.tynker.com\/blog\/?p=20402"},"modified":"2023-09-28T08:23:21","modified_gmt":"2023-09-28T15:23:21","slug":"animation-tool","status":"publish","type":"post","link":"https:\/\/www.tynker.com\/blog\/animation-tool\/","title":{"rendered":"Tynker Toolbox: The Animation Tool"},"content":{"rendered":"\n

Do you love writing stories and drawing characters with Tynker? Well, now you can make your projects even better by creating your own animated <\/em><\/strong>artwork. 
<\/p>\n\n\n\n

Animation uses still images called frames <\/em><\/strong>to create movement. <\/strong>Here are some frames of a running horse animation:  <\/p>\n\n\n\n

\"Four
Credit: Eadweard Muybridge (Library of Congress)<\/em><\/strong>
<\/figcaption><\/figure>\n\n\n\n

With enough still images, animators can create the illusion of movement by displaying frames quickly, one-after-another: 
<\/p>\n\n\n

\n
\"An<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Tynker\u2019s Animation Tool makes creating animations fast and easy!<\/p>\n\n\n\n

How to Make Your Own Animated Character<\/h2>\n\n\n\n

If you\u2019d like to follow along, open Tynker Workshop by visiting Project > +Create Project<\/strong> in your dashboard. Choose Blank Block Coding Project<\/strong>. Now choose Add Actor<\/strong> and create a new one with the Drawing Tool<\/strong>. Or you can open an actor like the Coin (Add Actor > Media Library<\/strong>), which already has a series of costumes that create an animation. 
<\/p>\n\n\n\n

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\u2019s take a look:
<\/p>\n\n\n

\n
\"Tynker's<\/figure>\n<\/div>\n\n\n

1. Preview Animation \u25b6\ufe0f <\/h3>\n\n\n\n

Plays a video preview of your costumes in sequence.<\/p>\n\n\n\n

2. Copy Costume <\/h3>\n\n\n\n

This creates a duplicate of the current costume. You can edit costumes to quickly create frames of an animation.<\/p>\n\n\n\n

3. Click and Drag<\/h3>\n\n\n\n

Move costumes up-and-down to reorder the sequence of your costumes (frames)<\/p>\n\n\n\n

4. Trash \ud83d\uddd1\ufe0f <\/h3>\n\n\n\n

Discard a costume (frame).
<\/p>\n\n\n\n

What Is Two-Frame Animation?<\/h2>\n\n\n\n

A two-frame animation is like having two pictures that you show one after the other really fast. When you do this, it looks like something is moving or changing. For example, you could have a picture of a smiley face, and then in the next picture, the smiley face winks. When you flip between these two pictures quickly, it seems like the smiley face is winking, even though it’s just two pictures! That’s how two-frame animations work, making things seem like they’re moving or changing with just two pictures.<\/p>\n\n\n\n

You don\u2019t need that many costumes to create an animation. In fact, you only need two!<\/em>
<\/p>\n\n\n

\n
\"A<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

How Do You Make a Custom Animation? <\/h2>\n\n\n\n

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 <\/strong>button to see how it looks. Keep adding frames until you\u2019re happy with the effect. 
<\/p>\n\n\n

\n
\"Codey<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Consider the ideas of anticipation<\/em><\/strong>, follow-through<\/em><\/strong>, and exaggeration<\/em><\/strong>. <\/p>\n\n\n\n

What Are the Two Types of Frames in Animation?<\/h2>\n\n\n\n

In animation, there are two important kinds of frames. The first type is called “keyframes.” Keyframes are like important snapshots that show how something should look at specific times in the animation. They help us figure out the main poses and timing.<\/p>\n\n\n\n

The second type is “in-between frames” or “tween frames.” These frames come between the keyframes and help make the animation smooth. They fill in the details between the key poses and make things move nicely.<\/p>\n\n\n\n

So, keyframes are like the big moments, and in-between frames make everything in between those moments look good in an animation.<\/p>\n\n\n\n


<\/p>\n\n\n\n

Camera Shake<\/h2>\n\n\n\n

Don\u2019t want to draw? You can make objects appear to shake and shudder. 
<\/p>\n\n\n\n

Create costumes by duplicating the original with the Copy Costume<\/strong> button\u2014then move the costume a little bit in a random direction, each frame, using the Selection <\/strong>tool. 
<\/p>\n\n\n

\n
\"The
The Selection Tool<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

The result is a jittery kind of animation:


<\/p>\n\n\n

\n
\"Camera<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Make a cloud move by and enhance the effect!
<\/p>\n\n\n

\n
\"Clouds<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Digital Tracing Paper: The Onion Skin Tool<\/h2>\n\n\n\n

Drawing your own animation by hand? You can use the Onion Skin tool to show how nearby frames of animation look. This tool is like digital tracing paper! 
<\/p>\n\n\n\n

Follow along to see how it works. To draw a new actor yourself, go to Add Actor > Drawing Tool<\/strong>. 
<\/p>\n\n\n\n

Then let\u2019s suppose you\u2019ve already drawn a single frame, like this dog, that you\u2019re happy about and ready to start animating. 
<\/p>\n\n\n

\n
\"First<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Let\u2019s add a few frames of animation\u2014so that this dog wags his tail. First, copy the starting costume using the Copy Costume<\/strong> button. 
<\/p>\n\n\n

\n
\"Copy<\/figure>\n<\/div>\n\n\n

Then switch to your new costume, erase the parts you want to change\u2014for us, that\u2019s the dog\u2019s tail. <\/p>\n\n\n

\n
\"Frame<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then click the Onion Skin<\/strong> button: 
<\/p>\n\n\n

\n
\"The<\/figure>\n<\/div>\n\n\n

Just like real-life tracing paper, this shows a translucent overlay of nearby frames, so you can so you use it as guidelines for your new frame of animation. 
<\/p>\n\n\n

\n
\"Onion<\/figure>\n<\/div>\n\n\n

Draw the tail of the dog in a slightly different spot for each successive frame, using the Onion Skin<\/strong>, Copy Costume<\/strong>, and Animation Preview <\/strong>tools, as you work. The result can be smooth motion like this: <\/p>\n\n\n

\n
\"A<\/figure>\n<\/div>\n\n\n

Want to learn how to make animations like this? Check out the complete video tutorial to Create Your Own Virtual Pet<\/strong><\/a>. 
<\/p>\n\n\n\n

Make a Button Grow and Shrink<\/h2>\n\n\n\n

You don\u2019t have to use an actor\u2019s costumes to create an animation, either. This script will make a button grow, then shrink in response to getting clicked. <\/p>\n\n\n\n


<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Make a Rollover Animation <\/h2>\n\n\n\n

Want your users to get a hint that they can click on a button? Use this conditional code, which adds a glowing<\/em> effect on mouseover: <\/p>\n\n\n

\n
\"Rollover


<\/figcaption><\/figure>\n<\/div>\n\n
\n
\"Rollover

Hat Tip: Inspired by Scratch Team<\/a>. \ufeff<\/em><\/strong> <\/figcaption><\/figure>\n<\/div>\n\n\n

Make It Flash<\/h2>\n\n\n\n

The show <\/strong>and hide <\/strong>blocks can make simple animations, too. Here\u2019s one that lets the player know that an enemy has been defeated by flashing<\/em>: 
<\/p>\n\n\n

\n
\"Show<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Keep At It!<\/h2>\n\n\n\n

Here are some other ideas for improving your animations: 
<\/p>\n\n\n\n