Adobe Flash Professional

Easing refers to the gradual acceleration or deceleration during an animaton, which helps your tweens appear more realistic or natural. You might also use easing to apply a special kind of movement that makes animation tasks, such as “random” movement or a ball bouncing, quicker and easier. For example, you can apply eases to add a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change using a gentle ease curve. You can even add an ease to create a random appearance to one of your properties, such as x and y for random jittery movement, or alpha to create a random flicker.

Adding preset and custom eases to motion tweens

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 in the Motion Property inspector, or you can use the Motion Editor to apply either a preset or custom ease to one or more properties.

If you were a Flash user prior to CS4, eases are a bit different now; but it’s to your general advantage. To read a comparison between Flash CS4 and earlier versions, refer to Motion migration guide for Flash CS4 Professional. To learn how to create eases in Flash CS4, keep reading.

Using the Motion Property inspector

To apply easing to a motion tween using the Motion Property inspector:

1. Create a new file and call it motionease.fla.
2. Create a graphic with any of the drawing tools, select all of the graphics and then right/Control-click and choose Create Motion Tween. (Click OK to convert the drawing into a symbol). One second of frames are added to the timeline, but if necessary, drag the end of the tween span so it’s at least 24 frames long.
3. Move the playhead to the last frame of the tween span, and then move the instance to another location on the Stage.
4. With the tween span still selected, drag the Ease hot text (blue text next to “Ease”) in the Motion Property inspector (Window > Properties) or type in 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 hot text to enter or type a negative value between –1 and –100.
   • To begin the motion tween rapidly and decelerate the tween towards the end of the animation, drag the hot text to enter or type a positive value between 1 and 100.
5. Select Control > Test Movie to test the animation. Notice how the tween dots update on the Stage in the authoring environment after you apply the ease.

Using the Motion Editor

To apply an ease preset to a motion tween using the Motion Editor:

1. Select the instance you applied easing to in the previous exercise, or open bounce-ease.fla.
2. Select the tween span in the Timeline and option the Motion Editor.
3. Scroll to the Eases category, click the Add button, and then select Bounce In from the menu. A Bounce In ease preset is added to the tweened instance, and is now available in all of the Ease menus for each property. You can change the default setting (number of bounces) using the hot text in the row. The changes you make are reflected in the dashed, non-editable graph to the right.
4. Scroll to the Y property row in the Basic Motion category, and then choose Bounce In from the pop-up menu.

   You just applied the Bounce In ease to the Y property, and doing so automatically updates the instance on the Stage tweens (check this out yourself by scrubbing the playhead). You’ll also notice that two more things happen in the Y row: the hot text becomes read-only, and a dashed graph curve appears in the property’s graph. The hot text changes because the motion model takes control over how your instance animates when eased, and the hot text represents the eased (non-editable) value. The dashed curve represents the tweened value. This will update if you drag any of the property keyframes on the solid (editable) curve.

5. Scroll down to the Ease section, and change the number of bounces to 5.

Notice that the graph for the Bounce Ease updates, as does the graph for the Y property row. Scrub the animation again to see the modified animation. You can find the finished version of this file in this learning guide’s source files, called bounce-ease-finished.fla.

You have already made some minor edits to animations, if you’ve followed the learning guide in a linear fashion until you arrived at this section. For example, you have changed the position of a tweened instance to create a position tween, and then edited its motion path. 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. To open the Motion Editor, select Window > Motion Editor.

