More with Animation
Over the years, Flash has added tools that help you animate with even more precision and less work! In this section, we will look at techniques for automating and taking control of tweens.
Using Motion Presets
Flash now has some predesigned animations which may be applied to objects. These presets were recently added to Flash and allow for quick and easy animation of objects. Best of all, they are completely editable, so you may use them as a starter, and then modify the motion to fit your needs.
To see a motion preset in use, open the demo saved as BasicAnimation/demos/MotionPresets.fla. You will find a ball bouncing in. Notice the path and timing of the bounce on the stage. Creating this animation realistically from scratch would be quite time consuming and difficult to maintain a smooth appearance.
To create your own animation automatically using motion presets, follow these steps:
- Place an instance of a symbol in the starting position on the stage.
- With the Motion Presets Panel open, select the instance.
- Single-click on a preset and watch the preview in the panel.
- When you have found one you would like to try, click Apply.
Note: Some of the presets, including the 3D presets, require that the object be Movie Clip Symbols.
It is that easy! Depending on which preset you choose, it will add a certain number of frames to suit the animation. You may click to add keyframes to change any position, size, alpha, etc. You may also stretch or shrink the animation to fit your needs.
Filters may be added to instances of symbols and text instances. The process of adding a filter is as follows: single-click on the instance or text, and then look near the bottom of the Properties Panel for the heading Filters.
Click the Add Filter icon to add a filter. You may select Drop Shadow, Blur, Glow, Bevel, Gradient Glow, Gradient Bevel, or Adjust Color.
Each of these filters has several options which can be manipulated. And, as a bonus, if you adjust the filter at the beginning and end of any animation, Flash will tween the filter. The demo, which has a glow fading in and out, is saved as BasicAnimation/demos/Filters.fla.
As you have already seen, if the artwork has different positions at both the beginning and ending points of a Motion Tween, Flash adds the tween. This is true with transformation, too. Use either the Free Transform Tool or the Transform Panel to make changes to an object.
In the example shown below, saved as BasicAnimation/demos/Transformation.fla, the bike is skewed to the right slightly. By the last frame, two changes have taken place: (1) it has skewed back a bit toward the left and (2) the size has been reduced giving it the illusion of perspective.
Changing the Path of the Motion
Since the path of a tween is just a stroke, it can be manipulated like any other stroke. For example, you can use the selection tool to bend the path.
Swapping Tween Targets
If you have a tween on the stage that is already set up, you may easily change the symbol being tweened. Just click on the instance of the symbol and open the Properties Panel. Then click Swap... and browse to the new symbol.
Our animations so far have looked pretty good, but sometimes they can appear mechanical and not very natural. This is because the speed of the animation is uniform throughout the tween.
Imagine a car stopping and starting at a red light. As the car comes to a stop, it gradually slows down. And, as it starts again, it gradually increases speed. Flash calls this Easing, objects can ease into or out of animations.
Compare a regular tween (saved as BasicAnimation/demos/MotionTween-car.fla) to one with easing (saved as BasicAnimation/demos/MotionTweenEase-car.fla). Test both. Which looks more natural?
Using the Motion Editor
The Motion Editor Panel is a complicated one. It allows for precise manipulation of all properties of objects that are being tweened. The best place to start is to open a simple animation such as BasicAnimation/demos/MotionTween-car.fla. In this animation, the car moves across the screen. In other words, we are changing the value of its X property, or horizontal position.
In the screenshot below, the X Property is selected. Its value increases on the chart over time as the car moved.
Now, look at a more complicated tween. Open a file that uses one of the Motion Presets. (Ours is saved as BasicAnimation/demos/MotionPresets.fla.)
Notice in the screen shot below the Y Property is selected. Its position is going up and down as it bounces in.
Additional easing controls are available in the Motion Editor Panel. Scroll down to the bottom of the panel to find Color Effect, Filters and Easing. To add any of these, click the plus. It will apply to the selected object in the frame indicated by the playhead.
Easing is a little different than the other two in that after you have added an easing option, it will be available for selection by any of the properties in the motion editor.
The Motion Editor is just a different way to modify animations. You may choose to do your own animations on the stage. But, when you need precise control, the Motion Editor is helpful.
Animating 3D Motion
You already know about animating in two dimensions: X and Y. Flash can also animate the Z axis. There are two tools used specifically for 3D animation. They are the 3D Rotation Tool () and the 3D Translation Tool (). The 3D Rotation tool lets you spin the object in all 3 directions. The 3D Translation Tool slides the object to the left and right, and up and down (along the X, Y axes) and even forward and back (along the Z axis). Translation is the term used to move objects left, right and forward and back in 3D.
Open the demo saved as BasicAnimation/demos/3D-Tween.fla to work with a photo rotating in 3D.
If you click on either tool, you will see a special shape which gives you easy access to the X, Y, Z and X Rotation, Y Rotation and Z Rotation properties. Try them all!