9.

Working with Sound and Video

[View full size image]

Sound and video files add new dimensions to your projects. Import files polished in other
applications, such as Adobe After Effects, or perform simple edits on sound files directly in Flash
CS3.

Lesson Overview

In this lesson, you'll learn how to do the following:

l Edit sound files

l Import video files

l Use video components

l Work with video that contains alpha channels

l Understand video import options

This lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from
your hard drive, and copy the Lesson09 folder onto it.

UMinho :: Ciências da Comunicação Page 1 of 31 Design e Multimédia

Getting Started

Start the lesson by viewing the finished animated zoo kiosk. You'll create the kiosk by adding sound and video
files to a project in Flash.

1. Double-click the 09End.swf file in the Lesson09/09End folder to play the animation.

View the movie of the zoo director, who appears on the screen, speaks, and then disappears. Click a
sound button to hear an animal sound. Click a thumbnail button to view a short movie about the animal.

In this lesson, you'll create the sound buttons and import audio files for them. You'll create movie
thumbnail buttons, import movies, and use ActionScript to attach the buttons to the movies. You'll also
animate the zoo director video so that it moves onto the screen appropriately.

[View full size image]

2. Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Flash.

3. Choose File > Save As. Name the file 09_workingcopy.fla, and save it in the 09Start folder. Saving a
working copy ensures that the original start file will be available if you wish to start over.

UMinho :: Ciências da Comunicação Page 2 of 31 Design e Multimédia

Prepare the Project File

To set up the file, import the assets from an Illustrator file and add an Actions layer.

1. Choose File > Import > Import To Stage.

2. In the Import dialog box, select the Lesson09_assets.ai file in the Lesson09/09Start folder, and click
Open or Import.

3. In the Import To Stage dialog box, select all the layers. Select Flash Layers from the Convert Layers To
menu. Select Place Objects At Original Position; no other options should be selected.

4. Still in the Import To Stage dialog box, select the Video Button 1 layer, and select Create Movie Clip.
Name the instance video_button1.

[View full size image]

5. Repeat step 4 to create movie clips for the Video Button 2, Video Button 3, and Video Button 4 layers.
Name the instances video_button2, video_button3, and video_button4, respectively. Click OK to import
the file.

UMinho :: Ciências da Comunicação Page 3 of 31 Design e Multimédia

6. In Flash, select the Sound Buttons layer (the top layer), and click the Insert Layer icon. Name the new
layer Actions. Lock all the layers except the Sound Buttons layer.

To lock all the layers at once, click the lock icon above the layer names. Then, you
can quickly unlock a single layer.

7. Select Show All from the View menu in the Edit bar to see all the elements on the Stage.

[View full size image]

UMinho :: Ciências da Comunicação Page 4 of 31 Design e Multimédia

Creating Sound Buttons

There are three sound buttons in the final kiosk, each playing a different animal sound. You'll create a button
symbol, configure its rollover states, and import a sound for the button. Then, you'll duplicate that button and
adapt it to create buttons for two additional sounds.

Creating Button Symbols

Button symbols include four rollover states in the Timeline: Up, Down, Over, and Hit. You'll convert the speaker
icon and text to a button, configure the rollover states for the button, and draw a rectangle background for the
button's hit area.

1. Select the Sound Buttons layer. The group in the lower-right corner (Sound 1 and a speaker symbol) is
selected.

2. Choose Modify > Convert To Symbol. In the Convert To Symbol dialog box, select Button, and name the
button sound_button1. Click OK.

3. Double-click the instance of sound_button1 on the Stage to edit it. You may need to zoom in a little to
see the button more clearly.

4. Select Layer 1, and then select the group on the Stage. Choose Modify > Break Apart to break the group
into pieces. Click elsewhere on the Stage to deselect the objects.

5. Select the speaker symbol, and choose Edit > Cut.

6. Click the Insert Layer icon, and with the new layer selected, choose Edit > Paste In Place. The speaker
symbol appears on the new layer.

7. Name the new layer Icon and rename Layer 1 Text.

