What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

How to Create Motion (Shape Tween & Motion Tween) in Flash

Using Timeline effects

Adding a Timeline effect

Timeline effect settings

Editing a Timeline effect

Deleting a Timeline effect

About tweened animation

About frame-by-frame animation

About layers in animation

About creating keyframes

About representations of animation in the Timeline

About frame rates

Extending still images

Distributing objects to layers for tweened animation

New layers

Distributing objects to layers

Tweening instances, groups, and type

Tweening motion along a path

Applying custom ease in/ease out to motion tweens (Flash Professional only)

Compatibility with current ease in/ease out settings

Unsupported easing curves

Tweening shapes

Using shape hints

Creating frame-by-frame animations

Editing animation

Using onion skinning

Moving an entire animation

Using mask layers

 

Using Timeline effects

TOP

Flash includes prebuilt Timeline effects that let you create complex animations with a minimal number of steps. You can apply Timeline effects to the following objects:
  • Text
  • Graphics, including shapes, groups, and graphic symbols
  • Bitmap images
  • Button symbols

NOTE : When you apply a Timeline effect to a movie clip, Flash nests the effect within the movie clip.

 

Adding a Timeline effect

TOP

When you add a Timeline effect to an object, Flash creates a layer and transfers the object to the new layer. The object is placed inside the effect graphic, and all tweens and transformations required for the effect reside in the graphic on the newly created layer.

The new layer automatically receives the same name as the effect, appended with a number that represents the order in which the effect is applied, out of all effects in your document.

When you add a Timeline effect, a folder with the effect's name is added to the library, containing elements used in creating the effect.

To add an effect to an object:

  1. Do one of the following to add a Timeline effect:

    • Select the object to which you're adding the Timeline effect. Select Insert > Timeline Effects. Then select Assistants, Effects, or Transition/Transform from the submenu, and select an effect from the list.

    • Right-click (Windows) or Control-click (Macintosh) the object to which you're adding the Timeline effect. From the context menu, select Timeline Effects. Then select Assistants, Effects, or Transition/Transform from the submenu, and select an effect from the list.

    Effects available for the type of object you've selected appear as active menu choices.

  2. In the dialog box that appears for the effect, view the effect preview based on default settings. Modify the default settings as desired, and then click Update Preview to view the effect with the new settings. For more information, see Timeline effect settings.

  3. When the Timeline effect appears as desired in the preview window, click OK.

 

Timeline effect settings

TOP

Each Timeline effect manipulates a graphic or symbol in a specific way and allows you to change individual parameters for a desired effect. In the preview window, you can quickly see the changes made when you alter settings.

Motion effect name and description

Settings

Copy to grid

Duplicates a selected object by the number of columns and then multiplies the columns by the number of rows to create a grid of the elements.

  • Number of rows

  • Number of columns

  • Distance between rows, in pixels

  • Distance between columns, in pixels

Distributed duplication

Duplicates a selected object the number of times entered in the settings. The first element is a copy of the original object. The objects are modified in increments until the final object reflects the parameters entered in the settings.

  • Number of copies

  • Offset distance, x position, in pixels

  • Offset distance, y position, in pixels

  • Offset rotation, in degrees

  • Offset start frame, in frames across Timeline

  • Exponential scaling by x, y scale, in delta percentage

  • Linear scaling by x, y scale, in delta percentage

  • Final alpha, in percentage

  • Change color, select/deselect

  • Final color, in RGB hex value (final copy has this color value; intermediate copies gradually transition to it)

  • Duplication delay, in frames (results in pause between copies)

Blur

Creates a motion blur effect by changing the alpha value, position, or scale of an object over time.

  • Effect duration, in frames

  • Allow horizontal blur

  • Allow vertical blur

  • Direction of blur

  • Number of steps

  • Starting scale

Drop shadow

Creates a shadow below the selected element.

  • Color, in hex RGB value

  • Alpha transparency, in percentage

  • Shadow offset, in x, y offset, in pixels

Expand

Expands, contracts, or expands and contracts objects over time. This effect works best with two or more objects grouped together or combined in a movie clip or graphic symbol. Objects containing text or letters work well with this effect.

  • Expand duration, in frames

  • Expand, squeeze, both

  • Expand direction, to left, from center, to right

  • Fragment offset, in pixels

  • Shift group center by, x, y offset, in pixels

  • Change fragment size by, height, width, in pixels

Explode

Gives the illusion of an object exploding. Elements of text or a complex group of objects (symbols, shapes or video clips) break apart, spin, and arc outward.

  • Effect duration, in frames

  • Direction of explosion, upward to left, center, or right, downward to left, center, or right

  • Arc size, x, y offset in pixels

  • Rotate fragments by, in degrees

  • Change fragments size by, in degrees

  • Final alpha, in percentage

