5-1 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound, Video, and Basic Interactivity with Buttons Macromedia Flash Design & Application

5-5-11OBJOBJ

Copyright 2003, Paradigm Publishing Inc.

Adding Sound, Video, and Basic Interactivity with

Buttons

Macromedia FlashMacromedia FlashDesign & ApplicationDesign & Application

5-5-22OBJOBJ


List the audio formats supported in Flash. Import sound to a movie's library. Add sound to an animation in a keyframe. Change synchronization, sound effects, and loop

sound. Edit the sound envelope to customize a sound

effect and control volume. Specify the compression setting for the sound file. Describe how sampling rate and sample size affect

a sound file. Use sounds from the common library. Increase the layer height to display sounds in

frames.

Performance ObjectivesPerformance Objectives

5-5-33OBJOBJ


List the video formats supported in Flash. Import a video clip to a movie. Specify import video settings. Modify a video clip instance. Create a button symbol. Modify a button instance. Test the button in the authoring environment. Add sound to a button. Add an action statement to a button to control a

movie using the Actions panel. Create a movie clip symbol. Create an animated button. COMMANDS REVIEW

Performance ObjectivesPerformance Objectives

5-5-44OBJOBJ


Adding Sound to a MovieAdding Sound to a MovieAdding Sound to a MovieAdding Sound to a Movie

Sound is added to a movie by importing the sound file to the library then adding an instance of the sound to the

frame in the Timeline in which you want the sound to start playing

Flash can import sound files in the following file formats with QuickTime 4 or later installed: wav aif au mp3

A Windows-based computer without QuickTime 4 installed

cannot import au files.

A Macintosh-based computer without QuickTime 4 installed

cannot import wav files.

5-5-55OBJOBJ


Importing a Sound FileImporting a Sound FileImporting a Sound FileImporting a Sound File

FFile, ile, IImport or Ctrl + Rmport or Ctrl + R

change to the sound file formatthat you want to import

5-5-66OBJOBJ


Importing a Sound File…/2Importing a Sound File…/2Importing a Sound File…/2Importing a Sound File…/2

waveform forselected audio file

click the Play buttonto hear the recording

Flash imports sound files directly

to the library.

WWindow, indow, LLibrary or F11ibrary or F11

5-5-77OBJOBJ


Adding Sound in AnimationAdding Sound in AnimationAdding Sound in AnimationAdding Sound in Animation

Insert a new layer in the Timeline not required but is recommended for ease

of editing Insert a keyframe at the required frame

in the Timeline Insert sound in a keyframe by dragging

an instance of the sound from the library to the stage with the keyframe active can also be added by choosing the sound

file name in the Properties panel

5-5-88OBJOBJ


Adding Sound in Adding Sound in Animation…/2Animation…/2

Adding Sound in Adding Sound in Animation…/2Animation…/2

pointing at the waveformdisplays a tooltip with the

name of the sound file

sound waveformdisplays in Timeline

5-5-99OBJOBJ


Synchronizing Sound to the Synchronizing Sound to the AnimationAnimation

Synchronizing Sound to the Synchronizing Sound to the AnimationAnimation

Sync sound properties can be applied to the keyframe from the Properties panel to synchronize

the sound with the other elements in an animation.

Sync sound properties can be applied to the keyframe from the Properties panel to synchronize

the sound with the other elements in an animation.

5-5-1010OBJOBJ


Sync Sound OptionsSync Sound OptionsSync Sound OptionsSync Sound Options

Event starts playing when the playhead reaches the

keyframe and continues playing to completion completely downloaded before it begins to play

Start same as an event sound with the exception that any

existing instances of the same sound will be stopped when the start sound plays

Stop use to discontinue playing a sound

Stream is synchronized with the Timeline and will stop

playing when the playhead reaches the end of the frames

can begin playing almost immediately while the remainder of the data is downloaded in the background

5-5-1111OBJOBJ


Looping a Sound InstanceLooping a Sound InstanceLooping a Sound InstanceLooping a Sound Instance

Key a value for a sound keyframe to specify the number of times in

which the sound should be replayed.

Key a value for a sound keyframe to specify the number of times in

which the sound should be replayed.

5-5-1212OBJOBJ


Applying Sound EffectsApplying Sound EffectsApplying Sound EffectsApplying Sound Effects