8. Click the Insert Layer icon two times to create two more layers. Name the new layers Sound and
Highlight.

9. Rearrange the layers to appear in the following order, from top to bottom: Sound, Icon, Text, Highlight.

10. Select the Down frame on the Text layer, and press F5 to insert frames across all the button states.

11. Select the Down frame on the Icon and Sound layers, and press F6 to create a keyframe for each layer.

12. Select the Down frame on the Icon layer, and then select the speaker symbol on the Stage. In the
Transform panel, scale the symbol to 150%.

Note

If the Transform panel isn't visible, choose Window > Transform.

UMinho :: Ciências da Comunicação Page 5 of 31 Design e Multimédia

13. Select the Over frame on the Highlight layer, and press F7 to create a blank keyframe.

14. Select the Rectangle tool. Specify no stroke. Select a black fill with an Alpha value of 50%. Draw a
rectangle approximately the same size as the red rectangle above the button (behind Guess this animal
sound).

UMinho :: Ciências da Comunicação Page 6 of 31 Design e Multimédia

15. Using the Selection tool, move the rectangle behind the Sound 1 text and the speaker icon. You may
need to use the arrow keys to nudge the rectangle into position.

16. Select the Down frame on the Highlight layer, and press F6 to insert a keyframe. Select the black
rectangle on the Stage, and change its fill color to #B52823, with an Alpha value of 100%.

17. Select the Hit frame on the Highlight layer, and press F5.

Note

The Hit frame determines the active area of the button. Because the hit area is the same as the rectangle
shape, the button will be active whenever the mouse hovers over or clicks the rectangle.

Importing Sound Files

Most sound files, especially short WAV files, are small enough that you can import the full file into a Flash
document. Two sound files are already included in the library, but you'll import the Monkey.wav file and assign
it to the button symbol you created.

1. Choose File > Import > Import To Library.

2. Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open (Windows) or Import
To Library (Mac OS).

3. Select the Down frame on the Sound layer.

4. In the Property inspector, select Monkey.wav from the Sound menu, and select Start from the Sync menu.

[View full size image]

UMinho :: Ciências da Comunicação Page 7 of 31 Design e Multimédia

5. Choose Control > Test Movie to preview the button. When you click the button, you should hear a
monkey screeching. Close the preview window.

Editing a Sound Clip

The sound clip you imported is a bit longer than you need. You'll shorten the sound file using the Edit Envelope
dialog box, so that only the first two sections of the waveform remain. Then, you'll apply a fade so that the
sound gradually decreases as it ends.

1. Select the Down frame on the Sound layer. In the Property inspector, click Edit.

[View full size image]

2. In the Edit Envelope dialog box, click the Zoom Out icon until you can see the entire waveform, which
includes four distinct sections.

[View full size image]

UMinho :: Ciências da Comunicação Page 8 of 31 Design e Multimédia

3. Drag the right end of the time slider to the middle of the waveform, so that the sound ends after the
second section.

[View full size image]

4. Select Fade Out from the Effect menu so that the volume diminishes gradually at the end of the sample.
Click OK to accept the changes you've made.

[View full size image]

5. Choose Control > Test Movie, and click the button again. The sound should be about half as long as it
was the first time.

Duplicating Buttons

You need three buttons for animal sounds, and they're all similar. You'll duplicate the first button, and then
make a few adjustments to it to reuse it for the second and third buttons.

UMinho :: Ciências da Comunicação Page 9 of 31 Design e Multimédia

1. Right-click (Windows) or Control-click (Mac OS) the sound_button1 symbol in the Library panel, and
choose Duplicate.

Note

If the Library panel is not visible, choose Window > Library.

2. In the Duplicate Symbol dialog box, select Button, and name the new button sound_button2. Click OK.

3. Duplicate the button one more time, naming the third button sound_button3.

4. Click Scene 1 to return to the main Timeline.

5. Select the Sound Buttons layer. Drag an instance of the sound_button2 symbol onto the Stage, placing it
beneath the first button. Double-click the second button to edit it.

