The Creative Toolbox: Animate With Style In LiveMotion

George Penston

Producing engaging and intricate animations, whether animated GIFs or in Flash .SWF format, has become something expected of the everyday Web designer/producer. Fortunately, tools such as Adobe LiveMotion have appeared on the scene to make these formidable tasks not only much easier but perhaps even enjoyable.

Creating impressive animations using LiveMotion is fairly easy even if you stick to the basics, but learning to exploit the software’s less obvious features and tools will help you create animations quicker and with fewer hurdles. The text animation we’ll create below is nothing difficult or fancy, but it should serve as a good example of what can be achieved in short order when you use LiveMotion’s capabilities intelligently.

Type that Moves You
To introduce a few not-so-obvious LiveMotion features, we’ll create a fairly simple text animation. If you want a peek at what we’re creating, scroll to the bottom of the page: In short, we’ll animate the characters of the word “myopia” so that the word pops onto the screen one character at a time.

LiveMotion presents you with a tremendous amount of control over type. Several aspects of text, including font face, size, tracking, and content, can be controlled via the Timeline, not to mention other features that present themselves when working with single characters. To begin checking out these options firsthand, we’ll create a new file and enter our text.

1. Open a new document in LiveMotion.

2. Using the Type tool, Enter the word “myopia” and give it a healthy point size (36-48). Then apply your favorite color to it via the Color palette.

3. Open up the Timeline window (Timeline > Show Timeline Window), so that you can see what’s going on here. LiveMotion automatically names each object for you with a close approximation of the color you’ve selected along with the type of object, such as Red Ellipse or Deep Yellow-Green Hexagon. Type objects use the content of your type. In this case, the label should be something like “Blue-myopia”.”

Breaking It Down
To apply effects to individual letters, we need the ability to select and act upon each character. LiveMotion’s Break Apart command gives us just the feature we need. It automatically breaks a word into separate, individual characters for further editing. In these next few steps, we’ll do just that.
Then we’ll select the first letter so that we can operate on it separately. (Hint: We’ll use styles later to save ourselves some trouble as we animate other letters.)

4. With your Text object still selected, choose Object > Break Apart Text. Your Text block becomes individual letters, each with its own separate attribute controls in the Timeline window.

5. Select the first layer with the letter “m” in the Timeline window and click the twistdown icon to view the Transform attributes.

Keyframing the Moment
We want to add some cool effects to our animation — such as giving letters the appearance of going out of focus as they shrink into the distance — but before we can do this we must establish some keyframes.

Keyframes are the foundation of practically every animation application, including LiveMotion. You define a keyframe wherever you wish an attribute to change from its original setting in an animation, whether the attribute is motion, color, opacity, or type tracking. As with Adobe After Effects, dragging the time marker to a new position and then manipulating the object in LiveMotion automatically creates new keyframes for the attributes you have changed. The software will also fill in the frames that go in between these keyframes — a process referred to as tweening.

Here we won’t change any attributes just yet. Instead, we’ll simply designate starting keyframes so that LiveMotion will automatically tween when we do change attributes.

6. Add a new keyframe for both the Object Opacity and Scale by clicking the Stopwatch icon beside each.

7. Click the twistdown to view the attributes for Layer 1. Notice that the only available attribute thus far is the object’s color.

Emerging Options
To move on to our advanced effects, we need to get at certain attributes not available in the Timeline by default. Forcing these veiled attributes to show themselves in the Timeline is something of a trick in itself.

LiveMotion avoids overloading you with way too many choices by only presenting them in the Timeline only if you choose to manipulate that attribute first. This is a weird thing, since you never really know what you can control until you try to control it (or until you tweak it by mistake). This is an odd approach, but consider the alternative of weeding through 15 to 20 possible options that you may not care about.

Here we want to cause the type to appear crisp at first and then to become softer over time. First we need to get the Layer’s Softness attribute to reveal itself.

8. Choose Window > Layer (not to be confused with Object Layers) to bring up the Layer palette and change the Softness to something other than zero.

9. Click the Softness stopwatch in the Timeline window to set a keyframe and then change the softness back to zero.

Making Your Point
Now that we have designated all the attributes we want to change in our animation, all we have to do is go to the ending point and change them. This really is as easy as it sounds.

10. Move the time marker to 2 seconds.

11. Drag one of the solid handles of the selection box around the “m” and scale it down about 50 percent. Notice how LiveMotion has automatically set a new keyframe in the Transform attribute.

12. Select the Layer palette and change Softness to 7.

13. Select the Opacity palette and chance the Object Opacity to 30.

Automation with Style
Thus far we’re moving right along with our animation, but we’ve operated on only one letter — the “m.” Now we’ll look at an easy method of applying that animation to our other letters. One way of going about this is by creating a style out of the first letter and then applying that style to the rest. Styles are a great way to store an appearance of any object — as well as its animation — and then apply that appearance and animation quickly to other objects, at any given time. This is the same type of style feature found in many design applications nowadays, including nearly every Adobe program, and it makes automating repetitive tasks fast and easy — whether you’re working with letters or other objects.

14. Set the time marker back to 0 seconds, where the “m” should be completely sharp. This should make the letter easier to select.

15. Open up or bring to front the Styles palette under the Window menu.

16. Drag the “m” over to the Styles palette. You are presented with a dialog asking what options you want to save with the style. Click on all the checkboxes available to you. This allows all of the various attributes and animation effects to come along for the ride. Give your style an appropriate name.

17. Shift-select or marquee-drag select the remaining letters. Select your style in the Styles palette and click the Apply button.

18. For added effect, select each letter individually and drag its timespan a bit to the right to create a stagger pattern.

19. Preview your animation in your browser (Command/Ctrl 0) and revel in your glory.

This is just a small taste of what is possible in LiveMotion with very little effort on your part, and the same concepts we explored here can be applied to animations of your own making. One of the best qualities of LiveMotion is how easy it is to create a compelling animation with little knowledge of the program, but if one gains just a bit more knowledge, it’s possible to create even more interesting animations — in less time and with less effort.”