The Motion Editor is a large panel that may cover a hefty percentage of your screen real estate. This may not be an issue if you have a dual-monitor setup or can function with an insane resolution, but 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, such as Pause or Home (Edit > Keyboard Shortcuts or Flash > Keyboard Shortcuts). Create a new set and then assign the custom shortcut. 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 (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. Continue reading

When you position-tween an instance across the Stage, you see a motion path for that animation appear on the Stage. The motion path is a line that represents the spatial movement of the tweened instance, and it has dots (sometimes called tween dots or frame dots) that represent the target objects position along the path at frames on the timeline—either single frames, or groups of frames if you have a long tween span selected. The tween dots not only signify frames, but can help you see the instance’s position as affected by any applied easing or 3D.

Using the Motion Property inspector

When you select a tween span or a motion path on the Stage, the context-sensitive Property inspector displays motion properties. This is called the Motion Property inspector, and it’s where you can find useful information about the selected motion tween, such as the location and size of its motion path and its instance name (if one has been added for the tween). You can also rotate the tweened instance across the entire tween span, set the tween’s orientation along its motion path, or apply a simple ease from the Motion Property inspector.

You need to use the Motion Property inspector’s panel menu to access an option that lets you view all motion paths on the stage simultaneously. When you have multiple motion paths on the Stage, select one of the tweens and select Always Show Motion Paths from the Motion Property inspector panel menu. If you do not have this option selected, you see only the motion path when the playhead is within the tween span.

Creating and removing motion paths

If you changed the position of a tweened instance in earlier sections of this learning guide, you have already created a motion path. It is very easy to do in Flash CS4. The following exercise shows you a couple of ways you can create a motion path for a tweened instance.

1. Create a new document with a movie clip on the Stage.
2. Right/Control-click the instance on the Stage and choose Create Motion Tween.
3. Drag the instance to a new location on the Stage. A motion path is created between the first and second position of the instance (see Figure 34).
4. Select the motion path on the Stage, and then press the Delete or Backspace key. The motion path is removed from the tween, so the instance no longer animates its position.
5. Insert a new layer on the Timeline, and use the Pencil or Pen tool to draw a path.
6. Double-click the path to select it using the Selection tool, and then select Edit > Copy to copy the path to the clipboard.
7. Select the tween span and select Edit Paste. The path you drew is now used as the motion path for the tween.

There are some limitations to the motion path you can paste. It cannot be a closed shape, such as a closed circle. To use a circle shape, you would need to erase a bit of the circle so it has a slight gap. You also cannot use fills, like the Brush tool, to create motion paths. You also need to make sure that your path does not have segments that overlap for more than one pixel (you might need to zoom in to see them), although intersecting lines in a path, such as a loop, are okay. To successfully paste the path, you may need to optimize it or delete and rejoin the offending sections.

If you have a very short motion tween and paste a long path onto that tween, you may see a dialog box that prompts you to optimize or sample the motion path. This affects how many keyframes are added to the x and y property graphs. Optimizing will reduce the number of keyframes in the graphs, although this may affect the appearance of the motion path on the Stage. Sampling the motion path will maintain the Stage appearance, although you will have a lot of keyframes in the Motion Editor. This also means your path will be difficult to further modify on the Stage.

There are numerous ways you can select frames of an animation, and then move them around on a timeline. Also, there are a lot of different ways you can modify your animation so it plays exactly the way you want it to when you publish your files. The following sections demonstrate many of the different ways you can manipulate your motion tweens in Flash CS4.

Tween layers can contain tween spans, static frames, and blank keyframes. The static and blank frames behave like others in that you can draw on the frame, paste graphics there, import a bitmap to the selected frame, and so on. These spans and frames can be moved within the same layer, or to most other layers.

A tween layer cannot contain IK spans or classic tweens. Although tween spans cannot contain ActionScript (either on the frame or attached to a tweened object), a frame outside of a tween span on a tween layer can contain ActionScript. However, it is a best practice to put all of your code on its own layer called actions (typically the topmost layer on the main Timeline).

Adobe Flash CS4 Professional can create two types of tweened animation: motion tweens and shape tweens. Flash can also create Classic Tweens, and you can read in this section why they’re not covered in this learning guide.

Motion tweens are a very common way to create movement with Flash, because Flash does most of the work, making things easy for you. Also, motion tweens can help minimize file size, particularly over frame-by-frame animation, since you have fewer assets in your documents.

With motion tweening you create the motion tween and then define properties such as position, size, and rotation for an instance or text block at one point in time, and then you change those properties at another point in time. When you do this, Flash automatically creates the gradual change between the first and second point in time. You can also apply a motion tween that follows a motion 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, thus creating the animation. The shape morphs from the first shape into the second shape, or you can animate color and gradients.

What you can tween

You can motion-tween many properties of symbol instances and text fields. Flash can tween the position, size, rotation, and skew of instances and text. You can also tween color effects and filters, such as the alpha transparency and blur applied to instances. Most individual properties can be tweened independently from each other. For example, you can tween the tint color independently from the tint amount. Oh, the power you now hold!

For more information on creating symbols, see the Create symbols section of the Flash product documentation. For information on applying color effects and filters to symbol instances, see the Applying filters section in the Flash product documentation.

Creating a motion tween

To animate the changes of a target object’s properties, you use motion tweens (see Figure 19). Motion tweens automatically convert changes you make to properties over time into smooth animations.

You can create a motion tween using one of three methods:

• Create a graphic or instance that you want to tween, and then right-click a frame(s) in which it’s present and select Create Motion Tween
• Select the graphic or instance that you want to tween, and select Insert > Motion Tween from the main menu
• Create a graphic or instance that you want to tween, and then right-click the instance on the Stage and select Create Motion Tween

In all of these cases, Flash converts the static frames to a tween span on the Timeline. You may encounter the following during the process:

• If the instance you have selected is not tweenable (for example, it is a raw shape instead of a symbol), you will be prompted to convert it to a symbol first. Click OK to continue creating the motion tween, and Flash creates a movie clip in this case.
• It is a good process to convert your selections into a tweenable instance, such as a movie clip or graphic symbol (if you’re using text, you’re good to go already), before you create the motion tween. This lets you control the attributes of the instance you create, meaning that it’s the most appropriate symbol type and has a recognizable name in the Library.
• If you have multiple selected items on the same layer, Flash prompts you to convert them into a single symbol.
• You cannot have ActionScript on or within a tween, meaning code cannot be placed on the frame or on an object if you’re using ActionScript 2.
• You cannot drag a motion tween to a layer that does not support tweens, such as a layer with a classic tween or an IK layer. If you create a motion tween on a layer with a classic tween, it moves to a new tween layer. You cannot create a motion tween on a layer with an IK span.

A frame-by-frame animation changes the contents of the Stage in every frame and is best suited to a complex animation in which an image changes in every frame instead of simply moving across the Stage. This type of animation increases the file size more rapidly than tweened animation because Flash stores the values for each keyframe.

To create a frame-by-frame animation, you define each frame as a keyframe and create a different (typically modified) image for each frame. Each new keyframe on a layer typically contains the same contents as the keyframe preceding it because the contents of a frame are copied to the next keyframe when you select a frame and press F6. By selecting a frame and pressing F6, you can modify each new keyframe in the animation incrementally.

Creating frame-by-frame animations

To create a frame-by-frame animation:

1. Create a new file and call it framebyframe.fla.
2. Select Frame 1 of Layer 1. This is where the animation will start.
3. Create a graphic using the drawing tools, such as the Rectangle, shape, or Brush tools. You can also paste a bitmap from the Clipboard or import a file (such as an Adobe Illustrator illustration).
4. Select the next frame on Layer 1 and create a second keyframe (F6). The contents of Frame 2 are the same as Frame 1 at this time.
5. Alter the contents of this frame on the Stage to develop the next increment of the animation. You might select the graphic and move it a couple pixels to the right, add some new lines to your drawing, or bend a line on a shape.
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 Control > Test Movie. Or just scrub the timeline using the playhead (this means drag the red toggle above the frames back and forth).

In Flash CS4 you can use various tools to edit your animations, such as commands to insert frames, modify keyframes, onion-skinning tools, and the ability to move your animations around timelines. After you create a keyframe or a frame, 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 drag items from the Library panel onto the Stage to add the items to the currently selected keyframe.

Tip: To display and edit more than one frame at a time, use onion skinning and/or Edit Multiple Keyframes, covered next in “Onion skinning and editing multiple frames.”

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, see the previous section, “Creating frame-by-frame animations.”
• 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.

The frame rate—the speed at which an animation is played, or the playhead moves across a timeline—is measured in the number of frames displayed per second. A frame rate that’s too slow means your animation might not appear to be smooth; a frame rate that’s too fast might negatively affect the performance, shorten the animation’s duration too much, or use a lot of the user’s computer processing power. 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.

Note: You can change the FPS setting in the Document Properties dialog box (click the Edit button in the Properties section of the Property inspector), or at the bottom of the Timeline using the hot text next to fps.

You need to think about frame rate when working with animations, because it can affect the performance of your SWF file and the computer that plays it. Setting a frame rate too high can lead to processor problems, especially when you use many assets or use ActionScript to create your animation. However, you also need to consider the frame rate setting, because it affects how smoothly your animation plays. For example, an animation set to 12 frames per second (fps) in the Property inspector plays 12 frames each second. If the document’s frame rate is set to 24 fps, the animation appears to animate more smoothly than if it ran at 12 fps (see Figure 1). However, your animation at 24 fps also plays much faster than it does at 12 fps, so the total duration (in seconds) is shorter. Therefore, if you need to make a 5-second animation using a higher frame rate, it means you need to add additional frames to fill those 5 seconds than at a lower frame rate (and thus, it can raise the total file size of your animation, especially if you use frame-by-frame animation or use a lot of keyframes).

Adobe Flash CS4 Professional offers several ways to include animation so that you can make things move in your SWF files. For example, you can create tweened animations using the Timeline and Flash workspace, apply motion presets to a selection on the Stage, or, if you’re so inclined, even make instances animate using ActionScript code.

If you have used previous versions of Flash, you will quickly notice that the way you animate has changed in Flash CS4. Don’t be scared. First of all, it’s easy. Secondly, there are many advantages to the new motion model, and you can do a lot more in your animations.

So if you’ve used animation in earlier versions of Flash and need to understand the changes, why they occurred, and migrate your skillset, then go read Motion migration guide for Flash CS4 Professional. If you just need to know how to use the animation features of Flash CS4, read on.

Creating animations with Flash CS4

There are several ways to create animations in Flash:

• Create motion tweens and eases
• Create frame-by-frame animations
• Apply motion presets
• Use tween instances
• Copy ActionScript 3 code and apply it to instances in your document
• Create shape tweens
• Use inverse kinematics
• Write ActionScript code

Timelines in Flash contain static and tweened content, which both look and behave differently on a timeline. Static content is represented by gray frames, or gray frames with a dot in them. Motion-tweened content is represented by a blue tween span, which is a section of frames that you can select individually, move around, or manipulate as a single selection. Flash displays shape tweens as a series of light-green frames, with an arrow drawn between keyframes. Shape tweens and motion tweens are created and manipulated in different ways, which you will learn in the sections that follow.

Tween spans and static content are selected in different ways. Static content and shape tweens are selected as a single frame if you are in the default frame-based selection mode. New motion tweens use a span-based style of selection (even if you have frame-based selection active), which will be familiar to you if you’ve tried the span-based selection model in previous versions of Flash.

Note: Span-based and frame-based selection models are controlled by Flash Preferences. This learning guide assumes you have frame-based selection mode active in its exercise steps.

When you work with a Tween layer (any layer that contains a motion tween span), you will have a special context menu that appears when you right-click a frame on that layer.

Adobe Flash CS4 Professional and Flex can be used together in a variety of ways, including creating custom graphics and components in Flash for use in Flex. The following video tutorials demonstrate several of the ways Flash and Flex can be used together.

Creating components for Flex