6. Select the text with the Text tool, and change the number to 2.

7. Select the Down frame on the Sound layer. In the Property inspector, select Lion.wav from the Sound
menu, and select Start from the Sync menu.

8. Click Scene 1 to return to the main Timeline.

9. Select the Sound Buttons layer, drag an instance of the sound_button3 symbol beneath the other
buttons on the Stage, and double-click it to edit it.

UMinho :: Ciências da Comunicação Page 10 of 31 Design e Multimédia

10. Change its text to Sound 3, select the Down frame in the Sound layer, select the Elephant.wav sound file,
and select Start from the Sync menu.

11. Click Scene 1 to return to the main Timeline.

Aligning Buttons

In the kiosk, the buttons appear in a column. The easiest way to arrange them is to use the Align panel, which
you've used in other lessons.

1. Choose Window > Align to open the Align panel.

2. Select all three buttons on the Stage. Make sure Align To Stage is deselected in the Align panel, and then
click the Align Horizontal Center icon.

3. With all three buttons still selected, use the arrow keys on your keyboard to nudge the buttons so that
they are centered beneath the text that reads Guess this animal sound.

4. Click elsewhere on the Stage to deselect the buttons. Then, select the instance of the sound_button3
symbol.

5. Using the arrow keys, nudge the button so that it's aligned with the bottom of the semi-transparent
thumbnail bar.

UMinho :: Ciências da Comunicação Page 11 of 31 Design e Multimédia

6. Select all three buttons, and click the Space Evenly Vertically icon in the Align panel.

7. Lock the Sound Buttons layer.

8. Choose Control > Test Movie. Test each button, and then close the preview window.

UMinho :: Ciências da Comunicação Page 12 of 31 Design e Multimédia

Creating Movie Thumbnail Buttons

There are four movie thumbnail buttons on the kiosk, and each plays a short movie of an animal at the zoo.
You'll apply the drop shadow filter to the thumbnail movie clip symbols you imported earlier, and then you'll
create a button symbol with distinct rollover states. As you did with the sound buttons, you'll duplicate the
initial button and make changes to it for the other movie thumbnail buttons.

Note

You can apply the drop shadow filter to the thumbnails because they are movie clip symbols. If you had
imported them as graphic symbols, you wouldn't be able to apply filters.

Creating Thumbnail Button Symbols

You imported thumbnails in the Illustrator file, converting them to movie clip symbols as you did so. Now, you'll
add drop shadows to each, and then convert them to button symbols. As you did with the sound buttons,
you'll configure rollover states.

1. Unlock the Video Button layers, and select the four movie clip thumbnails on the Stage. (Zoom out to see
them, if necessary.)

2. In the Filters panel, click the Add Filter icon ( ) and select Drop Shadow from the menu. Set the Blur X
and Blur Y values to 10, the Distance to 10, and the Strength to 80%.

Note

The Filters panel is typically docked with the Property inspector. Click the Filters tab to display the Filters
panel.

[View full size image]

3. Click elsewhere on the Stage to deselect the thumbnails. Then, select the first thumbnail (the image of
penguins), and press F8 to convert it to a symbol. Select Button, set the registration point to the center,
name the symbol video_button1, and click OK.

4. Double-click the video_button1 symbol in the Library panel to edit it.

5. Press Shift and select all four frames in Layer 1, and then press F6 to insert a keyframe in each one.

6. Select the Over frame, and select the button on the Stage. In the Property inspector, select Brightness
from the Color menu, and select -35 for the percentage.

[View full size image]

7. Select the Down frame, and select the symbol on the Stage. In the Property inspector, select Brightness
from the Color menu and select -35% for the percentage.

UMinho :: Ciências da Comunicação Page 13 of 31 Design e Multimédia

8. With the Down frame still selected, click the Filters tab, and adjust the drop shadow settings: change the
Blur X and Blur Y values to 5, and change the Distance to 5.

9. Select the symbol on the Stage and press the Down Arrow key three times and the Right Arrow key three
times to nudge the thumbnail so that the center point is slightly off-center from the button.

