Getting Started
 Animation
 Optimization
 Interactivity
 Sound
 Physics
 Dynamic Content
 Player Scripting
 App. Scripting
 Additional Utilities

 LiveMotion™ 1

 Add a Tutorial

Object Animation: Simple Animation

Animation Basics

The basics of animation depends on two things, file size and smoothness of animation. The smoother the animation the bigger the file size will be. This tutorial talks about the basics of animations. How to create an animated object will be covered in a separate tutorial

You as the designer need to make the decision which is more important, file size or smoother animation. In most cases you can get an acceptable result between file size and smoother animation. Remember that larger file size means slower download speeds for your viewer so you really need to weigh the differences and know your viewers.

Generally speaking a frame rate of 12 fps is satisfactory for button animations and simple animations. Higher frame rates, such as 24 fps and 30 fps, make more complex animations smoother. Things such as screen transitions and splash screens flow better at higher frame rates.

We normally design for 30 fps and if the file size is too great we try 24 fps or slower. Actually, you really have to have a keen eye to notice differences between 20 fps and 30 fps, at least we don't notice that great of a difference.

Below is an example of an identical animation exported out at different frame rates. In this animation we used Position, Rotation, Scale, and Color Transitions. Feel free to play with them and create new animations of your own.

NOTE: As you can see from the animation examples higher frame rates mean larger file size. The file size being half the size of the frame rate is not always the case, it just worked out that way. Looking at each of the animations you will notice there is not much difference in each of the animations. So you decide which is best for you to use. Now we will look at creating a simple animation.

What can be animated?

What can be animated? A better question would be "What cannot be animated?" The reason is because almost anything can be animated. Objects, text, pictures, and many other things can be animated so it really is up to you do decide what you want to animate.

There are five main Transformations which are safe to use in your animations. These Transformations are as follows.

Position

This allows you to move an object in any direction you choose. You can move an object from one spot to another spot over a period of time that you choose. Setting a distance over a short period of time will give the appearance of a rapid motion. and a the same distance over a longer period gives an object a slower motion.

Opacity

Opacity is what you use to set the transparency of an object. You can use Opacity to fade an object in or out. Changing the Opacity over time does several things such as making objects suddenly appear or disappear. You can have an object appear slowly or quickly by varing the amount of time you set.

Rotation

Setting Rotation will allow you to animate the object to spin and flip. Keeping an object in one spot and changing the rotation over a period of time spins an object. Changing the Position and Rotating gives the appearance of an object flipping.

Skew

Skew is kind of hard to explain because you really need to play with this to get the effect you want. Essentially using the Skew Transformation warps the object. In the Properties Palette you have two ways to Skew an object.

Scale

Scale is the last of the regular Transformations. With scale you can change the size of the object over time. You can change the height and width of the object.

The following examples show you what you can do by combining two of the transformations. You can create your own combination by mixing various transformations. Combine two or more transformations at different start and end frames and you will be able to create some amazing animations.

Simple Position and Opacity together Example

Simple Position and Rotation together Example

Simple Position and Skew together Example

Simple Position and Scale together Example