Transform

Adjusts the position, scale, rotation, alpha, and tint of the selected elements. Use Transform to apply a single effect or a combination of effects to create Fade In/Out, Fly In/Out, Grow/Shrink, and Spin Left/Right effects.

  • Effect duration, in frames

  • Move to position, x, y offset, in pixels

  • Change position by, x, y offset, in pixels

  • Scale, lock to equally apply change, in percentage, unlock to apply x and/or y axis change separately, in percentage

  • Rotate, in degrees

  • Spin, number of times

  • Times, counterclockwise, clockwise

  • Change color, select/deselect

  • Final color, in RGB hex value

  • Final alpha, in percentage

  • Motion ease

Transition

Wipes in or wipes out selected objects by fading, wiping, or a combination of both.

  • Effect duration, in frames

  • Direction, toggle between in (coming in) and out (going out), select up, down, left, or right

  • Fade, select/deselect

  • Wipe, select/deselect

  • Motion ease

 
Editing a Timeline effect

TOP

You edit Timeline effects using the Effect Settings dialog box.

To edit a Timeline effect:

  1. Select the object associated with the effect on the Stage.

  2. To open the Effect Settings dialog box, do one of the following:

    • In the Property inspector, click Edit.

    • Right-click (Windows) or Control-click (Macintosh) the object and select Timeline Effects > Edit Effect from the context menu.

  3. In the Effect Settings dialog box, edit the settings you want to edit, and click OK to apply your settings.

 

Deleting a Timeline effect

TOP

You use the context menu to delete Timeline effects.

To delete a Timeline effect:

  • On the Stage, right-click (Windows) or Control-click (Macintosh) the object that has the Timeline effect that you want to remove, and select Timeline Effects > Remove Effect from the context menu.

 

About tweened animation

TOP

Flash can create two types of tweened animation: motion tweening and shape tweening.

  • In motion tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then you change those properties at another point in time. You can also apply a motion tween along a path. See Tweening instances, groups, and type and Tweening motion along a path.

  • In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, creating the animation.

NOTE : To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. See Breaking apart groups and objects. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

Tweened animation is an effective way to create movement and changes over time while minimizing file size. In tweened animation, Flash stores only the values for the changes between frames.

To quickly prepare elements in a document for tweened animation, distribute objects to layers.

You can apply tweened animation to an object on a mask layer to create a dynamic mask. For information on mask layers.

 

About frame-by-frame animation

TOP

Frame-by-frame animation changes the contents of the Stage in every frame and is best suited to complex animation in which an image changes in every frame instead of simply moving across the Stage. Frame-by-frame animation increases file size more rapidly than tweened animation. In frame-by-frame animation, Flash stores the values for each complete frame. For information on frame-by-frame animations.

 

About layers in animation

TOP

Each scene in a Flash document can consist of any number of layers. As you animate, you use layers and layer folders to organize the components of an animation sequence and to separate animated objects so they don't erase, connect, or segment each other. If you want Flash to tween the movement of more than one group or symbol at once, each must be on a separate layer. Typically, the background layer contains static artwork, and each additional layer contains one separate animated object.

When a document has several layers, tracking and editing the objects on one or two of them can be difficult. This task is easier if you work with the contents of one layer at a time. Layer folders help you organize layers into manageable groups that you can expand and collapse to view only the layers relevant to your current task.

 

About creating keyframes

TOP

A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at significant points in the animation and let Flash create the contents of frames in between. Flash displays the interpolated frames of a tweened animation as light blue or light green with an arrow drawn between keyframes. Because Flash documents save the shapes in each keyframe, you should create keyframes only at those points in the artwork where something changes.

Keyframes are indicated in the Timeline: a keyframe with content on it is represented by a solid circle, and an empty keyframe is represented by an empty circle before the frame. Subsequent frames that you add to the same layer have the same content as the keyframe.

To create a keyframe, do one of the following:

  • Select a frame in the Timeline and select Insert > Timeline > Keyframe.

  • Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and select Insert Keyframe.

 

About representations of animation in the Timeline

TOP

Flash distinguishes tweened animation from frame-by-frame animation in the Timeline as follows:
  • Motion tweens are indicated by a black dot at the beginning keyframe; intermediate tweened frames have a black arrow with a light blue background.


     
  • Shape tweens are indicated by a black dot at the beginning keyframe; intermediate frames have a black arrow with a light green background.


     
  • A dashed line indicates that the tween is broken or incomplete, such as when the final keyframe is missing.


     
  • A single keyframe is indicated by a black dot. Light gray frames after a single keyframe contain the same content with no changes and have a black line with a hollow rectangle at the last frame of the span.


     
  • A small a indicates that the frame has been assigned a frame action with the Actions panel.


     
  • A red flag indicates that the frame contains a label or comment.


     
  • A gold anchor indicates that the frame is a named anchor.


     
