Audio, Video and Bitmaps

1
Audio, Video and Bitmaps

• Flash

2
Audio

• Audio can be imported into Flash and used to
  enhance interactions and animations

3
Audio

• You can import a variety of sound formats
• WAV (Windows only)
• Waveform Audio file format developed for Windows
  computers by IBM and Microsoft has .wav suffix.
• AIFF (Macintosh only)
• Audio Interchange File Format - native to
  Macintosh computers has .aiff suffix
• MP3 (Windows or Macintosh)
• MP3 MPEG layer 3, a compressed audio format.

4
Audio

• With QuickTime 4 (or better)
• QuickTime is a digital video standard developed
  by Apple
• AIFF (Windows or Macintosh)
• Sound Designer II (Macintosh only)
• Sound Only QuickTime Movies (Windows or
  Macintosh)
• Sun AU (Windows or Macintosh)
• System 7 Sounds (Macintosh only)
• WAV (Windows or Macintosh)

5
Audio

• Imported sounds go into library have a speaker
  icon for identification

6
Audio

• MP3s are the lightest in terms of file size can
  compress audio when publishing your Flash movie
  look at this later
• Quickest and easiest way to get a sound to play
  is to drag it on to the stage and stretch it out
  on the timeline
• example

7
Audio

• Once on the timeline, can add effects through the
  properties panel

8
Audio

• Effects
• None removes any effects previously added
• Left Channel sound only plays in left channel
• Right Channel - sound only plays in right
  channel
• Fade Left to Right/Fade Right to Left - fades the
  sound from one channel to the other.
• Fade In gradually increases the sound volume
• Fade Out gradually decreases the sound volume
• Custom lets you manipulate sound using the Edit
  Envelope.

9
Audio

• Edit Envelope

example
10
Audio

• Sync this option in the properties panel
  controls the timing of the sound
• Event
• Start
• Stop
• Stream
• Event sounds
• These are synchronised to a particular event
• They start playing as soon as the event is
  triggered and continue to play all the way
  through to the end
• They are not stopped by another event
• button example

11
Audio

• Start sounds
• These behave as event sounds but if a sound is
  already playing, a new instance of the sound will
  not start - button example
• Stop sounds
• This stops the sound chosen
• Stream Sounds
• This is not the same as streaming sound
• stream sounds are used for movies published for
  the web
• The audio is synchronized to play with an
  animation
• If there are problems syncing the animation then
  animation frames are dropped so the sound can
  play in its entirety. - example

12
Audio

• Repeating and looping
• You can also set sounds to loop eternally or to
  repeat a set number of times

example
13
Audio

• Audio
• Placing sounds directly on the timeline is still
  fairly common for animations
• Better practice for other uses to dynamically add
  the sound use code to load and play sounds
• Have more control over the sound
• Makes file sizes smaller
• Applications run faster
• More on how to do this later.

14
Audio - Lip syncing

• Speech Animation
• Shape of mouth associated with production of
  sounds well known from many branches of science
  and arts lot of theory to draw on
• Sounds produced to make understandable speech
  known as phonemes
• Phonemes represented by phonemic symbols (see
  this in dictionaries that give pronunciation
  guidelines)
• Eg u is the phonemic symbol for the oo sound as
  in food

15
Audio - Lip syncing

• Speech Animation
• Phonemic symbols - much better system of
  representing sounds than alphabetic letters but
  need to learn the system to implement
• Very common not to do this but to use letter
  representation for sounds
• Commonly have 9 sets of letters that crudely
  relate to phonemes
• A I
• P B M
• O
• E
• U
• C K G J R S T H Y Z
• D L N T Th Sh
• W Q oo
• F V

16
Audio - Lip syncing

• Speech Animation
• These phonemes associated with visual
  representations of mouth shapes produced when
  voicing the sounds
• Known as visemes

17
Audio - Lip syncing

• Speech Animation
• A I Viseme

Mouth half open Has horizontal width Lower lip
extended downwards Upper teeth often visible
18
Audio - Lip syncing

• Speech Animation
• P B M Viseme

