Adobe After Effects – Classic Animation

Now you’ll look at the way all Flash animation was done prior to Flash CS4. When Adobe developers created a new workflow, they wisely left the old technique in the application to allow backwards compatibility.

  1. Move the playhead to frame 1 and select another plane.
  2. Right-click frame 30 in that plane’s layer and select Insert Keyframe.
  3. Right-click the plane’s start keyframe (frame 1) and select Create Classic Tween.
  4. Move the playhead to frame 30. Then move the plane to a new location and press Return (Enter) to play the animation.

    5. Flash indicates a classic tween by placing a black arrow between the tween’s keyframes.

Classic tweening involves more Timeline manipulation than the newer method. We like it because it forces us to explicitly add keyframes, so we really have to think about what we’re doing. On the other hand, that can get tedious. So sometimes we prefer the new (more After Effects-like) method in which you just right-click a movie clip, choose Create Motion Tween, and then adjust the movie clip on the Stage.

Timeline Editing

You’re probably tired of all your tweens only lasting 30 frames. Never fear: Lengthening a tween is as simple as dragging with your mouse.

  1. Continue working in the same file or open Classic_tween_done.fla from the Chapter_02 Project Files folder. To extend a tween, drag the end of its range to the right. Try this with a jet layer. (You can drag it to its left to shorten the animation, making it run faster).

    2. Notice that when you expand or contract a tween’s range, its keyframes move so that they always keep the same amount of relative space between each other. This is a great feature unless it’s not what you want.

  2. Shift-drag the end of a range to lengthen it without adjusting previously added keyframe positions. After doing this, your animation’s range will be longer, but its keyframes will remain in place.
  3. Move the playhead to the new end of the range and adjust the position of the movie clip on the Stage. This will add a new keyframe.
  4. Extend the map layer, the text layers, and the previously animated ships and planes so that they exist as long as the layer you just extended. You can extend layers by dragging their final frames or by right-clicking the frame you want to extend to and selecting the Insert Frame option from the context menu.

Moving Tweens

You can move an entire tween in time, space, or both. To move a position tween, simply select the movie clip, select the motion path, and then drag the motion path to a new location on the Stage.

This doesn’t work with classic tweens. To move a classic tween in space, you have to adjust all its keyframes, one by one.

To move an animation in time so that it starts and ends at a different point in time, drag the animation left or right in the Timeline by any frame in its span.

Again, this doesn’t work with classic tweens. To move a classic tween in time, click its first keyframe, Shift-click its last keyframe, and then drag from the middle.

Simple Easing

As an After Effects user, you’re probably familiar with “easing”—the animator’s term for changing velocity over time (accelerating and decelerating). If you’re like us, you rarely consider an animation complete until you’ve added easing. So you’ll be tickled pink to discover that Flash has two easing tools: one that is quick and simple; another that is complex and feature-rich. Let’s look at the simple tool first.

  1. Animate the rest of the vehicles (the ones not yet animated), using whichever tweening method you want and making sure all layers extend to the same length. Or you can open all_vehicles_tweened.fla from the Chapter_02 Project Files folder. Play the animation, watching one of the planes flying from point A to point B. Notice that it doesn’t accelerate (ease in) or decelerate (ease out).
  2. Click any frame within the tween’s span.
  3. In the Properties panel, scrub the Ease value (zero by default) to the left as far as it will go (-100).

    4. Note: When Easing Isn’t Easy

    Note that you can’t ease a tween for which you’ve chosen the Orient to Path option. If you want to use both Orient to Path and easing, make sure you ease first and orient second.

  4. Replay the animation, noting that the plane now accelerates. Scrub the Ease value to the right as far as it will go (100). Then replay the animation, noting that the plane now decelerates.

Just easing in is great for objects that start onstage and leave (ending in the gray area offstage); easing out is perfect for objects that start offstage and end onstage.

But a plane that moves between two points onstage should ease in at the start of its journey and ease out at the end. There’s no easy way to achieve this with the simple Ease value in the Properties panel, since it forces you to choose between accelerating and decelerating.

The Motion Editor

For more complete control over animation timing and easing, use Flash CS4’s new Motion Editor. Note that the Motion Editor only works with new-style tweening. If you want to ease a classic tween, you’ll have to use the ease option in the Properties panel.

  1. Select a plane or ship that is animating from point to point onstage.
  2. Switch to the Motion Editor by clicking its tab.
  3. To view more of the Motion Editor, drag downward on the border between it and the Stage.
  4. Scroll to the very bottom of the Timeline and locate Eases. Click the Add Color, Filter or Ease button.

    5. Tip: Create Your Own Ease

    After experimenting with the built-in ease types, you may want to create your own ease. To do so, choose Custom from the Add Color, Filter, or Ease menu. You can then manipulate the custom ease like a Bezier curve by Option-dragging (Alt-dragging) its control handles.

  5. From the menu, choose Stop and Start (Slow).
  6. From the X and Y Ease drop-down menus (in the Basic Motion area), choose the Stop and Start (Slow) ease you just added. (It’s only available because you added it in step 5.)
  7. Move the split between the Motion Editor and the Stage so that you can see the whole Stage.
  8. View the animation so you can see how it looks with the Stop and Start Ease.