About frame rates

TOP

The frame rate, the speed at which the animation is played, is measured in number of frames per second. A frame rate that's too slow makes the animation appear to stop and start; a frame rate that's too fast blurs the details of the animation. A frame rate of 12 frames per second (fps) usually gives the best results on the web. QuickTime and AVI movies generally have a frame rate of 12 fps, while the standard motion-picture rate is 24 fps.

The complexity of the animation and the speed of the computer on which the animation is being played affect the smoothness of the playback. Test your animations on a variety of machines to determine optimum frame rates.

Because you specify only one frame rate for the entire Flash document, it's a good idea to set this rate before you begin creating animation.

 

Extending still images

TOP

When you create a background for animation, it's often necessary that a still image remain the same for several frames. Adding a span of new frames (not keyframes) to a layer extends the contents of the last keyframe in all the new frames.

To extend a still image through multiple frames:

  1. Create an image in the first keyframe of the sequence.

  2. Select a frame to the right, marking the end of the span of frames that you want to add.

  3. Select Insert > Timeline > Frame.

To use a shortcut to extend still images:

  1. Create an image in the first keyframe.

  2. Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the right. This creates a span of new frames, but without a new keyframe at the end point.

 

Distributing objects to layers for tweened animation

TOP

You can quickly distribute selected objects in a frame to separate layers to apply tweened animation to the objects. The objects can be on one or more layers initially. Flash distributes each object to a new, separate layer. Any objects that you don't select (including objects in other frames) are preserved in their original positions.

You can apply the Distribute to Layers command to any type of element on the Stage, including graphic objects, instances, bitmaps, video clips, and broken-apart text blocks.

Applying the Distribute to Layers command to broken-apart text makes it easy to create animated text. The characters in the text are placed in separate text blocks during the Break Apart operation, and each text block is placed on a separate layer during the Distribute to Layers process. For information on breaking text apart.

 

New layers

TOP

New layers created during the Distribute to Layers operation are named according to the name of the element that each contains:

  • A new layer containing a library asset (such as a symbol, bitmap, or video clip) is given the same name as the asset.

  • A new layer containing a named instance is given the name of the instance.

  • A new layer containing a character from a broken-apart text block is named with the character.

  • A new layer containing a graphic object (which has no name) is named Layer1 (or Layer2, and so on), because graphic objects do not have names.

Flash inserts new layers below any selected layers in the Timeline. The new layers are arranged top to bottom, in the order in which the selected elements were originally created. For broken-apart text, the layers are arranged in the order of the characters, whether left-to-right, right-to-left, or top-to-bottom. For example, if you break apart the text FLASH and distribute it to layers, the new layers, named F, L, A, S, and H, are arranged top to bottom, immediately below the layer initially containing the text.

 

Distributing objects to layers

TOP

To distribute objects to layers, you select the objects in one or more layers and select Distribute to Layers from the Modify menu or from the context menu.

To tween distributed objects, follow the procedure in Tweening instances, groups, and type or Tweening shapes.

To distribute objects to layers:

  1. Select the objects that you want to distribute to layers. The objects can be in a single layer, or in several layers, including noncontiguous layers.

  2. Do one of the following:

    • Select Modify > Timeline > Distribute to Layers.

    • Right-click (Windows) or Control-click (Macintosh) one of the selected objects and select Distribute to Layers from the context menu.
       

Tweening instances, groups, and type

TOP

To tween the changes in properties of instances, groups, and type, you use motion tweening. Flash can tween position, size, rotation, and skew of instances, groups, and type. Additionally, Flash can tween the color of instances and type, creating gradual color shifts or making an instance fade in or out. To tween the color of groups or type, you must make them into symbols.  To animate individual characters in a block of text separately, you place each character in a separate text block.

If you apply a motion tween and then change the number of frames between the two keyframes, or move the group or symbol in either keyframe, Flash automatically tweens the frames again.
You can create a motion tween using one of two methods:

  • Create the starting and ending keyframes for the animation and use the Motion Tweening option in the Property inspector.

  • Create the first keyframe for the animation, insert the number of frames you want in the Timeline, select Insert > Timeline > Create Motion Tween, and move the object to the new location on the Stage. Flash automatically creates the ending keyframe.

When tweening position, you can make the object move along a nonlinear path.

