Adobe Flash CS4 – Illustrated

Adobe Flash CS4 – Illustrated

Unit F: Creating Buttons and Using Media


Objectives

Understand buttons and states

Create a button symbol

Edit button states

Add text to a button

Understand sound

Add sound to a button

Understand video


Understanding Buttons

Add interactivity to a Flash project Page element responds to user’s mouse

pointer action (e.g., pointing to [rolling over or hovering] or clicking a button)

Act as design elements that add visual interest

Can be created from graphics or text

Provide a way to navigate around a site or control a movie within it


Understanding Button Symbols

Converted from graphics, text, or movie clips

Change appearance based on mouse action


Understanding Button States

Buttons have a unique Timeline with specific frames (Up, Over, Down, Hit)

A button can change appearance in first three frames, which correspond to user actions and are known as states

A button jumps to a frame based on user’s action with the mouse



Viewing button states



Hit area Area that reacts to mouse action; the

hotspot for a button Define its size using a shape or graphic Never actually visible


Understanding Button Symbols and States

Viewing the Hit state frame in the button Timeline


Creating Buttons

First create a button symbol

Buttons usually: Have at least two states Undergo a transformation in color, size,

skew, stroke, or filter effect


Creating Buttons

Button appearance Up frame is the default To create appearance in Over and Down

states• Insert keyframe (copies original button object)• Then alter or transform object’s properties

Use Shape Tool to create a larger area in Hit frame Response occurs as soon as mouse

pointer gets close to the button


Creating a Button Symbol

Any object can be converted into a button symbol

Place all buttons on separate button layer at/near top of layer’s stack in Timeline Makes them easy to find; always in front

of other objects in the movie



Creating a button symbol



Viewing the button symbol edit window



Onion skinning Displays frames before or after current

frame Helps fine-tune action in animation Allows you to see exactly where to draw

Hit area in button Timeline



Creating a Hit area


Editing Button States

Button symbol Timeline is specific to different button states

For the button to change appearance in Over or Down state, modify the instance in those frames

Test buttons in Flash Player or on the Stage



Modifying an object in the Over state



FIGURE F-7: Viewing the Up, Over, and Down states


Adding Text to a Button

Dual purpose Text itself can be the button Text and a shape can be combined to

make a button

Two methods Create an object and text, then convert

to a button symbol Add text later to an existing button in edit

window


Using the Buttons Common Library

Provides several preset buttons and button components, which can be modified

Sample buttons



Adding text to a button



Modifying text in a frame


Understanding Sound

Adding sound can range from a musical sound track playing in the background to adding a sound effect to a button

Make sure sounds improve – rather than detract from – viewer’s overall experience


Understanding Sound

Determine the sound’s purpose

Consider the playback environment

Understand how to add sounds

Understand how to edit sound properties

Understand sound import formats


How to Add Sounds

Sound can be used in many ways Play continuously Linked to an event or button state Synchronized to an animation

Import audio file to Library or Stage, then designate frames in which it will play

Sound clips can be reused

Create a separate layer for each sound clip before adding it to the Timeline


How to Add Sounds

Viewing sound waveforms in the Library


How to Add Sounds

Viewing sounds of varying lengths in the Timeline


How to Edit Sound Properties

Use Sound section of Properties panel

Viewing Sound options on the Properties panel


Sound Import Formats

Common sound file types Soundbooth Sound Document (.asnd) MPEG Layer 3 (.mp3) Audio Interchange File Format (.aiff) Waveform (.wav) Others such as QuickTime sound (.mov)

Best to use MP3 files, which compress data but retain sound quality


Adding Sound to a Button

Makes button more interactive

Usually added to the Down frame to reinforce the action to users

Sound options Effect Sync Sound loop



Inserting sound in a button frame



Layer Properties dialog box



Viewing the waveform in an expanded layer


Understanding Video

Inserting video into a Flash movie requires more steps than inserting graphic or sound files

To import video into a Flash document, files must be in a proper video file format – Flash Video

Flash provides an Import Video Wizard


Understanding Video Formats

Files from cameras are large, uncompressed, and not designed for viewing on the Internet

Video files posted to the Web have been converted to a format designed for rapid downloading or streaming

Flash Video (FLV) Standard for Web-based video because

it compresses data efficiently


Adding Video to a Flash Document

Convert obtained video to FLV format

Choose how to integrate video with Flash document Embed (short videos) Download progressively (can be viewed

before fully downloaded) Stream from a server (live video)


Using the Import Video Wizard

Select Video window in Import Video Wizard


Understanding Video

Skinning window


Understanding Video

Viewing a video

Adobe Flash CS4 – Illustrated

Documents

button timeline

button symbolcreating

button symbolviewing

button symbolplace

button symbolbuttons

statesa button

hita button

button symbolany object