1 / 39

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.

lynde
Download Presentation

Adobe Flash CS4 – Illustrated

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adobe Flash CS4 – Illustrated Unit F: Creating Buttons and Using Media

  2. 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 Adobe Flash CS4 – Illustrated

  3. 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 Adobe Flash CS4 – Illustrated

  4. Understanding Button Symbols • Converted from graphics, text, or movie clips • Change appearance based on mouse action Adobe Flash CS4 – Illustrated

  5. 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 Adobe Flash CS4 – Illustrated

  6. Understanding Button States • Viewing button states Adobe Flash CS4 – Illustrated

  7. 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 Adobe Flash CS4 – Illustrated

  8. Understanding Button Symbols and States • Viewing the Hit state frame in the button Timeline Adobe Flash CS4 – Illustrated

  9. 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 Adobe Flash CS4 – Illustrated

  10. 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 Adobe Flash CS4 – Illustrated

  11. 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 Adobe Flash CS4 – Illustrated

  12. Creating a Button Symbol • Creating a button symbol Adobe Flash CS4 – Illustrated

  13. Creating a Button Symbol • Viewing the button symbol edit window Adobe Flash CS4 – Illustrated

  14. 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 Adobe Flash CS4 – Illustrated

  15. Creating a Button Symbol • Creating a Hit area Adobe Flash CS4 – Illustrated

  16. 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 Adobe Flash CS4 – Illustrated

  17. Editing Button States • Modifying an object in the Over state Adobe Flash CS4 – Illustrated

  18. Editing Button States • FIGURE F-7: Viewing the Up, Over, and Down states Adobe Flash CS4 – Illustrated

  19. 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 Adobe Flash CS4 – Illustrated

  20. Using the Buttons Common Library • Provides several preset buttons and button components, which can be modified • Sample buttons Adobe Flash CS4 – Illustrated

  21. Adding Text to a Button • Adding text to a button Adobe Flash CS4 – Illustrated

  22. Adding Text to a Button • Modifying text in a frame Adobe Flash CS4 – Illustrated

  23. 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 Adobe Flash CS4 – Illustrated

  24. 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 Adobe Flash CS4 – Illustrated

  25. 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 Adobe Flash CS4 – Illustrated

  26. How to Add Sounds • Viewing sound waveforms in the Library Adobe Flash CS4 – Illustrated

  27. How to Add Sounds • Viewing sounds of varying lengths in the Timeline Adobe Flash CS4 – Illustrated

  28. How to Edit Sound Properties • Use Sound section of Properties panel • Viewing Sound options on the Properties panel Adobe Flash CS4 – Illustrated

  29. 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 Adobe Flash CS4 – Illustrated

  30. 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 Adobe Flash CS4 – Illustrated

  31. Adding Sound to a Button • Inserting sound in a button frame Adobe Flash CS4 – Illustrated

  32. Adding Sound to a Button • Layer Properties dialog box Adobe Flash CS4 – Illustrated

  33. Adding Sound to a Button • Viewing the waveform in an expanded layer Adobe Flash CS4 – Illustrated

  34. 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 Adobe Flash CS4 – Illustrated

  35. 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 Adobe Flash CS4 – Illustrated

  36. 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) Adobe Flash CS4 – Illustrated

  37. Using the Import Video Wizard • Select Video window in Import Video Wizard Adobe Flash CS4 – Illustrated

  38. Understanding Video • Skinning window Adobe Flash CS4 – Illustrated

  39. Understanding Video • Viewing a video Adobe Flash CS4 – Illustrated

More Related