You are previewing Foundation Flash CS4 for Designers.
O'Reilly logo
Foundation Flash CS4 for Designers

Book Description

If you're a Flash designer looking for a solid overview of Flash CS4, this book is for you. Through the use of solid and practical exercises, you will soon master the fundamentals of this latest edition of the Adobe Flash authoring tool. Using a series of carefully developed tutorials, you will be led from basic Flash CS4 techniques to the point where you can create animations, MP3 players, and customized Flash video players in no time. Each chapter focuses on a major aspect of Flash, and then lets you take the reins in a "Your Turn" exercise to create something amazing with what you've learned.

This book focuses on the core skill set you need to feel at home with Flash CS4, and also introduces you to some of the biggest names in today's Flash community through interviews and actual "How To" examples, so you can learn from the masters. You will start by studying the Flash CS4 interface, and while you're at it, you'll be guided toward mastery of the fundamentals, such as movieclips, text, and graphics, which will lead you into some of the more fascinating aspects of Flash, including audio, video, animation, and 3D transformations.

By the time you finish, you will have created an MP3 player and a Flash video player, been introduced to the basics of ActionScript 3.0, learned how to combine Flash with XML, styled Flash text with CSS, created animated scenes, and worked your way through a host of additional projects. All of these exercises are designed to give you the knowledge necessary to master Flash CS4 from the ground up. If you're already a seasoned Flash designer, this book will get you up to speed with the latest version in relatively short order.

