ex09[flash]_working with sound and video

8/7/2019 Ex09[Flash]_Working With Sound and Video

1/31

9. Working w ith Sound and Video

[View full size image]

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

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

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

UMinho :: Cincias da Comunicao Page 1 of 31 Design e Multimdia


2/31

Getting Started

Start the lesson by viewing the finished animated zoo kiosk. You'll create the kiosk by adding sound and videofiles 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 asound 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 moviethumbnail buttons, import movies, and use ActionScript to attach the buttons to the movies. You'll alsoanimate the zoo director video so that it moves onto the screen appropriately.


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 aworking copy ensures that the original start file w ill be available if you wish to start over.



3/31

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 clickOpen or Import.

3. In the Import To Stage dialog box, select all the layers. Select Flash Layers from the Convert Layers Tomenu. 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.


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 importthe file.



4/31

6. In Flash, select the Sound Buttons layer (the top layer), and click the Insert Layer icon. Name the newlayer 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, youcan 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.




5/31

Creating Sound Buttons

There are three sound buttons in the final kiosk, each playing a different animal sound. You'll create a buttonsymbol, configure its rollover states, and import a sound for the button. Then, you'll duplicate that button andadapt 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 thebutton's hit area.

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

2. Choose Modify > Convert To Symbol. In the Convert To Symbol dialog box, select Button, and name thebutton 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 tosee the button more clearly.

4. Select Layer 1, and then select the group on the Stage. Choose Modify > Break Apart to break the groupinto 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 w ith the new layer selected, choose Edit > Paste In Place. The speakersymbol 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 andHighlight.

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 a ll 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 theTransform panel, scale the symbol to 150%.

Note

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



6/31

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 arectangle approximately the same size as the red rectangle above the button (behind Guess this animalsound).



7/31

Note

The Hit frame determines the active area of the button. Because the hit area is the same as the rectangleshape, 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 Flashdocument. Two sound files are a lready included in the library, but you'll import the Monkey.wav file and assignit to the button symbol you created.

15. Using the Selection tool, move the rectangle behind the Sound 1 text and the speaker icon. You mayneed 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 blackrectangle 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.

1. Choose File > Import > Import To Library.

2. Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open (Windows) or ImportTo 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 se lect Start from the Sync menu.




8/31

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 Envelopedialog box, so that only the first two sections o f the waveform remain. Then, you'll apply a fade so that thesound gradually decreases as it ends.

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

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


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




9/31

Duplicating Buttons

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

3. Drag the right end of the time s lider to the middle of the waveform, so that the sound ends after thesecond section.


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.


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



10/31

1. Right-click (Windows) or Control-click (Mac OS) the sound_button1 symbol in the Library panel, andchoose 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 itbeneath 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 Soundmenu, and select Start from the Sync menu.


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



11/31

Aligning Buttons

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

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.


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 thenclick the Align Horizontal Center icon.

3. With all three buttons still selected, use the arrow keys on your keyboard to nudge the buttons so thatthey 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_button3symbol.

5. Using the arrow keys, nudge the button so that it's aligned w ith the bottom of the semi-transparentthumbnail bar.



12/31

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.



13/31

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'llcreate a button symbol with distinct rollover states. As you did with the sound buttons, you'll duplicate theinitial 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 hadimported 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'lladd 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 seethem, if necessary.)

2. In the Filters panel, click the Add Filter icon ( ) and select Drop Shadow from the menu. Set the Blur Xand 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 Filterspanel.


3. Click elsewhere on the Stage to deselect the thumbnails. Then, select the first thumbnail (the image ofpenguins), 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 Brightnessfrom the Color menu, and select -35 for the percentage.


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



14/31

Duplicating Thumbnail Buttons

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

8. With the Down frame still selected, click the Filters tab, and adjust the drop shadow settings: change theBlur 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 threetimes to nudge the thumbnail so that the center point is slightly off-center from the button.


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

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

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.




15/31

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


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 justdetermines the active area of the button.

6. Scrub the Timeline. The thumbnail is different from that in the first button, but the filter and propertyadjustments remain the same.

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


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 se lect 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). Typevideo_button2 for the instance name, if it isn't already there.


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



16/31

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


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



17/31

Extending the Timeline

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

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 Photolayer, 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. Addkeyframes 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.



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

6. Choose W indow > Actions to open the Actions panel, and then se lect 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.



18/31

Preparing Flash Video Content

You've created the thumbnail movie buttons. Now you need to prepare the movies to play when the buttonsare depressed. You'll import one video file and encode it in FLV format; the other movies are already in FLVformat for you. Then, use the FLV playback component controls to link the appropriate movie file w ith the framefor each button, and to turn autoplay on or off. Finally, you'll use ActionScript to move the Timeline to theappropriate 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 becomespart of the Flash document, or load it externally, so that it remains a separate file. Embedded video works bestfor smaller video clips without audio tracks; if you're using video clips longer than 10 seconds, load externalvideo files and download the video progressively (so the viewer can watch it as it is downloading) or streamvideo 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 w izardcreates an FLV playback component, which contains the video file and the skin, or controls, that you'veselected.

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 orContinue 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 W idth field and 320 in theHeight field. Click Next or Continue.