To create a motion tween using the Motion Tweening option:

  1. Click a layer name to make it the active layer, and select an empty keyframe in the layer where you want the animation to start.

  2. To create the first frame of the motion tween, do one of the following:

    • Create a graphic object with the Pen, Oval, Rectangle, Pencil, or Brush tool, then convert it to a symbol. For more information on converting objects to symbols,

    • Create an instance, group, or text block on the Stage.

    • Drag an instance of a symbol from the Library panel.

  3. Create a second keyframe where you want the animation to end, and leave the new keyframe selected.

  4. Do any of the following to modify the instance, group, or text block in the ending frame:

    • Move the item to a new position.

    • Modify the item's size, rotation, or skew.

    • Modify the item's color (instance or text block only).

    To tween the color of elements other than instances or text blocks, use shape tweening.

  5. Click any frame in the tween's frame span and select Motion from the Tween pop-up menu in the Property inspector (Window > Properties).

  6. If you modified the size of the item in step 4, select Scale to tween the size of the selected item.

  7. To produce a more realistic sense of motion, you can apply easing to the motion tween you create. Flash provides two methods by which you can apply easing to a motion tween:

    You can specify an easing value for each motion tween you create using the Ease slider, or you can use the Custom Ease In/Ease Out dialog box (Flash Professional only) to more precisely control the speed of the motion tween.

    Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

    • To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a negative value between -1 and -100.

    • To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

    By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

    NOTE : If you want to use the Custom Ease In/Ease Out dialog box to produce a more complex change in speed within the tween's frame span.

  8. To rotate the selected item while tweening, select an option from the Rotate menu:

    • Select None (the default setting) to prevent rotation.

    • Select Auto to rotate the object once in the direction requiring the least motion.

    • Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations.

      NOTE : The rotation in step 8 is in addition to any rotation you applied to the ending frame in step 4.

  9. If you're using a motion path, select Orient to Path to orient the baseline of the tweened element to the motion path.

  10. Select the Sync option in the Property inspector to synchronize the animation of graphic symbol instances with the main Timeline.

    NOTE : Modify > Timeline > Synchronize Symbols and the Sync option both recalculate the number of frames in a tween to match the number of frames allotted to it in the Timeline.

  11. If you're using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

To create a motion tween using the Create Motion Tween command:

  1. Select an empty keyframe and draw an object on the Stage, or drag an instance of a symbol from the Library panel.

    NOTE : To create a tween, you must have only one item on the layer.

  2. Select Insert > Timeline > Create Motion Tween.

    If you drew an object in step 1, Flash automatically converts the object to a symbol and assigns it the name tween1.

  3. Click inside the frame where you want the animation to end, and select Insert > Timeline > Frame.

  4. Move the object, instance, or text block on the Stage to the desired position. Adjust the size of the element if you want to tween its scale. Adjust the rotation of the element if you want to tween its rotation. Deselect the object when you have completed adjustments.

    A keyframe is automatically added to the end of the frame range.

  5. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

    • To begin the motion tween slowly and accelerate the tween toward the end of the animation, drag the slider up or enter a value between -1 and -100.

    • To begin the motion tween rapidly and decelerate the tween toward the end of the animation, drag the slider down or enter a positive value between 1 and 100.

    By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.

    NOTE : If you want to use the Custom Ease In/Ease Out dialog box to produce a more complex change in speed within the tween's frame span.

  6. To rotate the selected item while tweening, select an option from the Rotate menu:

    • Select Auto to rotate the object once in the direction requiring the least motion.

    • Select Clockwise (CW) or Counterclockwise (CCW) to rotate the object as indicated, and then enter a number to specify the number of rotations.

      NOTE : The rotation in step 6 is in addition to any rotation you applied to the ending frame in step 4.

  7. If you're using a motion path, select Orient to Path to orient the baseline of the tweened element to the motion path.

  8. Select Synchronize to ensure that the instance loops properly in the main document.

    Use the Synchronize command if the number of frames in the animation sequence inside the symbol is not an even multiple of the number of frames the graphic instance occupies in the document.

  9. If you're using a motion path, select Snap to attach the tweened element to the motion path by its registration point.

 

Tweening motion along a path

TOP

Motion guide layers let you draw paths along which tweened instances, groups, or text blocks can be animated. You can link multiple layers to a motion guide layer to have multiple objects follow the same path. A normal layer that is linked to a motion guide layer becomes a guided layer.

In this example, two objects on separate layers are attached to the same motion path.