10. Click Scene 1 to return to the main Timeline.

11. Choose Control > Test Movie. Roll the mouse over the first button; the image should darken. Click the
first button; the button should appear as if it is pressed toward the Stage. Close the preview window.

Duplicating Thumbnail Buttons

You've created one thumbnail button, and you'll duplicate it to create the remaining three buttons. You'll swap
the movie clip in each button, and then replace the video button movie clips on the Stage with the
video_button buttons.

1. Right-click (Windows) or Control-click (Mac OS) the video_button1 symbol in the Library panel, and select
Duplicate. In the Duplicate Symbol dialog box, select Button, and name the symbol video_button2. Click
OK.

2. Double-click the video_button2 symbol in the Library panel to edit it.

3. Select the Up frame in Layer 1, and then select the symbol on the Stage. In the Property inspector, click
Swap.

[View full size image]

UMinho :: Ciências da Comunicação Page 14 of 31 Design e Multimédia

4. In the Swap Symbol dialog box, select Lesson09_assets.ai > Video Button 2 > Video Button 2. The
preview displays an image of a mandrill. Click OK.

[View full size image]

5. Repeat steps 3 and 4 to swap the video file for the Over and Down frames.

Note

You do not need to swap video files for the Hit frame, because the Hit state is not displayed; it just
determines the active area of the button.
6. Scrub the Timeline. The thumbnail is different from that in the first button, but the filter and property
adjustments remain the same.

7. Repeat steps 1-5 to create buttons named video_button3 and video_button4, applying images from the
Video Button 3 and Video Button 4 folders, respectively.

8. Click Scene 1 to return to the main Timeline.

9. Select the Video Button 1 layer, and then select the first video button on the Stage.

10. In the Property inspector, name the instance video_button1.

11. Select the Video Button 2 layer, and then select the second video button on the Stage.

12. In the Property inspector, click Swap. Select the video_button2 symbol, and click OK.

Note

Be sure to select video_button2 in the Swap Symbol dialog box, and not Video Button 2.
13. Select Button from the Instance Behavior pop-up menu (Movie Clip is currently displayed). Type
video_button2 for the instance name, if it isn't already there.

[View full size image]

14. Repeat steps 11-13 for the third and fourth buttons.

UMinho :: Ciências da Comunicação Page 15 of 31 Design e Multimédia

15. Lock the Video Button 1, Video Button 2, Video Button 3, and Video Button 4 layers.

[View full size image]

16. Choose Control > Test Movie. As you move the mouse over the thumbnails, they should display the
appropriate Up, Down, and Over states. Close the preview window.

UMinho :: Ciências da Comunicação Page 16 of 31 Design e Multimédia

Extending the Timeline

Currently, many layers contain just a single frame. You need to create new layers for frame labels, the pop-up
video of the zookeeper, and the video player. Then, add frames to all the layers so that they each have at
least 50 frames. Next, you'll label frames and add stop actions so that the script will stop while the movie
plays.

1. Select the Sound Buttons layer, and click the Insert Layer icon three times. Name the new layers Labels,
Pop Up Video, and Video Player.

2. Select frame 50 on the Actions layer, and then press Shift and select frame 50 on the Background Photo
layer, so that frame 50 is selected on all the layers. Press F5 to insert frames for all layers.

3. Select frame 10 in the Actions and Labels layers, and press F6 to insert a keyframe on each layer. Add
keyframes to frames 20, 30, and 40 in the Actions and Labels layers.

4. Select frame 10 in the Labels layer. In the Property inspector, type penguins in the Frame Label box.

[View full size image]

[View full size image]

5. Repeat step 4 to label frame 20 mandrill, frame 30 tiger, and frame 40 lion.

6. Choose Window > Actions to open the Actions panel, and then select frame 1 in the Actions layer.

7. In the Actions panel, add a stop action by typing

stop();

8. Add stop actions to frames 10, 20, 30, and 40 in the Actions layer. Close the Actions panel.