Table of Contents

  1. Copyright
  2. ABOUT THE AUTHORS
  3. ABOUT THE TECHNICAL REVIEWER
  4. ABOUT THE COVER IMAGE DESIGNER
  5. ACKNOWLEDGMENTS
  6. INTRODUCTION
  7. 1. LEARNING THE FLASH CS4 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 properties
    5. 1.5. Zooming the stage
    6. 1.6. Exploring panels in the Flash interface
      1. 1.6.1. The Timeline panel
        1. 1.6.1.1. Animation and the timeline
        2. 1.6.1.2. Understanding frames
      2. 1.6.2. The Property inspector
      3. 1.6.3. The Tools panel
      4. 1.6.4. The Library panel
      5. 1.6.5. The Motion Editor panel
      6. 1.6.6. The Help menu
    7. 1.7. Using layers
      1. 1.7.1. Layer modes
      2. 1.7.2. Creating layers
      3. 1.7.3. Adding content to layers
      4. 1.7.4. Showing/hiding and locking layers
      5. 1.7.5. Grouping layers
    8. 1.8. Your turn: build a Flash movie
      1. 1.8.1. Preparing the stage
      2. 1.8.2. Adding the sky
      3. 1.8.3. Adding the mountains and playing with color
      4. 1.8.4. Using trees to create the illusion of depth
      5. 1.8.5. Using a motion tween to create a twinkling star
      6. 1.8.6. Adding a moon over Lake Nanagook
      7. 1.8.7. Making some moonshine
      8. 1.8.8. Breaking the stillness of the night at Lake Nanagook
      9. 1.8.9. Testing your movie
      10. 1.8.10. Making the moon rise over Lake Nanagook
      11. 1.8.11. Lighting up Lake Nanagook
    9. 1.9. What you have learned
  8. 2. CREATING ARTWORK IN FLASH
    1. 2.1. Flash's two kinds of artwork
    2. 2.2. The Tools panel
    3. 2.3. Selecting and transforming objects
      1. 2.3.1. The Selection and Subselection tools
      2. 2.3.2. The Free Transform tool
      3. 2.3.3. The Gradient Transform tool
      4. 2.3.4. Object Drawing mode
    4. 2.4. Drawing in Flash CS4
      1. 2.4.1. The Pencil tool
      2. 2.4.2. The Brush tool
      3. 2.4.3. The Deco tool
      4. 2.4.4. The Spray Brush tool
      5. 2.4.5. The Eraser tool
      6. 2.4.6. The Pen tool
      7. 2.4.7. Your turn: Trees grow at Lake Nanagook
        1. 2.4.7.1. Drawing the tree trunk
        2. 2.4.7.2. Drawing the pine tree
        3. 2.4.7.3. Adding pine needles
    5. 2.5. Working with color
      1. 2.5.1. The Color panel
      2. 2.5.2. Color models
      3. 2.5.3. The Color palette and Color Picker
      4. 2.5.4. Creating persistent custom colors
      5. 2.5.5. The Kuler Color Picker
      6. 2.5.6. Your turn: Play with color
        1. 2.5.6.1. Creating gradient effects
        2. 2.5.6.2. Locking a fill
        3. 2.5.6.3. Using an image as a fill
    6. 2.6. Using bitmap images in Flash
      1. 2.6.1. Importing image files into Flash
      2. 2.6.2. Editing imported bitmaps
      3. 2.6.3. Tracing bitmaps in Flash
        1. 2.6.3.1. Tracing an image
        2. 2.6.3.2. Optimizing the drawing
      4. 2.6.4. Using JPG files in Flash
      5. 2.6.5. Using GIF files in Flash
        1. 2.6.5.1. Working with GIF images
        2. 2.6.5.2. Working with GIF animations
      6. 2.6.6. Importing Fireworks CS4 documents
      7. 2.6.7. Importing Illustrator CS4 documents
        1. 2.6.7.1. Importing an AI file
        2. 2.6.7.2. Copying and pasting an AI file
        3. 2.6.7.3. Putting the AI file on the stage
      8. 2.6.8. Importing Photoshop CS4 documents
        1. 2.6.8.1. Importing a PSD file
        2. 2.6.8.2. Notes from the PSD file import front
    7. 2.7. Creating a banner ad
    8. 2.8. What you have learned
  9. 3. SYMBOLS AND LIBRARIES
    1. 3.1. Symbol essentials
      1. 3.1.1. Creating a symbol
      2. 3.1.2. Understanding symbol types
        1. 3.1.2.1. Graphic symbols
        2. 3.1.2.2. Button symbols
        3. 3.1.2.3. Movieclip symbols
      3. 3.1.3. Editing symbols
    2. 3.2. 9-slice scaling
      1. 3.2.1. How 9-slice scaling works
      2. 3.2.2. Your turn: Frames for Peter Pan
      3. 3.2.3. 9-slice "gotchas"
    3. 3.3. Sharing assets
      1. 3.3.1. Author-time shared libraries
      2. 3.3.2. Runtime shared libraries
      3. 3.3.3. Updating shared assets
      4. 3.3.4. A word from the bunnies
    4. 3.4. Filters and blend modes
      1. 3.4.1. Applying filters
        1. 3.4.1.1. Applying a Drop Shadow filter
        2. 3.4.1.2. Adding perspective
        3. 3.4.1.3. Some filter facts
      2. 3.4.2. Playing with blends
    5. 3.5. Managing content on the stage
      1. 3.5.1. Grouping content
      2. 3.5.2. Aligning objects by snapping
        1. 3.5.2.1. Using Snap Align
        2. 3.5.2.2. Snapping to the grid
        3. 3.5.2.3. Aligning with guides
        4. 3.5.2.4. Snapping in a guide layer and to pixels
      3. 3.5.3. Stacking order and using the Align panel
        1. 3.5.3.1. Stacking objects
        2. 3.5.3.2. Distributing to layers
        3. 3.5.3.3. Using the Align panel
    6. 3.6. Masks and masking
      1. 3.6.1. Creating a simple mask
      2. 3.6.2. Creating a masked animation
      3. 3.6.3. Using text as a mask
      4. 3.6.4. Your turn: Create a soft mask in Flash
        1. 3.6.4.1. Setting up the stage
        2. 3.6.4.2. Creating the cutout for the mask
        3. 3.6.4.3. A mask without a masking layer
    7. 3.7. What you have learned
  10. 4. ACTIONSCRIPT BASICS
    1. 4.1. The power of ActionScript
    2. 4.2. The Actions panel
      1. 4.2.1. Actions panel components
        1. 4.2.1.1. Actions toolbox
        2. 4.2.1.2. Script navigator
        3. 4.2.1.3. Script pane
        4. 4.2.1.4. Panel context menu
      2. 4.2.2. The Actions panel vs. the Behaviors panel
    3. 4.3. Everything is an object
      1. 4.3.1. Classes
      2. 4.3.2. Properties
        1. 4.3.2.1. Using instance names
        2. 4.3.2.2. Setting properties via ActionScript
      3. 4.3.3. Methods
      4. 4.3.4. Events
    4. 4.4. Coding fundamentals
      1. 4.4.1. Syntax
        1. 4.4.1.1. Capitalization matters
        2. 4.4.1.2. Semicolons mark the end of a line
        3. 4.4.1.3. Mind your keywords
      2. 4.4.2. Commenting code
      3. 4.4.3. Dot notation
      4. 4.4.4. Scope
      5. 4.4.5. Variables
      6. 4.4.6. Data types
      7. 4.4.7. Operators
      8. 4.4.8. Conditional statements
      9. 4.4.9. Class files and the document class
      10. 4.4.10. 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 a timeline
    8. 4.8. What you have learned
  11. 5. AUDIO
    1. 5.1. Flash and 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
      5. 5.3.5. A note from a master
      6. 5.3.6. Your turn: Add sound to a button
    4. 5.4. Controlling audio with ActionScript 3.0
      1. 5.4.1. Playing a sound from the library
      2. 5.4.2. Using a button to play a sound
      3. 5.4.3. Playing a sound from outside Flash
      4. 5.4.4. Turning an external sound on and off
      5. 5.4.5. Adjusting volume with code
      6. 5.4.6. Your turn: Let users select from multiple audio files
        1. 5.4.6.1. Setting up the component
        2. 5.4.6.2. Wiring up the Play button
        3. 5.4.6.3. Testing the movie
    5. 5.5. What you have learned
  12. 6. TEXT
    1. 6.1. Type basics
      1. 6.1.1. Adobe CoolType
        1. 6.1.1.1. A little screen type history
        2. 6.1.1.2. CoolType to the rescue
      2. 6.1.2. Typefaces and fonts
    2. 6.2. Working with device fonts
    3. 6.3. Types of text fields
      1. 6.3.1. Static text properties
        1. 6.3.1.1. Character properties
        2. 6.3.1.2. Paragraph properties
        3. 6.3.1.3. Options properties
      2. 6.3.2. Your turn: Play with static text
        1. 6.3.2.1. Applying a filter to text
        2. 6.3.2.2. Exploding text
        3. 6.3.2.3. Applying a Blend mode and color to text
      3. 6.3.3. Dynamic text
        1. 6.3.3.1. Adding text to a dynamic text field
        2. 6.3.3.2. Formatting text with ActionScript
        3. 6.3.3.3. Creating a text field with ActionScript
      4. 6.3.4. Input text
    4. 6.4. HTML formatting
    5. 6.5. Hyperlinks and Flash text
      1. 6.5.1. Using HTML for hyperlinks
      2. 6.5.2. Using hyperlinks to trigger ActionScript
      3. 6.5.3. Your turn: A visit to the pond
        1. 6.5.3.1. Using hyperlinks with a static text field
        2. 6.5.3.2. Using hyperlinks with a dynamic text field
    6. 6.6. Embedding font outlines
      1. 6.6.1. Embedding font outlines in individual text fields
        1. 6.6.1.1. Choosing a character set to embed
        2. 6.6.1.2. Applying character embedding correctly
      2. 6.6.2. Using font symbols
    7. 6.7. Checking spelling
    8. 6.8. Your turn: Scrollable text
      1. 6.8.1. Using the UIScrollBar component
      2. 6.8.2. Rolling your own scroller
    9. 6.9. What you have learned
  13. 7. ANIMATION
    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
        2. 7.3.3.2. Editing multiple frames
      4. 7.3.4. Combining timelines
        1. 7.3.4.1. Movieclip 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. Classic tween effects
        1. 7.3.5.1. Applying tween effects to an image converted to a symbol
        2. 7.3.5.2. Applying a filter to a tween
        3. 7.3.5.3. Alpha tweening
      6. 7.3.6. Motion guides
      7. 7.3.7. Tweening a mask
        1. 7.3.7.1. Animating a mask
        2. 7.3.7.2. Using motion guides with masks
      8. 7.3.8. Your turn: Make an animated button
        1. 7.3.8.1. Adding some animated glint
        2. 7.3.8.2. An even cooler animated button
    4. 7.4. Copying motion as ActionScript
    5. 7.5. Your turn: Complete an animated scene
    6. 7.6. What you have learned
  14. 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
      3. 8.1.3. Managing property keyframes
        1. 8.1.3.1. Changing duration proportionally
        2. 8.1.3.2. Changing duration nonproportionally
      4. 8.1.4. Motion paths
        1. 8.1.4.1. Manipulating motion paths
        2. 8.1.4.2. Using advanced motion paths
      5. 8.1.5. Motion tween properties
    2. 8.2. Motion presets
    3. 8.3. Inverse kinematics (IK)
      1. 8.3.1. Using the Bone tool
        1. 8.3.1.1. Bone tool properties
        2. 8.3.1.2. Constraining joint rotation
        3. 8.3.1.3. Deleting bones
        4. 8.3.1.4. Applying joint translation
        5. 8.3.1.5. A note about bone preferences
      2. 8.3.2. Animating IK poses
      3. 8.3.3. Using the Bind tool
        1. 8.3.3.1. Shape IK and fills
        2. 8.3.3.2. Shape IK and anchor points
      4. 8.3.4. Your turn: Animate a fully rigged IK model
    4. 8.4. Inspiration is everywhere
    5. 8.5. What you have learned
  15. 9. FLASH GETS 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. New 3D rotation
      2. 9.3.2. The 3D Translation tool
    4. 9.4. Strategies for positioning content in 3D space
      1. 9.4.1. Share 3D rotation and translation settings
      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
  16. 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
    4. 10.4. Playing an FLV in Flash CS4
      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
      4. 10.4.4. Using the FLVPlayback control components
      5. 10.4.5. Adding captions with the FLVPlaybackCaptioning component
      6. 10.4.6. Preparing and using alpha channel video
      7. 10.4.7. Going full screen with video
        1. 10.4.7.1. Full-screen video the ActionScript/HTML way
        2. 10.4.7.2. Full-screen video the easy way
    5. 10.5. When video is not video
      1. 10.5.1. Embedding video
      2. 10.5.2. Embedding video as a movieclip
      3. 10.5.3. Interacting with video content
    6. 10.6. Adding cue points
      1. 10.6.1. An alternate XML format for cue points
      2. 10.6.2. Your turn: Create XML captions for video
    7. 10.7. Your turn: Play with alpha video
    8. 10.8. What you have learned
  17. 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
  18. 12. CSS
    1. 12.1. Styling with CSS
      1. 12.1.1. Element selectors vs. class selectors
        1. 12.1.1.1. Block element styling
        2. 12.1.1.2. Inline element styling
      2. 12.1.2. Custom tags
      3. 12.1.3. Style inheritance
      4. 12.1.4. Styling hyperlinks
      5. 12.1.5. Embedded fonts
      6. 12.1.6. Selectors vs. the Property inspector
    2. 12.2. Loading external CSS
    3. 12.3. What you have learned
  19. 13. XML (DYNAMIC DATA)
    1. 13.1. Writing XML
    2. 13.2. Loading an XML file
    3. 13.3. Using E4X syntax
      1. 13.3.1. Dots and @s
      2. 13.3.2. Node types
      3. 13.3.3. E4X filtering
      4. 13.3.4. Double dots and more
      5. 13.3.5. Namespaces
    4. 13.4. Your turn: Draw shapes with XML
    5. 13.5. What you have learned
  20. 14. BUILDING STUFF
    1. 14.1. Loading content
      1. 14.1.1. Dynamic loading
      2. 14.1.2. One loader, multiple SWFs
      3. 14.1.3. Creating a movie preloader
    2. 14.2. Building a slide show with components and XML
      1. 14.2.1. A tour of the Beijing art district
      2. 14.2.2. 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. Building a video controller
      1. 14.4.1. Assembling the controller
      2. 14.4.2. Wiring up the video player controls
        1. 14.4.2.1. Handling the button events
        2. 14.4.2.2. Programming the slider
      3. 14.4.3. Using timers to rewind and fast-forward
    5. 14.5. What you have learned
  21. 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 movie
      2. 15.4.2. Distributing the weight
      3. 15.4.3. Optimizing elements in the movie
      4. 15.4.4. Optimizing Flash content for use in video
    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 Lake Nanagook
      3. 15.6.3. Publishing Flash movies containing linked files
    7. 15.7. What you have learned