Table of contents
- Why use the Motion Editor?
- Changing the rows and frame view
- Applying ease
- Linked properties
- Adding, removing, and navigating keyframes
- Spatial properties and the Motion Editor
- Adding or removing color effects, filters, and eases
- Modifying keyframes (control points) in graphs
- Editing curves
- Motion Editor control shortcuts
- Where to go from here
15 August 2011
A basic knowledge of the Flash Professional workspace.
You are probably already familiar with making minor edits to your animations in Adobe Flash Professional CS5. For example, you may have changed the position of a tweened instance to create a position tween and then edited its motion path, or you may have changed the scale or alpha transparency of the tweened instance to make it fade in and out or grow/shrink in size. The following sections explore how you can make other kinds of edits to customize your animation in other ways—most notably, with the Motion Editor.
The Motion Editor (Window > Motion Editor) is a large panel that may cover a hefty percentage of your screen's real estate. This may not be an issue if you have a dual-monitor setup or can function with an insane monitor resolution, but it could be an issue if you're working with one monitor or on a laptop. The following workspace options may help your animation workflow when space is a concern:
- Assign a keyboard shortcut to the Motion Editor. Create a new set (Edit > Keyboard Shortcuts or Flash > Keyboard Shortcuts) and then assign the custom shortcut such as Pause or Home . Resize the Editor so it fills the workspace and leave the Motion Editor floating. Open and close it when necessary using this shortcut.
- Create a Motion Editor workspace. Create a new workspace (Edit > Workspace > New) and a Timeline/Stage workspace, where each view is optimized for each area of the workspace. Assign keyboard shortcuts to each workspace, and toggle between workspaces as needed.
- Buy a second monitor. Just kidding! Well, sort of...
You can add an ease and adjust properties using the instance and Motion Property inspectors, and even add keyframes to your animation by making changes in the various controls across a tween span. However, there are several things that you can only achieve by using the Motion Editor:
- Add different ease presets or custom ease. You can only add Simple (Slow) ease using the Motion Property inspector. The Motion Editor lets you add different presets, add multiple presets, or create a Custom ease.
- You can apply eases to individual properties, and see the effects of these eases on individual property graphs.
- You can disable or remove easing from properties.
- Change individual control points (property keyframes) to roving or non-roving, either through a context menu or by dragging them onto one of the vertical frame boundaries.
- The Motion Editor is the only way to make certain kinds of animations, such as creating a curved path tween on an individual property by adjusting the curve on a property graph.
The Motion Editor contains a list of rows that provide information about all of the existing properties of the selected tween, and eases that are available to apply those properties. The Editor also has controls that let you modify the animation, and add new color effects, filters, or eases to the instance that you can then proceed to tween. Of course, it also contains a graph that lets lets you control the values at property keyframes across the tween span, and how Flash animates between those kefyrames using curves.
Using the Timeline
The Motion Editor contains a timeline much like the main Timeline in Flash: it has a playhead that you use to scrub through a tween, and frame numbers that span across the top so you know what frame you're on. You can scrub the playhead to view the animation or move the viewable frames forward or back on the timeline, or click a frame number to move the playhead to that position.
The Motion Editor contains hot text, which you can use to modify a keyframe or even add one, and set up the way the Motion Editor appears. The hot text in the Motion Editor works the same way as it does in other parts of Flash: you mouse over it until you see a double-ended arrow and then click and drag to adjust the value, or click the text and enter the value yourself. If a property keyframe does not exist at the playhead position, a new one is inserted with the value you enter in the hot text.
The hot text displays the current values of each property, and updates as you scrub the playhead to a new location.
Tip: You can hold the Shift key while dragging hot text to change values 10 units at a time.
Tooltips in the Motion Editor can be useful for quickly referencing a current value, frame number, or what a hot text value will adjust. When you drag a control point, the current value and frame position updates in the tooltip that appears over the graph. Tooltips are also helpful when you're starting to use the panel, because they can help you understand what a particular control is for.
If these tooltips get in the way and you want to turn them off, or you need to turn them on, you can toggle them by right/Control-clicking a graph (but not on a curve or control point), and choose Show Tooltips from the context menu.
When you click one of the property rows, the row height changes to the expanded row height. This height is controlled by the Expanded Graph Size hot text at the bottom of the Motion Editor, as shown in Figure 40. The rows that are collapsed are controlled by the Graph Size hot text, also shown in Figure 40.
The maximum number of frames you can see in the Motion Editor matches the number of frames in your tween span. You can see all of the frames at once, or a set number of frames that you can then scroll or scrub through. You set the number of frames you wish to see using the Viewable Frames hot text (see Figure 40).
The Ease column in the Motion Editor lets you apply eases to individual properties using a menu, and enable/disable an ease after you apply it using the check box next to the ease menu. You add eases to a tween using the Ease section of the Motion Editor, which can then be added to each property or a category of properties using the menu (see Figure 41). After you add easing to a property, its graph updates with a dashed curve to show the eased animation values.
To learn all about adding and applying eases to your animation, read "Adding preset and custom eases to motion tweens."
Some properties in the Motion Editor can be linked to each other (see Figure 42), so their values increase and decrease together proportionally when you modify them using hot text.
For example, you can link Scale X and Scale Y so the property keyframes scale together when you adjust the hot text, meaning the aspect ratio of the current instance will remain the same as you scale. Some of the filter properties can be linked together as well, such as Blur X and Blur Y for the Drop Shadow filter.
Buttons in the Keyframe column let you add and remove keyframes, and step to next or previous keyframes (see Figure 43).
These controls are based on the current playhead position: if the playhead is at a keyframe, then the Add/Remove keyframe button appears as a solid yellow keyframe, and you can click that button to remove it. If there is no keyframe at the present location, click the Add/Remove button (which appears hollow) to add a keyframe. The arrow buttons navigate to previous or next keyframes, although they skip roving keyframes, which are controlled by the motion model and not necessarily at frame boundaries.
You can also "Reset" the keyframes for a category, color effect, or filter using the Reset Values button (see Figure 44).
When you click this button, the values within the set of properties return to their original default values, or the value at frame 1 if you reset the Basic Motion or Transformation categories.
The x, y, and z properties control the position animations of your motion tweens, and are called spatial properties. These graphs control where your instance appears on Stage, and are used to generate the motion path on Stage. You can edit the motion path on the Stage to update the graphs in the Motion Editor, and vice versa. To enable stage editing of spatial properties, it is necessary for the properties to add keyframes to all graphs at the same time. If you change what frame a keyframe resides on, both keyframes move together.
Tip: Because the motion model has a lot of control over the spatial property graphs, handles are not available on the property keyframes in these graphs because they're controlled by Flash (you can hold Alt/Option and change a control point between a corner and smooth point). You should try to edit your motion paths on Stage for the best results.
Only the x, y, and z property graphs can have roving keyframes, but not all position tweens use roving keyframes. Roving keyframes appear as circles in a property graph (see Figure 45).
The Motion Editor makes it easy to add color effects, filters, and eases to the tweened instance. The Color Effects, Filters, and Eases category contain Add and Remove menus where you can select the effects, filters, and eases you want to apply to the instance (see Figure 46). The Remove menu contains the effects, filters, and eases already applied that you can then remove.
Note: You cannot remove the Simple (Slow) ease from the Eases category, because Flash uses this ease for the Ease setting in the Motion Property inspector.
Tip: You can also add color effects and filters for a selected instance using the Property inspector. You can adjust the properties at the current frame using controls in the Property inspector, and a keyframe is automatically added.
After you add color effects, filters and eases to the instance using either the Motion Editor or the Property inspector, the properties appear in the Motion Editor so you can adjust the tweens using hot text or graphs.
If you're interested in using eases, definitely check out "Adding preset and custom eases to motion tweens" because you'll learn a lot about them if you read it.
In the Motion Editor, you find a bunch of graphs that have circles and squares within them that represent the property keyframes that you add to a tween.
When a control point is deselected, it is black, and when you select them they turn green (see Figure 47).
Note: There are also circles that are black when deselected and green when they're selected. These only live in the x, y, and z property graphs and are called roving keyframes. See "Using roving keyframes" for more information.
You can drag control points up and down to change their values, or left and right to move them from one frame to another. You can also select multiple control points to adjust them simultaneously.
Control points can be added in the Motion Editor or by making changes to a tweened instance in other parts of Flash, such as on the Stage, in Property inspectors, in the Transform panel, and so on. You can add them in the Motion Editor using the Add/Remove Keyframe button or using the Control/Command modifier key and clicking a curve.
A control point can be a smooth point or a corner point, which refers to how the curve passes through the control point.
As discussed earlier, the Motion Editor shows time horizontally on a graph, represented in frames. Values for each property are represented vertically on each graph. Therefore, how steep the curve controls how fast the rate of change occurs in the graph (see Figure 48).
Curves can be copied and pasted from and to all properties, except you can only copy (not paste) from x, y, and z (spatial properties). You can also copy and paste a custom ease curve. Copy and pasting curves is a great way to make linked property curves match exactly.
The following key modifiers can be used in the Motion Editor to modify your animations:
- Add a control point: Control/Command-click the curve or dashed line on the graph.
- Remove a control point: Control/Command-click a control point.
- Select multiple control points on a graph: Hold Shift and click each control point.
- Convert a control point between smooth and corner: Alt/Option-click the control point to extend or pull in the handles of a control point. This works on all control points except on the x, y, and z (spatial) properties.
- Move a curve up and down on a graph without changing the keyframes time values: Alt/Option-drag the curve between any two control points.
- Separate handles on a control point: Alt/Option-drag a handle. This makes the handle move independently. Release the Alt/Option key and drag the opposite handle past 180 degrees to make both move together again.
- Move a control point to a different frame and retain its value: Select the control point and then hold Shift while dragging it to a new frame.
- Zoom control in the graphs: Hold the Alt key while using the mouse scroll wheel to change the number of viewable frames in the Motion Editor.
- Pan the graphs: Press and hold the Spacebar, and then drag the graphs when you see the hand cursor.
- Horizontally scroll the graphs: Hold the Shift key and use the mouse scroll wheel to horizontally scroll.