UMinho :: Ciências da Comunicação Page 17 of 31 Design e Multimédia

Preparing Flash Video Content

You've created the thumbnail movie buttons. Now you need to prepare the movies to play when the buttons
are depressed. You'll import one video file and encode it in FLV format; the other movies are already in FLV
format for you. Then, use the FLV playback component controls to link the appropriate movie file with the frame
for each button, and to turn autoplay on or off. Finally, you'll use ActionScript to move the Timeline to the
appropriate frame when each button is clicked.

About Importing Video

When you import video, you can choose to embed it, which places the video in the Timeline so that it becomes
part of the Flash document, or load it externally, so that it remains a separate file. Embedded video works best
for smaller video clips without audio tracks; if you're using video clips longer than 10 seconds, load external
video files and download the video progressively (so the viewer can watch it as it is downloading) or stream
video using Flash Video Server.

Importing Video Files

You can import video files into Flash and convert them into FLV files at the same time. The Import Video wizard
creates an FLV playback component, which contains the video file and the skin, or controls, that you've
selected.

1. Select frame 1 on the Video Player layer.

2. Choose File > Import > Import Video.

3. In the Import Video wizard, select On Your Computer, and click Browse (Windows) or Choose (Mac OS).

4. In the dialog box, select Penguins.mov from the Lesson09/09Start folder, and click Open. Click Next or
Continue in the wizard.

5. From the deployment options, select Progressive Download From A Web Server. Click Next or Continue.

Note

Progressive download lets the video file play as it downloads to the viewer's computer.
6. Select the Encoding Profiles tab, and then select Flash 8 High Quality (700 kbps) from the profile menu.

7. Select the Crop And Resize tab. Select Resize Video, and type 480 in the Width field and 320 in the
Height field. Click Next or Continue.

UMinho :: Ciências da Comunicação Page 18 of 31 Design e Multimédia

8. Select SkinUnderPlayStopSeekMuteVol.swf from the Skin menu, and select color #666666. Click Next or
Continue.

[View full size image]

Note

The skin determines the look and feel of the video's controls. You can use one of the skins provided with
Flash, or you can customize your own. To preview a skin, select it from the Skin menu.
9. Review the settings for the imported video file, and then click Finish to encode the file. By default, your
video file will be named penguins.flv and saved in the same folder as the Flash document you're working
on, which is also where your final swf file will be saved.

Note

The encoding process can be complex. How long it takes depends on your computer's processor speed
and memory, the complexity and length of the video, and the encoding options you choose.

UMinho :: Ciências da Comunicação Page 19 of 31 Design e Multimédia

10. When Flash has encoded the video, a black box with the selected skin appears on the Stage. Align the
video box in the middle of the transparent square on the left side of the Stage.

[View full size image]

11. Choose Control > Test Movie. The video begins streaming. Use the controls to play, stop, and change the
volume for the movie. Close the preview window.

UMinho :: Ciências da Comunicação Page 20 of 31 Design e Multimédia

 Import Video Wizard Options

The Flash Import Video wizard includes many options. Which options you choose depends on your
target audience, the size of the video you're importing, and the initial format of the movie file.

Deployment Options

l Progressive Download From A Web Server

This option lets you stream the video using HTTP streaming. If you use this option, you
need to upload the FLV file to the server along with the SWF file.

l Stream From Flash Video Streaming Service

This option lets you upload your video to a Flash Media Server, if your service provider
hosts one.

l Stream From Flash Media Server

This option lets you upload your video to a Flash Media Server that you host, rather than
one your service provider hosts.

l As Mobile Device Video Bundled In SWF

This option is only available if you are creating a Flash document for Flash Lite 2.0 or later.
It bundles a device video file within the SWF file for use with Flash Lite 2.0 enabled devices
(such as mobile phones and handheld computers).

l Embed Video In SWF And Play In Timeline

This option embeds the video in the Flash document and includes its frames in the Timeline.
However, embedding is only recommended for short video clips with no audio track.
Additionally, embedding a video file substantially increases the SWF file size.

