adobe flash cs4 – illustrated
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/1.jpg)
Adobe Flash CS4 – Illustrated
Unit F: Creating Buttons and Using Media
![Page 2: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/2.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 3: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/3.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 4: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/4.jpg)
Adobe Flash CS4 – Illustrated
Understanding Button Symbols
Converted from graphics, text, or movie clips
Change appearance based on mouse action
![Page 5: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/5.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 6: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/6.jpg)
Adobe Flash CS4 – Illustrated
Understanding Button States
Viewing button states
![Page 7: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/7.jpg)
Adobe Flash CS4 – Illustrated
Understanding 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
![Page 8: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/8.jpg)
Adobe Flash CS4 – Illustrated
Understanding Button Symbols and States
Viewing the Hit state frame in the button Timeline
![Page 9: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/9.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 10: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/10.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 11: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/11.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 12: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/12.jpg)
Adobe Flash CS4 – Illustrated
Creating a Button Symbol
Creating a button symbol
![Page 13: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/13.jpg)
Adobe Flash CS4 – Illustrated
Creating a Button Symbol
Viewing the button symbol edit window
![Page 14: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/14.jpg)
Adobe Flash CS4 – Illustrated
Creating a Button Symbol
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
![Page 15: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/15.jpg)
Adobe Flash CS4 – Illustrated
Creating a Button Symbol
Creating a Hit area
![Page 16: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/16.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 17: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/17.jpg)
Adobe Flash CS4 – Illustrated
Editing Button States
Modifying an object in the Over state
![Page 18: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/18.jpg)
Adobe Flash CS4 – Illustrated
Editing Button States
FIGURE F-7: Viewing the Up, Over, and Down states
![Page 19: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/19.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 20: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/20.jpg)
Adobe Flash CS4 – Illustrated
Using the Buttons Common Library
Provides several preset buttons and button components, which can be modified
Sample buttons
![Page 21: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/21.jpg)
Adobe Flash CS4 – Illustrated
Adding Text to a Button
Adding text to a button
![Page 22: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/22.jpg)
Adobe Flash CS4 – Illustrated
Adding Text to a Button
Modifying text in a frame
![Page 23: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/23.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 24: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/24.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 25: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/25.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 26: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/26.jpg)
Adobe Flash CS4 – Illustrated
How to Add Sounds
Viewing sound waveforms in the Library
![Page 27: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/27.jpg)
Adobe Flash CS4 – Illustrated
How to Add Sounds
Viewing sounds of varying lengths in the Timeline
![Page 28: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/28.jpg)
Adobe Flash CS4 – Illustrated
How to Edit Sound Properties
Use Sound section of Properties panel
Viewing Sound options on the Properties panel
![Page 29: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/29.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 30: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/30.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 31: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/31.jpg)
Adobe Flash CS4 – Illustrated
Adding Sound to a Button
Inserting sound in a button frame
![Page 32: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/32.jpg)
Adobe Flash CS4 – Illustrated
Adding Sound to a Button
Layer Properties dialog box
![Page 33: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/33.jpg)
Adobe Flash CS4 – Illustrated
Adding Sound to a Button
Viewing the waveform in an expanded layer
![Page 34: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/34.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 35: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/35.jpg)
Adobe Flash CS4 – Illustrated
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
![Page 36: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/36.jpg)
Adobe Flash CS4 – Illustrated
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)
![Page 37: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/37.jpg)
Adobe Flash CS4 – Illustrated
Using the Import Video Wizard
Select Video window in Import Video Wizard
![Page 38: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/38.jpg)
Adobe Flash CS4 – Illustrated
Understanding Video
Skinning window
![Page 39: Adobe Flash CS4 – Illustrated](https://reader034.vdocuments.net/reader034/viewer/2022051401/56814fca550346895dbd896a/html5/thumbnails/39.jpg)
Adobe Flash CS4 – Illustrated
Understanding Video
Viewing a video