Foundation Flash CS5 For Designers

Foundation Flash CS5 For Designers

Released August 2010
Publisher(s): friends of ED
ISBN: 9781430229940

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Flash is one of the most engaging, innovative, and versatile technologies available—allowing the creation of anything from animated banners and simple cartoons to Rich Internet Applications, interactive videos, and dynamic user interfaces for web sites, kiosks, devices, or DVDs. The possibilities are endless, and now it just got better.

Flash CS5 boasts a host of new features, including better support for mobile devices, a whole new animation engine enabling full manipulation of tweens and paths, custom easing, improved inverse kinematics, a revamped timeline, built-in 3D, and much more.

This book is all you'll need to learn Flash CS5 from the ground up. If you already have Flash experience, this book will allow you to quickly catch up on all the cool new features. Flash experts Tom Green and Tiago Dias guide you step-by-step through all facets of Flash CS5, keeping the emphasis firmly on good design techniques that you use in your own projects.

  • Learn Flash design from the ground up, or just get to grips with the new features, with a series of step-by-step tutorials.

  • Provides an easy introduction to ActionScript 3.0 coding, but the focus is mainly kept on design.

  • Learn from the experts—written by renowned Flash designers Tom Green and Tiago Dias.

Table of contents

  1. Copyright
  2. About the Authors
  3. About the Technical Reviewers
  4. Acknowledgments
  5. Preface
    1. Book structure and flow
    2. Layout conventions
  6. 1. Learning the Flash CS5 Professional Interface
    1. 1.1. Getting started
    2. 1.2. Creating a new Flash document
    3. 1.3. Managing your workspace
    4. 1.4. Setting document preferences and properties
      1. 1.4.1. Document preferences
      2. 1.4.2. Document settings
      3. 1.4.3. Zooming the stage
    5. 1.5. Exploring the panels in the Flash interface
      1. 1.5.1. The timeline
        1. 1.5.1.1. Frames
        2. 1.5.1.2. Using the Motion Editor panel
      2. 1.5.2. The Properties panel
      3. 1.5.3. The Tools panel
      4. 1.5.4. The Library panel
    6. 1.6. Using layers
      1. 1.6.1. Layer properties
      2. 1.6.2. Creating layers
      3. 1.6.3. Adding content to layers
      4. 1.6.4. Showing/hiding and locking layers
      5. 1.6.5. Grouping layers
      6. 1.6.6. Where to get help
    7. 1.7. Your turn: building a Flash movie
      1. 1.7.1. Nesting movie clips
      2. 1.7.2. Drawing the fly
      3. 1.7.3. Creating the illusion of depth with Flash
      4. 1.7.4. Creating an animated fly
        1. 1.7.4.1. Using a motion guide
      5. 1.7.5. Adding audio
      6. 1.7.6. Testing and saving Flash files
    8. 1.8. You have learned
  7. 2. Graphics in Flash CS5
    1. 2.1. The Tools panel
      1. 2.1.1. The Selection and Subselection tools
      2. 2.1.2. The Free Transform tool
      3. 2.1.3. The Gradient Transform tool
      4. 2.1.4. Object Drawing mode
    2. 2.2. Drawing in Flash CS5
      1. 2.2.1. The Pencil tool
      2. 2.2.2. The Brush tool
      3. 2.2.3. The Deco tool
      4. 2.2.4. The Spray Brush tool
      5. 2.2.5. The Eraser tool
      6. 2.2.6. The Pen tool
    3. 2.3. Your turn: let's have a campfire
      1. 2.3.1. Drawing the tree trunk
      2. 2.3.2. Drawing the pine tree
      3. 2.3.3. Adding pine needles
      4. 2.3.4. Build the campfire movie
    4. 2.4. Working with color in Flash
      1. 2.4.1. The Color palette and the Color Picker
      2. 2.4.2. Creating persistent custom colors
      3. 2.4.3. The kuler Color Picker
      4. 2.4.4. Your turn: playing with color
    5. 2.5. Using bitmap images in Flash
      1. 2.5.1. Working with bitmaps in Flash
      2. 2.5.2. Your turn: tracing bitmaps in Flash
        1. 2.5.2.1. Tracing an image
        2. 2.5.2.2. Optimizing the drawing
      3. 2.5.3. JPEG files and Flash
      4. 2.5.4. Using GIF files in Flash CS5
        1. 2.5.4.1. Working with GIF images
        2. 2.5.4.2. Working with GIF animations
      5. 2.5.5. Importing Fireworks CS5 documents into Flash CS5
      6. 2.5.6. Importing Illustrator CS5 documents into Flash CS5
      7. 2.5.7. Importing Photoshop CS5 documents into Flash CS5
    6. 2.6. You have learned
  8. 3. Symbols and Libraries
    1. 3.1. Symbol essentials
    2. 3.2. Symbol types
      1. 3.2.1. Graphic symbols
      2. 3.2.2. Button symbols
      3. 3.2.3. Movie clip symbols
      4. 3.2.4. Editing symbols
    3. 3.3. 9-slice scaling
      1. 3.3.1. How 9-slice scaling works
      2. 3.3.2. Your turn: frames for an olive seller
      3. 3.3.3. The 9-slice "gotchas"
    4. 3.4. Sharing symbols
      1. 3.4.1. Sharing libraries
    5. 3.5. Filters and blend modes
      1. 3.5.1. Applying filters
      2. 3.5.2. Applying a Drop Shadow filter
      3. 3.5.3. Adding perspective
        1. 3.5.3.1. Some filter facts
      4. 3.5.4. Playing with blends
    6. 3.6. Managing content on the stage
      1. 3.6.1. Aligning objects on the stage
        1. 3.6.1.1. Snapping to the grid
        2. 3.6.1.2. Aligning with guides
        3. 3.6.1.3. Snapping in a guide layer and to pixels
      2. 3.6.2. Stacking order and using the Align panel
        1. 3.6.2.1. Using the Align panel
    7. 3.7. Masks and masking
      1. 3.7.1. A simple mask
        1. 3.7.1.1. Creating a masked animation
      2. 3.7.2. Using text as a mask
    8. 3.8. Your turn: a sunny day on Catalina Island
      1. 3.8.1. Adding the clouds
      2. 3.8.2. Getting the clouds in motion
        1. 3.8.2.1. Bonus round
    9. 3.9. What you've learned
  9. 4. ActionScript Basics
    1. 4.1. The power of ActionScript
      1. 4.1.1. Actions panel components
        1. 4.1.1.1. Actions toolbox
        2. 4.1.1.2. Script navigator
        3. 4.1.1.3. Script pane
        4. 4.1.1.4. Panel context menu
      2. 4.1.2. The Actions panel vs. the Behaviors panel
    2. 4.2. Everything is an object
      1. 4.2.1. Classes
      2. 4.2.2. Properties
        1. 4.2.2.1. Using instance names
    3. 4.3. Setting properties via ActionScript
      1. 4.3.1. Methods
      2. 4.3.2. Events
    4. 4.4. Coding fundamentals
      1. 4.4.1. Syntax
      2. 4.4.2. Capitalization matters
      3. 4.4.3. Semicolons mark the end of a line
        1. 4.4.3.1. Mind your keywords
      4. 4.4.4. Commenting code
      5. 4.4.5. Dot notation
      6. 4.4.6. Scope
      7. 4.4.7. Variables
      8. 4.4.8. Data types
      9. 4.4.9. Operators
      10. 4.4.10. Conditional statements
      11. 4.4.11. Class files and the document class
        1. 4.4.11.1. On migrating to ActionScript 3.0: the pain and the joy
      12. 4.4.12. Syntax checking
    5. 4.5. How to read the ActionScript 3.0 Language and Components Reference
      1. 4.5.1. Getting help
      2. 4.5.2. Search tactics
    6. 4.6. Using ActionScript
    7. 4.7. Your turn: pause and loop with ActionScript
      1. 4.7.1. Pausing a timeline
      2. 4.7.2. Looping the Timeline
      3. 4.7.3. Using movie clips to control the timeline
      4. 4.7.4. Using Code Snippets
        1. 4.7.4.1. Adding a snippet into the Code Snippets panel
        2. 4.7.4.2. Code completion for custom classes
    8. 4.8. What you've learned
  10. 5. Audio in Flash CS5
    1. 5.1. Flash and the audio formats
      1. 5.1.1. Bit depth and sample rates
      2. 5.1.2. Flash and MP3
    2. 5.2. Adding audio to Flash
      1. 5.2.1. Importing an audio file
      2. 5.2.2. Setting sound properties
    3. 5.3. Using audio in Flash
      1. 5.3.1. Choosing a sound type: event or streaming
      2. 5.3.2. Removing an audio file from the timeline
      3. 5.3.3. Getting loopy
      4. 5.3.4. Adjusting volume and pan
        1. 5.3.4.1. A note from a master
    4. 5.4. Your turn: adding sound to a button
    5. 5.5. Controlling audio with ActionScript 3.0
      1. 5.5.1. Playing a sound from the Library
      2. 5.5.2. Using a button to play a sound
      3. 5.5.3. Playing a sound from outside of Flash
      4. 5.5.4. Turning a remote sound on and off
      5. 5.5.5. Adjusting volume with code
      6. 5.5.6. Your turn: storm over Lake Superior
      7. 5.5.7. Code snippet: visualize audio
    6. 5.6. What you've learned
  11. 6. Text
    1. 6.1. Fonts and typefaces
    2. 6.2. Adobe CoolType
      1. 6.2.1.
        1. 6.2.1.1. CoolType to the rescue
      2. 6.2.2. Typefaces and fonts
    3. 6.3. Working with device fonts
    4. 6.4. Embedding fonts
    5. 6.5. The two text engines: TLF and Classic
    6. 6.6. Types of text
      1. 6.6.1. Read-only text properties
        1. 6.6.1.1. Character properties
        2. 6.6.1.2. Advanced character properties
        3. 6.6.1.3. Paragraph properties
      2. 6.6.2. Container and flow
      3. 6.6.3. Selectable and editable text
      4. 6.6.4. TLF and ActionScript
        1. 6.6.4.1. Creating a column of text with ActionScript
        2. 6.6.4.2. Import statements for this exercise
      5. 6.6.5. Using TLF text as a button
        1. 6.6.5.1. Import statements for this exercise
    7. 6.7. Hyperlinks and TLF
      1. 6.7.1. Using ActionScript to add hyperlinks to TLF text
        1. 6.7.1.1. Import statements used for this exercise
    8. 6.8. Checking spelling
    9. 6.9. Your turn: scrollable text
      1. 6.9.1. Using the UIScrollBar component
      2. 6.9.2. Rolling your own scroller
        1. 6.9.2.1. Import statements used for this exercise
    10. 6.10. What you have learned
  12. 7. Animation, Part 1
    1. 7.1. Shape tweening
      1. 7.1.1. Scaling and stretching
      2. 7.1.2. Modifying shape tweens
      3. 7.1.3. Altering shapes
        1. 7.1.3.1. Examining anchor points
        2. 7.1.3.2. Shape changing
      4. 7.1.4. Shape hints
      5. 7.1.5. Altering gradients
    2. 7.2. Classic tweening
      1. 7.2.1. Rotation
      2. 7.2.2. Classic tween properties
      3. 7.2.3. Scaling, stretching, and deforming
      4. 7.2.4. Easing
      5. 7.2.5. Custom easing
        1. 7.2.5.1. Adding anchor points
        2. 7.2.5.2. Easing multiple properties
    3. 7.3. Using animation
      1. 7.3.1. A closer look at the Timeline panel
      2. 7.3.2. Onion skinning
      3. 7.3.3. Modifying multiple frames
        1. 7.3.3.1. Swapping graphic symbols
      4. 7.3.4. Combining timelines
        1. 7.3.4.1. Movie clip timelines vs. graphic symbol timelines
        2. 7.3.4.2. Nesting symbols
        3. 7.3.4.3. Graphic symbols as mini-libraries
      5. 7.3.5. Motion guides
      6. 7.3.6. Tweening a mask
        1. 7.3.6.1. Animating a mask
        2. 7.3.6.2. Using motion guides with masks
      7. 7.3.7. Tweening Filter Effects
    4. 7.4. Programmatic animation
      1. 7.4.1. Copying motion as ActionScript
      2. 7.4.2. Using the keyboard to control motion
      3. 7.4.3. Creating random motion using ActionScript
        1. 7.4.3.1. Brownian bonus round
    5. 7.5. What you have learned
  13. 8. Animation, Part 2
    1. 8.1. Animating with the Motion Editor panel
      1. 8.1.1. Getting acquainted: scaling and moving
      2. 8.1.2. Easing with graphs
        1. 8.1.2.1. Built-in eases
        2. 8.1.2.2. Creating custom eases
        3. 8.1.2.3. Applying multiple eases
    2. 8.2. Managing property keyframes
      1. 8.2.1.
        1. 8.2.1.1. Changing duration proportionally
        2. 8.2.1.2. Changing duration nonproportionally
    3. 8.3. Motion paths
      1. 8.3.1. Manipulating motion paths
        1. 8.3.1.1. Using advanced motion paths
      2. 8.3.2. Motion tween properties
    4. 8.4. Motion presets
    5. 8.5. Inverse kinematics (IK)
      1. 8.5.1. Using the Bone tool
        1. 8.5.1.1. Bone tool properties
        2. 8.5.1.2. Constraining joint rotation
        3. 8.5.1.3. Deleting bones
    6. 8.6. Putting some "spring" in your bones
      1. 8.6.1.
        1. 8.6.1.1. Applying joint translation
        2. 8.6.1.2. A note about bone preferences
      2. 8.6.2. Animating IK Poses
      3. 8.6.3. Using the Bind tool
        1. 8.6.3.1. Shape IK and fills
        2. 8.6.3.2. Shape IK and anchor points
      4. 8.6.4. Your turn: animate a fully rigged IK model
    7. 8.7. Inspiration is everywhere
    8. 8.8. What you have learned
  14. 9. Flash Has a Third Dimension
    1. 9.1. What 3D really means in Flash (and what it doesn't)
    2. 9.2. Understanding the vanishing point
    3. 9.3. Using the 3D tools
      1. 9.3.1. The 3D Rotation tool
        1. 9.3.1.1. Old-school 3D rotation
        2. 9.3.1.2. Using 3D rotation
      2. 9.3.2. The 3D Translation tool
    4. 9.4. Strategies for positioning content in 3D space
      1. 9.4.1. The parallax effect: traveling through space
      2. 9.4.2. Use the 3D center point to your advantage
      3. 9.4.3. Be aware of depth limitations
    5. 9.5. Your turn: simulate a photo cube
    6. 9.6. What you have learned
  15. 10. Video
    1. 10.1. Video on the Web
    2. 10.2. Video formats
    3. 10.3. Encoding an FLV
      1. 10.3.1. Using the Adobe Media Encoder
        1. 10.3.1.1. Previewing and trimming video
        2. 10.3.1.2. Video settings
        3. 10.3.1.3. Audio settings
        4. 10.3.1.4. Cropping video
        5. 10.3.1.5. Running the render process
      2. 10.3.2. Batch encoding
      3. 10.3.3. Creating an F4V file
      4. 10.3.4. More Media Encoder Goodness
    4. 10.4. Playing an FLV in Flash CS5
      1. 10.4.1. Using the wizard
        1. 10.4.1.1. A word about file paths
      2. 10.4.2. Using the FLVPlayback component
      3. 10.4.3. Playing video using ActionScript
        1. 10.4.3.1. There's a snippet for that
      4. 10.4.4. Using the FLVPlayback control components
      5. 10.4.5. Navigating through video using cue points
      6. 10.4.6. Adding captions with the FLVPlaybackCaptioning component
      7. 10.4.7. Preparing and using alpha channel video
      8. 10.4.8. Going full-screen with video
        1. 10.4.8.1. Full-screen video the ActionScript/HTML way
        2. 10.4.8.2. Full-screen video using Dreamweaver CS5
    5. 10.5. When video is not video
    6. 10.6. Embedding video
      1. 10.6.1. Embedding video as a movie clip
      2. 10.6.2. Interacting with video content
    7. 10.7. Adding cue points
      1. 10.7.1. An alternate XML format for cue points
      2. 10.7.2. Your turn: create XML captions for video
        1. 10.7.2.1. Bonus round
    8. 10.8. Your turn: play with alpha video
    9. 10.9. Your turn: think big, really big!
    10. 10.10. What you have learned
  16. 11. Building Interfaces with the UI Components
    1. 11.1. Button component
      1. 11.1.1. Using the Button component
        1. 11.1.1.1. Adding button events
        2. 11.1.1.2. Referencing components in event handlers
        3. 11.1.1.3. Considering UI component weight
      2. 11.1.2. Changing the Button component's appearance
        1. 11.1.2.1. Skinning
        2. 11.1.2.2. Styling components
    2. 11.2. CheckBox component
    3. 11.3. ColorPicker component
    4. 11.4. ComboBox component
    5. 11.5. DataGrid component
    6. 11.6. Label component
    7. 11.7. List component
    8. 11.8. NumericStepper component
    9. 11.9. ProgressBar component
    10. 11.10. RadioButton component
    11. 11.11. ScrollPane component
    12. 11.12. Slider component
    13. 11.13. TextArea component
    14. 11.14. TextInput component
    15. 11.15. TileList component
    16. 11.16. UILoader component
    17. 11.17. UIScrollBar component
    18. 11.18. What you have learned
  17. 12. XML (Dynamic Data)
    1. 12.1. Writing XML
    2. 12.2. Loading an XML file
    3. 12.3. Using E4X syntax
      1. 12.3.1. Dots and @s
      2. 12.3.2. Node types
      3. 12.3.3. E4X filtering
      4. 12.3.4. Double dots and more
      5. 12.3.5. Namespaces
      6. 12.3.6. Your turn: time to explore XFL
        1. 12.3.6.1. What is XFL?
        2. 12.3.6.2. XFL bonus round
    4. 12.4. What you have learned
  18. 13. CSS
    1. 13.1. Styling with CSS
    2. 13.2. Loading external CSS
      1. 13.2.1.
        1. 13.2.1.1. Block element styling
        2. 13.2.1.2. Inline element styling
      2. 13.2.2. Custom tags
      3. 13.2.3. Style inheritance
      4. 13.2.4. Styling hyperlinks
      5. 13.2.5. Embedded fonts
      6. 13.2.6. Selectors vs. the Properties panel
    3. 13.3. What you have learned
  19. 14. Building Stuff
    1. 14.1. Loading content
      1. 14.1.1. Are we there yet?
      2. 14.1.2. Somebody stole my preloader
    2. 14.2. Building a slide show with components and XML
      1. 14.2.1. A tour of the Beijing art district
        1. 14.2.1.1. Extending the tour
    3. 14.3. Building an MP3 player with XML
      1. 14.3.1. Setting up the external playlist
      2. 14.3.2. Polishing up the symbols
        1. 14.3.2.1. Renaming Library assets
        2. 14.3.2.2. Improving the controls
      3. 14.3.3. Wiring up the MP3 player controls
        1. 14.3.3.1. Handling the button events
        2. 14.3.3.2. Programming the sliders
        3. 14.3.3.3. Finishing up the controls
      4. 14.3.4. Evaluating and improving the MP3 player
    4. 14.4. Going mobile
      1. 14.4.1. A quick tour of Device Central
        1. 14.4.1.1. "Wiring up" the game
        2. 14.4.1.2. Testing the game in Device Central
      2. 14.4.2. Package the game as an Android AIR app
        1. 14.4.2.1. From Flash to AIR to Android
      3. 14.4.3. Build more stuff
    5. 14.5. What you have learned
  20. 15. Optimizing and Publishing Flash Movies
    1. 15.1. Flash's love-hate Internet relationship
      1. 15.1.1. This "Internet" thing
      2. 15.1.2. Enter the World Wide Web
      3. 15.1.3. Bandwidth
      4. 15.1.4. So, who are these folks we call users?
    2. 15.2. Streaming
    3. 15.3. The Bandwidth Profiler
      1. 15.3.1. Simulating a download
      2. 15.3.2. Pinpointing problem content
      3. 15.3.3. Can I get that in writing?
    4. 15.4. Optimizing and fine-tuning your Flash movies
      1. 15.4.1. Planning your project
      2. 15.4.2. Distributing the weight
      3. 15.4.3. Optimizing elements in the movie
    5. 15.5. Publishing and web formats
      1. 15.5.1. Flash
      2. 15.5.2. HTML
      3. 15.5.3. Animated GIFs
        1. 15.5.3.1. Exporting as an animated GIF
        2. 15.5.3.2. Importing an animated GIF
      4. 15.5.4. QuickTime
    6. 15.6. It's showtime!
      1. 15.6.1. Publish settings
        1. 15.6.1.1. Formats
        2. 15.6.1.2. Flash settings
        3. 15.6.1.3. HTML settings
      2. 15.6.2. Publishing the butterfly garden
      3. 15.6.3. Publishing Flash movies containing linked files
    7. 15.7. What you have learned

Product information

  • Title: Foundation Flash CS5 For Designers
  • Author(s):
  • Release date: August 2010
  • Publisher(s): friends of ED
  • ISBN: 9781430229940