To create a motion path for a tweened animation:

  1. Create a motion-tweened animation sequence as described in Tweening instances, groups, and type.

    If you select Orient to Path, the baseline of the tweened element orients to the motion path. If you select Snap, the registration point of the tweened element snaps to the motion path.

  2. Do one of the following:

    • Select the layer containing the animation and select Insert > Timeline > Motion Guide.

    • Right-click (Windows) or Control-click (Macintosh) the layer containing the animation and select Add Motion Guide from the context menu.

    Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name.

  3. Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path.


     

  4. Snap the center to the beginning of the line in the first frame, and to the end of the line in the last frame.

    NOTE : For best snapping results, drag the symbol by its registration point.

  5. To hide the motion guide layer and the line so that only the object's movement is visible while you work, click in the Eye column on the motion guide layer.

The group or symbol follows the motion path when you play the animation.

To link layers to a motion guide layer, do one of the following:

  • Drag an existing layer below the motion guide layer. The layer is indented under the motion guide layer. All objects on this layer automatically snap to the motion path.

  • Create a new layer under the motion guide layer. Objects you tween on this layer are automatically tweened along the motion path.

  • Select a layer below a motion guide layer. Select Modify > Timeline > Layer Properties and select Guided in the Layer Properties dialog box.

To unlink layers from a motion guide layer:

  1. Select the layer you want to unlink.

  2. Do one of the following:

    • Drag the layer above the motion guide layer.

    • Select Modify > Timeline > Layer Properties and select Normal as the layer type in the Layer Properties dialog box.

 

Applying custom ease in/ease out to motion tweens (Flash Professional only)

TOP

The Custom Ease In/Ease Out dialog box displays a graph representing the degree of motion over time. Frames are represented by the horizontal axis, and the percentage of change is represented by the vertical axis. The first keyframe is represented as 0%, and the last keyframe is represented as 100%.

The rate of change of the object is represented by the slope of the graph's curve. When the curve is horizontal (no slope), the velocity is zero; when the curve is vertical, there is an instantaneous rate of change.

The dialog box provides the following additional controls:

Use One Setting for All Properties check box The default value for this is selected, which means that the displayed curve is used for all properties, and the Properties pop-up menu is disabled. When the check box is not selected, the Properties pop-up menu is enabled, and each property has a separate curve defining the velocity of that property.

Property pop-up menu This menu is enabled only when the Use One Setting for All Properties check box is not selected. When enabled, a separate curve is maintained for each of the five properties appearing in the menu. Selecting a property in the menu displays the curve for that property. The properties are:

Position Specifies custom ease settings for the position of an animated object on the Stage.

Rotation Specifies custom ease settings for the rotation of an animated object. For example, you can fine-tune how quickly or slowly an animated character turns around to face the user on the Stage.

Scale Specifies custom ease settings for the scale of an animated object. For example, you can more easily customize the scale of an object so it appears to be moving away from the viewer, then coming closer, and then moving away again.

Color Specifies custom ease settings for color transitions applied to an animated object.

Filters Specifies custom ease settings for filters applied to an animated object. For example, you can control the ease setting of a drop shadow that simulates a change in the direction of a light source.

Play and Stop buttons These buttons let you preview an animation on the Stage using all the current velocity curves defined in the Custom Ease In/Ease Out dialog box.

Reset button This button lets you reset the velocity curve to the default, linear state.

Position of the selected control point In the lower-right corner of the dialog box, a numeric value displays the keyframe and position of the selected control point. If no control point is selected, no value appears.

To add a control point to the line, click the diagonal line once. This adds a new control point to the line. By dragging the positions of the control points, you can achieve a precise degree of control over the motion of an object.

Using frame indicators (represented by square handles), you click where you want an object to slow down or speed up. Clicking the handle of a control point (the square handles) selects that control point, and displays the tangent points on either side of it. Tangent points are represented by hollow circles. You can drag the control point or its tangent points with the mouse or you can position them using the keyboard's arrow keys.

TIP : By default, the control points snap to a grid. You can turn off snapping by pressing the X key while dragging the control point.

Clicking an area of the curve away from any control points adds a new control point to the curve at that point, without changing the shape of the curve. Clicking away from the curve and control points deselects the control point that is currently selected.

 

Compatibility with current ease in/ease out settings

TOP

If you apply a custom ease to a frame using the Custom Ease In/Ease Out dialog box, the edit text box that displays the ease value displays '--'. If you apply an ease value to a frame with the Edit text box or the pop-up slider, the Custom Ease graph is set to the equivalent curve, and the Use One Setting for All Properties check box is selected.

Unsupported easing curves

TOP

Certain types of easing curves are not supported:

  • No part of the graph can represent a nonlinear curve (such as a circle)

    The Custom Ease dialog box automatically prevents moving a control point or a tangent handle to a position that would render an invalid curve.

  • All points must exist on the graph. Control points cannot be moved beyond the bounds of the graph.

  • All segments of the curve must exist within the graph. The shape of the curve will be flattened to prevent it from extending beyond the bounds of the graph.