19/31

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


Note

The skin determines the look and feel of the video's controls. You can use one of the skins provided withFlash, 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, yourvideo file will be named penguins.flv and saved in the same folder as the Flash document you're workingon, which is a lso 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 speedand memory, the complexity and length of the video, and the encoding options you choose.



20/31

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


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



21/31

Controlling the Video P layback

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 playinguntil the viewer presses the P lay button. Then you'll change the FLV playback component options at differentframes to play the appropriate movies for each button, and to turn autoplay on, so that the movies startplaying immediately when the button is pressed.

Import Video Wizard Options

The Flash Import Video wizard includes many options. Which options you choose depends on yourtarget 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, youneed to upload the FLV file to the server along w ith 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 providerhosts one.

l Stream From Flash Media Server

This option lets you upload your video to a Flash Media Server that you host, rather thanone 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 P lay 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 apointer to a QuickTime video file. You must publish the SWF file as a QuickTime video. Youcannot 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 differentdownload speeds. When you se lect a profile, a summary of its se ttings 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 asan SWF file, and link to it from the Skinning window of the Import Video wizard.

1. Select the video component on the Stage.UMinho :: Cincias da Comunicao Page 21 of 31 Design e Multimdia


22/31

Scripting Video Buttons

A different video file is associated with each section of the Timeline (Penguins.flv with frame 10, Mandrill.flv withframe 20, and so on). Now you need to write the ActionScript that moves the playhead to the appropriateframe 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 eventlistener, similar to the one you used in Lesson 7. The event listener listens for the button click, and then runsthe function (clickListener1, clickListener2, and so on), which you define in the following lines. The function

2. Click the Parameters tab in the Property inspector. In the Parameters panel, change the autoPlayparameter to false.


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 autoPlayparameter to true.

Note

In the final movie, when you click the penguin button, the script w ill move to frame 10 in the Timeline, andthe 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. Inthe box next to it, click the magnifying glass icon.


8. In the Content Path dialog box, click the folder icon, select the Mandrill.flv file in the Lesson09/09Startfolder, 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 theprevious keyframe.

9. Select frame 30 of the Video Player layer, press F6 to insert a keyframe, and change the sourceparameter to the Tiger.flv file.

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



23/31

moves the playhead to the appropriate frame in the Timeline. When the playhead moves, the appropriatevideo 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 W indow > 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");

}



24/31

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.


function clickListener2(event:MouseEvent):void {

gotoAndPlay("mandrill");

}


function clickListener3(event:MouseEvent) {

gotoAndPlay("tiger");

}


function clickListener4(event:MouseEvent) {

gotoAndPlay("lion");

}


5. Close the Actions panel.



25/31

Working w ith V ideo that Includes Alpha Channels

For the thumbnail buttons, you used video files that fill the FLV playback component. Sometimes, though, youwant to use a video file that doesn't include a background. For this project, the zoo director was filmed in frontof a green screen, which was removed using Adobe After Effects. When you use the video in Flash, the zoodirector 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'tinclude 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 fromthe background. Then, you'll animate and mask the clip, so that the zoo director appears just before he beginsspeaking 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.flvfile 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.


5. Click Finish to import the video.



26/31

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


To see the entire Stage, choose Show All from the pop-up menu just above theStage

7. Choose Control > Test Movie to see the video file that uses alpha channels. Close the preview window.



27/31

Adding a Drop Shadow to a Mov ie 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 movieclip symbol so that you can apply a drop shadow to it.

Professionals often film people in front of solid green or blue backgrounds, so that theycan easily remove, or key, the background in a video-editing application such as AdobeAfter Effects. Then, the person is merged with a different background. The image of thezoo 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 thecolor 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 itonto the Composition Timeline.

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

Use the Color Range keying effect to delete the rest of the background. You mayneed to do some fine-tuning with the Matte Choker and Spill Suppressor effects. Aspill 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 toselect Encode Alpha Channel. The a lpha channel is the selection around the subject.Encoding the alpha channel ensures that the video exports without a background.



28/31

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 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 acenter 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 se lect DropShadow.

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


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 Motionfrom the Tween menu.

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



29/31

5. Drag the movie clip straight down be low the Stage.

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

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


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

Note

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



30/31

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 theRectangle tool.

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

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

stop();

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


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 se lect it with the Selection tool.

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


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.



31/31

ReviewReview Questions

Review Answers

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?

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

2 The skin is the combination and appearance of video controls, such as P lay, Fast Forward, andPause buttons. You can choose from a w ide array of combinations, with the buttons in differentpositions, and you can customize the skin. If you don't want viewers to have control over thevideo, apply no skin.

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

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

ex09[flash]_working with sound and video

Documents