l Linked QuickTime Video For Publishing to QuickTime

This option lets you publish your Flash content as a QuickTime 4 movie and creates a
pointer to a QuickTime video file. You must publish the SWF file as a QuickTime video. You
cannot display a linked QuickTime clip in SWF format.

Encoding Options

If you're converting a video file to FLV format, you'll have several encoding options.

Encoding profiles contain settings optimized for specific versions of Flash Player and for different
download speeds. When you select a profile, a summary of its settings appears. You can
customize those settings by clicking the Video or Audio tab and selecting a different option.

Skinning Options

The video's skin determines the look and feel of the controls, and their position on the Stage.
Select a skin to see a preview of its appearance. You can design a custom skin in Flash, save it as
an SWF file, and link to it from the Skinning window of the Import Video wizard.

Controlling the Video Playback

The FLV playback component lets you control which video plays, whether the video plays automatically, and
other aspects of playback. You'll turn autoplay off for the initial penguin movie, so that it doesn't begin playing
until the viewer presses the Play button. Then you'll change the FLV playback component options at different
frames to play the appropriate movies for each button, and to turn autoplay on, so that the movies start
playing immediately when the button is pressed.

1. Select the video component on the Stage.

UMinho :: Ciências da Comunicação Page 21 of 31 Design e Multimédia
2. Click the Parameters tab in the Property inspector. In the Parameters panel, change the autoPlay
parameter to false.

[View full size image]

3. Test the movie again. The penguin video doesn't begin playing until you press the Play button.

4. Select frame 10 of the Video Player layer, and press F6 to insert a keyframe.

5. Select the FLV playback component on the Stage. In the Parameters panel, change the autoPlay
parameter to true.

Note

In the final movie, when you click the penguin button, the script will move to frame 10 in the Timeline, and
the movie will play immediately.
6. Select frame 20 of the Video Player layer, beneath the mandrill frame label. Press F6 to insert a keyframe.

7. Select the FLV playback component on the Stage. In the Parameters panel, click the source parameter. In
the box next to it, click the magnifying glass icon.

[View full size image]

8. In the Content Path dialog box, click the folder icon, select the Mandrill.flv file in the Lesson09/09Start
folder, and click Open. Then click OK to close the Content Path dialog box.

Note

The autoPlay parameter should already be set to true because the keyframe has the properties of the
previous keyframe.
9. Select frame 30 of the Video Player layer, press F6 to insert a keyframe, and change the source
parameter to the Tiger.flv file.

10. Select frame 40 of the Video Player layer, press F6 to insert a keyframe, and change the source
parameter to the Lion.flv file.

Scripting Video Buttons

A different video file is associated with each section of the Timeline (Penguins.flv with frame 10, Mandrill.flv with
frame 20, and so on). Now you need to write the ActionScript that moves the playhead to the appropriate
frame in the Timeline when the button is clicked.

You can use the same set of code for each button, with minor changes. The first line of code adds an event
listener, similar to the one you used in Lesson 7. The event listener listens for the button click, and then runs
the function (clickListener1, clickListener2, and so on),
UMinho :: Ciências da Comunicação
which you define in the following lines.
Page 22 of 31
The function
Design e Multimédia
moves the playhead to the appropriate frame in the Timeline. When the playhead moves, the appropriate
video file plays, according to the controls in the FLV playback component.

1. Select frame 1 in the Actions layer, and open the Actions panel.

Note

To open the Actions panel, choose Window > Actions.

2. Add an event listener for the first button by typing the following line in the Actions panel:

this.video_button1.addEventListener(MouseEvent.CLICK,clickListener1);

3. Define the clickListener1 function by typing the following lines in the Actions panel:

function clickListener1(event:MouseEvent):void {
gotoAndPlay("penguins");
}

UMinho :: Ciências da Comunicação Page 23 of 31 Design e Multimédia

4. Copy and paste the lines you just added three times, and then modify each set for the appropriate video:

first copy: video_button2, clickListener2, and "mandrill"

second copy: video_button3, clickListener3, and "tiger"

