Adobe LiveMotion Basics: Creating Animations

You probably saw them just about everywhere on the Internet, heck you’ve even seen them on this site, and they’re Flash Animations. Using either Macromedia Flash or Adobe LiveMotion creates this format. Flash animations are compact little animations of movies that run right on your desktop. You can apply content creation using this format to almost anything, banner ads, cartoons, slide shows, games, and even entire web pages. This tutorial is a basic primer for using Adobe System LiveMotion. The program is a bit complex and has a steep learning curve, but once you see the basics it is relatively easy to begin creating animations. This exercise will show you a few of the basics that encompass key features such as movement, rotation, opacity, and fading. By learning these basics you can start making your own animations.

1. Start LiveMotion.
2. Click File-> New.
3. Specify the pixel size of your animation.
4. Click Timeline -> Show timeline.

Here you see the basic layout of LiveMotion and it’s interface. The timeline is where all of the instructions on how your animations will behave are contained. Another important menu from here is the Window menu. This menu allows you to open control windows that allow you to modify settings such as color, font, opacity, and rotation.

We’ve selected a 468X68 banner size for this exercise, combining some of the key functions in a very simple step-by-step manner in order to show you how to use them. The goal is to have a square move from one end of the banner to the other, rotate, and fade out. A simple design, but using many key features that can be applied to most animations.

1. Click the Square tool on the Tool menu and create a square on the left edge of the banner.
2. Click the Position button to mark the start point..
3. Drag the black triangle timeline bar to the 3-second mark to set the animation length.
4. Move the black triangle to the opposite end of the banner

At this point if you click Play you will see a basic movement pattern move from one end of the banner to the other. Next we will have the square rotate as it moves.

1. Drag the timeline marker back to the beginning of the timeline. You should see the black square reverse to the first position.
2. Click on the Rotation button to set the rotation parameters for the object.
3. Click the Window menu, then click Transform.
4. Change the value from 0 to 360.
5. Drag the timeline to the 3-second mark.
6. Click in the empty square next to the Rotation button to add an end point.

Next, we will make the square fade as it rotates across the banner.

1. Make sure the timeline marker is back at the beginning of the sequence.
2. Click the Opacity button on the timeline.
3. Drag the timeline marker to the 3 second point.
4. Click the Window menu, then click Opacity.
5. Change the Object Opacity to 0%.