1. technology and computing
2. software
3. graphics software

Activity 6.1 Guide
How to Apply Colors and Gradients
You can use the Color Mixer to apply colors that aren’t in the standard palette. You can create new colors and add
them to the palette, which you can save for later use. You can also incorporate new colors into gradient fills and
store your gradients for repeated use.
Gradients can be helpful when creating effects, such as glows, photo-realistic spheres, solar flares, and glowing
buttons. With Macromedia Flash 8 you can create two types of gradient fills—linear and radial.
Create Colors
1.
Start Flash and open a new blank document.
2.
Use the Oval tool to create a simple shape on the Stage.
3.
You can adjust the fill and stroke colors by using the
Property inspector. To apply a color that is not in the
current palette, use the Color Mixer panel (Figure 1).
By default, the Color Mixer panel is open. If it is not,
select Window > Color Mixer.
4.
Make sure you have selected both the stroke and fill of
your shape.
Figure 1 Color Mixer panel
Note: To select the stroke and fill of your shape,
double-click the shape with the Selection tool.
5.
Click the paint bucket icon (not the Color box) to select
the Fill Color section in the Color Mixer (Figure 2).
You can select a new fill color from the palette by
clicking the Fill Color box, or you can enter precise
RGB values. You can also enter these values as
hexadecimal numbers. This is helpful if a client provides
RGB or hexadecimal values for colors. Use the Alpha
slider to adjust the level of transparency.
6.
Figure 2 Fill color box
To browse for a color, click and drag in the Color
Mixer. To adjust the tint, drag the Brightness control
As you drag, the colors you point to are shown in the
Current Color Swatch area and in the Fill Color box
(Figure 3).
Color Mixer
Brightness control
Alpha
Current color
Old color
Figure 3 Pick color
How to Apply Colors and Gradients 6 - 27
Activity 6.1 Guide
Add Colors to the Palette
Once you have mixed your own colors, you can use them to create a custom palette. You do this with the Color
Mixer and Color Swatches panels.
1.
Make sure the Color Mixer and Color Swatches panels
are both visible.
If they are not, select Window > Color Mixer and
Window > Color Swatches.
2.
Use the Color Mixer to create a new color by using the
color bar or the RGB boxes.
3.
From the Color Mixer options menu, select Add
Swatch (Figure 4).
Figure 4 Color Mixer options menu
The new color is added to the palette in the Color
Swatches panel (Figure 5).
New color swatch
Gradient
Figure 5 Color Swatches panel
Web-Safe Colors Palette
By default, the Color Swatches panel displays the web-safe colors palette. This palette is designed to work for all
visitors’ monitors, including those with older monitors that display only 256 colors. Although all newer monitors
work with more than 256 colors, many web designers recommend continuing to use this palette so your pages
appear consistent to all visitors. (An additional benefit is that it gives you a limited range of colors from which to
choose; sometimes it’s easier to make good choices when these choices are limited.) If you’re sure all your viewers
have newer monitors, you can feel free to deviate from this palette by using the Color Mixer.
Create Gradients
1.
Make sure the Color Mixer and Color Swatches panels
are both visible.
If they are not, select Window > Color Mixer and
Window > Color Swatches.
2.
Use the Selection tool to double-click the oval shape on
the Stage.
3.
In the Color Mixer, select Radial from the Fill Style
menu (Figure 6).
6 - 28 How to Apply Colors and Gradients
Figure 6 Fill Style menu
Activity 6.1 Guide
This fills the selected shape with a radial gradient,
composed of the two colors indicated in the two
gradient color swatches.
Extend mode in the
Overflow menu
Note: By default, these colors may be set to black and
white.
You can have up to sixteen different gradient color
swatches. To add more, click in the gradient definition
bar.
Gradient pointer
Note: Radial gradients work best on elliptical shapes.
4.
Make sure the Overflow menu is set to Extend
(Figure 7).
Overflow lets you control colors applied past the limits
of a gradient. The overflow modes are Extend (the
default mode), Reflect, and Repeat.
5.
Gradient color swatch
Figure 7 Color Mixer panel
Click the left Gradient pointer in the Color Mixer.
The gradient starts out black in the center and transitions
to white. With the left pointer selected, use the Color
box to change the inner color of the gradient. The
Gradient color swatch will change color.
6.
Click the Color Mixer and select a new color.
The new color is applied to the gradient. You can also
select colors by entering numbers in the RGB and
hexadecimal boxes.
You can also change the color of the right (white)
pointer to change the outer color of the gradient. You
can even click along the gradient definition bar
(Figure 8) to enter additional colors.
7.
Click along the gradient definition bar to place an
intermediate color and change the color to black
(Figure 8).
8.
From the Color Mixer options menu, select Add
Swatch.
Figure 8 Gradient definition bar
Figure 9 Applied gradient
The new gradient is added to the gradients in the Color
Swatches panel.
9.
Deselect the shape on the Stage to see the new gradient
applied to your shape (Figure 9).
How to Apply Colors and Gradients 6 - 29
Activity 6.1 Guide
How to Create Text Effects with Filters
You can add graphic filters to text, movie clips, and buttons in Macromedia Flash 8. Graphic filters are available on
the Filters tab of the Property inspector.
Applying the Drop Shadow filter to text
The Drop Shadow filter makes it appear as if text or an object is casting a shadow.
1.
Start Flash and open the document you want to edit.
2.
Select the text to which you want to add a filter.
3.
Make sure the Property inspector is open. (Select
Window > Properties.)
4.
Click the Filters tab.
5.
The Property inspector switches to Filters (Figure 1).
6.
Click the Add Filter button (+).
7.
Select Drop Shadow from the Filters menu (Figure 2).
Figure 1 Filters Property inspector
The Drop Shadow filter is applied to the text (Figure 3).
You can adjust the characteristics of the Drop Shadow,
such as its color, in the Property inspector.
Figure 2 Filters menu
Figure 3 Drop shadow applied
Other available filters include the following:
Blur
Blur the pixels in an image. Adjust the amount and direction of blur by using the X and Y text boxes.
Glow
ƒ
Glow: Make the object appear to glow.
ƒ
Inner Glow: Highlight the object.
ƒ
Knockout: Remove object and leave glow. Object appears outlined in glow.
Gradient glow
Normal glows are one color. You can also create a glow by using a gradient. Gradient glow works similarly to a
gradient fill. You can set the gradient to vary from two to sixteen different colors.
How to Create Text Effects with Filters 6 - 31
Activity 6.1 Guide
Bevel
ƒ
Inner Bevel: Give an object a 3D look by making the inside of the object look lower than the outside of the
object.
ƒ
Outer Bevel: Give an object a 3D look by making the inside of the object look higher than the outside of the
object.
You can alter the bevel’s color, the type of bevel (inner or outer), the shape of the bevel edge (flat, smooth, sloped,
and so on), its contrast, its softness, and the angle of light that falls on it.
Gradient bevel
As with Gradient Glow, you can create a bevel by using a gradient.
Adjust color
ƒ
Brightness: Make the object brighter or darker.
ƒ
Contrast: Increase or decrease the distinction between light and dark.
ƒ
Hue: Increase or decrease the degree of color. For example, raising hue on blue text makes the text more blue.
ƒ
Saturation: Increase the intensity of color. Raising saturation on blue text makes the text a more vibrant blue.
6 - 32 How to Create Text Effects with Filters
Activity 6.1 Guide
How to Import Images
Although Macromedia Flash 8 provides great drawing tools of its own, you will often want to import images that
cannot be created in Flash, such as photographs, vector drawings, preexisting graphics such as company logos, and
so on. As a designer, you need to decide when it’s best to create images in Flash and when you need to import
images. You make these decisions based on design requirements, file size requirements, and available resources.
Image Formats Supported by Flash
Flash supports a range of images for import. Generally, you want to get these to their desired size and form by using
an image-editing program before you import them into Flash.
Some of the most commonly used image formats are:
• PNG: This is the file format Macromedia Fireworks uses, and Flash supports roundtrip editing between Flash and
Fireworks. This means you can open a PNG in Fireworks from within Flash, edit it in Fireworks, and view these
changes in Flash immediately.
• JPEG: This is the standard file format for web photos. JPEGs can be compressed. Use Fireworks to perform
necessary compression before importing. You can also open a JPEG from within Flash, edit it in Fireworks or
another image editor, and view these changes in Flash immediately.
• GIF, BMP: These should be optimized for file size prior to import, using Fireworks.
• Macromedia FreeHand and Adobe Illustrator vector files: You can import these into Flash, complete with
vectors, layers, frames, and symbols.
Bitmapped and vector images
Bitmapped images are composed of different-colored pixels that combine to make an image. Graphics and
photographs saved as GIFs or JPEGs are both bitmapped formats. When you create bitmaps, you essentially decide
the color for each pixel.
Bitmap images are resolution dependent. This means the size and quality of the image depends on the number of
pixels per inch in the image. Images saved for onscreen display have a resolution of 72 pixels per inch because
that’s all most monitors can handle, whereas images saved for print can have up to 300 pixels per inch.
In contrast to bitmaps, vector graphics are not created pixel-by-pixel. Instead, vector graphics use a series of
commands to determine a line’s shape, location, thickness, and color. The actual shape is rendered (or drawn) on
the screen at view time.
Flash’s native format is vector, because vector images produce smaller file sizes. However, as the previous list
indicates, you can import bitmapped images into Flash when you need them.
How to Import Images 6 - 33
Activity 6.1 Guide
Importing Images to the Stage
When you import an image to the Stage, it is also placed in the document library.
1.
Start Flash and open the document into which you want
to import an image.
2.
Select the layer where the image should appear and click
the Stage.
3.
Select File > Import > Import to Stage.
The Import dialog box opens (Figure 1).
4.
Browse to the folder with the desired image.
5.
Select the desired image.
6.
Click Open (Windows) or Choose (Macintosh).
The image appears on the Stage, located in the selected
layer. The image has also been added to the Library.
Figure 1 Import dialog box
Note: To edit the image, select it on the Stage and click
Edit in the Property inspector. Flash opens Fireworks,
where you can edit the image and return to Flash after
you finish.
Importing Images into the Library
When you import an image into the Flash library, the image is ready for use but not immediately added to the Flash
document.
1.
Start Flash and open the document into which you want
to import an image.
2.
Select the layer where the image should appear and click
the Stage.
3.
Select File > Import > Import to Library.
4.
If the Library panel is not open, select
Window > Library.
The image appears in the Flash library (Figure 2).
5.
Select the image to preview it in the Library panel.
Figure 2 Flash library with imported image
6 - 34 How to Import Images
Activity 6.1 Guide
Importing a Fireworks PNG
When you import a Fireworks PNG, Flash lets you maintain editable elements of the PNG, including layers and
text.
1.
Start Flash and open the document into which you want
to import the Fireworks PNG.
2.
Select the layer where the PNG should appear and click
the Stage.
3.
Select File > Import > Import to Stage.
The Import dialog box opens (Figure 1).
4.
Browse to the folder with the PNG.
5.
Select the desired PNG.
6.
Click Open (Windows) or Choose (Macintosh).
Figure 3 Fireworks PNG Import Settings
The Fireworks PNG Import Settings dialog box opens
(Figure 3).
7.
Flash asks if you want to maintain the Fireworks layers.
To keep layers intact, select Import as movie clip and
retain layers.
8.
Flash also asks if you want to keep PNG objects and
text editable or rasterize them. Rasterize means to
convert to a bitmap image.
• To keep image segments editable, select Keep all
paths editable.
• To keep text editable, select Keep all text editable.
9.
Click OK.
Flash imports the PNG. The image appears both on the
Stage and in the library.
How to Import Images 6 - 35
Activity 6.1 Guide
Importing Freehand and Other Vector Drawings
Because vector-based drawing programs such as Macromedia FreeHand and Adobe Illustrator support layers and
frames, Flash lets you preserve these characteristics during import.
1.
Start Flash and open the document into which you want
to import the FreeHand vector file.
2.
Select the layer where the vector file should appear and
click the Stage.
3.
Select File > Import > Import to Stage.
The Import dialog box opens (Figure 1).
4.
Browse to the folder with the vector file.
5.
Select the desired vector file.
6.
Click Open (Windows) or Choose (Macintosh).
The FreeHand Import Settings dialog box opens
(Figure 4).
To keep layers intact, select Layers. You can also
convert the file’s pages to Flash scenes or keyframes.
6 - 36 How to Import Images
Figure 4 FreeHand Import dialog box
Activity 6.1 Guide
How to Create Transitions with Motion Tweens
You may have noticed from watching television or movies that transitions are a subtle but important part of telling a
story. For example, dissolving between images can indicate a passage of time. On the web, you can use transition
effects to create moods and to help keep your visitors interested. You can use them to focus the visitor’s attention or
to indicate a preferred path through your site. One way to create transitions in Flash is to apply effects to a motion
tween.
Rotation
In the Property inspector, you can add rotation to any motion tween. Rotation can draw attention to content that is
entering or exiting the Stage.
1.
Start Flash and open the document you want to edit.
2.
Locate the layer and keyframe that contain the symbol
you plan to transition to the Stage or from the Stage.
This will be the starting keyframe for the motion tween.
3.
Make sure the symbol is alone on its own layer.
4.
Decide how much time is required for the symbol to
move to or from the Stage. This tells you where to place
the ending keyframe for the motion tween.
5.
Insert the ending keyframe accordingly on the Timeline
(Figure 1).
Figure 1 Flash timeline
Note: If you are calculating in seconds, be sure to note
the frame rate (fps) at the bottom of the Timeline. By
default, Flash sets new documents to 12 frames per
second.
6.
Select the starting keyframe for the transition and select
the symbol (Figure 2).
7.
Use the Selection tool to move the object to its starting
position—on the Stage (ready to exit) or off the Stage
(ready to enter) (Figure 2).
Figure 2 Motion tween start position
Note: You might want to add multiple effects such as
changing size or fading to make the object appear to
grow or fade in while it enters or fade out and shrink as
it exits.
• Changing size: Reduce or increase the image
percentage in the Transform panel with the Constrain
box selected.
• Fading: Select the symbol and select Alpha from the
Color pop-up menu in the Property inspector. Adjust
the alpha setting to increase or decrease transparency.
8.
Select the ending keyframe for the transition (Figure 3).
9.
Use the Selection tool to move the symbol to its ending
position, on or off the Stage (Figure 3).
Figure 3 Motion tween stop position
How to Create Transitions with Motion Tweens 6 - 37
Activity 6.1 Guide
10. Click anywhere between the starting and ending
keyframes. Select Motion from the Tween pop-up menu
in the Property inspector (Figure 4).
11. Select CW (clockwise) or CCW (counterclockwise)
from the Rotate pop-up menu in the Property inspector
(Figure 5).
Figure 4 Tween pop-up menu
12. In the Rotate times box in the Property inspector, enter
the number of times you want the symbol to rotate.
13. Select the Sync checkbox.
This synchronizes the motion to the number of frames in
the Timeline.
Figure 5 Rotate pop-up menu
Note: You can also synchronize sound with this tween
by choosing a sound from the Sound pop-up menu. To
have choices on the Sound pop-up menu, you must first
import sounds, either from an external source or from
the common libraries in Flash.
If you synchronize sound, select Stream from the Sync
pop-up menu in the Property inspector. Now the sound
will play only with the motion tween.
14. Save the movie.
15. Select Control > Test Movie to test the movie.
16. Select File > Close to close the preview window.
Change frame rate
The document’s frame rate determines how fast the
playhead moves. By default, frame rate is set at 12 frames
per second. You can change this to any number between
0.01 and 120. With larger movies, increasing the frame rate
will increase the size of your published document.
16. Click away from the Stage.
The Property inspector switches to Document.
17. In the Frame rate text box, type 15 and press Enter
(Windows) or Return (Macintosh).
Note: It is generally best to keep frame rate to 16 or
less.
18. Select Control > Test Movie to test the movie.
Observe that the animation plays faster.
19. In the Frame rate text box, type 6 and press Enter
(Windows) or Return (Macintosh).
20. Select Control > Test Movie to test the movie.
Observe that the animation plays half as fast.
21. Select File > Close to close the preview window.
6 - 38 How to Create Transitions with Motion Tweens
Activity 6.1 Guide
Fading
By creating a motion tween with different alpha settings, you can fade images in and out.
1.
Start Flash and open the document you want to edit.
2.
Locate the layer and keyframe that contain the symbol
you plan to fade. This will be the starting keyframe for
the fade.
3.
Make sure the symbol is alone on its own layer.
4.
Decide how much time is required for the symbol to
complete the transition. This tells you where to place the
ending keyframe for the motion tween.
5.
Insert the ending keyframe accordingly on the Timeline.
Note: If you are calculating in seconds, be sure to note
the frame rate (fps) at the bottom of the Timeline. By
default, Flash set new movies to 12 frames per second.
6.
Select the starting keyframe for the transition and click
on the symbol to select it.
7.
In the Property inspector, select Alpha from the Color
pop-up menu (Figure 6).
8.
Drag the sliding Color percent bar (to the right of the
Color menu) down to 0% (Figure 7).
Figure 6 Color pop-up menu
Figure 7 Alpha slider
Note: The object will disappear from the Stage, but the
blue outline will be visible when the symbol is selected.
9.
Right-click (Windows) or Control-click (Macintosh)
anywhere between the two keyframes and select Create
Motion Tween from the context menu.
10. Save the movie.
11. Select Control > Test Movie to test the movie.
You see the image fade in.
Note: To create a fade-out, leave the Alpha setting at
100% on the starting keyframe and change the Alpha
setting on the ending keyframe to 0%.
12. Select File > Close to close the preview window.
How to Create Transitions with Motion Tweens 6 - 39
Activity 6.1 Guide
Color Fades
You can use color fades to draw the viewer’s attention to an object on screen. To create a color fade, apply a motion
tween between two instances of the same symbol, and then change the color of the instances in the starting and
ending frames.
1.
Start Flash and open the document you want to edit.
2.
Locate the layer and keyframe that contain the symbol.
This will be the starting keyframe for the color fade.
3.
Make sure the symbol is alone on its own layer.
4.
Decide how much time is required for the symbol to
complete the transition. This tells you where to place the
ending keyframe for the motion tween.
5.
Insert the ending keyframe accordingly in the Timeline.
Note: If you are calculating in seconds, be sure to note
the frame rate (fps) at the bottom of the Timeline. By
default, Flash sets new movies to 12 frames per second.
6.
Select the starting keyframe for the transition and select
the symbol.
7.
In the Property inspector, select Tint from the Color
pop-up menu (Figure 8).
8.
Use the Color box to select a new color and enter 100%
for the tint amount (Figure 9).
9.
Right-click (Windows) or Control-click (Macintosh)
between the two keyframes and select Create Motion
Tween from the context menu (Figure 10).
Figure 8 Color pop-up menu
Figure 9 Tint slider
Figure 10 Timeline context menu
Note: You can also synchronize sound with this tween
by choosing a sound in the Sound pop-up menu. To
have choices in this pop-up menu, you must first import
sounds, either from an external source or from the
common libraries in Flash.
If you synchronize sound, select Stream from the Sync
pop-up menu. Now the sound will only play with the
motion tween.
10. Save the movie.
11. Select Control > Test Movie to test the movie.
12. Select File > Close to close the preview window.
6 - 40 How to Create Transitions with Motion Tweens
Activity 6.1 Guide
Flipping Images
Flipping images and then creating a motion tween can create an effective transition between images of roughly the
same size. The trick is to flip the first image half way and then start fading in the second image while the first image
is still flipping to make a smooth transition.
1.
Start Flash and open the document you want to edit.
2.
Locate two symbols on different layers that you plan to
transition between: the entering object and the exiting
object. Position the symbols in roughly the same
position on the Stage.
3.
Decide how much time is required to complete the
transition. This tells you where to place the ending
keyframe for the motion tween.
4.
Insert keyframes in both layers accordingly in the
Timeline (Figure 11).
5.
Insert a keyframe in the entering object’s layer one
frame after the first keyframe of the exiting object
(Figure 12). For example, the exiting object will exit
from frame 1 to 10, so insert a keyframe in frame 2 of
the entering object’s layer.
6.
Select the last keyframe of the exiting object.
7.
Select the exiting object on the Stage and select
Modify > Transform > Flip Horizontal.
Note: Instead of Flip Horizontal, you can select Flip
Vertical. As long as both exiting and entering objects
flip the same way, the transition will work.
8.
Right-click (Windows) or Control-click (Macintosh) in
the first keyframe of the exiting object and select
Create Motion Tween from the context menu.
9.
Insert a keyframe in the midpoint of the tween for the
exiting object to cut the flip tween in half.
Figure 11 Keyframes in both layers
Figure 12 Keyframe in frame 2
10. Select the last keyframe of the entering object and select
Modify > Transform > Flip Horizontal.
Note: Select the same type of flip for the entering object
as for the exiting object.
How to Create Transitions with Motion Tweens 6 - 41
Activity 6.1 Guide
Removing frames
Next, the second half of the exiting object’s flip needs to
be eliminated.
Flash has two ways to delete frames: Clear Keyframes
and Remove Frames. Clear Keyframe removes the
content of a keyframe. Any changes the keyframe makes
to an object will be disregarded, and frame content will
appear as it does in the preceding keyframe. Remove
Frames deletes frames entirely.
Figure 13 Remove frames
11. Select the last keyframe for the exiting object.
12. Right-click (Windows) or Control-click (Macintosh)
and select Clear Keyframe from the context menu.
Observe that the exiting object now appears as it does at
the midway keyframe. To complete the object flip, the
exiting object needs to be deleted from this frame. To do
so, use Remove Frames.
13. Click and drag to select all frames after the midpoint
keyframe, and then right-click (Windows) or Controlclick (Macintosh) the selected frames and select
Remove Frames from the context menu (Figure 13).
Figure 14 Clear first frame
The second half of the flip is removed.
14. Right-click (Windows) or Control-click (Macintosh)
between the second keyframe and the last keyframe of
the entering object and select Create Motion Tween
from the context menu.
Figure 15 Easing slider
The entering layer still contains a symbol in the first
keyframe. This frame should be empty.
15. Right-click (Windows) or Control-click (Macintosh) in
the first keyframe of the entering layer, and select Clear
Frames from the context menu (Figure 14).
16. Select the first keyframe of the entering object’s motion
tween and click the symbol on the Stage to view its
properties in the Property inspector.
17. In the Property inspector, select Alpha from the Color
pop-up menu and set the alpha to 0%.
18. Click the first frame of the entering object’s motion
tween and, in the Property inspector, change the easing
to –100% (Figure 15).
The fade begins slowly.
Note: You can also synchronize sound with this tween
by clicking in the entering object layer and choosing a
sound from the Sound pop-up menu. To have choices in
this pop-up menu, you must first import sounds, either
from an external source or from the common libraries in
Flash.
If you synchronize sound, select Stream from the Sync
pop-up menu.
6 - 42 How to Create Transitions with Motion Tweens
Activity 6.1 Guide
19. Save the movie.
20. Select Control > Test Movie to test the movie.
21. Select File > Close to close the preview window.
Text Transitions
A good technique to introduce text is to distribute the letters of the text on separate layers. Then you can animate the
individual letters to create interesting effects and personality.
1.
Start Flash and open the document you want to edit.
2.
Create a new layer on which to insert the text.
3.
Use the text tool to type the text approximately where
you want it to start, on or off the Stage (Figure 16).
4.
Select the text and select Modify > Convert to Symbol.
Enter a name for the symbol, select Movie Clip as the
behavior, and click OK (Figure 17).
Figure 16 Text on Stage
This Converts the text into a movie clip symbol. You
can now use the symbol in a motion tween.
Note: It is easier to work on the text in a movie clip
symbol because you are eventually going to generate a
layer for each text letter. This would clutter the main
Timeline. Also, if you want the text animation to run
longer than the main Timeline, it must be in a movie clip
symbol. (Graphic symbols are limited by the length of
the main Timeline.)
5.
Figure 17 Convert to Symbol dialog box
Make sure the Library panel is open (if not, select
Window > Library). Double-click the movie symbol to
edit the symbol (not just the instance of the symbol on
the Stage).
The symbol appears on its own Timeline.
6.
Insert a new keyframe in frame 10.
This will be the ending point for the first part of your
text animation.
7.
Right-click (Windows) or Control-click (Macintosh) in
frame 1 and select Create Motion Tween from the
context menu.
8.
Drag the text in frame 1 up about three inches.
9.
Insert a keyframe in frame 11 (Figure 18).
10. Select the text and select Modify > Break Apart.
Figure 18 Keyframe in frame 11
Figure 19 Text broken into separate letters
The text is divided into separate letters (Figure 19).
How to Create Transitions with Motion Tweens 6 - 43
Activity 6.1 Guide
11. With the letters still selected, select Modify > Timeline
> Distribute to Layers.
Each letter is now on its own layer in frame 1
(Figure 20).
12. With all the letter layers selected, click and drag their
keyframes from frame 1 to one frame past the end of
your initial motion tween (this should be frame 11)
(Figure 21).
You now have each letter in position to begin any
individual motion tweens or effects. Each letter layer
contains a starting keyframe.
13. Add an ending keyframe for each letter at frame 11.
14. Apply one or any combination of the following
animation ideas to the letters.
Figure 20 Text distributed to layers
• Rotate: To make the letters rotate, create motion
tweens with the Rotate option selected.
• Move: Create motion tweens and move the letters in
the ending keyframes off the Stage. For example, you
could have every letter exit the Stage in a different
direction.
• Fade: Convert the letters in the starting keyframes to
symbols. Then create the ending keyframes for each
letter at different positions on the Timeline. Apply
motion tweens. Use the Color pop-up menu in the
Property inspector to change the alpha for the symbols
in the ending keyframe to 0%. Adjust the starting and
ending keyframes for each letter so the letters fade out
at different points along the Timeline. You can also
apply a color fade instead of a fade to 0% alpha.
Figure 21 Layers dragged past original motion
tween
Figure 22 illustrates moving the letters.
Figure 23 illustrates tweening an “E” shape into a
symbol of the Earth.
Figure 22 Moving letters
Figure 23 Tweening E into Earth
6 - 44 How to Create Transitions with Motion Tweens
Activity 6.1 Guide
15. Insert a keyframe at the end of the text animation movie
clip Timeline and add a stop action by using the Actions
panel (Figure 24).
Note: If you don’t add the stop action, the movie clip
will keep running continuously, even after the main
Timeline animation is finished.
16. Click Scene 1 on the information bar to return to the
main Timeline.
17. Drag the keyframe holding the text animation movie
clip to the appropriate starting point on the main
Timeline.
18. Position the text animation movie clip instance in the
correct starting point on the Stage.
Figure 24 Actions panel with stop action
19. Save the document.
20. Select Control > Test Movie to test the movie.
21. Select File > Close to close the preview window.
Other letter animation ideas:
• Break the letters apart and distribute them to layers before
they enter the Stage. Have the letters fall onto the Stage in
different ways.
• Bring the letters onto the Stage as one unit and then have
all the letters do a trick, one at a time.
• Create a movie clip out of a single letter and have that
letter constantly running a shape or motion tween. For
example, you could have the letter “i” in “Lighthouse”
continuously change into a little lighthouse, send out a
beam of light, and then change back into an “i.”
• Break the letters apart to convert them to shapes and create
shape tweens that morph the letters into other images.
How to Create Transitions with Motion Tweens 6 - 45
Activity 6.1 Guide
How to Use Filmmaking Techniques
Web designers have an entire history of filmmaking techniques to draw from and inspire them when creating
websites and digital movies. With Macromedia Flash 8, you can simulate traditional film techniques. As you design
Flash movies, think of creative ways to incorporate these effects and look for opportunities to create new effects that
may in turn inspire traditional filmmaking.
Four popular filmmaking techniques include:
• Pan, Tilt, and Zoom Effects: Moving the camera horizontally across a scene is known as a pan. Moving the
camera up or down across a scene is known as a tilt. Moving the camera away from or toward a subject in a scene
is known as a zoom.
• Camera Angles: Using the rule of thirds and adjusting the viewing angle can help emphasize a certain aspect of
the subject.
• Cross Fades: This technique appears to fade in one image while another fades out, a transitional effect for
moving from one image to another.
• Bounce Effect: A moving object rebounds before stopping. This technique grabs attention and can focus the
viewer on an area of the screen. This effect is sometimes combined with a sudden sound effect, such as a “boing”
or tire screech.
Create a Pan, Tilt, or Zoom Effect
To set a scene in a movie, the camera moves over a large scene and then zooms in to a specific point. A pan (or tilt)
followed by a zoom is a good technique to introduce a digital narrative. Zooming in focuses the viewer’s attention
on a particular part of the image.
1.
If your image is not already a symbol, convert it to a
movie clip symbol (Figure 1). Place the symbol on the
right side of the workspace, covering the Stage. (Be sure
the Stage is smaller than the image.)
2.
Insert a keyframe in the Timeline where you want the
pan to end (Figure 2).
3.
Select the ending keyframe. Drag the instance of the
movie symbol to the opposite side of the workspace.
Figure 1 Image converted to symbol
Figure 2 Insert keyframe
How to Use Filmmaking Techniques 6 - 47
Activity 6.1 Guide
4.
Click in the Outline column to the right of the layer
name for the layer that contains the movie symbol
(Figure 3).
Note: It is easier to see the border of an image if you set
the layer holding the image to outline mode (especially
if the image contains a lot of grays that can fade into the
area outside the Stage). Be sure the image does not slide
off the Stage during a pan.
5.
Select the starting frame and select Insert > Timeline >
Create Motion Tween.
This motion tween moves the movie symbol
horizontally across the Stage (a pan). The ending
keyframe for this motion tween will be the starting point
for another motion tween that zooms the image 300%.
6.
Add a keyframe for the ending point of the second
motion tween (the zoom) (Figure 4).
7.
Select the ending keyframe and select
Window > Transform to open the Transform panel.
8.
Increase the magnification in the Transform panel to a
specific percent of its original size (such as 300%).
Make sure Constrain is selected (Figure 5).
Outline column
Figure 3 Image outlined
Figure 4 Keyframe for zoom
The image expands (Figure 6).
9.
Create a motion tween between the second and third
keyframes.
10. In the Property inspector, increase the easing to a value
between 60 and 100 for the motion tween (Figure 7).
Figure 5 Transform panel
This will cause the zoom to start quickly and slow down
as it arrives at the resting point.
Figure 6 Image zoomed
Figure 7 Property inspector
6 - 48 How to Use Filmmaking Techniques
Activity 6.1 Guide
11. Insert a keyframe after the last frame of the movie and
add a stop action (Figure 8).
Figure 8 Stop action
Adding frame labels
You may want to add frame labels to the keyframes. Frame labels help you and other designers remember what is
happening in a particular frame.
12. Select a keyframe; then open the Property inspector and
type the name in the Frame label box (Figure 9).
The label will appear along the Timeline in the frames
after the keyframe (Figure 10).
13. If there are no frames after the keyframe, insert a blank
keyframe in the same layer several frames after the label
to see the label.
14. Turn off outlining, save the file, and select
Control > Test Movie.
Figure 9 Frame label box in Property inspector
Figure 10 Frame label in Timeline
Further ideas:
• For a documentary: Slow the process down to reflect the pace of the narrative. In www.becominghuman.org, for
example, a slow pan and zoom go well with a documentary style narrative.
• For humor or action: Make the zoom-in portion of the pan quick and somewhat unsteady, as if looking for the
subject of the scene. You might zoom in and out several times during a pan, to show you are looking for
something in the scene.
• For drama: Pan or tilt the scene without a zoom. This method presents a sweeping landscape, such as a mountain
range leading to the ocean. Because it takes in the majority of the landscape, it adds depth and seriousness to the
tone of the narrative.
How to Use Filmmaking Techniques 6 - 49
Activity 6.1 Guide
Camera Angles
When you have several images on the screen in a digital narrative, you can use some tricks for emphasis. Use the
rule of thirds and adjust the viewing angle to emphasize a certain aspect of the subject.
• The rule of thirds states that if you divide the screen into a 3-by-3 grid, the intersections of the lines are areas
where the eye will focus. Line up the items of focus at these intersections on the screen.
• You can add importance to a subject by presenting the subject as seen from below. Likewise, you can diminish
the importance of a subject as seen from above.
Even though the girl isn’t in the center of Figure 11, the eye
is drawn to her because she is near the intersection of the
rule-of-thirds lines.
Looking up at the man having a moment in Figure 12 makes
him look powerful. If the camera angled down on him, he
would look smaller and less powerful.
Figure 11 Rule of thirds
Figure 12 Camera angle
6 - 50 How to Use Filmmaking Techniques
Activity 6.1 Guide
Cross Fades
A transitional effect for moving from one image to another is to fade one image out as you fade the other in.
1.
Convert into symbols two images that will be crossfaded, and place them on separate layers.
2.
Insert keyframes in both layers at the same point in the
Timeline to mark the beginning of the fade-out of the
first image and the fade-in of the second image.
3.
Decide the length of the transition and insert keyframes
in both layers at the same point in the Timeline to mark
the end of the fade-out of the first image and the fade-in
of the second image.
4.
Select the first keyframe for the image that will fade out,
select the image, and use the Property inspector to set its
alpha level to 100% (Figure 13).
Note: If your images are in the same position on the
Stage, you need to hide the top layer before you can
select the symbol in the bottom layer. It is easier to
select your images if they are offset on the Stage.
5.
Select the first keyframe for the image that will fade in
and set its alpha level to 0%.
6.
Select the last keyframe for the image that will fade in
and set its alpha level to 100%.
7.
Select the last keyframe for the image that will fade out
and set its alpha level to 0%.
8.
Select the first keyframe for each image and insert a
motion tween.
Figure 13 Color pop-up menu
Figure 14 Frame label box
Figure 15 Frame labels in Property inspector
Note: You can insert a motion tween by right-clicking
(Windows) or Control-clicking (Macintosh) and
choosing Create Motion Tween from the context menu,
by choosing Insert > Timeline > Create Motion Tween,
or by using the Tween pop-up menu in the Property
inspector.
9.
Add Frame labels to the first keyframes of each motion
tween (Figure 14).
The labels appear on the Timeline (Figure 15).
Note: You can make the fade-out start after the fade-in
or vice versa. You can also extend the fade-out to end in
the same frame as the end of the fade-in.
If the images zoom in or out before the fade-out, you
probably want to continue the zooming process during
the fade.
10. Save the movie.
11. Select Control > Test Movie to test the movie.
12. Select File > Close to close the preview window.
How to Use Filmmaking Techniques 6 - 51
Activity 6.1 Guide
Bounce Effect
Some animated text and images that move onto the Stage will seem more lifelike if you add a little bounce to them
when they reach their stopping point. This is an old animation technique acknowledging that any moving object
carries momentum and thus rebounds a bit before it comes to a stop. This technique also grabs attention and can
focus the viewer on an area of the screen.
1.
Motion-tween a symbol so it moves across the Stage.
Note: When dragging the symbol to its ending point,
hold down the Shift key to constrain the symbol so it
moves only in the direction you drag, without shifting
up or down.
2.
Label the starting keyframe for the motion tween Moves
Right or Moves Left (Figure 16) and label the second
keyframe Bounce.
3.
Insert a keyframe 3–5 frames after the end of the motion
tween. Label this frame Back.
4.
Insert another keyframe 8–10 frames after the end of the
original motion tween. This will be the final resting
point of the image.
Note: You can make the final bounce back into place
take longer (more frames) to make the object seem like
it’s slowing down, by inserting the keyframe in this step
farther down the Timeline.
5.
Select the keyframe labeled Back.
6.
In this keyframe, click the symbol instance on the Stage
and use the arrow keys to move the instance 5–10 key
presses back in the direction it came from.
7.
Create motion tweens between all the keyframes.
8.
Insert a keyframe after the last frame and add a stop
action (Figure 17).
The Timeline should appear as it does in Figure 18.
9.
Save the movie.
10. Select Control > Test Movie to test the movie.
11. Select File > Close to close the preview window.
6 - 52 How to Use Filmmaking Techniques
Figure 16 Frame label
Figure 17 Actions panel
Figure 18 Final timeline
Activity 6.1 Worksheet
Examples of Effects
Effect
How is it used? (Describe its use on the
website.)
Why is it used? (Explain how it adds value
to the audience or message of the site.)
Pan: Move the camera
horizontally across a
scene.
Tilt: Move the camera
vertically across a scene.
Zoom: Move the camera
inward or outward.
Camera angle: Apply
the rule of thirds or
adjust the viewing angle.
Bounce: Make a moving
object rebound before
stopping.
Examples of Effects 6 - 53
Activity 6.1 Worksheet
Effect
How is it used? (Describe its use on the
website.)
Cross-fade transition:
Fade in one image while
another fades out.
Flip transition: Make a
flipping object appear to
turn into another object
that is flipping into view.
Simple fade transition:
Fade an object in or out
of view.
Color-fade transition:
Gradually change the
color of an object.
Rotation transition:
Rotate an object in or
out of view.
6 - 54 Examples of Effects
Why is it used? (Explain how it adds value
to the audience or message of the site.)
Activity 6.2 Worksheet
Analyzing and Scripting a Digital Narrative
Student Name: ________________________________________________
Date: _______________________
Narrative Description
Answer the following questions to help you set up your narrative.
What type of narrative is it? _____________________________________________________________________
____________________________________________________________________________________________
Who is the primary audience? ____________________________________________________________________
____________________________________________________________________________________________
What is the message of the narrative? (Summarize in one sentence.) ______________________________________
____________________________________________________________________________________________
How does the narrative enhance the overall goals of the site? ___________________________________________
____________________________________________________________________________________________
Write a narrative that stays within the following criteria:
• The audio recording for the narrative does not exceed 45 seconds.
• The length of the movie does not exceed one minute.
• The number of written and spoken words is fewer than 50.
• The narrative contains at least one transition effect.
• The narrative contains at least one filmmaking technique.
• The narrative contains no more than five different filmmaking and transition techniques.
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Analyzing and Scripting a Digital Narrative 6 - 55
Activity 6.2 Worksheet
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
6 - 56 Analyzing and Scripting a Digital Narrative
Activity 6.2 Worksheet
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
Analyzing and Scripting a Digital Narrative 6 - 57
Activity 6.2 Worksheet
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
____________________________________________________________________________________________
6 - 58 Analyzing and Scripting a Digital Narrative
Activity 6.3 Guide
Sample Narrative Summary and Storyboard
Sample Narrative Summary and Storyboard 6 - 59
Activity 6.3 Guide
6 - 60 Sample Narrative Summary and Storyboard
Activity 6.3 Guide
Sample Narrative Summary and Storyboard 6 - 61
Activity 6.3 Guide
6 - 62 Sample Narrative Summary and Storyboard
Activity 6.3 Guide
Sample Narrative Summary and Storyboard 6 - 63
Activity 6.3 Guide
6 - 64 Sample Narrative Summary and Storyboard
Activity 6.3 Guide
Sample Narrative Summary and Storyboard 6 - 65
Activity 6.3 Guide
6 - 66 Sample Narrative Summary and Storyboard
Activity 6.3 Guide
Sample Narrative Summary and Storyboard 6 - 67
Activity 6.3 Guide
6 - 68 Sample Narrative Summary and Storyboard
Activity 6.3 Guide
Sample Narrative Summary and Storyboard 6 - 69
Audio source folder: _____________________________________________
Video source folder: ____________________________________________
Narrative Summary and Storyboard 6 - 71
Frame rate: ____________________________________________________
Background color: ______________________________________________
Main folder (contains all files for the movie): _________________________
Image source folder: _____________________________________________
Document size: _________________________________________________
Date: __________________________________________________
Filename: _____________________________________________________
General Movie Settings
Narrative Flowchart
• Detailed storyboard sketches and descriptions for each section of the movie
• List of the filenames and general settings for the movie
• Description of the overall movie in the form of a rough flowchart
To help your producer create your narrative, provide the following information:
Student Name: ________________________________________________________
Narrative Summary and Storyboard
Activity 6.3 Worksheet
Student Name: ______________________________________
Movie Title: _______________________________________
Audio (spoken text):
Displayed text:
Other:
Audio (spoken text):
Displayed text:
Other:
6 - 72 Narrative Summary and Storyboard
Audio (music or sound effect loop):
Audio (music or sound effect loop):
Drawn images:
Description of Final State
Imported images:
Describe objects that change and how they change.
Estimate the time for each change in seconds.
Description of Transition
Imported images:
Drawn images:
Description of Initial State
To complete the storyboard, draw and describe the initial and final state of each section. Then describe the transition from the initial to the final state.
Storyboard # __________
Activity 6.3 Worksheet
Activity 6.4 Guide
How to Maintain Consistency
Consistency is an important element of usability—the measure of how well visitors can accomplish tasks when
using your Flash website. Consistency is especially important for larger Flash sites with multiple pages. The more
you make these pages look and feel alike, the more comfortable visitors will be while using them.
You should keep elements within your site consistent, but also, whenever possible, follow the conventions of other
sites. For example, many sites locate the main navigation at the top of each page. Unless you have a very good
reason to locate the main navigation elsewhere, you should also locate it at the top of the page. (Although design
innovation is desirable, making sure as many visitors as possible can use your Flash website is more important.)
Consistency is especially important in the following areas:
Navigation: Not only should navigational controls be available on every page, but they should also look the same on
each page. Navigation should tell visitors where they are in the site’s organization, using, for example, a highlighted
button. It should also let visitors move to other site areas easily.
Colors: Similar objects should have the same or similar colors, and different objects should have different colors.
Use a limited palette of colors on your site. You can do so easily by tracking colors in the Color Swatches panel.
Buttons: Generally, all buttons should look the same or similar—with the same font, drop shadow, and beveling, for
example. Sometimes visitors have difficulty knowing what to click, and keeping buttons similar helps them use
what they’ve learned on a previous page. You can use the library to reuse buttons across different pages. (This has
the added advantage of reducing the file size of your site.)
Fonts: Use a limited group of fonts. Usually, you will not need more than two or three fonts for even a large site.
Graphics: Keep graphics similar on each page. You can use the library to reuse images across different pages.
Transitions: Use similar transitions between pages. For example, if one page fades into the next page, use fades for
all page transitions. Transitions should also have similar timing; if one lasts five seconds, they should all last five
seconds.
Scroll bars: Many usability experts recommend using a scroll bar that looks as similar as possible to those used in
desktop software. Make these look the same on every page.
Sound: Use sound consistently throughout your site pages. If, for example, a button on one page makes a sound
when your visitors roll over it, you should have all buttons on all pages make such a sound.
Layout: All the pages in your site should have a similar layout: the navigation should be in the same place on every
page, for example. Interactive areas should also be in the same place. If one page has a simple game, for example,
and another page has an interactive chart, position these in the same area. You can use Flash templates to maintain
consistent layouts across different pages.
How to Maintain Consistency 6 - 73
Activity 6.4 Guide
Creating a Template
Templates are a good way to keep your website pages consistent. You can include navigation, fonts, graphics, and
layout in a template so these elements appear consistent throughout your site.
1.
Add content to a document to serve as a template, such
as navigation, images, buttons, and background.
2.
Select Save as Template.
The Save as Template dialog box opens (Figure 1).
3.
Enter a name for the template.
4.
Select a category from the Category pop-up menu, or
enter a new category name.
5.
Enter a description for the template.
This description appears in the New from Template
dialog box.
6.
Click OK.
The template is now available as an option in the New
from Template dialog box.
6 - 74 How to Maintain Consistency
Figure 1 Save as Template dialog box
Activity 6.4 Guide
How to Optimize Flash Content
As with all web content, it is important to keep Flash file sizes as small as possible. Even though connection speeds
have increased in the past few years, keeping file sizes small continues to be important, because document size can
also affect content performance. This process is known as optimizing Flash content.
The following general principles can help you optimize Flash content:
•
Use symbols, animated or otherwise, for every element that appears more than once.
•
When creating animation sequences, use tweened animations whenever possible. These animations use less
file space than a series of keyframes.
•
For animation sequences, use movie clips instead of graphic symbols.
•
Limit the area of change in each keyframe; make the action take place in as small an area as possible.
•
Avoid animating bitmap elements; use bitmap images as background or static elements.
Optimizing Images
Images present one of the best opportunities for optimizing file size in Macromedia Flash 8.
Certain fills and effects can increase the size of your Flash movie. Use the following tips to optimize these movie
features:
• Use the Effect panel (Window > Panels > Effect) to create many different-colored instances of a single symbol
instead of creating multiple symbols.
• Use gradients sparingly. Minimize the number of simultaneous gradients in any given frame.
• Filling an area with gradient color requires about 50 bytes more than filling it with solid color. Gradients are also
more complex for a computer processor to handle than a solid color.
• Use alpha transparency sparingly. It can slow playback.
Optimizing bitmaps
Bitmapped images take up more space than vector images (vector is Flash’s normal format). Bitmapped images are
imported into Flash. JPEGs, GIFs, and BMPs are all bitmapped. All photos—which are usually in JPEG form—are
bitmapped. When you create an animation with bitmap images, Flash must store one bitmap image in each frame of
the animation. In addition, bitmap images, unlike vector images, do not scale or rotate well on the screen; and
bitmap images must be rendered each time they change positions on the screen. This often entails changing large
areas of the movie and slowing down playback as these areas are continually redrawn.
If you feel your Flash movie must include bitmaps, use the following tips to optimize your movie:
• Use bitmap images sparingly.
• Avoid animating bitmap images.
• Convert the bitmap image into a symbol if it appears in more than one keyframe.
Use the Trace Bitmap command
The Trace Bitmap command (Modify > Bitmap > Trace Bitmap) lets you convert a bitmap to a vector image. This
works best with simple images made up of mostly large blocks of color. If the bitmap contains complex shapes and
many colors, the converted vector graphic can have a larger file size than the original bitmap. Try a variety of
settings in the Trace Bitmap dialog box to find a balance between file size and image quality.
How to Optimize Flash Content 6 - 75
Activity 6.4 Guide
Compression options
Compression helps reduce the total file space occupied by bitmap images. JPEG compression is the default
compression for all bitmap images published from Flash. In the Publish Settings dialog box, you can adjust the
value in the JPEG Quality field from 1 (most compression, lowest quality) to 100 (least compression, highest
quality). Because JPEG compression can result in a loss of image data, test images with different JPEG quality
values to achieve the best balance between compression and image quality for your particular movie.
Optimizing Sound
Sound is another factor that can increase Flash file size. There are several ways to use sound efficiently in a movie
and keep file size down.
• Use MP3 compression, the smallest sound format, whenever possible.
• Keep sounds short.
• Use the lowest bit-depth and sample rate acceptable to achieve the smallest data size. Try to find a happy medium
between quality and data size.
• Loop short sounds to create background music.
• Looping smaller event sounds can achieve longer audio playback because a small amount of sound data is
downloaded once and used repeatedly.
• Do not set streaming sound to loop.
• Use the Event synch option to deliver the sound data all at once as needed for playback. Use Stream synch to
deliver the sound data over the specified series of frames. Try both approaches. Then watch the size report closely
for clogging of data near keyframes, and use the preloading techniques to trim down the amount of data needed
per frame or per second.
6 - 76 How to Optimize Flash Content
Activity 6.4 Guide
How to Organize Content by Using the Library
Organize the Library
You can create folders to organize your files in the library of a Macromedia Flash 8 document.
1.
Select Windows > Library to open the library.
2.
To create a folder in the library, choose New Folder
from the Options pop-up menu (upper right corner of
the Library panel).
The new folder is added to the library.
Folders are represented by orange file folder icons
(Figure 1).
3.
Name the folder and drag files into the folder.
You can even store folders within other folders.
4.
Double-click a folder to see or hide its contents.
Figure 1 Library organized with folders
Organize Layers
Organize your layers by using descriptive layer names, putting layers in a logical order, and creating folders.
1.
To change the name of a layer, double-click the name
and enter a new name.
2.
You can change the order of layers by dragging a layer
up or down in the stack.
Note: It is recommended that you place ActionScript
and frame labels in a layer named actions, typically at
the top of the layer stack. Background layers typically
go at the bottom of the stack.
3.
To create a layer folder, click the Insert Layer Folder
button and give the folder a new name.
4.
Drag layers into folders to keep them organized
(Figure 2).
Figure 2 Timeline organized with folders
How to Organize Content by Using the Library 6 - 77
Activity 6.4 Guide
Set Audio Compression Options
1.
Import audio into the Sound layer in the digital
narrative.
2.
In the Property inspector, set Sync to Stream (Figure 3).
Note: Although streaming means losing some audio
quality, it creates a smaller SWF file and synchronizes
the audio to the object movements on the Stage.
3.
Use the frame rate and the length of the audio to
figure how many frames down the Timeline to extend
the sound.
4.
Select the frame and extend the Timeline in the Sound
layer by selecting Insert > Frame (Figure 4).
Figure 3 Sound property inspector
All the audio will be visible in the Timeline.
Note: Do not use Insert > Keyframe, because a new
keyframe would stop the audio before it is finished.
Figure 4 Timeline with sound
Label Keyframes
You can label frames to indicate when changes occur on the Timeline.
1.
Select a frame you want to label.
2.
In the Property inspector, enter the label in the Frame
Label text box (Figure 5).
The labels appear on the Timeline (Figure 6).
Note: Frame labels are included when you publish a
document as a Flash movie, so avoid long names to
minimize file size and also to keep the label from
spanning too many frames.
Figure 5 Frame label box
Figure 6 Frame labels in Timeline
6 - 78 How to Organize Content by Using the Library
Activity 6.4 Guide
How to Add Simple Actions
Flash features a scripting language called ActionScript. Although ActionScript is a full-fledged programming
language like JavaScript, you can also use it on a limited basis to add interactivity to your Macromedia Flash 8
document. You can add actions either to Timeline frames or to buttons.
Frame actions run as soon as the playhead reaches the frame.
Button actions run when a visitor clicks, rolls over, or releases a button.
Adding a Stop Action
A stop action is a small piece of ActionScript that instructs the Flash playhead to stop when it reaches a designated
frame. The stop action is one of the most frequently used pieces of ActionScript. Without stop actions, Flash Player
would simply run through all your frames, without regard to where the visitor wants to be!
1.
Add a layer called Actions.
This is good practice for any ActionScript that isn’t
attached to a symbol.
2.
Select the frame where the playhead should stop.
3.
Select Window > Actions.
The Actions panel opens (Figure 1).
4.
Click to expand the Global Functions folder and then
the Timeline Control folder in the Actions toolbox if
they are not already expanded.
5.
Drag stop to the parameters area (the pane on the right
side) (Figure 1).
The stop action is added to the frame. A small a appears
in the frame (Figure 2).
Actions toolbox
Parameters area
Figure 1 Actions panel
Note: You can either drag an action from the toolbox or
double-click to add it to the parameters area.
Indicates action added to
frame
Figure 2 Timeline after action added
How to Add Simple Actions 6 - 79
Activity 6.4 Guide
Attaching Commands to Buttons
Buttons are a great way to give your site visitors feedback. Button actions are frequently triggered when a visitor
releases the mouse when clicking a button. This requires two ActionScript commands: First, the on (release)
command tells Flash Player to do something when a visitor releases the mouse. A second command tells Flash
Player what, specifically, to do—such as moving the playhead to another frame or playing a sound.
Adding a gotoAndPlay action
The gotoAndPlay action lets you tell the playhead to skip to a particular frame. It is very useful for building
interactive Flash content. Without the gotoAndPlay action (and the gotoAndStop action), the playhead moves only
in one direction.
1.
Select the button to which you want to add the
gotoAndPlay action.
2.
Make sure the Actions panel is visible.
If it is not, select Window > Actions.
3.
Make sure the Actions panel is in Script Assist mode.
If it is not, click Script Assist.
4.
Expand the Timeline Control folder and drag goto to
the lower right panel.
Flash automatically adds an on(release) command to the
script. This means the goto action executes when the
visitor releases the button.
Note: You can also set the on command to other button
states, including on(rollover) and on(press).
5.
Select Go to and Play (Figure 3).
6.
In the parentheses after gotoAndPlay, type the frame
number where the playhead should move and continue
playing.
Note: You can also direct the playhead to different
scenes or indicate frames by Next Frame or Previous
Frame.
The gotoAndPlay action has been added to the button.
When a visitor releases the button, the playhead goes to
the indicated frame and continues playing.
To edit the gotoAndPlay action, click it in the
parameters area.
6 - 80 How to Add Simple Actions
Drag goto action here
Figure 3 The goto action in Script Assist mode
Activity 6.4 Guide
Adding a gotoAndStop action
The gotoAndStop action works just like the gotoAndPlay action but tells the playhead to stop once it goes to the
desired frame.
1.
Select the button to which you want to add the
gotoAndStop action.
2.
Make sure the Actions panel is visible.
If it is not, select Window > Actions.
3.
Make sure the Actions panel is in Script Assist mode.
If it is not, click Script Assist.
4.
Expand the Timeline Control folder and drag goto to
the lower right panel.
Flash automatically adds an on(release) command to the
script. This means the goto action executes when the
visitor releases the button.
5.
Select Go to and Stop.
6.
In the parentheses after gotoAndStop, type the frame
number where the playhead should move and stop.
The gotoAndStop action has been added to the button.
When a visitor releases the button, the playhead goes to
the indicated frame and stops.
To edit the gotoAndStop action, click it in the
parameters area.
How to Add Simple Actions 6 - 81
Activity 6.4 Guide
Adding a getURL action
The getURL action works like a link in a web page. When it runs, Flash opens a browser window with the desired
link. For example, you might use the getURL action to provide visitors a link to more information.
1.
Select the button to which you want to add the getURL
action.
Note: You can also attach the getURL action to a frame,
but it is generally better to attach it to a button so your
visitors know the button controls the link.
2.
Make sure the Actions panel is visible.
If it is not, select Window > Actions.
3.
Make sure the Actions panel is in Script Assist mode.
If it is not, click Script Assist.
4.
Figure 4 The getURL action
Expand the Timeline Control folder and drag getURL
to the lower right panel.
Flash automatically adds an on(release) command to the
script. This means the getURL action executes when the
visitor releases the button.
5.
In the URL text box, enter the web page to which you
want to link (Figure 4).
Note: The URL must start with http:// to work
correctly.
When a visitor clicks the button, the linked page opens.
Adding a stopAllSounds Action
The stopAllSounds action stops all sounds currently playing in a SWF file without stopping the playhead.
1.
Select the frame or button to which you want to add the
stopAllSounds action.
2.
Make sure the Actions panel is visible.
If it is not, select Window > Actions.
3.
Make sure the Actions panel is in Script Assist mode.
If it is not, click Script Assist.
4.
Expand the Timeline Control folder and drag
stopAllSounds into the lower right panel (Figure 5).
If you’re adding this action to a button, Flash
automatically adds an on(release) command to the
script. This means the getURL action executes when the
visitor releases the button.
When the playhead reaches the indicated frame or the
visitor interacts with the button, all sounds stop.
6 - 82 How to Add Simple Actions
Figure 5 The stopAllSounds action
Activity 6.4 Guide
How to Make Macromedia Flash Content Accessible
You can make Macromedia Flash 8 content accessible to people with disabilities. For example, people with visual
impairments use screen-reader software that provides a spoken description of what is on the screen. In Flash
movies, you can decide which objects in your movie will be read by screen readers.
The following objects are accessible by default in Flash movies and are included in the information Flash Player
provides to the screen-reader software:
• Text
• Input text fields
• Buttons
• Movie clips
• Entire movies
Turning Accessibility On and Off
By default, your Flash movie is accessible to screen readers. Static text is automatically read. Other objects, such as
buttons and movie clips, are announced by using a label that is applied to the object by Flash. Default labels are
general terms such as button, but you can provide more specific terms.
Using the Accessibility panel, you can turn accessibility on or off for the entire movie or for selected objects. The
following are some best practices when making objects accessible:
• Provide your own name and description for each accessible object except text. (Because text is read by screen
readers, you don’t need to provide descriptions.)
• Add descriptive labels to buttons, such as next or previous.
• Add labels and descriptions to movie clips if they depict an animation that is not explained in text on the page.
• Turn accessibility off for an object, such as an animation, that does not add new information to the explanatory
text on a page. In particular, if you use audio, turn off accessibility for any text that duplicates the audio content.
• Try to let visitors control their movement through a website by using buttons, such as next or previous.
• Make sure visitors can move through your site by using the keyboard.
How to Make Macromedia Flash Content Accessible 6 - 83
Activity 6.4 Guide
To turn accessibility on and off:
1.
Select Window > Other Panels > Accessibility.
The Accessibility panel opens (Figure 1).
By default, the entire movie is accessible, and automatic
labeling is turned on.
2.
Deselect the Make Movie Accessible option to turn
accessibility off. Select that option again to turn
accessibility on.
To add a description of the Flash website:
Figure 1 Accessibility panel
Flash sites can have complex layouts, structure, and
navigation. This complexity can make navigation difficult
for visitors with screen readers. A good idea is to provide a
general description of the entire website to help orient
screen-reader users to the structure of the site. You can add
such a description through the Accessibility panel.
1.
If the Accessibility panel is not open to the entire movie,
click the Stage.
The Accessibility panel switches to the entire movie
(Figure 1).
2.
In the Description text box, enter a description of the
site’s structure (Figure 2).
To add a name and description to an object:
1.
On the Stage, click a button or movie clip.
The Accessibility panel changes to show the options for
the selected object.
2.
Figure 2 Website description in Accessibility
panel
Enter a name and description for the object (Figure 3).
Screen readers will read the entered information when
the playhead reaches the frame in which the object first
appears.
To turn accessibility off for an object:
1.
On the Stage, click an object that does not add
information to the page, such as an animation.
Note: It is especially important to turn off accessibility
for looping objects so screen readers do not read the
same information over and over again.
2.
Deselect Make Object Accessible.
Screen readers will skip the object.
Figure 3 Name and description of object
6 - 84 How to Make Macromedia Flash Content Accessible
Activity 6.4 Guide
Controlling the Tab Order of Flash Content
To maintain accessibility, it is important to provide keyboard access to all objects in your Flash website. You can do
so by setting a tab index for each object. The tab index determines the order in which visitors move through your
site when they press the Tab key.
1.
Make sure the Accessibility panel is open.
If it is not open, select Window > Other
Panels > Accessibility.
2.
Select the object or text where you want visitors to
begin.
3.
In the Tab Index box, enter “1” (Figure 4).
4.
Repeat steps 2 and 3 for all other objects on the Stage,
using increasing numbers.
5.
Select View > Show Tab Order.
The tab index number you entered appears next to the
instance on the Stage (Figure 5).
Note: Tab index order also controls the order in which
many screen readers read Flash sites. However, to
control reading order for all screen readers, you need to
set a Tab index through ActionScript. See Flash help for
more details.
Figure 4 Accessibility panel
Figure 5 Tab index numbers visible on Stage
Testing Flash Content for Accessibility
As with other content, you should test your Flash content for accessibility before publishing it.
Here are some recommendations for accessibility testing:
• Download several screen readers and test your site by playing it in a browser with the screen reader enabled.
Make sure text read by the screen reader is not duplicated by audio you provide.
• Verify that visitors can navigate your content effectively when using only the keyboard. You should test keyboard
navigation both with a screen reader and without a screen reader, because keyboard access can differ when a
screen reader is present.
• Test the site with actual visitors. If it is important that your site is accessible, you should have it tested by people
with disabilities.
How to Make Macromedia Flash Content Accessible 6 - 85
Activity 6.4 Guide
How to Publish a Flash Document
You develop content in Macromedia Flash 8 by using a Flash FLA document. These documents have a .fla
extension and can be opened and edited in Flash.
For other people to see your movie, you publish it in a format that is accessible by other software. You use the
Publish Settings dialog box to determine which formats to publish.
You can publish Flash in the following formats:
SWF: Use this format when you know visitors have Flash Player installed. (For statistics on Flash Player
installation, see the Macromedia website). This is the format generally published on the web. SWF is selected by
default in the Publish Settings dialog box.
HTML: Use this format with a SWF file for a web browser that has Flash Player installed. You need HTML so web
browsers can open this page. HTML is also selected by default in the Publish Settings dialog box.
EXE and HQX: Use these formats for stand-alone players when you know visitors do not have Flash Player
installed. EXE files play on Windows; HQX files play on Macintosh.
Exporting Flash content as an image
Sometimes you may want to export Flash content as an image for use in another document. You can export Flash
content in JPEG, PNG, or GIF format. This is similar to exporting an image in Macromedia Fireworks 8. When you
select one of these options, Flash adds a tab to the Publish Settings dialog box that enables you to change settings
for the image format. For example, if you select the JPEG format, Flash adds a JPEG tab that lets you change
compression settings for the exported JPEG.
To publish Flash content:
1.
Select File > Publish Settings on the menu bar.
The Publish Settings dialog box opens with the Formats
tab selected (Figure 1).
2.
Select the types of files to produce when you publish the
movie.
3.
If you want to change the names of any of the files to be
published, enter new names under File.
By default, every file type uses the same name as the
FLA file. Only the file extensions are different.
4.
Click the folder icon to the right of the filename if you
want to select a different location in which to publish
files.
By default, files are published in the same folder as the
FLA file.
Figure 1 Publish settings dialog box
How to Publish a Flash Document 6 - 87
Activity 6.4 Guide
5.
Click the Flash tab.
The Flash tab of the Publish Settings dialog box opens
(Figure 2).
6.
To change the Flash version supported by the Flash
content, use the Version pop-up menu.
By default, version is set to Flash Player 8. If you know
your visitors will have an earlier version installed, select
the appropriate version from the menu.
7.
To control bitmap compression, adjust the JPEG
Quality slider or enter a value.
Lower image quality produces smaller files; higher
image quality produces larger files. Try different
settings to determine the best trade-off between size and
quality.
8.
9.
To set the sample rate and compression for all sounds in
the SWF file, click the Set button next to Audio Stream
or Audio Event and select options for Compression, Bit
Rate, and Quality in the Sound Settings dialog box.
Click OK when you finish.
Click Publish.
The movie is published in each of the formats you
selected.
To publish a movie without changing publish settings, select
File > Publish on the menu bar.
6 - 88 How to Publish a Flash Document
Figure 2 Flash tab of publish settings dialog box
Activity 6.5 Guide
How to Test a Digital Narrative
Testing your Macromedia Flash 8 content before you publish it is very important. Three types of tests are
recommended: technical, spelling and grammar, and usability.
Conducting a Technical Test
A technical test answers questions such as the following:
• Do all the buttons work properly, according to the flowchart?
• Do the text, graphics, animation, and sound match the storyboard?
• Is there proper layout and coordination of text, graphics, animation, and sound as specified in the storyboard?
With your narrative open in Flash, select Control > Test Movie and conduct a technical test by answering each of
the listed questions.
Previewing Flash content
You can also test how your content will play in a web page by using the Publish Preview command. For example, if
you plan to publish the content as an HTML file for the web, you can preview the content in an HTML file.
1.
Select File > Publish Preview > HTML.
An HTML document containing the SWF file for your
content opens in your default web browser.
2.
Click through the pages of your narrative to see how it
runs in a web browser. Make sure the buttons function
properly and that the text, graphics, animations, and
sound are properly coordinated.
3.
Close the browser window.
How to Test a Digital Narrative 6 - 89
Activity 6.5 Guide
Proofing the Narrative
There is no better way to proof your narrative than to read each page carefully several times, checking against your
storyboard.
Read text slowly and aloud to check for spelling and grammar errors.
Have someone who is less familiar with your project proofread the narrative too.
Using the spell checker
Flash has a built-in spell checker you can use to check
spelling in all document text.
1.
Select Text > Check Spelling.
The Check Spelling dialog box opens (Figure 1).
2.
Use the Check Spelling dialog box as you would any
other spell checker. For example, click Change to
change a misspelled word to the word in the Change To
text box.
Figure 1 Check Spelling dialog box
Conducting a Usability Test
Usability tests are sessions in which you observe visitors as they use your application. Their feedback can help you
improve the application’s organization, navigation, text, use of color, and other factors. To conduct a usability test,
you need to do the following:
1.
Define the audience for your usability test. This audience should resemble the actual users of your application.
2.
Develop your goals for the usability testing project. Start by asking the following questions: What should the
intended audience be able to get out of the application? What do you want to learn about your application? Are
there any problem areas you’re especially concerned about, such as an unconventional navigation bar?
3.
Create a test script. This is a list of tasks the test’s moderator will ask the audience to accomplish. The script
should also include feedback and follow-up questions to be posed by the moderator. Phrase the questions
asked, tasks presented, and opinions sought in a way that allows participants to feel they are contributing to the
project rather than being tested by the moderator. Ask questions such as Do you like the colors? Can you read
the text? Where would you click to get information on the company/organization?
4.
Recruit your audience. Use the characteristics you initially defined for your audience. In addition to these
characteristics, choose the audience for practicality. For example, they should live close enough to the testing
location to get there easily. You want to make the process as simple as possible for your audience. For
maximum efficiency, usability professionals recommend a minimum of eight testers.
5.
Provide a comfortable, quiet, private testing environment. Ideally, you should videotape participants. Set up the
camera so it does not point directly at either the participant or the screen.
6.
Observe the audience (or analyze the video). Look for latent behavior, behavior of which the participants are
unaware. Latent behavior is found in body language or facial expressions that participants do not verbalize. An
example of latent behavior is participants moving the pointer around the screen for a short while, looking for
something, but not documenting that the item was difficult to find. Another example is participants sighing or
frowning after clicking a link because they are tired of waiting for an image to load; this behavior indicates that
an image file is too large, but the participant might not document this occurrence.
6 - 90 How to Test a Digital Narrative
Activity 6.5 Guide
7.
After completing the tests, compile and review your data. As you do so, keep your participants’ comments
central. Resist the temptation to impose your own opinion. For example, if several users complain about the
location of a menu, avoid concluding that “they’ll get used to it once they use it.”
For additional information, go to www.macromedia.com/devnet/articles/usability_testing.html.
How to Test a Digital Narrative 6 - 91
Activity 6.5 Worksheet
Evaluating a Digital Narrative
Student Name: ___________________________________________ Date:
____________________________
Name of the project you are evaluating:_____________________________________________________________
Communication
Who is the intended audience? ____________________________________________________________________
What is the intended message?____________________________________________________________________
Is the intended message clear? Why or why not?______________________________________________________
What are the goals of the narrative?
____________________________________________________________________________________________
How do the effects and visual content enhance or detract from the overall message and goals of the narrative?
____________________________________________________________________________________________
How do the text and audio content of the narrative enhance or detract from the overall message and goals of the
narrative?
____________________________________________________________________________________________
How well do the effects and visual content reach the intended audience?
____________________________________________________________________________________________
How well do the text and audio content of the narrative reach the intended audience?
____________________________________________________________________________________________
Technical
Does the animation function properly? Why or why not?
____________________________________________________________________________________________
Do all of the buttons work? If not, what changes need to be made?
____________________________________________________________________________________________
Are the transitions smooth? If not, how can they be made smoother?
____________________________________________________________________________________________
Evaluating a Digital Narrative 6 - 93
Activity 6.5 Worksheet
Does tweening occur as expected? If not, how can the problems be fixed?
____________________________________________________________________________________________
Is the size of the finished movie acceptable for the intended delivery? _____________________________________
Comment on any over- or under-use of animation, sound, transitions, or effects.
____________________________________________________________________________________________
Usability
How easy is it to navigate through the narrative? Is the navigation predictable and easy to use? Is the text readable?
Do images and other media elements load in a reasonable time? Is it easy to follow and understand animations?
____________________________________________________________________________________________
____________________________________________________________________________________________
Narrative Criteria
Does the narrative fall within the required time and word limits? _________________________________________
Does the narrative include at least one transition and filmmaking technique?________________________________
Does the narrative exceed five uses of effects or filmmaking techniques? __________________________________
Does the audio narration exceed 45 seconds? ________________________________________________________
Does the narrative stay within the one-minute time limit? _______________________________________________
6 - 94 Evaluating a Digital Narrative