Video Game Design and Development

Encouragement, advice, and support for aspiring game designers.

  • Schools
    • Online Schools
    • Game Design School Rankings
    • Game Design Majors
    • Graphic Design Schools
    • Canada Game Design Schools
    • Art Schools in The USA
  • Development
    • Game Programming Languages
    • Game Development Software
    • Texture Packager
    • Roblox Coding 101
    • Gaming in C ++
    • Video Game Engines Guide
    • How to Build a Game Engine
    • Unreal Game Engine
    • Unity vs Unreal
    • Unity vs Godot
    • Java
    • Cross Platform Games
  • Careers
    • Become a Game Designer
    • Education Requirements
    • Geme Design Document
    • Video Game Ideas
    • 3D Modeler
    • Game Artist
  • Animation
    • Animation School Rankings
    • 2D Animation Software
    • New York Animation
    • California Animation
    • Animation in Canada
You are here: Home / Animation / Tweeining Definition and Animation Tutorial

Tweeining Definition and Animation Tutorial

Inbetweening
We’re pretty spoiled when it comes to great animation. For over one hundred years, we have been exposed to some of the most talented artists and most impressive works of animation in our history.

What makes them so great? Some may say it’s the drawing skills of the artists. Others say things like the top-notch voice acting plays a role. What if I were to tell you that it was none of the above? What if I told you it was tweening that made animation so iconic?

Table of Contents:

  • What Does Inbetweening Mean?
  • Inbetweening Animation
    • Traditional Animation
    • Frame Frequency
    • Digital Animation
  • Steps to A Perfect Tweening Using Adobe Animate
    • Step 1: Create
    • Step 2: Edit
    • Step 3: Check and Finalize
  • Conclusion

What Does Inbetweening Mean?


Inbetweening refers to the intermediate frames ‘in-between’ others to animate aspects of a scene. The frames that do the heavy lifting in terms of tweening are called keyframes. These keyframes, when properly utilized and implemented, give the impression of sleek, smooth movement.

Inbetweening Animation


Inbetweening, rightly so, has a long and celebrated history in animation. Any animation you see has tweening, whether it’s the Lion King or your favorite Internet cartoon.

Let’s look at some crucial aspects of inbetweening animation that make it one of the cornerstones of art.

Traditional Animation


Traditional, hand-drawn animation from the good old days had a pretty solid system in place to make animating a bit easier.

The key animators would draw these keyframes, then hand the finished frames off to someone else, called an ‘inbetweener.’ The inbetweener pulls everything together, cleaning up rough edges and animations, along with doing some revisions of their own.

This made the workflow as an animator smoother and less of a headache. Obviously, not every team or individual has the resources or manpower to have an inbetweener help them out.

Frame Frequency


Frame frequency refers to frame rate, or how often a number of frames appear. Something with a low frame rate is choppy, while something with high frame rates seems smoother. Therefore, having many keyframes in your animation makes it seem more fluid and gives the illusion of movement.

However, if you skimp on keyframes, your work will look janky and unrefined. It may even seem like it’s not even animation, to begin with.

Digital Animation


Digital animation is where the term ‘keyframes’ gets dropped, substituting for ‘tweens.’

The beauty of digital animation and innovation and greater capabilities from the artist is the automated or more straightforward process of creating tweens and implementing them.

Let’s take a look at how to create a solid tweening animation.

Steps to A Perfect Tweening Using Adobe Animate


Inbetweening
If we were to use Adobe Animate (which any aspiring animator should be), the steps to create a sleek, seamless tweening animation is actually quite simple.

But hold on! You need to know just a few aspects like terminology and what specific functions do.

  • The Timeline
    • This is where all of your animations are. It’s the overall timeline of your project.
  • The Tween Span
    • The tween span is the period of time where objects within a scene change. For example, the tween span consists of frames in which a character’s legs move.

Step 1: Create


Once you have your two separate frames (without a keyframe), the next step is to create said keyframe. To do so in Adobe Animate, you simply click on the asset or graphic, right-click, then select Create Motion Tween.

Step 2: Edit


Once you have selected where you want to insert keyframes and what they are, you need to do a bit of surgery on the animation timeline.

Check the ‘stage,’ making sure that the desired duration of animation is correct, along with whatever object or graphic you are inserting.

Step 3: Check and Finalize


After you are done editing and deliberating, go ahead and check if the tweening animation worked out as you intended. You can do this with the ‘onion skin’ feature, which allows you to see several frames at once. This is perfect for ensuring your principal animation, along with keyframes, are in perfect sync.

Adobe Animate is only one of the options you have at your disposal. There are quite a few fantastic animation programs with similar modes of creating a tweening animation:

  • Blender
  • Pencil2D
  • Krita
  • Cinema 4D
  • Synfig
  • Toonz

Conclusion


There you have it. That’s why tweening animations are some of the most important aspects of any form of animated media.

Without them, you’d be watching a choppy, unintelligible mess. Bugs Bunny would be about to bite his carrot in one scene, with it being gone in the next. The lack of continuity would absolutely ruin animation.

Luckily for us, there are easy ways to engage in tweening animation to bring a little life to your work.

ShareTweet

Written by Bryan Wirtz - Updated on February 27, 2023

Popular Posts

indiana graphic design colleges
Indiana Animation Degree Programs:
illinois animation colleges
Animation Colleges in Illinois
animation threads on reddit
3 Reddit Threads for Aspiring Animators

About Bryan Wirtz

A graduate of Penn State University and a Philadelphia native, Bryan has been a gamer since day one. Using his vast experience of gaming, game culture, and all things tech, Bryan aims to deliver the most up-to-date and captivating game design content to readers.

Leave a Reply

Your email address will not be published. Required fields are marked *

Categories

  • Animation
  • Career
  • Engines
  • Experts
  • Gaming
  • Graphic Design
  • Learn
  • Technology
  • Video Game Design Education

GameDesigning.org is reader supported. When you purchase through links on our site, we may earn an affiliate commission. Learn More.

Recent Posts

  • How to Create Video Game Atmosphere
  • How to Make an Artist Portfolio Website
  • Hideo Kojima: Influential and Innovative Video Game Director and Writer

Site Info

  • About Us
  • Cite this Website
  • California Consumer Privacy Act
  • Editorial Guidelines


DMCA.com Protection Status

Connect

  • Contact Us
  • Facebook
  • Twitter
  • Pinterest

Copyright © 2023 · Privacy Policy · Terms · Earnings Disclaimer