third copy: video_button4, clickListener4, and "lion".

Note

You can also copy the lines of the script from the Actions panel in the 09End.fla file.

this.video_button2.addEventListener(MouseEvent.CLICK,clickListener2);
function clickListener2(event:MouseEvent):void {
gotoAndPlay("mandrill");
}
this.video_button3.addEventListener(MouseEvent.CLICK,clickListener3);
function clickListener3(event:MouseEvent) {
gotoAndPlay("tiger");
}

this.video_button4.addEventListener(MouseEvent.CLICK,clickListener4);
function clickListener4(event:MouseEvent) {
gotoAndPlay("lion");
}

[View full size image]

5. Close the Actions panel.

UMinho :: Ciências da Comunicação Page 24 of 31 Design e Multimédia

Working with Video that Includes Alpha Channels

For the thumbnail buttons, you used video files that fill the FLV playback component. Sometimes, though, you
want to use a video file that doesn't include a background. For this project, the zoo director was filmed in front
of a green screen, which was removed using Adobe After Effects. When you use the video in Flash, the zoo
director appears to be in front of the Flash background.

You'll import the video file, which is already in FLV format, into an FLV video component. However, you won't
include a skin. The zoo director will appear directly on the Stage.

You'll convert the FLV file to a movie clip symbol, so that you can apply the drop shadow filter to set it off from
the background. Then, you'll animate and mask the clip, so that the zoo director appears just before he begins
speaking and disappears when he has finished.

Importing the Video Clip

Use the Import Video wizard to import the Popup.flv file.

1. Select the first frame in the Pop Up Video layer, and choose File > Import > Import Video.

2. In the Import Video wizard, select On Your Computer, and click Browse or Choose. Select the Popup.flv
file in the Lesson09/09Start folder, and click Open. Click Next or Continue to proceed to the next window
in the wizard.

3. From the deployment options, select Progressive Download From A Web Server. Click Next or Continue.

4. Select None from the Skin menu, and click Next or Continue.

[View full size image]

5. Click Finish to import the video.

UMinho :: Ciências da Comunicação Page 25 of 31 Design e Multimédia

6. Use the Selection tool to position the new video just above the red bar and the sound buttons.

[View full size image]

To see the entire Stage, choose Show All from the pop-up menu just above the
Stage
7. Choose Control > Test Movie to see the video file that uses alpha channels. Close the preview window.

UMinho :: Ciências da Comunicação Page 26 of 31 Design e Multimédia

 Professionals often film people in front of solid green or blue backgrounds, so that they
can easily remove, or key, the background in a video-editing application such as Adobe
After Effects. Then, the person is merged with a different background. The image of the
zoo director was filmed in front of a green screen, which was removed in After Effects.

1. Shoot footage in front of a green screen.

l Use a green background that is flat, smooth, and free of shadows, so that the
color is as pure as possible.

l Minimize the light that reflects off the green screen onto the subject.

l Keep movement to a minimum for Flash video; use a tripod if possible.

2. Remove the background in After Effects.

Import the file as footage into After Effects, create a new composition, and drag it
onto the Composition Timeline.

Create a garbage mask to roughly outline the shape and remove most of the
background. But be sure the subject never moves outside the mask!

Use the Color Range keying effect to delete the rest of the background. You may
need to do some fine-tuning with the Matte Choker and Spill Suppressor effects. A
spill suppressor removes the light that splashes onto the edges of the subject.

3. Export to FLV format

Export the video file to Flash Video (FLV) format directly from After Effects. Be sure to
select Encode Alpha Channel. The alpha channel is the selection around the subject.
Encoding the alpha channel ensures that the video exports without a background.

Adding a Drop Shadow to a Movie Clip

To distinguish the video from the background, apply a drop shadow filter. First, convert the video to a movie
clip symbol so that you can animate the clip. Then, within that movie clip symbol, convert the video to a movie
clip symbol so that you can apply a drop shadow to it.

UMinho :: Ciências da Comunicação Page 27 of 31 Design e Multimédia