The Effect drop-down list for a sound keyframe provides

preset options to control the volume level or channel from

which the sound plays.

5-5-1313OBJOBJ


Sound Effect OptionsSound Effect OptionsSound Effect OptionsSound Effect Options

Left Channel plays in left channel only

Right Channel plays in right channel only

Fade Left to Right volume pans from left channel to right channel

Fade Right to Left volume pans from right channel to left channel

Fade In volume gradually increases as sound is played

Fade Out volume gradually decreases as sound is played

Custom opens Edit Envelope dialog box customize volume or define starting and ending

points for sound

5-5-1414OBJOBJ


Editing the Sound EnvelopeEditing the Sound EnvelopeEditing the Sound EnvelopeEditing the Sound Envelope

Envelope line Envelope handle

Sound Timeline

Right channelediting window

Display Timelinein frames

Display Timelinein secondsZoom

Time In

Left channelediting window

PlayStop

5-5-1515OBJOBJ


Editing the Sound Editing the Sound Envelope…/2Envelope…/2

Editing the Sound Editing the Sound Envelope…/2Envelope…/2

Drag envelope handles up or down to increase or decrease the volume

Drag Time In or Time Out markers to change the point in the sound file at which the sound will start or finish

Changes made apply to the selected sound instance only

5-5-1616OBJOBJ


Defining Sound PropertiesDefining Sound PropertiesDefining Sound PropertiesDefining Sound Properties

select soundand click

Properties button

5-5-1717OBJOBJ


Defining Sound Defining Sound Properties…/2Properties…/2

Defining Sound Defining Sound Properties…/2Properties…/2

Sound is recorded digitally through a process called sampling device attached to the computer measures

the waveform at regular intervals Sampling rate is the number of times per

second a sample of the waveform is recorded

Sample size refers to the amount of information stored for each sampled waveform

High sample rate and sample sizes provide high quality sound also require larger sound file size to store

the information

5-5-1818OBJOBJ


Compressing Sound FilesCompressing Sound FilesCompressing Sound FilesCompressing Sound Files

Depending on the active compression option, you can test the level at which a sound file will be compressed using various sample rates and bit rates to achieve a

balance between the quality of sound and file size.

to hear the quality of thecompressed sound file

to change all instancesof the sound to a

different file

to update the sound fileif you have edited the

original file outside Flash

to discontinue playinga sound after clicking

the test button

5-5-1919OBJOBJ


Compression OptionsCompression OptionsCompression OptionsCompression Options

ADPCM – Adaptive Differential Pulse Code Modulation only the difference between samples is

recorded recommended for short sound effects

MP3 (file extension for MPEG) – Motion Picture Experts Group removes redundant and irrelevant parts no noticeable loss in quality

Raw no compression but allows you to resample

at a new rate Speech

compression specific for voice data

5-5-2020OBJOBJ


Using Sounds from the Using Sounds from the Common LibraryCommon Library

Using Sounds from the Using Sounds from the Common LibraryCommon Library

Flash provides a common sound library containing various sound effects that can be

copied to the current movie's library.

Flash provides a common sound library containing various sound effects that can be

copied to the current movie's library.

WWindow, Common Liindow, Common Libbrariesraries

With the keyframe active for which you want to insert a

sound, drag the sound from the common library to the

stage.The sound is added to the

current movie's Library panel.

5-5-2121OBJOBJ


Increasing Layer Height to Increasing Layer Height to Display Sound in FramesDisplay Sound in Frames

Increasing Layer Height to Increasing Layer Height to Display Sound in FramesDisplay Sound in Frames

MModify, odify, LLayerayer

click to selectlayer height

setting

enlarges display of waveforms

5-5-2222OBJOBJ


Layer Height SettingsLayer Height SettingsLayer Height SettingsLayer Height Settings

100%

200%

300%

5-5-2323OBJOBJ


Finding Sound on the Finding Sound on the InternetInternet

Finding Sound on the Finding Sound on the InternetInternet

Sound effects can be downloaded from the Web for free or for a small fee for use in a

Flash movie.

Sound effects can be downloaded from the Web for free or for a small fee for use in a

Flash movie.

5-5-2424OBJOBJ


Video File FormatsVideo File FormatsVideo File FormatsVideo File Formats

