Adding Buttons, Actions, and Sounds

1
Tutorial 5

• Adding Buttons, Actions, and Sounds

2
Objectives

• Create buttons and add them to a document
• Learn about actions
• Use the Actions panel to add actions to buttons
  and frames
• Learn about different types of sound effects and
  how to acquire sounds for your documents

3
Objectives (continued)

• Add sound effects to buttons
• Add a background sound to a document

4
Creating Buttons

• Buttons symbols with a four-frame Timeline
• Four frames correspond to four button states
• Up buttons default state
• Over responds to a mouse rollover
• Down button appearance after being clicked
• Hit represents clickable (active) area of button
  
• Movies with interactive controls raise user
  interest
• Add buttons to quickly provide interactive
  controls

5
Sample Button States for Each Frame
6
Adding a Button from the Common Libraries

• Flash Common Libraries provide ready-made symbols
• The Buttons library a member of Common
  Libraries
• Accessing button symbols in the Buttons library
• Go to Window ? Common Libraries ? Buttons
• Drag button symbol to the Stage or Library
• A prefabricated button in Flounders Pet Shop
  banner
• Playback - stop button used to mute background
  sound
• Enable Simple Buttons used to test button on
  Stage

7
Buttons Library
8
Text Added Above Button
9
Creating a Button

• Buttons can take on various forms
• Examples rectangles, ovals, and text
• Two commands used to create a button
• Convert to Symbol converts existing object on
  Stage
• New Symbol creates button in symbol-editing mode
• Modify four button frames in symbol-editing mode
• Stop and Play buttons will be added to the Banner
• Text will be added to help identify button
  functions

10
Play Button Instance Added to Document
11
Aligning the Buttons

• Similar objects in a document should be aligned
• Align buttons vertically or horizontally
• Buttons should also be evenly spaced
• Use the Align panel to align a group of objects
• Alignment specifications for buttons in the
  banner
• Three buttons should be aligned by bottom edges
• Buttons should also be evenly spaced

12
Understanding Actions

• ActionScript Flashs programming language
• Action instruction used to control an animation
• Script a set of one or more actions
• Event situation triggering execution of a script
• Example clicking a button and then releasing it
• Event handler tells Flash how to manage an event
• Example on release of button, stop an animation

13
Sample Script
14
Adding Actions Using the Actions Panel

• Actions panel provides two modes of operation
• Normal mode developer writes scripts
• Script Assist mode guides scripting of actions
• Actions toolbox actions directory to panels
  left
• Behaviors pre-written ActionScripts
• Add behaviors to objects through Behaviors panel
• Add actions to banner buttons for animation
  control
• Actions are added to instance of buttons on the
  stage

15
Stop Script
16
Adding Actions to Frames

• Actions in a frame execute when a frame is played
• No event handler is required
• Control sequencing of frames using frame actions
• Example add play action in last frame to create
  a loop
• Label frames before referencing in script
• Create a separate layer to add frame actions
• Use of a frame action in the banner
• Displays text animation only once

17
Frame Action
18
Adding Sounds

• Sounds may play continuously in the background
• Sound effects can be added to button instances
• Buttons with sounds are more interactive
• Sounds can be synchronized with the animations
• Sounds can be added in the form of voice
  narrations

19
Types of Sounds

• Event sounds
• Default sound type
• Play after the entire sound has downloaded
  completely
• Not synchronized with the Timeline
• Stream sounds
• Synchronized with the Timeline
• Begin playing during file download
• Example narration matches text animation

20
Finding Sounds for Your Documents

• Some sources for sounds
• Sounds created by developer in sound-editing
  program
• Prerecorded sounds on CD-ROM or the Web
• Sounds must be imported into a Flash document
• Supported sound formats WAV, AIFF, and MP3
• Flash Kits Web site http//www.flashkit.com
• Go to Sound FX or Sound Loops
• Check license before using prerecorded sounds

21
Flash Kits Web Site
22
Adding Sounds to Your Documents

• Sounds are imported into the document library
• Sounds are represented by a waveform
• Separate layers should be created for each sound
• Sound may only be added to keyframes
• Adding and using sounds
• Select keyframe in Timeline for sound placement
• Add sound from Library or Property inspectors
  Sound list
• Sound plays when playhead reaches the keyframe

23
Sound Waveform in Frame
24
Sound Settings

• Control sound using settings in Property
  inspector
• Sync list box options
• Set sound to event or stream type
• Control when event sounds start and stop
• Loop setting causes sound to play continuously
• Repeat setting specifies number of times to play
• Effect list box modifies the way a sound plays

25
Sound Settings
26
Sound Settings (continued)

• A background sound will be added to the banner
• WAV sound should first be imported to Library
• Experiment with various effects, such as Fade In
• Add action to Mute button to turn off sound

27
Bubbles Sound Waveform in Layer