To use the Custom Ease In/Ease Out dialog box:

  1. Select a layer in the Timeline that has a motion tween applied to it.

  2. Click the Edit button next to the Ease slider in the frame Property inspector. The Custom Ease In/Ease Out dialog box appears.

  3. (Optional) Deselect the Use One Setting for All Properties check box, and select a property in the menu to display the curve for that property. For more information about the properties you can specify.

  4. In the Custom Ease In/Ease Out dialog box, Control-click (Windows) or Command-click (Macintosh) on the diagonal line to add a control point.

  5. Drag the control point up to increase the speed of the object, or drag it downwards to slow down the speed of the object.

  6. Drag the vertex handles to further adjust the ease curve, and fine tune the ease value of the tween.

  7. View the animation on the Stage by clicking the play button in the lower left corner of the Custom Ease In/Ease Out dialog box.

  8. Adjust the controls until you achieve the effect you want.

To copy and paste an ease curve:

  • Copy the current ease curve by pressing Control+C (Windows) or Command+C (Macintosh)

  • Paste the copied curve into another ease curve by pressing Control+V (Windows) or Command+V (Macintosh)

You can copy and paste the ease curve. The copied curve remains available until you exit the Flash application.

 

Tweening shapes

TOP

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, color, and opacity of shapes.

Tweening one shape at a time usually yields the best results. If you tween multiple shapes at one time, all the shapes must be on the same layer.

To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

To control more complex or improbable shape changes, you use shape hints, which control how parts of the original shape move into the new shape.

To tween a shape:

  1. Click a layer name to make it the active layer, and create or select a keyframe where you want the animation to start.

  2. Create or place the artwork for the first frame of the sequence. For best results, the frame should contain only one item (a graphic object or broken-apart group, bitmap, instance, or text block).

  3. Select the keyframe in the Timeline.

  4. Select Window > Properties.

  5. In the Property inspector, select Shape from the Tween pop-up menu.

  6. Drag the arrow next to the Easing value or enter a value to adjust the rate of change between tweened frames:

    • To begin the shape tween gradually and accelerate the tween toward the end of the animation, drag the slider down or enter a negative value between -1 and -100.

    • To begin the shape tween rapidly and decelerate the tween toward the end of the animation, drag the slider up or enter a positive value between 1 and 100.

    By default, the rate of change between tweened frames is constant. Easing creates a more natural appearance of transformation by gradually adjusting the rate of change.

  7. Select an option for Blend:

    Distributive creates an animation in which the intermediate shapes are smoother and more irregular.

    Angular creates an animation that preserves apparent corners and straight lines in the intermediate shapes.

    NOTE : Angular is appropriate only for blending shapes with sharp corners and straight lines. If the shapes you select do not have corners, Flash reverts to distributive shape tweening.
    Create a second keyframe the desired number of frames after the first keyframe.

  8. With the second keyframe selected, select the artwork you placed in the first keyframe and do one of the following:

  9. Modify the shape, color, opacity, or position of the artwork.

    • Delete the artwork and place new artwork in the second keyframe.

    • Delete the artwork and place new artwork in the second keyframe.

 

Using shape hints

TOP

To control more complex or improbable shape changes, you can use shape hints. Shape hints identify points that should correspond in starting and ending shapes. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.

Shape hints contain letters (a through z) for identifying which points correspond in the starting and ending shape. You can use up to 26 shape hints.

Shape hints are yellow in a starting keyframe, green in an ending keyframe, and red when not on a curve.

For best results when tweening shapes, follow these guidelines:

  • In complex shape tweening, create intermediate shapes and tween them instead of just defining a starting and ending shape.

  • Make sure that shape hints are logical. For example, if you're using three shape hints for a triangle, they must be in the same order on the original triangle and on the triangle to be tweened. The order cannot be abc in the first keyframe and acb in the second.

  • Shape hints work best if you place them in counterclockwise order beginning at the top left corner of the shape.

To use shape hints:

  1. Select the first keyframe in a shape-tweened sequence.

  2. Select Modify > Shape > Add Shape Hint.

    The beginning shape hint appears as a red circle with the letter a somewhere on the shape.

  3. Move the shape hint to a point that you want to mark.

  4. Select the last keyframe in the tweening sequence.

    The ending shape hint appears somewhere on the shape as a green circle with the letter a.

  5. Move the shape hint to the point in the ending shape that should correspond to the first point you marked.

  6. Play the animation again to see how the shape hints change the shape tweening. Move the shape hints to fine-tune the tweening.

  7. Repeat this process to add additional shape hints. New hints appear with the letters that follow (b, c, and so on).

