Posted: July 15th, 2010 | Author: admin | Filed under: Book V Macromedia Flash MX 2004Contents at a Glance | Comments Off
In This Chapter
Introducing sound and video formats
Working with sounds
Working with video clips
Y ou can make the Web experience richer by adding sound and video to
Your Web pages. Sounds can range from a simple clicking noise when a
User clicks a button to music and narration. You can also include video in
Your Web site.
Exploring Sound and Video Formats
Both sound and video files come in many formats. Before you can use sound
Or video, however, you need a file that Macromedia Flash MX 2004 can import.
Sound file formats
You can use the following sound file formats in Macromedia Flash:
✦ AIFF: This is the standard sound format for Macintosh computers.
These files usually have filenames with the. aif or. ief extensions.
✦ WAV: This is the standard format for Windows machines. These files
Usually have filenames with a. wav extension.
✦ MP3: This is a highly-compressed format that maintains high quality
Sound.
If you have QuickTime 4 or higher installed on your computer, you can
Import Sound Designer II, Sun AU, and System 7 or higher sounds.
A sound file has several properties that affect its quality and size. You can
Often adjust these properties to reduce file size without noticeably affecting
Quality. For sophisticated adjustments, you probably need a sound-editing
Program, such as SoundForge. Here are the basic properties of a sound file:Working with Sounds 566
✦ Sample rate: The sample rate is the number of times in kilohertz (kHz)
That an audio signal is sampled when it’s recorded digitally. A higher
Sample rate results in higher quality sound but also yields a larger file
Size.
✦ Bit rate: The bit rate is the number of bits (pieces of data) used for each
Audio sample. Sixteen-bit sounds are clearer, but 8-bit sounds are
Smaller and may be good enough for simple sounds, such as a button
Click.
✦ Channels: Channels are the number of streams of sound in a file and are
Either mono or stereo. Mono may be just fine and uses half the amount
Of data as stereo.
You can find a sound’s properties when you import the sound into Macro -
Media Flash, as explained in the upcoming section, “Importing sounds.”
Video file formats
The type of video formats you can use depends on some other software that
Supports their playback:
✦ If you have QuickTime 4 or later installed: You can import AVI, MPEG
(MPG), MOV, and DV formats.
✦ If you have DirectX 7 or later installed: You can import AVI, MPEG
(MPG), and WMV/ASF (Windows Media File) formats.
Because video files are usually very large, they are always compressed by
Using a codec. The word codec stands for compression/decompression. The
Same codec decompresses the video file when it is used. You need to have
The codec that was used for the video file on your computer in order to
Import the video file. The same applies to the audio track in a video file.
Working with Sounds
Working with sounds in Macromedia Flash involves at least two steps —
Importing the sound and placing it in a movie. You can also do basic sound
Edits in Macromedia Flash.
Importing sounds
To import a sound, follow these steps:
1. Choose File➪Import➪Import to Library.
The Import dialog box appears. Book V
Chapter 6
Adding Sound
And Video
Working with Sounds 567
2. Select the sound file you want to import and click Open.
The sound goes into the Library.
To see a sound’s properties, open the Library, right-click the sound and
Choose Properties from the contextual menu that appears.
Placing a sound in a movie
After a sound is in the Library, you can place it in your movie. You need to
Decide when it starts, when it ends, or whether you want to loop the sound.
To place a sound, follow these steps:
1. Create a new layer for the sound by choosing Insert➪Timeline➪
Layer.
2. Right-click the frame and choose Insert Keyframe from the contextual
Menu.
This inserts a keyframe on the sound’s layer where you want the sound
To start.
3. Press Ctrl+L to open the Library or select Window➪Library.
Scroll down to the sound file you’re looking for in the Library.
4. Drag the sound to the Stage.
The sound extends to the next keyframe, if one exists.
5. To specify settings for the sound, open the Properties panel by choos -
Ing Window➪Properties.
6. Expand the Properties panel, shown in Figure 6-1, using the Expand/
Collapse arrow in the lower-right corner.
7. From the Sound drop-down list, choose the sound for which you want
To specify settings.
All the sounds you have imported are listed.
Figure 6-1:
Specifying
Sound
Settings. Working with Sounds 568
8. To create a special effect, select an effect from the Effect drop-down
List.
You have the following choices:
• None: No special effect (the default).
• Left channel: Plays the sound from only the left speaker.
• Right channel: Plays the sound from only the right speaker.
• Fade left to right: Starts playing from the left speaker and moves to
The right speaker.
• Fade right to left: Starts playing from the right speaker and moves
To the left speaker.
• Fade in: Starts playing softly and increases the volume.
• Fade out: Starts playing loudly and decreases the volume.
• Custom: If you edit the sound, as explained in the next section, your
Sound has a custom effect.
9. Select a synchronization type from the Sync drop-down list.
You can choose from the following options:
• Event: Plays the sound from its first keyframe until it ends (even if
The movie stops), replays the sound whenever that keyframe plays,
And the entire sound downloads before it plays. This choice is ideal
For button sounds that you want to play whenever the button is
Clicked. Event is the default synchronization type.
• Start: Plays the sound like the Event option, but if the keyframe is
Replayed before the sound is finished, the Start option doesn’t replay
The sound.
• Stop: Stops playing the sound.
• Stream: Synchronizes the sound with the animation, shortening or
Lengthening the animation to match the length of the sound.
Macromedia Flash may skip frames if necessary.
10. If you want to loop or repeat the sound, select either Loop or Repeat
From the drop-down list beside it.
If you select Loop, the movie will simply repeat over and over again. If
You select repeat, you’ll be asked to enter the number of repeats in the
Field provided.
11. Press Enter to play the animation and hear the sound.
Press Ctrl+Enter to test the movie if you’re working on a complex
Animation. Book V
Chapter 6
Adding Sound
And Video
Working with Sounds 569
Editing sounds
Macromedia Flash contains its own simple sound-editing tool. For example,
You can delete some of the beginning or end of the sound if you don’t need
It. You can also change the volume. To edit a sound, follow these steps:
1. Click a frame that contains a sound.
2. Open the Properties panel by choosing Window➪Properties.
If necessary, click the Collapse/Expand arrow at the lower-right corner
To expand the Properties panel fully.
3. Click the Edit button within the Properties panel.
The Edit Envelope dialog box, shown in Figure 6-2, appears. In this con -
Text, envelope just means the entire snippet of music.
You can edit the sound as follows:
• Change the volume: Drag an envelope handle (see Figure 6-2) up to
Increase volume or down to decrease volume. Click an envelope line
To add a handle so that you can change the volume at that location.
• Delete the beginning of the sound: Drag the Time In control to the
Right.
• Delete the end of the sound: Scroll to the end of the sound and drag
The Time Out control (the ending control) to the left.
You can use the Zoom In and Zoom Out buttons (refer to Figure 6-2) to
Change the magnification in the Edit Envelope dialog box. You can also use
The Frames and Seconds buttons to change the display between frames and
Seconds.
Figure 6-2:
You can edit
Sounds in
The Edit
Sounds
Dialog box. Working with Sounds 570
Setting sound properties
You can control the properties of a sound to further compress it. If you need
To specify different properties for different sounds, set the properties when
You place the sound in your movie:
1. Open the Library by choosing Window➪Library or by pressing
Ctrl+L.
2. Double-click the sound icon next to the sound for which you want to
See the properties.
The Sound Properties dialog box, shown in Figure 6-3, appears.
The top part of the dialog box lists the sound’s name, original location,
And statistics. At the bottom of the dialog box, use the Compression
Drop-down list to select the file format you want:
• Default: Leaves the sound unchanged.
• ADPCM: Enables you to convert stereo to mono and to choose a
Sampling rate and bit rate. Used for short sounds.
• MP3: Enables you to convert stereo to mono and to choose a bit rate
And quality. MP3 is an efficient compression method and is used for
Longer, more complex sounds, especially music.
• Raw: Enables you to convert stereo to mono and to choose the sam -
Pling rate. Raw uses no compression.
• Speech: Enables you to choose a sampling rate. This option uses
Compression specially designed for speech.
As you choose an option, you see the resulting statistics at the bottom
Of the dialog box.
Figure 6-3:
You can
Set the
Properties
For
Individual
Sounds in
The Sound
Properties
Dialog box. Book V
Chapter 6
Adding Sound
And Video
Working with Video Clips 571
3. Click the Test button to hear the result of your choice.
You can also set sound properties for all sounds at once when you publish
Your movie. (See Book V, Chapter 7.)
Working with Video Clips
A new feature of Macromedia Flash MX 2004 is the ability to embed video
Clips in your Flash movie. A video clip can be live action or animation cre -
Ated with an animation program that outputs a video file format. Note:
Macromedia Flash may not be able to handle very long video files. You also
Have no direct control over the video frames.
To use a video, follow these steps:
1. Select a key frame already on your Timeline (or create a new
Keyframe by right-clicking a frame and choosing Insert Keyframe
From the contextual menu that appears).
2. Choose File➪Import➪Import to Library.
The Import dialog box appears.
3. Choose the video file you want and click the Open button.
The Video Import Wizard appears, as shown in Figure 6-4.
Figure 6-4:
The Video
Import
Wizard
Provides all
The steps
You need to
Follow to get
Video into
Your Flash
Movie. Working with Video Clips 572
4. Select either the Import the Entire Video or the Edit the Video First
Option.
Most Windows video formats, such as AVI or WMV, are not editable
Before import. QuickTime, however, is editable. If you select Edit the
Video First option, you’re presented with a number of options, such as
Combining clips and editing them to include only the parts you want to
See. In either case, when you’re ready to move on, click the Next button.
5. Select a compression profile.
You can select from one of the five compression algorithms that
Macromedia Flash offers by selecting it from the drop-down list, or you
Can create your own by selecting the Create Your Own Profile option.
6. To choose the frequency of keyframes in the video clip, drag the
Keyframe Interval slider.
A video keyframe is separate from a Timeline keyframe. A video
Keyframe stores the entire image data as compared to the changes from
The previous frame that are stored in regular frames.
A keyframe interval of 0 adds a single keyframe at the beginning of the
Video stream and no other keyframes.
7. Select the Synchronize Video to Macromedia Flash Document Frame
Rate option to match the video frame rate to the Flash movie frame
Rate.
If your video seems to display poorly, try deselecting this option.
8. From the Number of Video Frames to Encode per Number of Flash
Frames drop-down list, select a ratio.
The default is 1:1, which plays one video frame for each Flash frame. A
Ratio of 1:2 would play one video frame for every two Flash frames. A 1:2
Or higher ratio reduces file size, but reduces smoothness of playback as
Well.
9. Click OK.
If the video clip is longer than the span of keyframes into which you are
Placing the video, a message displays, asking if you want to add enough
Frames necessary to play the entire clip.
10. Click Yes to add the frames.
Posted: July 15th, 2010 | Author: admin | Filed under: Book V Macromedia Flash MX 2004Contents at a Glance | Comments Off
In This Chapter
Getting familiar with layers
Working with layers
Changing layer options
Using folders to manage layers
L ayers are a way to organize your Flash document. Layers are an impor -
Tant part of creating a movie for the following reasons:
✦ Layers keep objects from bumping into each other. If you draw two cir -
Cles and overlap them, they either merge or one creates a cut out of the
Other. However, if you put the two circles on two separate layers, they
Each remain whole.
✦ Each animated object must be on its own layer. If you want more than
One object on the Stage at a time, you need to create a new layer.
✦ ActionScript and sounds should have their own layer. This allows you
To easily find and troubleshoot any problems as well as to avoid poten -
Tial conflicts.
✦ Special types of layers let you create special effects, as follows:
• Mask layers: Mask layers create a “keyhole” through which you can
See layers beneath it.
• Guide layers: Guide layers direct animation along a path.
In addition, you can use layers for your own organizational purposes. For
Example, you can put text on a separate layer. Then, to focus on just the
Text, you can hide all the other layers. In this chapter, we explain how to
Create and manage layers. Working with the Layer List 542
Layers add a third dimension to the organization of your Flash document.
The Stage lays out your graphics in the horizontal (X-axis) and vertical (Y -
Axis) dimensions. Using layers is like adding a Z-axis, enabling you to place
Graphics on top of each other as if they were on successive transparent
Sheets.
The Timeline, of course, adds the fourth dimension — time. Layers are inti -
Mately connected to the Timeline. For each layer, Macromedia Flash adds a
Row of frames in the Timeline.
Working with the Layer List
You work with layers on the Layer list, which is to the left of the Timeline, as
Shown in Figure 4-1. The Layer list contains the following features:
✦ Default layer: You start a new movie with the default layer, Layer 1.
✦ Active layer: The active layer is highlighted. When you create objects,
They go on the active layer.
✦ Show/Hide Layers: You can show or hide objects on any layer by click -
Ing the Show/Hide icon for that layer.
✦ Lock/Unlock Layers: You can lock any layer so that objects cannot be
Selected or edited. Click the Lock icon for that layer. To unlock a layer,
Click the Lock icon again.
Active
Layer
Insert layer
Insert layer folder
Add motion guide
Delete layer
Show/Hide layers
Lock/Unlock layers
Display outlines
Figure 4-1:
Use the
Layer list
To manage
Your layers. Book V
Chapter 4
Making Your Life
Easier with Layers
Working with Layers 543
✦ Display Outlines: You can display objects on a layer as outlines. Each
Layer uses a different outline color. Outlines may help you see objects
On all layers more clearly. Click the Outlines icon for any layer.
✦ Insert Layer: To insert a layer, click the Insert Layer button below the
Layer list.
✦ Insert Motion Guide: To add a motion guide layer, click the Insert
Motion Guide button below the Layer list. See the section, “An introduc -
Tion to guide layers,” later in this chapter, for more information on guide
Layers.
✦ Insert Layer Folder: You can organize layers into folders. Click the
Insert Layer Folder button below the Layer list.
✦ Delete Layer: To delete a layer, select it and click the Delete Layer
Button, or drag the layer to the Delete Layer button.
Working with Layers
When you open a new movie, it has one layer, called Layer 1. As you work,
You create, delete, move, and copy layers. You also name your layers.
Choose a naming system that makes sense to you. Note: If the names are too
Long, you won’t be able to see the whole name in the Layer list, so don’t get
Too extravagant. You can drag the right border of the Layer list to the right
To see more of the layer names.
Creating layers
When you need to create a new layer, click the Insert Layer button at the
Bottom of the Layer list (refer to Figure 4-1) or choose Insert➪Timeline➪
Layer. The new layer appears above the active layer and becomes the active
Layer.
You can also create a new layer by right-clicking a layer in the Layer list and
Selecting Insert Layer from the contextual menu that appears.
You should rename the new layer immediately after you create it. Double -
Click the layer name, type a new name, and press Enter.
Using layers
When you draw an object, it appears on the active layer, which is the layer
That is highlighted and has a pencil icon next to its name in the Layer list. To
Draw on a different layer, click the name of the layer that you want to use.
When you click a new layer, Macromedia Flash selects all the objects on that
Layer. To deselect the objects, click any empty area (on the Stage or in the
Gray space around the Stage).Working with Layers 544
Editing layers
You often need to make changes to layers or move objects from one layer to
Another. Keeping your layers organized is an important part of keeping your
Entire movie under control.
Selecting layers
When editing layers, you may want to select more than one layer at a time,
Such as when you need to move more than one layer at a time. To select a
Group of layers that are all together, click the first layer name on the Layer
List, press and hold down Shift, and click the last layer of the group. To
Select layers that are not together, click the first layer, press and hold down
Ctrl, and click any additional layers that you want to select.
Moving objects from one layer to another
You often draw objects before you realize that they need to be on a separate
Or different layer. For example, you can only have one object on a layer that
You are animating. If you draw additional objects on that layer, you should
Move them to another layer. First create a new layer, if necessary. (See the
Section, “Creating layers,” earlier in this chapter.) To move objects from one
Layer to another, follow these steps:
1. Select the frames that represent the objects that you want to move by
Using the Selection tool.
The layer that contains the objects is also made current. To select more
Than one frame, select the first frame, press and hold down Shift, and
Then select the last frame.
2. Choose Edit➪Cut.
3. In the Layer list, click the layer to which you want to move the
Objects.
4. Choose Edit➪Paste in Place.
The objects appear to be in the same location, but they are now on a
New layer.
Distributing to layers
A great feature is the ability to distribute all objects on a layer to separate
Layers. For example, to animate each letter of a word, you should put each
Letter on a separate layer. For example, you may want to animate the letters
Of the word now so that each letter flies onto the Stage separately. Follow
These steps to do so:Book V
Chapter 4
Making Your Life
Easier with Layers
Working with Layers 545
1. Select the text or objects using the Selection tool.
For the purposes of this example, select the Text tool from the Tools
Section of the Tools panel, type now in a single frame, and then select
The text.
2. If you are working with text, choose Modify➪Break Apart.
You see a separate box around each letter. Each letter is now a separate
Object.
3. Choose Modify➪Timeline➪Distribute to Layers.
Each object or letter is now on a separate layer. Macromedia Flash auto -
Matically creates the layers for you. In the “now” example, Macromedia
Flash creates three layers, named n, o, and w for each of the three letters.
The objects also remain on their original layer. You can delete that layer
If you want and keep only the copies on the individual layers.
Renaming layers
If the content of a layer changes, you should rename the layer to something
That is appropriate to its content. To rename a layer, double-click the layer
Name in the Layer list, type the new name, and press Enter.
Deleting layers
To delete a layer, select the layer in the Layer list and click the Delete button
(it looks like a trashcan) at the bottom of the list. (Refer to Figure 4-1.)
Deleting a layer deletes everything on that layer. Be aware that you may not
Be able to see everything on the layer, because you see only what is on the
Stage in the current frame. To see what is on a layer throughout the
Timeline, follow these steps:
1. Right-click the layer name in the Layer list, and choose Hide Others
From the contextual menu that appears.
2. Click the first frame on the Timeline.
3. Press Enter to run the animation.
Copying layers
You can copy an entire layer, and if you do, all the objects on that layer are
Copied as well. Follow these steps to copy a layer:Working with Layers 546
1. Select the layer by clicking the layer’s name in the Layer list.
Selecting the layer selects all the objects on the layer.
2. Choose Edit➪Copy Frames.
3. Choose Insert➪Layer to create a new layer.
4. Choose Edit➪Paste Frames.
Reordering layers
Macromedia Flash displays objects in the order of their layers, from the top
Down. In other words, objects on the top layer appear in front of objects on
The next layer on the list. You can reorder the Layer list to change what
Objects appear in front on the Stage. See Figure 4-2 for an example.
To move a layer to a different spot in the Layer list, click and drag the layer’s
Name to the desired location, and then release the mouse button.
An introduction to guide layers
A guide layer is a special type of layer that is invisible when your Flash docu -
Ment is published and played as a movie. Guide layers have the following
Main purposes:
✦ Drawing guide: You can place gridlines on the Stage to help you lay out
The objects on the Stage, or you can import a bitmap and use it as a
Guide to help you draw using the graphics tools. The content on the
Guide layer is invisible when the movie is published, but having the
Extra layer helps you draw.
Figure 4-2:
By changing
The layer
Order, you
Change
Which
Objects
Appear in
Front on
The Stage. Book V
Chapter 4
Making Your Life
Easier with Layers
Working with Layers 547
✦ Motion guide: You can place a path on a guide layer that controls
The animation of an object. This process is described in more detail in
Book V, Chapter 5.
To create a drawing guide layer, follow these steps:
1. Click the Insert Layer button on the Layer list.
2. Right-click the layer and choose Guide from the contextual menu that
Appears.
The layer icon changes to the guide icon that looks like a hammer.
Using mask layers
A mask layer hides everything on its connected masked layers, except
What’s inside the objects that are on the top mask layer. It, in effect, masks
The content on the lower layers. Masks are often used to create a spotlight
Effect, where you only see what is in the spotlight and everything else is
Hidden. You can see this effect in Figure 4-3, where the circular mask hides
Everything outside of the circle. The circle is on a mask layer, and what you
See inside the circle is on a masked layer.
Figure 4-3:
The circular
Mask hides
Everything
Except what
Is inside the
Circle. Changing Layer Options 548
To create a mask layer, follow these steps:
1. On the top layer of the Layer list, create the objects that you want to
Be visible through the mask.
2. With the top layer selected, click the Add Layer button at the bottom
Of the Layer list.
3. Draw a shape, such as a circle, on this new layer.
4. Right-click the new layer and choose Mask from the contextual menu
That appears.
In the Layer list, the mask layer is locked and the masked layer is both
Locked and indented. (Refer to Figure 4-3.)
To edit a mask or masked layer, click the lock next to the layer name in the
Layer list. Unlocking these layers removes the mask effect. After you have
Finished editing, click the lock column next to the layers’ names again to
Redisplay the mask effect.
To link a layer to a mask layer, drag the layer directly underneath a mask
Layer. The layer is indented. To display the mask effect, make sure that the
Layer is locked by clicking it under the Lock column in the Layer list.
Changing Layer Options
You can control the visibility, editability, and display of objects on layers.
These tools are very helpful when you are trying to isolate certain objects
For editing or animation.
Altering the visibility of objects
You can hide all the objects on a layer. If you have a lot of objects on the
Stage and want to edit objects on one layer, you can hide other layers that
You don’t need to see at the moment.
Don’t forget about objects on hidden layers. These objects still appear in
Your published movie.
To hide a layer, click beneath the Eye icon on the layer’s row. An X appears
In the Eye column to show you that the layer is hidden. Click the X to
Unhide the layer.
To hide all layers except one, right-click the layer that you want to see and
Choose Hide Others from the contextual menu that appears. Book V
Chapter 4
Making Your Life
Easier with Layers
Changing Layer Options 549
Locking and unlocking layers
You can lock the objects on a layer so that you cannot edit them. You may
Find yourself inadvertently selecting objects that you want to leave alone. This
Can get annoying, but you can easily avoid the situation by locking that layer.
To lock a layer, click beneath the Lock icon on the layer’s row. A lock
Appears in the Lock column. Click the lock to unlock the layer.
To lock all layers except one, right-click the layer and choose Lock Others
From the contextual menu that appears.
Setting layer properties
Many of the layer controls that we discuss in this chapter are combined in
The Layer Properties dialog box, as shown in Figure 4-4. Most of the time,
You just use the controls on the Layer list or the contextual menu that you
See when you right-click a layer. However, the Layer Properties dialog box
Does have some unique features.
To open the Layer Properties dialog box, select the layer that you want to
Modify and choose Modify➪Timeline➪Layer Properties. You can use this
Dialog box to do the following things:
✦ Rename the layer: Type a new name in the Name text field.
✦ Show/Hide the layer: Select or deselect the Show check box.
✦ Lock/Unlock the layer: Select or deselect the Lock check box.
✦ Change the type of layer: You can turn a layer into a guide, guided,
Mask, masked, or folder layer.
✦ Change the outline color: Click the Outline Color swatch to choose a
New color.
Figure 4-4:
The Layer
Properties
Dialog box. Using Folders to Manage Layers 550
✦ Turn outlines on/off: Select or deselect the View Layer as Outlines
Check box.
✦ Change layer height: Select a percentage from the Layer Height drop -
Down list. This increases the physical size of the layer to make it more
Viewable.
When you finish making changes, click OK to close the Layer Properties
Dialog box.
Using Folders to Manage Layers
If you have many layers, you can organize them into folders. For example,
You may want to put all your layers containing text in one folder.
To create a folder, click the Insert Layer Folder icon at the bottom of the
Layer list. A new folder appears above the current layer. Double-click the
Folder name, and enter a name that describes the folder’s contents.
Use the following tips to manage folders:
✦ Put layers in a folder: Drag layers onto the folder’s row.
✦ Collapse and expand individual folders: Click the arrow at the left of
The folder’s icon.
✦ Expand and collapse all folders: Right-click the Layer list, and choose
Expand All Folders or Collapse All Folders from the contextual menu
That appears.
✦ Remove a layer from a folder: Expand the folder, if necessary, and drag
The layer above the folder name or to another location where it doesn’t
Darken a folder.
✦ Hide or lock an entire folder and its layers: Click beneath the Eye or
Lock icon on the folder’s row.
✦ Reorder folders: You can change the order of folders, which also
Changes the order of its layers. Just drag any folder up or down.
✦ Delete folders: Select the folder and click the Delete (trashcan) icon.
Deleting a folder deletes all the layers in the folder and everything on those
Layers. Macromedia Flash warns you of this if you try to delete a folder.
Posted: July 15th, 2010 | Author: admin | Filed under: Book V Macromedia Flash MX 2004Contents at a Glance | Comments Off
In This Chapter
Touring the Timeline
Understanding frames and keyframes
Creating animation frame-by-frame
Creating tweened animation
Creating interactive animation
Working with scenes
M acromedia Flash MX 2004 is basically an animation program, so this
Chapter on animation is central to the whole purpose of Macromedia
Flash. In this chapter, we provide the information you need to create motion
And shape animation.
Getting Familiar with the Timeline
The Timeline lays out your animation in time. In order to animate, you need
To be thoroughly familiar with the Timeline (shown in Figure 5-1) and its spe -
Cial coding.
As you can see in Figure 5-1, every fifth frame on the Timeline is numbered
And each layer has its own row in the Timeline. (For more information on
Layers, see Book V, Chapter 4.)
Scene name Playhead Frame view
Current frame number
Frame rate
Elapsed seconds
Keyframe Empty keyframe
Figure 5-1:
The Timeline
Provides a
Great deal of
Information
About your
Animation. Getting Familiar with the Timeline 552
If the Timeline isn’t visible, choose Window➪Timeline. You can collapse the
Timeline by clicking its Collapse/Expand arrow at the left side of its title bar.
Understanding the frame rate
The frame rate is the speed at which Macromedia Flash plays the animation.
The default frame rate is 12 frames per second (fps). You can have only one
Frame rate per document. To change the frame rate, follow these steps:
1. Double-click the Frame Rate box at the bottom middle of the
Timeline.
The Document Properties dialog box appears.
2. In the Frame Rate text field, enter a new number in frames per
Second.
3. Click OK.
When you use a frame rate that is too slow, the animation appears jerky.
Increasing the frame rate may make animation appear smoother, but a frame
Rate that is too fast can appear blurred. The default frame rate of 12 fps is a
Good place to start.
The Internet connection rate and the size of the file also affect the rate of
Animation. A large file (often due to large graphics or sounds) and a slow
Internet connection can make the animation stutter. Your viewers will get
The best results if you reduce the size of the file as much as possible. In
Book V, Chapter 7, we explain how to optimize files for the Web.
Working with the Timeline
You can work with the Timeline in the following ways:
✦ Go to a frame: Click the frame on the Timeline to go to a particular
Frame. If you want to work on a specific layer, click the frame in that
Layer’s row.
✦ Change size and appearance of the frames: To modify the frames as
They appear in the Timeline, click the Frame View button in the upper -
Right corner of the Timeline and choose one of the options from the
Menu. You can change the width and height of the frames, turn coloring
Of frames on and off, and choose to display a small thumbnail of the
Frame’s content in each frame.
✦ Add a label or comment to a frame: To add a label or comment to a
Frame in the Timeline, select a frame and type a label name in the Frame
Label text field in the Properties panel. Book V
Chapter 5
Creating Animation
Getting Familiar with the Timeline 553
✦ Select frames: Click a frame and drag across the frames you want to
Select. (You can also click the first frame, press Shift, and click the last
Frame you want to select to select all the frames in between.)
✦ Copy and paste frames: Select the frames you want to copy, choose
Edit➪Timeline➪Copy Frames, click where you want the frames to go,
And choose Edit➪Timeline➪Paste Frames.
✦ Move frames: Select the frames you want to move and drag them to the
Desired location.
✦ Add a frame: To add a frame, right-click on the frame to the left of
Where you want to create a frame and choose Insert Frame from the
Contextual menu that appears.
✦ Delete frames: Select the frames you want to delete. Right-click and
Choose Remove Frames.
✦ Add a keyframe: Right-click on the desired frame and choose Insert
Keyframe from the contextual menu.
✦ Change the length of an animation: Press Ctrl and click and drag the
First or last keyframe of the animation to the right or left.
✦ Scroll along the Timeline: Use the horizontal scroll bar to scroll along
The Timeline. Use the Vertical scroll bar (which appears when you have
Too many layers to display) to scroll through the layers.
Onion skinning
When you animate an object, you can display some or all of the animated
Frames at once, using an effect known as onion skinning. Onion skinning pro -
Duces overlapping translucent images like the translucent layers of an
Onion. See Figure 5-2 for an example of onion skinning.
To work with onion skinning, use the buttons under the Timeline:
✦ Onion skin: Turns on onion skinning and adjusts the Onion markers to
Customize the number of frames that display the effect.
✦ Onion skin outlines: Displays single-color outlines of your animation.
✦ Edit multiple frames: Enables you to edit any of the frames on the
Timeline, regardless of the current frame.
✦ Modify onion markers: Displays a menu that enables you to always
Show the markers (even when onion skinning is off), anchor the mark -
Ers so they don’t follow the playhead (current frame marker), and set
The number of frames that the markers cover. Using Frames and Keyframes 554
Using Frames and Keyframes
A frame is actually a unit of time, based on your frame rate. You can place
Content on any frame, but you can only change content on a keyframe. Use a
Keyframe whenever you want to start or stop an animation or make any
Object appear or disappear.
To introduce any new object onto the Stage, you must have a keyframe.
Insert a keyframe by right-clicking to the left of where you’d like the
Keyframe and selecting Insert Keyframe from the contextual menu. Click the
Keyframe on the layer where you want the object to appear, and then do one
Of the following:
✦ Draw something by using the Macromedia Flash drawing tools. (See
Book V, Chapter 2.)
✦ Import a bitmap. (See Book V, Chapter 3.)
✦ Drag an object onto the Stage from the Library. (See Book V, Chapter 1.)
Onion markers
Onion skin
Onion skin outlines
Edit multiple frames
Modify onion markers
Figure 5-2:
Onion
Skinning
Helps you
See your
Animation
All at one
Time. Book V
Chapter 5
Creating Animation
Creating Animation Frame-By-Frame 555
You can create two types of animation in Macromedia Flash:
✦ Frame-by-frame: In frame-by-frame animation, each frame is a keyframe
And contains a slight change in your objects so that when you play the
Flash document, you see a smooth animation. This type of animation is
Time-consuming and creates bigger files, but it may be necessary to
Create complex effects. Cartooning is mostly done using frame-by-frame
Animation.
✦ Tweening: In tweening, the first and last frames of the animation are
Keyframes, and Macromedia Flash calculates everything in between.
You can tween motion and shapes (morphing). Tweening is faster to
Create than frame-by-frame animation and creates small file sizes. The
Only down side to tweening is that it can’t be done with any type of
Object except vector graphics.
Creating Animation Frame-By-Frame
When your animation does not have a simple pattern, such as movement of
One object in a direction or the change of one shape to another shape, you
Need to use frame-by-frame animation. A common example of frame-by -
Frame animation is cartooning, where a figure needs to move in complex
Ways or a mouth moves in synchrony with speech.
To create frame-by-frame animation, follow these steps:
1. Right-click a frame in the current layer where you want the anima -
Tion to start and choose Insert Keyframe from the contextual menu.
2. Draw or import your image.
Book V, Chapter 2 is all about creating graphics. To import an image,
Choose File➪Import.
3. Right-click the next frame and choose Insert Keyframe again.
4. Change the graphic slightly to create the second frame of the
Animation.
5. Repeat Steps 3 and 4 as necessary until you have completed your
Animation.
See Figure 5-3 for an example of frame-by-frame animation.
During the process, press Enter to play back your animation and check your
Work. Creating Tweened Motion Animation 556
Creating Tweened Motion Animation
Motion tweening moves a single symbol instance, text object, or grouped set
Of objects either in a straight line or along a path that you draw (often with
The Pencil tool).
Although you can motion tween only one object at a time on any layer, you
Can tween other objects on other layers to create the overall look of many
Objects being animated.
You can also change the size, rotation, skew (slant), color, and transparency
Of symbol instances as you motion tween them. To make these changes to
Text or groups, convert them to symbols. See Book V, Chapter 3 for a discus -
Sion of symbols.
Preparing to tween
You can only put one object — symbol instance, text, or group — on the
Layer where you are animating. The first step is to create the object you
Want to animate and make sure that nothing else is on that layer. Often, you
Create a new layer just for your animation.
Decide how you want your object to move. Do you want its color, size, or
Rotation to change? After you have decided, you are ready to tween.
The Macromedia Flash Controller is like a control panel for a CD or video
Player. The Controller is helpful when you animate because it offers controls
For rewinding and playing your animation. To open the Controller, choose
Window➪Toolbars➪Controller.
Figure 5-3:
This frame -
By-frame
Animation of
The legs
Moving is
Shown
Using onion
Skinning. Book V
Chapter 5
Creating Animation
Creating Tweened Motion Animation 557
Creating a simple tween
Before you tween, open the Properties panel by choosing Window➪
Properties. To create a simple motion tween that moves the object along
A straight line, follow these steps:
1. On your animation layer, insert a keyframe where you want the ani -
Mation to start.
To add a keyframe, right-click on the frame to the left of where you want
To create a keyframe and choose Insert Frame from the contextual
Menu.
2. Click the keyframe and create the object or objects you want to
Animate.
You cannot tween plain graphics. If necessary, turn your object or
Objects into a symbol (see Book V, Chapter 3) or a group (see Book V,
Chapter 2). Text is fine as it is. You can also import a graphic or drag an
Instance of a symbol from the Library onto the Stage.
3. Insert a keyframe where you want the animation to end.
The longer the span of frames is, the slower the animation. You can
Always adjust the length of a tween later, as explained in the “Working
With the Timeline” section, earlier in this chapter.
4. Click the last keyframe and then move the object to its new location
Using the Selection tool.
At this point, you can also change the object’s color properties and
Transparency by using the Color box in the Properties panel. In addition,
You can use the Free Transform tool or other Macromedia Flash com -
Mands to change the object’s size, rotation, and skew, as shown in
Figure 5-4.
5. Select the range from keyframe to keyframe by clicking the first
Keyframe and dragging to the last keyframe.
If the span of frames is too long to show, click the first keyframe, scroll
To the last keyframe, press Shift, and click the last keyframe.
You can click anywhere between the keyframes and get almost the exact
Same result as the technique in Step 5. The last keyframe isn’t tweened,
But the result looks the same when you play the animation.
6. From the Tween drop-down list in the Properties panel, select
Motion.
If you changed the object’s size, select the Scale check box in the
Properties panel to tween the size. Creating Tweened Motion Animation 558
7. If you want to rotate the object during the tween (in addition to any
Rotation you created in Step 4), select CW (clockwise) or CCW (counter -
Clockwise) from the Rotate drop-down list in the Properties panel, and
Then enter the number of rotations in the Rotation Count text field.
To test your animation, click the first keyframe and press Enter or use
The Controller to rewind and play your animation.
You can accelerate or decelerate the speed of the tween. To accelerate from
Beginning to end, enter a value between –1 and –100 in the Ease text field in
The Properties panel. To decelerate, use a value between 1 and 100.
See Figure 5-4 for an example of a ball that moves along a diagonal line. The
Ball also becomes smaller, so that it appears to recede in the distance as it
Moves.
Motion tweening along a path
To tween along a path that is not a straight line, you need to draw the path
On a guide layer. (See Book V, Chapter 4 for the steps to create a guide
Layer.) Your animation is on the guided layer that is associated with the
Guide layer. Figure 5-5 shows an example of a motion tween along a path.
Figure 5-4:
A simple
Motion
Tween
Including
Scaling.
Onion
Skinning
Shows all
The frames
Outlined. Book V
Chapter 5
Creating Animation
Creating Tweened Motion Animation 559
To create an animation that moves along a path, follow these steps (which
Start just like the steps for simple motion tweening):
1. On your animation layer, insert a keyframe where you want the ani -
Mation to start.
To add a keyframe, right-click on the frame to the left of where you want
To create a keyframe and choose Insert Frame from the contextual
Menu.
2. Click the keyframe and create or import the object or objects (symbol
Instance, group, or text) you want to animate.
3. Insert a keyframe where you want the animation to end.
4. Select the range from keyframe to keyframe by clicking the first
Keyframe and dragging to the last keyframe, or click anywhere
Between the two keyframes.
5. From the Tween drop-down list in the Properties panel, select
Motion.
6. In the Properties panel, select the Snap check box to snap the object
To the path.
Figure 5-5:
The star
Moves
Along a
Path. Here
You see the
Effect
Shown
With onion
Skinning on. Creating Tweened Shape Animation 560
7. If you want the object to rotate in the direction and angle of the path,
Select the Orient to Path check box.
8. Right-click the object’s layer and select Add Motion Guide.
The new layer is added. The layer is labeled Guide, and the object’s
Layer is indented beneath it.
9. On the guide layer, draw your path using the Pen tool.
10. Click the first keyframe of the object’s layer and drag the object by its
Registration point (a small plus or circle) to the beginning of the path
Until the registration point snaps to the path.
11. Click the last keyframe of the object’s layer and drag the object by its
Registration point to the end of the path until the registration point
Snaps to the path.
12. Press Enter to play the animation.
If you need to change your path, use the Macromedia Flash editing tools
To edit the path you created. You can use the Selection or Subselection
Tools to edit the path. (See Book V, Chapter 2 for details.)
The guide path is not visible in the published movie. However, you often don’t
Want to see the path even in your document, so you can more easily visualize
The animation. Just click the eye column of the guide layer to hide it.
Creating Tweened Shape Animation
If you want your objects to change shape, you need shape tweening, often
Called morphing. Unlike motion tweening, shape tweening works only with
Plain vector objects, usually ones that you create with the Macromedia
Flash drawing tools. You cannot shape tween a symbol instance, text, or a
Group unless you break them apart by choosing Modify➪Break Apart.
To turn text into shapes, choose Modify➪Break Apart twice. The first time
Only breaks apart the text into individual letters. The second time you
Choose Modify➪Break Apart, you create shapes from the individual letters.
However, remember that you can have only one animated object on a layer.
You can break apart text once, and then choose Modify➪Distribute to
Layers to put each letter on a separate layer. If you want to shape tween the
Letters, break apart each letter a second time.
Creating a simple shape tween
To shape tween a shape, follow these steps:Book V
Chapter 5
Creating Animation
Creating Tweened Shape Animation 561
1. On a new layer, right-click the frame where you want the animation
To start and select Insert Keyframe.
2. Create the beginning shape.
3. Insert a keyframe where you want to end the animation.
4. With the second keyframe selected, create the ending shape.
You can create the end shape by erasing the first shape and drawing a
New one or by modifying the first shape.
5. If you want to change color, you can simply choose another color for
The ending shape from the Color box in the Properties panel.
6. If you want to change transparency, open the Color Mixer panel
(Window➪Design Panels ➪ Color Mixer) and change the Alpha per -
Centage in the Alpha text field.
You can also change the color in the Color Mixer.
7. Click between the keyframes or select the entire span of the tween.
8. Select Shape from the Tween drop-down list in the Properties panel.
9. From the lower section of the Properties panel, select Angular from
The Blend drop-down list if your tween shape has straight lines and
Sharp corners. Select Distributive for more curvy shapes.
You may need to click the Collapse/Expand arrow at the lower-right
Corner of the Properties panel to display the lower section of the
Properties panel.
10. To play the animation, click the first keyframe and press Enter.
Using shape hints for more control
When you create your first shape tween, you may find that Macromedia
Flash calculated the transformation differently than you imagined it. You can
Give Macromedia Flash cues, called shape hints, that tell it which part of the
Original shape moves where, as shown in Figure 5-6.
Figure 5-6:
Shape hints
Show where
Points
On your
Beginning
Shape will
End up. Adding Basic Interactivity to Animation 562
To use shape hints, follow these steps:
1. Create a shape animation as described in the section, “Creating a
Simple shape tween.”
2. Click the first keyframe of the animation.
3. Choose Modify➪Shape➪Add Shape Hint or press Ctrl+Shift+H.
A small red circle with the letter “a” inside it appears on the Stage.
4. Drag the shape hint to the desired area in your shape.
5. Click the ending keyframe of the animation.
You again see a small circle with the letter “a” inside it on the Stage.
6. Drag the shape hint to the area in your shape where you want the
Beginning hint to move.
7. Repeat Steps 3 through 6 to place additional shape hints.
8. Press Enter to play the animation and check the results.
If you want, you can remove or hide existing shape hints:
✦ To remove a shape hint, drag it off the Stage.
✦ To display and hide shape hints, select the layer and keyframe with the
Shape hints and choose View➪Show Shape Hints.
You may get better results if you place the hints counterclockwise, starting
From the upper-left corner of your shape.
Adding Basic Interactivity to Animation
You often need to control how your animation works. For example, you may
Want some animation to loop or to stop at a certain point. You may also
Want to enable viewers to control the animation. Buttons commonly allow
Users to stop the animation (perhaps some introductory animation for your
Web site) or turn off the sound. You introduce interactivity and control by
Using ActionScript, the Macromedia Flash programming language.
The following sections offer a few ideas for using ActionScript in animation.
We cover interactivity in detail in Book V, Chapter 9.
Go To
You don’t need to play your animation from beginning to end. You can add
ActionScript (often simply called actions) to control the playing of theBook V
Chapter 5
Creating Animation
Working with Scenes 563
Frames. The goto action tells the movie to go to a different frame. At that
Point, you can tell the animation to stop or to play.
Say that you want your animation to play from Frames 1–24, but then you
Want the last half to loop over and over again. On Frame 24, you can add a
Goto action and tell Macromedia Flash to go to Frame 12 and play. The ani -
Mation goes to Frame 24, and then loops back to Frame 12 again. In this situ -
Ation, the first 11 frames play only once, but Frames 12 through 24 play over
And over in a loop.
In another situation, you may want animation to play from Frames 1–24 and
Then go to Frame 50 and stop. You may be using Frame 50 to display a menu.
In this case, you use the goto and stop actions.
Stop
Sometimes, you just want to stop the animation. For example, movie clips
Automatically loop. If you want them to play just once and then stop, you
Add a stop action in the last frame. For any animation, you can add a stop
Action at the end to make sure that everything stops at the same time.
Play
After you stop an animation, you may want to play it again. You can use the
Play action to play a movie when certain conditions are met. If the condi -
Tions are not met, the movie does not play (due to a stop action).
On (mouse event)
The on action is used for buttons, which are explained in Book V, Chapter 3.
To add interactivity, you specify what happens when the button is clicked or
Released, when a mouse cursor passes over or off the button, or when a
Mouse cursor is dragged over or off the button. For example, a common use
Of the on action would be to specify that when the button is clicked, you go
To a different frame or URL, such as another page on the Web site.
Working with Scenes
A scene is a section of an animation. You can divide up your animation into
Scenes, each with its own Timeline. The scenes play back in the order you
Set. The purpose of creating a scene is to help you organize your animation.
By default, you work in Scene 1. The current scene name is displayed
Beneath the Layer list. To create a new scene, choose Insert➪Scene. Working with Scenes 564
To manage your scenes, choose Window➪Scene. The Scene panel opens, as
Shown in Figure 5-7.
You can use the Scene panel to work with scenes in the following ways:
✦ Change scene order: Drag a scene’s name in the Scene panel to a new
Location to change the order of the scenes.
✦ Rename a scene: Double-click a scene’s name, type a new name, and
Press Enter to rename a scene.
✦ Add a scene: Click the Add Scene button at the bottom of the Scene
Panel to add a scene.
✦ Delete a scene: Select a scene and click the Delete Scene button at the
Bottom of the Scene panel to delete a scene.
✦ Duplicate a scene: Select a scene and click the Duplicate Scene button
At the bottom of the Scene panel to create a copy of a scene.
✦ View a scene: Select the scene in the Scene panel to view the scene.
Figure 5-7:
The Scene
Panel helps
You manage
Scenes.