1. Select the Popup.flv video file on the Stage, and press F8 to convert it to a symbol. Select Movie Clip,
name the symbol popUp, set the registration point to the upper-left corner, and then click OK.

2. Double-click the movie symbol on the Stage to edit it. Rename Layer 1 Video in the symbol Timeline.

3. Select the video file on the Stage, and press F8 to convert it into a symbol again. Select Movie Clip, set a
center registration point, and name the symbol popUp_video. Then click OK.

4. Select the movie clip symbol on the Stage. In the Filters panel, click the Add Filter icon, and select Drop
Shadow.

5. Set the Blur X and Blur Y options to 10, set the Distance to 10, and set the Strength to 50%.

[View full size image]

Animating a Movie Clip

Use motion tweens to animate the clip so that it slides in before it plays and slides out when it has finished.

1. Select the Video layer, and then click the Insert Layer icon. Name the new layer Actions.

2. Select frame 15 on the Video layer, and press F6 to insert a keyframe.

3. Select any frame between the keyframes on frames 1 and 15. In the Property inspector, select Motion
from the Tween menu.

4. Select frame 1 on the Video layer, and then select the instance of the movie clip on the Stage.

UMinho :: Ciências da Comunicação Page 28 of 31 Design e Multimédia

5. Drag the movie clip straight down below the Stage.

6. Select frame 175 on the Video layer, and press F6 to add a keyframe. Add another keyframe at frame
190.

7. Select any frame between 175 and 190. In the Property inspector, select Motion from the Tween menu.

[View full size image]

8. Select frame 190 in the Video layer, select the video on the Stage, and drag the video straight down
below the Stage.

Note

You've animated the video clip to move off the screen as the zoo director finishes speaking. However, the
exact timing of the end of the speech depends on the computer playing the video. You may need to move
the motion tween earlier or later in the Timeline.

UMinho :: Ciências da Comunicação Page 29 of 31 Design e Multimédia

9. Select frame 190 on the Actions layer, and press F7 to insert a blank keyframe. With that keyframe
selected, open the Actions panel, and type

stop();

The stop action keeps the script from repeating the motion tween.

[View full size image]

Masking a Movie Clip

A mask will show the movie clip only within a specific area of the Stage. You'll create a simple mask using the
Rectangle tool.

1. Select the Video layer, and click the Insert Layer icon. Name the new layer Mask.

2. Select the Rectangle tool, with no stroke and a solid fill in any color.

3. Draw a rectangle on the Stage, and select it with the Selection tool.

4. In the Property inspector, set the width and height of the rectangle to 300. Set the X and Y values to 0.

[View full size image]

5. Right-click (Windows) or Control-click (Mac OS) the Mask layer, and select Mask.

6. Choose Control > Test Movie to see the effect. The video should disappear when it slides off the Stage.

You've made an ordinary project much more engaging with sound and video files imported from other sources.

UMinho :: Ciências da Comunicação Page 30 of 31 Design e Multimédia

Review
Review Questions

1 How can you edit the length of a sound clip?

2 What is a skin for a video?

3 What are the limitations for embedded video clips?

4 What is a green screen and how is it used?

Review Answers

1 To edit the length of a sound clip, select the frame that contains it, and click Edit in the Property
inspector. Then, move the time slider in the Edit Envelope dialog box.

2 The skin is the combination and appearance of video controls, such as Play, Fast Forward, and
Pause buttons. You can choose from a wide array of combinations, with the buttons in different
positions, and you can customize the skin. If you don't want viewers to have control over the
video, apply no skin.

3 When you embed a video clip, it becomes part of the Flash document and is included in the
Timeline. Because embedded video clips significantly increase the size of the document and
produce audio synchronization issues, it's best to embed video only if it is less than 10 seconds
in length and contains no audio track.

4 A green screen is a solid color background shot behind a video subject. The solid background is
then removed from the footage in an application such as After Effects, so that the subject can
be placed in front of a different background.

UMinho :: Ciências da Comunicação Page 31 of 31 Design e Multimédia