You can choose to view all shape hints, and you can remove shape hints.

To see all shape hints:

  • Select View > Show Shape Hints. The layer and keyframe that contain shape hints must be active for Show Shape Hints to be available.

To remove a shape hint:

  • Drag it off the Stage.

To remove all shape hints:

  • Select Modify > Shape > Remove All Hints.

Creating frame-by-frame animations

TOP

To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each new keyframe initially contains the same contents as the keyframe preceding it, so you can modify the frames in the animation incrementally.

To create a frame-by-frame animation:

  1. Click a layer name to make it the active layer, and select a frame in the layer where you want the animation to start.

  2. If the frame isn't already a keyframe, select Insert > Timeline > Keyframe to make it one.

  3. Create the artwork for the first frame of the sequence.

    You can use the drawing tools, paste graphics from the Clipboard, or import a file.

  4. Click the next frame to the right in the same row and select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Macintosh) and select Insert Keyframe from the context menu.

    This adds a new keyframe whose contents are the same as those of the first keyframe.

  5. Alter the contents of this frame on the Stage to develop the next increment of the animation.

  6. To complete your frame-by-frame animation sequence, repeat steps 4 and 5 until you've built the motion you want.

  7. To test the animation sequence, select Control > Play or click the Play button on the Controller.

 

Editing animation

TOP

After you create a frame or a keyframe, you can move it elsewhere in the active layer or to another layer, remove it, and make other changes. Only keyframes are editable. You can view tweened frames, but you can't edit them directly. To edit tweened frames, you change one of the defining keyframes or insert a new keyframe between the beginning and ending keyframes. You can drag items from the Library panel onto the Stage to add the items to the current keyframe.

To display and edit more than one frame at a time, you use onion skinning.

To insert frames in the Timeline, do one of the following:

  • To insert a new frame, select Insert > Timeline > Frame.

  • To create a new keyframe, select Insert > Timeline > Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place a keyframe, and select Insert Keyframe from the context menu.


  • To create a new blank keyframe, select Insert > Timeline > Blank Keyframe, or right-click (Windows) or Control-click (Macintosh) the frame where you want to place the keyframe, and select Insert Blank Keyframe from the context menu.

To delete or modify a frame or keyframe, do one of the following:

  • To delete a frame, keyframe, or frame sequence, select the frame, keyframe, or sequence and right-click (Windows) or Control-click (Macintosh) the frame, keyframe, or sequence and select Remove Frames from the context menu. Surrounding frames remain unchanged.

  • To move a keyframe or frame sequence and its contents, select the keyframe or sequence, then drag to the desired location.

  • To extend the duration of a keyframe, Alt-drag (Windows) or Option-drag (Macintosh) the keyframe to the final frame of the new sequence.

  • To copy a keyframe or frame sequence by dragging, select the keyframe or sequence, then Alt-drag (Windows) or Option-drag (Macintosh) to the new location.

  • To copy and paste a frame or frame sequence, select the frame or sequence and select Edit > Timeline > Copy Frames. Select a frame or sequence that you want to replace, and select Edit > Timeline > Paste Frames.

  • To convert a keyframe to a frame, select the keyframe and select Modify > Timeline > Clear Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and select Clear Keyframe from the context menu. The cleared keyframe and all frames up to the subsequent keyframe are replaced with the contents of the frame preceding the cleared keyframe.

  • To change the length of a tweened sequence, drag the beginning or ending keyframe left or right. To change the length of a frame-by-frame sequence.

  • To add a library item to the current keyframe, drag the item from the Library panel onto the Stage.

  • To reverse an animation sequence, select the appropriate frames in one or more layers and select Modify > Timeline > Reverse Frames. There must be keyframes at the beginning and end of the sequence.

 

Using onion skinning

TOP

Normally, Flash displays one frame of the animation sequence at a time on the Stage. To help you position and edit a frame-by-frame animation, you can view two or more frames on the Stage at once. The frame under the playhead appears in full color, while surrounding frames are dimmed, making it appear as if each frame were drawn on a sheet of translucent onion-skin paper and the sheets were stacked on top of each other. Dimmed frames cannot be edited.

To simultaneously see several frames of an animation on the Stage:

  • Click the Onion Skin button. All frames between the Start Onion Skin and End Onion Skin markers (in the Timeline header) are superimposed as one frame in the Document window.

To control onion skinning display, do any of the following:

  • To display onion skinned frames as outlines, click the Onion Skin Outlines button.

  • To change the position of either onion skin marker, drag its pointer to a new location. (Normally, the onion skin markers move in conjunction with the current frame pointer.)

  • To enable editing of all frames between onion skin markers, click the Edit Multiple Frames button. Usually onion skinning lets you edit only the current frame. However, you can display the contents of each frame between the onion skin markers normally, and make each available for editing, regardless of which is the current frame.