Flash can import video clips in the following file formats with QuickTime 4 or later installed: avi, dv, dvi, mpg, mpeg, mov, and flv

A Windows-based computer with DirectX 7 or later installed can also import a wmv (Windows Media File) format

Flash imports and exports video using the Sorenson Spark codec which controls the compression in Flash and the decompression in the Flash Player

Users will require Flash Player Version 6 to view a movie with embedded video

5-5-2525OBJOBJ


Importing VideoImporting VideoImporting VideoImporting Video


change to the video file formatthat you want to import

5-5-2626OBJOBJ


Importing Video…/2Importing Video…/2Importing Video…/2Importing Video…/2

Import a QuickTime video clip as an

embedded movie clip or as a link to an

external video file.

Choosing to link a QuickTime video

externally requires that the movie be

published as a QuickTime movie.

5-5-2727OBJOBJ


Choosing the Import Video Choosing the Import Video SettingsSettings

Choosing the Import Video Choosing the Import Video SettingsSettings

Import settings that control the compression level of a video clip are set

before the video is imported.

drag slider or key valuebetween 0 and 100 to specify

compression level

drag slider or key valuebetween 0 and 48 to set thenumber of video keyframes

drag slider or key valuebetween 1 and 100 to specify

the percentage of pixeldimensions

synchronize the videowith the timeline

audio may or may not beable to be imported

depending on programused to record tracks

5-5-2828OBJOBJ


Choosing the Import Video Choosing the Import Video Settings…/2Settings…/2

Choosing the Import Video Choosing the Import Video Settings…/2Settings…/2

The video clip is added to the library.

displays progress bar

indicates number offrames required in the

movie Timeline

5-5-2929OBJOBJ


Importing Video Directly to Importing Video Directly to the Librarythe Library

Importing Video Directly to Importing Video Directly to the Librarythe Library

FFile, ile, IImport to Librarymport to Library

Insert by dragging an

instance of the video to the

stage.

5-5-3030OBJOBJ


Embedded Video PropertiesEmbedded Video PropertiesEmbedded Video PropertiesEmbedded Video Properties

select video clipand click

Properties button

5-5-3131OBJOBJ


Modifying a Video InstanceModifying a Video InstanceModifying a Video InstanceModifying a Video Instance

An instance of a video can be scaled, rotated, or skewed using the Free

Transform tool or moved to a new location on the stage using the Arrow tool.

display the Properties panel to change thedimensions of the clip

5-5-3232OBJOBJ


Importing Video in a Movie Importing Video in a Movie Clip SymbolClip Symbol

Importing Video in a Movie Importing Video in a Movie Clip SymbolClip Symbol

Gains the advantage of having its own Timeline and the ability to control the clip's

brightness, tint, and alpha properties.

IInsert, nsert, NNew Symbol or Ctrl + F8ew Symbol or Ctrl + F8

key a nameclick Movie ClipBehavior

5-5-3333OBJOBJ


Importing Video in a Movie Importing Video in a Movie Clip Symbol…/2Clip Symbol…/2



change video importsettings as necessary

change to the video file formatthat you want to import

5-5-3434OBJOBJ




after the import processhas completed, click the

Back button

insert a layer and/orcreate frames toplace the video

modify the movieclip symbol instance

as necessary

drag an instanceto the stage

5-5-3535OBJOBJ


Creating ButtonsCreating ButtonsCreating ButtonsCreating Buttons

Create buttons to add simple interactivity with the user in which the user can control

the movie's playback. A button is created as a symbol with four states.

no mouse action over

it

Up

mouse rolled over

it

Over

has been clicked

Down

defines the boundaries

Hit

5-5-3636OBJOBJ


Creating Buttons…/2Creating Buttons…/2Creating Buttons…/2Creating Buttons…/2


key a nameclick ButtonBehavior

5-5-3737OBJOBJ


Modifying a Button InstanceModifying a Button InstanceModifying a Button InstanceModifying a Button Instance

draw the button aroundthe registration point

insert keyframes anddefine the button's

appearance for eachof the four button states

Flash will use the button's Up state as the Hit property if no image is created

in the Hit keyframe.

Flash will use the button's Up state as the Hit property if no image is created

in the Hit keyframe.

5-5-3838OBJOBJ


Inserting an Instance of a Inserting an Instance of a ButtonButton

Inserting an Instance of a Inserting an Instance of a ButtonButton

With the appropriate keyframe active, drag a button instance from

the Library panel to the stage.

5-5-3939OBJOBJ


Testing a ButtonTesting a ButtonTesting a ButtonTesting a Button

CControl, Enable Simple Buontrol, Enable Simple Butttonstonsor Ctrl + Alt + Bor Ctrl + Alt + B

CControl, Test ontrol, Test MMovieovieor Ctrl + Enteror Ctrl + Enter

By default, Flash does not display a button's attributes during movement of

the mouse over the button within the authoring environment.

Use the Buttons common library to copy button symbols to the current movie.

Use the Buttons common library to copy button symbols to the current movie.

5-5-4040OBJOBJ


Adding Sound to a ButtonAdding Sound to a ButtonAdding Sound to a ButtonAdding Sound to a Button

With the button in symbol editing mode, insert akeyframe in the Down frame of the button sound layer.

select the sound from the drop-down list

5-5-4141OBJOBJ


Adding an Action to a ButtonAdding an Action to a ButtonAdding an Action to a ButtonAdding an Action to a Button

ActionScript a programming language used to instruct

Flash on what actions to perform when a button is clicked by the user

like learning a new language of words and syntax to convey instructions to the computer

create using a point-and-click approach in the Actions panel

5-5-4242OBJOBJ


Adding an Action to a Adding an Action to a Button…/2Button…/2

Adding an Action to a Adding an Action to a Button…/2Button…/2

Creating an action statement for a button involves associating ActionScript statements with a mouse event

Mouse event occurs when the user interacts with the

button triggers Flash to perform the action

statement associated with the event most common are:

• Press• Release• Roll Over

5-5-4343OBJOBJ


Actions PanelActions PanelActions PanelActions Panel

WWindow, indow, AActions or F9ctions or F9

Toolbox ActionScript area

Displays the current script that you are

editing. Click the down arrow to navigate to

other scripts.

Parameters area

Click to open the Reference Panel

5-5-4444OBJOBJ


Actions Panel…/2Actions Panel…/2Actions Panel…/2Actions Panel…/2

An event handler beginning with the keyword on is required at the beginning of any ActionScript statement for a button created automatically when you add actions

using the Actions panel Double-click an action in the Toolbox to

add the action to the ActionScript area The Movie Control actions Stop, Play,

Goto, and stopAllSounds are used to allow the user to control the playback of the movie when assigned to a button

5-5-4545OBJOBJ


Creating a Movie Clip Creating a Movie Clip SymbolSymbol

Creating a Movie Clip Creating a Movie Clip SymbolSymbol

Insert, New Symbol key a name click Movie Clip in the Behavior section click OK

File, Import change the Files of type double-click the file name

Click the Back button to exit symbol editing mode

5-5-4646OBJOBJ


Creating Animated ButtonsCreating Animated ButtonsCreating Animated ButtonsCreating Animated Buttons

Insert the movie clip symbol within a button's

Up, Over, or Down keyframes to create a button that animates.

5-5-4747OBJOBJ


Commands ReviewCommands Review

How do you display the Actions panel?

WWindow, indow, AActions or F9ctions or F9

5-5-4848OBJOBJ



How do you view the common button or sound library?

WWindow, Common Liindow, Common Libbrariesraries

5-5-4949OBJOBJ



How do you create a new symbol?


5-5-5050OBJOBJ



How do you enable the buttons on the stage?

CControl, Enable Simple Buontrol, Enable Simple Butttonstonsor Ctrl + Alt + Bor Ctrl + Alt + B

5-5-5151OBJOBJ



How do you import sound or video?


5-5-5252OBJOBJ



How do you import to the library?

FFile, ile, IImport to Librarymport to Library

Insert by dragging an

instance of the video to the

stage.

5-5-5353OBJOBJ



How do you view the layer properties?

MModify, odify, LLayerayer

5-5-5454OBJOBJ



How do you open the Library panel?

WWindow, indow, LLibrary or F11ibrary or F11

5-5-5555OBJOBJ


Animating Using Symbols and Masks and Publishing

Flash Movies

Coming NextComing Next

Documents

5-1 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound, Video, and Basic Interactivity with Buttons Macromedia Flash Design & Application