Lips closed Part slightly on plosion Horizontally
stretched Lower teeth visible on parting
19
Audio - Lip syncing

• Speech Animation
• O Viseme

Mouth fairly wide Not fully Horizontally
stretched Lower lip rounded Teeth not usually
visible
20
Audio - Lip syncing

• Speech Animation
• E Viseme

Mouth stretched Horizontally Parted 1/3 to 1/2
Upper teeth more visible than lower
21
Audio - Lip syncing

• Speech Animation
• C K G J R S T H Y Z Viseme

Mouth stretched Horizontally Lips slightly
parted Lower teeth more visible than upper
22
Audio - Lip syncing

• Speech Animation
• D L N T Th Sh Viseme

Mouth stretched Horizontally Lips parted Both
lower and upper teeth visible
23
Audio - Lip syncing

• Speech Animation
• W Q oo Viseme

Mouth closes inwards Lips slightly parted Lower
teeth if any visible
24
Audio - Lip syncing

• Speech Animation
• F V Viseme

Horizontally stretched Lips just parted Upper
teeth visible
25
Audio - Lip syncing

• Speech Animation

Notice The lips are slightly more horizontally
stretched between the AI and the U visemes
26
Audio - Lip syncing

• Speech Animation
• Can use this knowledge to lip sync animated
  characters to audio

27
Audio - Lip syncing

• Lip Sync Process
• Need to see audio waveform to construct keyframe
  animation
• Waveform (height) amplitude shows volume of sound
• With speech, use this to locate words audio and
  sync animation

28
Audio - Lip syncing

• Lip Sync Process
• Audio Waveform
• Have a nice Day

29
Audio - Lip syncing

• Lip Sync Process

• In an animation program such as Flash
• Import the audio and place on the timeline
• Create a new layer for the animation
• Very common to build a third layer which will be
  used to place the speech as text this is just a
  guide layer which is subsequently deleted
• Use character visemes from a library and place
  on key frames
• Apply tweenings for transitions if necessary

30
Audio - Lip syncing

• Lip Sync Process

Visemes placed in keyframes on animation
layer Text layer acts as guide for which
visemes Audio layer waveform used to time
visemes Will explore in practical session example
31
Video

• Video
• Can be imported into flash like audio
• Can import directly to the stage
• Or to the library
• Flash uses the Sorensen Spark codec (codec means
  coder decoder)
• Compresses the video as it embeds it

32
Video

• Video formats need QuickTime 4 (or later) on
  your system
• Audio Video Interleaved
• Very common windows format has .avi suffix
• Digital video
• .dv suffix
• Motion Picture Experts Group
• Layered compression format has .mpg, .mpeg suffix
• Sometimes issues with importing the audio part of
  the video file
• QuickTime video
• Native to the QuickTime environment has .mov
  suffix
• Flash likes this format
• Can link to an external QuickTime file so movie
  is lighter in terms of file size
• If you have DirectX 7 (or better) installed
• Windows Media file
• Windows Media Video (also audio) .wmv,
• Advanced streaming Format (audio and video) -
  .asf

33
Video

• Imported video may have basic editing applied in
  the import wizard (if its the correct format)
• Video may be treated similarly to other objects
  in that
• It can be tweened if placed inside a movie clip
  symbol
• Modified scale, shear, rotation
• This means video van be incorporated into
  animations and interactions
• Example

34
Video

• Video Control
• Can script control - FF, rewind, pause etc using
  ActionScript
• Can also use built in behaviours to do this
• Will see in practical session how
• example

35
Bitmaps

• Bitmaps
• Can import bitmaps into Flash
• Will accept many formats
• Particularily likes png (Portable network
  Graphics)
• Useful because of alpha transparency and quality
  of picture
• Also accepts .bmp, .jpg, .gif
• Gifs and pngs can import with transparency
• Bmps and jpgs have a matte background
• If Photoshop installed show difference
• Can edit bitmaps to some extent in Flash

36
Bitmaps

• Modifying Bitmaps
• Select on stage and Break Apart

37
Bitmaps

• Modifying Bitmaps
• Use Lasso tool to select areas