NOTE : Locked layers (those with a padlock icon) aren't displayed when onion skinning is turned on. To avoid a multitude of confusing images, you can lock or hide the layers you don't want onion skinned.

To change the display of onion skin markers:

  • Click the Modify Onion Markers button and select an item from the menu:

Always Show Markers displays the onion skin markers in the Timeline header whether or not onion skinning is on.

Anchor Onion locks the onion skin markers to their current position in the Timeline header. Normally, the Onion Skin range is relative to the current frame pointer and the Onion Skin markers. By anchoring the Onion Skin markers, you prevent them from moving with the current frame pointer.

Onion 2 displays two frames on either side of the current frame.

Onion 5 displays five frames on either side of the current frame.

Onion All displays all frames on either side of the current frame.

 

Moving an entire animation

TOP

If you need to move an entire animation on the Stage, you must move the graphics in all frames and layers at once to avoid realigning everything.

To move the entire animation to another location on the Stage:

  1. Unlock all layers.

    To move everything on one or more layers but nothing on other layers, lock or hide all the layers you don't want to move.

  2. Click the Edit Multiple Frames button in the Timeline.

  3. Drag the onion skin markers so that they enclose all the frames you want to select, or click Modify Onion Markers and select Onion All.

  4. Select Edit > Select All.

  5. Drag the entire animation to the new location on the Stage.

 

Using mask layers

TOP

For spotlight effects and transitions, you can use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. You can group multiple layers together under a single mask layer to create sophisticated effects.

To create dynamic effects, you can animate a mask layer. For a filled shape used as a mask, you use shape tweening; for a type object, graphic instance, or movie clip, you use motion tweening. When using a movie clip instance as a mask, you can animate the mask along a motion path.

To create a mask layer, you place a mask item on the layer that you want to use as a mask. Instead of having a fill or stroke, the mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything except what shows through the mask item. A mask layer can contain only one mask item. You cannot have a mask layer inside a button, and you cannot apply a mask to another mask.

You can also use ActionScript to create a mask layer from a movie clip. A mask layer created with ActionScript can be applied only to another movie clip.

This example uses a movie clip to mask another movie clip.

This example uses a movie clip to mask two movie clips, on two layers.

This example uses a movie clip to mask a movie clip that contains a mask.

To create a mask layer:

  1. Select or create a layer containing the objects to appear inside the mask.

  2. With the layer selected, select Insert > Timeline > Layer to create a new layer above it.

    A mask layer always masks the layer immediately below it, so be sure to create the mask layer in the proper place.

  3. Place a filled shape, text, or an instance of a symbol on the mask layer.

    Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area is completely transparent in the mask; any nonfilled area is opaque.

  4. Right-click (Windows) or Control-click (Macintosh) the mask layer's name in the Timeline, and select Mask from the context menu.

    The layer is converted to a mask layer, indicated by a mask layer icon. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. The masked layer name is indented, and its icon changes to a masked layer icon.

  5. To display the mask effect in Flash, lock the mask layer and the masked layer.

To mask additional layers after creating a mask layer, do one of the following:

  • Drag an existing layer directly below the mask layer.

  • Create a new layer anywhere below the mask layer.

  • Select Modify > Timeline > Layer Properties and select Masked in the Layer Properties dialog box.

To unlink layers from a mask layer:

  1. Select the layer you want to unlink.

  2. Do one of the following:

    • Drag the layer above the mask layer.

    • Select Modify > Timeline > Layer Properties and select Normal.

To animate a filled shape, type object, or graphic symbol instance on a mask layer:

  1. Select the mask layer in the Timeline.

  2. Click in the Lock column to unlock the mask layer.

  3. Do one of the following:

    • If the mask object is a filled shape, apply shape tweening to the object as described in Tweening shapes.

    • If the mask object is a type object or graphic symbol instance, apply motion tweening to the object as described in Tweening instances, groups, and type.

  4. When you've completed the animation operation, click in the Lock column for the mask layer to lock the layer again.

To animate a movie clip on a mask layer:

  1. Select the mask layer in the Timeline.

  2. Double-click the movie clip on the Stage to edit the movie clip in place and to display the movie clip's Timeline.

  3. Apply motion tweening to the movie clip as described in Tweening instances, groups, and type. To animate the movie clip on a motion path.

  4. When you've completed the animation procedure, click the Back button in the Edit in Place window to return to document-editing mode.

  5. Click in the Lock column for the mask layer to lock the layer again.

 

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash