Tutorial 5

10 downloads 114 Views 1MB Size Report
Add actions to buttons. New Perspectives on Adobe Flash CS3 ... Event: situation triggering execution of a script ... Script Assist mode: guides scripting of actions.
Tutorial 5 Making a Document Interactive

Objectives • • • • •

XP

Explore the different button states Add a button from the Button library Create a button Learn about actions Add actions to buttons

New Perspectives on Adobe Flash CS3

2

Objectives • • • • •

XP

Add actions to frames Compare different types of sound effects Learn how to acquire sounds for your documents Add sound effects to buttons Add a background sound to a document

New Perspectives on Adobe Flash CS3

3

Exploring Different Button States

XP

• Buttons: symbols with a four-frame Timeline • Four frames correspond to four button states – Up: button’s 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 New Perspectives on Adobe Flash CS3

4

Exploring the Different Button States

New Perspectives on Adobe Flash CS3

XP

5

Adding a Button from the Buttons Library

XP

• 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

New Perspectives on Adobe Flash CS3

6

Buttons Library Panel

New Perspectives on Adobe Flash CS3

XP

7

Label Added Below the Button

New Perspectives on Adobe Flash CS3

XP

8

Creating a Custom Button

XP

• 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 New Perspectives on Adobe Flash CS3

9

Play Button Instance Added to the Document

New Perspectives on Adobe Flash CS3

XP

10

Aligning the Buttons

XP

• 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

New Perspectives on Adobe Flash CS3

11

Three Buttons Aligned and Evenly Spaced

New Perspectives on Adobe Flash CS3

XP

12

Understanding Actions • • • •

XP

ActionScript: Flash’s 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

New Perspectives on Adobe Flash CS3

13

Sample Script

New Perspectives on Adobe Flash CS3

XP

14

Adding Actions Using the Actions Panel

XP

• Actions panel provides two modes of operation – Normal mode: developer writes scripts – Script Assist mode: guides scripting of actions

• Actions toolbox: actions directory to panel’s 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 New Perspectives on Adobe Flash CS3

15

Stop Script

New Perspectives on Adobe Flash CS3

XP

16

Adding Actions to Frames

XP

• 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

New Perspectives on Adobe Flash CS3

17

Frame Action

New Perspectives on Adobe Flash CS3

XP

18

Using Sounds in a Flash Animation

XP

• 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

New Perspectives on Adobe Flash CS3

19

Using Sounds in a Flash Animation

XP

• 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 New Perspectives on Adobe Flash CS3

20

Finding Sounds for Animations

XP

• Some sources for sounds – Sounds created by developer in sound-editing program – Prerecorded sounds on CDs, DVDs, or the Web

• Sounds must be imported into a Flash document • Flash Kit’s Web site: http://www.flashkit.com – Go to Sound FX or Sound Loops

• Check license before using prerecorded sounds

New Perspectives on Adobe Flash CS3

21

Flash Kit’s Web Site

New Perspectives on Adobe Flash CS3

XP

22

Adding Sounds to a Documents • • • • •

XP

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 inspector’s Sound list – Sound plays when playhead reaches the keyframe

New Perspectives on Adobe Flash CS3

23

Sample Sound in the Library Panel

New Perspectives on Adobe Flash CS3

XP

24

Changing the Sound Sync Settings

XP

• 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 New Perspectives on Adobe Flash CS3

25

Sound Settings

New Perspectives on Adobe Flash CS3

XP

26

Sound Settings • • • •

XP

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

New Perspectives on Adobe Flash CS3

27