Converting to a Symbol

You should have the hang of animating objects, so let’s animate some of the text. Specifically, let’s make the text Pacific Ocean slide in from the left.

There’s only one problem: Before you can animate any item in Flash, it must a) be on its own layer; and b) be a symbol in the Library (there is an exception to this rule [called Shape Tweening], which is discussed in a later chapter). Although the text is on its own layer, it’s not a symbol in the Library, which is really odd from an After Effects point of view. In After Effects, if you create anything, it automatically goes into the Project panel (e.g., if you make a solid, it’s listed along with all your other footage). Not so in Flash. Imported items (such as the Photoshop images in this lesson) get inserted in the Library, but artwork and text you create in Flash doesn’t. If you want to animate it, you have to manually add it to the Library. This is easy to do.

  1. Continue working in the same file or open easing_done.fla from the Chapter02 Project Files folder. Switch to the Timeline then select the text Pacific Ocean.
  2. Choose Modify > Convert to Symbol.
  3. In the Convert to Symbol dialog, give the new symbol a name, for example, Pacific Ocean. Choose Movie Clip for the type.

    4. The two other types are Graphic and Button. Graphic is an older form of Movie Clip (still available from early versions of Flash that didn’t yet include Movie Clip); Button is for interactivity. To work with buttons, you need to program them with ActionScript, which is explored in Chapter 13, “Creating Interactive Controls.”

  4. Select a Registration Point by clicking one of the small square icons. We like to click the Registration square in the upper-left corner, setting the movie clip’s registration at its top left. This simplifies X and Y coordinate calculations, letting us know that if we place an image at 10 (X) and 30 (Y), its top-left corner will be at those coordinates.

    5. Flash Registration Points are similar to After Effects anchor points. They place a pivot on your object that it rotates around. The Registration Point is also the origin for scaling and position changes. You can always change its location later. Click OK.

Pacific Ocean is now a movie clip symbol in the Library. You can animate it the same way you animated the boats and planes.

Creating a Symbol in the Library

You can add a symbol directly to the Library without first placing it on the Stage. For instance, say you wanted to animate the text ”News of the World.” You might not want that text onstage now, but you want it ready for you when you need it later. The solution is to type it directly into the Library.

  1. Click the New Symbol button at the bottom of the Library.
  2. In the New Symbol dialog, create a name (e.g., News of the World), select Movie Clip for the type, and click OK.

    3. Everything on the Stage vanishes because Flash takes you to a special “symbol editing” screen. You can return to your main animation by -clicking the Back button (or the text Scene 1) in the upper-left corner of the Stage (but don’t do that yet).

  3. Select the Text tool and click near the crosshairs in the middle of the screen. Type News of the World.
  4. In the Properties panel, adjust the text settings as desired.
  5. Click the Back button in the upper-left corner of the Stage.

News of the World is now a symbol in the Library, but it’s not on the Stage. You can drag it to the Stage when you’re ready (remember to first add a layer for it if you want to animate it).

In step 3, you clicked with the Text tool next to the crosshairs. Those crosshairs represent the Registration Point. To adjust the Registration Point, double-click the icon next to News of the World in the Library. (If you double-click its name, Flash will think you’re trying to rename it.)

This will take you back to symbol editing mode. You can drag the text to a new location so that it has a new positional relationship with its Registration Point (the crosshairs). Note that in Flash you move images around static Registration Points (in After Effects you’re more likely to move anchor points).

Click the Back button when you’re done editing the symbol.

Double-clicking a Symbol

If you want to edit a symbol (e.g., if you want to move it so its Registration Point is in a different place or if you want to change News of the World to News of the Universe), you have two options: You can double-click its icon in the Library, or you can double-click an instance of it on the Stage.

If you double-click a Stage instance, you’re not just editing that instance— you’re editing the original source symbol.

So, if you have three instances of the same symbol onstage and you double-click one of them and edit it, you’ll alter all three.

Double-clicking onstage allows you to edit a symbol without going into a special symbol editing mode. Using this technique, you can still see all the other items onstage while you’re editing. Double-clicking a symbol in the Library temporarily hides all other items. It’s a bit like double-clicking a layer in After Effects and opening a Layer tab. Click the Back button when you’re done editing.

Tip: Remember the Back Button

Whether you’re editing a symbol onstage or in the Library, remember to click the Back button when you’re done. Users commonly forget to do this because they think they’re editing their whole movie, but in fact they’re actually in symbol editing mode and just editing one symbol. Look for the Back button. If you see it, you’re in symbol editing mode.