Why use the Motion Editor?

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.

Changing values

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.

Referencing tooltips

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.

Changing the rows and frame view

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.

Figure 40. Control the collapsed and expanded row height using these hot text controls. You can also set the number of viewable frames (the hot text to the right).

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).

Applying ease

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.

Figure 41. Add an ease to your animation, and then apply it to properties. The bounce ease was added to the Eases sections; you can apply it to a category using the menu in the Ease column. Enable and disable the ease to see its affect on your animation using the checkboxes in the Ease column. The green dashed line in the Y property represents how the animation will actually appear on the Stage (the actual tweened values).

To learn all about adding and applying eases to your animation, read "Adding preset and custom eases to motion tweens."

Linked properties

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.

Figure 42. Link Scale X and Scale Y so your instance maintains the same aspect ratio. Click the icon to unlink the two properties.

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.

Adding, removing, and navigating keyframes

Buttons in the Keyframe column let you add and remove keyframes, and step to next or previous keyframes (see Figure 43).

Figure 43. Use the hollow or yellow diamond button to add and remove keyframes, or the arrow buttons to move to next or previous keyframes in a graph.

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).

Figure 44. Use reset buttons that look like this to reset the values for a category, color effect, or filter.

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.

Spatial properties and the Motion Editor

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).

Figure 45. The x and y properties have roving keyframes between the first and last property keyframes. The rotation graph has non-roving keyframes.

Page 2 of 5

Previous Page

Next Page