Flash® Catalyst™ CS5 Bible

Flash® Catalyst™ CS5 Bible

by Rob Huddleston
Released May 2010
Publisher(s): Wiley
ISBN: 9780470568156

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

FLSH CAST is one of the most anticipated releases in the company’s history. The FLSH CAST Bible will provide an invaluable resource for everyone looking to use this exciting new technology by providing a complete resource, from the basics of the Flex framework and rich internet applications, through designing comps and assets in ILOR, to importing those comps and assets and converting them to Flex components, round-trip editing of those components between CAST and ILOR, and finally to bringing the application into FLSH Builder for developers to complete the application.

Table of contents

  1. Copyright
  2. About the Author
  3. Credits
  4. Foreword
  5. Preface
  6. Acknowledgments
  7. Introduction
    1. Who the Book Is For
    2. How the Book Is Organized
  8. 0. Dive Into Flash Catalyst CS5
    1. 0.1. Rich Internet Applications
    2. 0.2. The Flash Catalyst Workflow
    3. 0.3. Introducing Adobe Illustrator
      1. QS.3.1. Illustrator interface
      2. QS.3.2. Illustrator artboard
      3. QS.3.3. Illustrator tools
      4. QS.3.4. Importing into Illustrator
      5. QS.3.5. Using layers in Illustrator
    4. 0.4. Introducing Flash Catalyst
      1. QS.4.1. Importing an Illustrator file into Catalyst
      2. QS.4.2. Optimizing graphics
      3. QS.4.3. Creating components
      4. QS.4.4. View states
      5. QS.4.5. Interactions
    5. 0.5. Introducing Flash Builder 4
    6. 0.6. Summary
  9. I. Rich Internet Applications and the Flash Platform
    1. 1. Understanding Rich Internet Applications
      1. 1.1. Moving Beyond HTML
        1. 1.1.1. A brief history of the Web
        2. 1.1.2. Dynamic HTML
        3. 1.1.3. Ajax
      2. 1.2. Understanding the Flash Platform
        1. 1.2.1. Flash platform overview
          1. 1.2.1.1. Flash Player
          2. 1.2.1.2. Adobe Integrated Runtime
          3. 1.2.1.3. Flash Professional CS5
          4. 1.2.1.4. The Flex framework
          5. 1.2.1.5. Flash Builder 4
      3. 1.3. Summary
    2. 2. Introducing Flash Catalyst
      1. 2.1. Catalyst Projects
      2. 2.2. The Flash Catalyst Interface
        1. 2.2.1. The Start screen
        2. 2.2.2. The main workspace
        3. 2.2.3. Design and Code workspaces
          1. 2.2.3.1. Design panels
          2. 2.2.3.2. Code panels
        4. 2.2.4. The Heads-up display
        5. 2.2.5. Customizing the workspace
      3. 2.3. Getting Help
      4. 2.4. Summary
    3. 3. Working with Other Applications
      1. 3.1. Adobe Creative Suite 5 Design Tools
        1. 3.1.1. The CS5 Interface
        2. 3.1.2. Tools
        3. 3.1.3. Panels
        4. 3.1.4. Workspaces
      2. 3.2. Choosing Your Comp Tool
        1. 3.2.1. Vector versus raster graphics
      3. 3.3. Adobe Flash Builder 4
      4. 3.4. Summary
  10. II. Designing the Application
    1. 4. Wireframing an Application in Flash Catalyst
      1. 4.1. Creating a New Wireframe Project
      2. 4.2. Using the Selection, Direct Select, Hand, and Zoom Tools
        1. 4.2.1. The Selection and Direct Select tools
        2. 4.2.2. The Hand and Zoom tools
      3. 4.3. Using the Drawing Tools
        1. 4.3.1. Draw rectangles, rounded rectangles, and squares
        2. 4.3.2. Set strokes and fills
        3. 4.3.3. Draw ellipses and circles
        4. 4.3.4. Drawing lines
        5. 4.3.5. Drawing other shapes
        6. 4.3.6. Adding text
      4. 4.4. Using the Transform Tool
      5. 4.5. Understanding Layers
      6. 4.6. Working with Blend Modes
      7. 4.7. Add Wireframe Components
      8. 4.8. Run a Project
      9. 4.9. Saving a Project
      10. 4.10. Summary
    2. 5. Create an Application Comp in Illustrator
      1. 5.1. Create a New File in Illustrator
        1. 5.1.1. Choosing a print document or Flash Catalyst document
        2. 5.1.2. Choosing the file name and document size
      2. 5.2. Drawing in Illustrator
        1. 5.2.1. The Tools panel
        2. 5.2.2. Selection tools
        3. 5.2.3. Drawing tools
          1. 5.2.3.1. The Pen tool
            1. 5.2.3.1.1. Creating a shape
            2. 5.2.3.1.2. Creating a curve
          2. 5.2.3.2. Modifying paths
          3. 5.2.3.3. Combining straight and curve segments
          4. 5.2.3.4. Changing the direction of curves
          5. 5.2.3.5. Draw shapes
          6. 5.2.3.6. Precise shapes
          7. 5.2.3.7. Smart Guides and the Info tooltip
          8. 5.2.3.8. Painting
          9. 5.2.3.9. Erasing drawings
      3. 5.3. Modify Artwork
        1. 5.3.1. Revisiting the Direct Select tool
        2. 5.3.2. Work with color
        3. 5.3.3. Use gradients
          1. 5.3.3.1. Define a custom gradient
          2. 5.3.3.2. The Gradient tool
        4. 5.3.4. Transform objects
          1. 5.3.4.1. The Rotate tool
          2. 5.3.4.2. The Reflect tool
          3. 5.3.4.3. The Scale tool
          4. 5.3.4.4. The Shear tool
          5. 5.3.4.5. The Free Transform tool
      4. 5.4. Organize Art Work on Layers
        1. 5.4.1. Layers and sublayers
      5. 5.5. Add Text to Your Designs
        1. 5.5.1. Text tool
        2. 5.5.2. Area Text tool
        3. 5.5.3. Type on a Path tool
      6. 5.6. Apply Effects
      7. 5.7. Using Multiple Artboards
      8. 5.8. Best Practices when Using Illustrator with Catalyst
        1. 5.8.1. Plan file structure
        2. 5.8.2. Follow a naming convention
        3. 5.8.3. Do not link to external files
        4. 5.8.4. Designate duplicated assets
        5. 5.8.5. Create outlines for text that use filters and effects
        6. 5.8.6. Create outlines for uncommon, rarely used fonts
        7. 5.8.7. Use the Blob brush
        8. 5.8.8. Rasterize Brushes
      9. 5.9. Summary
    3. 6. Create Assets in Photoshop
      1. 6.1. Opening Files in Photoshop
      2. 6.2. Viewing Images
      3. 6.3. Selecting Images
        1. 6.3.1. Rectangular and elliptical selections
        2. 6.3.2. Lasso tool
        3. 6.3.3. Polygon Lasso and Magnetic Lasso tools
        4. 6.3.4. Smart Selection and Magic Wand tools
        5. 6.3.5. Combining selection tools
        6. 6.3.6. Remove selections
        7. 6.3.7. Saving selections
      4. 6.4. Sizing and Cropping Images
      5. 6.5. Work with Layers
        1. 6.5.1. Copy selections to new layers
        2. 6.5.2. Delete layers
        3. 6.5.3. Selecting layers versus selecting layer contents
        4. 6.5.4. Layer opacity
        5. 6.5.5. Layer blend modes
      6. 6.6. Image Retouching
        1. 6.6.1. Color correction
        2. 6.6.2. Fixing highlights and shadows
        3. 6.6.3. Removing blemishes
          1. 6.6.3.1. Spot Healing Brush tool
          2. 6.6.3.2. Healing Brush tool
          3. 6.6.3.3. Patch tool
          4. 6.6.3.4. Red Eye Removal tool
      7. 6.7. Add Vector Shapes and Paths in Photoshop
      8. 6.8. Add Layer Styles
      9. 6.9. Add Text
        1. 6.9.1. Create embossed text
        2. 6.9.2. Create 3D Text
      10. 6.10. Summary
    4. 7. Using Fireworks with Flash Catalyst
      1. 7.1. Creating a New Fireworks File
      2. 7.2. Fireworks Tools and Panels
        1. 7.2.1. Tools
        2. 7.2.2. Panels
      3. 7.3. Working with Color
        1. 7.3.1. The Color Palette panel
          1. 7.3.1.1. Selector mode
          2. 7.3.1.2. Mixer mode
          3. 7.3.1.3. Blender mode
        2. 7.3.2. The Swatches panel
        3. 7.3.3. The Kuler panel
      4. 7.4. Add Text
      5. 7.5. Importing Bitmaps
      6. 7.6. Working with Filters
      7. 7.7. Saving Artwork as Symbols
      8. 7.8. Adding Prototype Objects
      9. 7.9. Exporting as FXG
      10. 7.10. Summary
  11. III. Creating the Application in Catalyst
    1. 8. Converting Illustrator and Photoshop Artwork into Catalyst Projects
      1. 8.1. Create a New Project from an Illustrator Comp
      2. 8.2. Create a New Project from a Photoshop File
      3. 8.3. Import Graphics into an Existing Project
        1. 8.3.1. Import images to the artboard
        2. 8.3.2. Importing multiple images
        3. 8.3.3. Using the Library panel
      4. 8.4. Round-Trip Editing with Illustrator
      5. 8.5. Create Optimized Graphics
      6. 8.6. Summary
    2. 9. Converting Artwork to Components
      1. 9.1. Convert Layers and Groups to Custom Components
        1. 9.1.1. Editing components
        2. 9.1.2. Nesting components
        3. 9.1.3. Naming components
        4. 9.1.4. Reusing components
      2. 9.2. Creating Buttons
      3. 9.3. Convert Artwork to a Toggle Button
      4. 9.4. Convert Artwork to a Text Field
      5. 9.5. Convert Artwork to Sliders
      6. 9.6. Convert Artwork to Radio Buttons and Checkboxes
      7. 9.7. Convert Artwork to Scroll Panels and Data Lists
        1. 9.7.1. Data list properties
        2. 9.7.2. Design-time Data
      8. 9.8. Convert Artwork to a Scrollbar
        1. 9.8.1. Create a scrollbar
        2. 9.8.2. Associate a scrollbar with a scroll panel or data list
      9. 9.9. Summary
    3. 10. Creating View States
      1. 10.1. Creating New View States
      2. 10.2. Changing Components in States
        1. 10.2.1. Removing or hiding components
        2. 10.2.2. Moving components
        3. 10.2.3. Applying component changes to states
        4. 10.2.4. Sharing components between states
      3. 10.3. Triggering State Changes with Interactions
      4. 10.4. Setting Up Transitions
      5. 10.5. Using Button States
      6. 10.6. Summary
    4. 11. Adding Animation
      1. 11.1. Creating an Action Sequence
      2. 11.2. Working with the Timeline
      3. 11.3. Adding Actions
        1. 11.3.1. Properties panel
        2. 11.3.2. Set Component State
        3. 11.3.3. Set Property
        4. 11.3.4. Fade
        5. 11.3.5. Sound Effect
        6. 11.3.6. Move
        7. 11.3.7. Resize
        8. 11.3.8. Rotate
        9. 11.3.9. Rotate 3D
        10. 11.3.10. Set action timings
      4. 11.4. Summary
    5. 12. Working with Design-time Data
      1. 12.1. Convert an Asset to a Data List
        1. 12.1.1. Selecting the data list parts
        2. 12.1.2. Designating the parts
      2. 12.2. Add Design-time Data
      3. 12.3. Summary
    6. 13. Adding Multimedia
      1. 13.1. Adding SWFs to Your Project
        1. 13.1.1. FLA versus SWF
        2. 13.1.2. Importing an SWF
        3. 13.1.3. Controlling an SWF through action sequences
      2. 13.2. Importing Video
        1. 13.2.1. Converting video to FLV
        2. 13.2.2. Importing video into Catalyst
      3. 13.3. Controlling a Video Player
        1. 13.3.1. Video player interactions
        2. 13.3.2. Playback controls
        3. 13.3.3. Video component properties
      4. 13.4. Importing and Playing Sound
        1. 13.4.1. Importing sound
        2. 13.4.2. Playing sound
      5. 13.5. Summary
  12. IV. Exporting Projects into Flash Builder 4
    1. 14. Flash Builder 4 and the Flex Framework
      1. 14.1. The Flex Framework
        1. 14.1.1. MXML
        2. 14.1.2. ActionScript 3.0
        3. 14.1.3. Object-oriented programming 101
          1. 14.1.3.1. Classes
          2. 14.1.3.2. Objects
          3. 14.1.3.3. Properties
          4. 14.1.3.4. Methods
          5. 14.1.3.5. Packages
          6. 14.1.3.6. Dot notation
      2. 14.2. Flash Builder 4
        1. 14.2.1. Interface
        2. 14.2.2. Design and Source modes
      3. 14.3. Creating a Flex Project
        1. 14.3.1. Project folders
      4. 14.4. Understanding Flex 4
        1. 14.4.1. Main application file
        2. 14.4.2. Namespaces
        3. 14.4.3. Components
      5. 14.5. Running Projects
      6. 14.6. Debugging
      7. 14.7. Summary
    2. 15. Exporting a Flash Catalyst Project to Flash Builder
      1. 15.1. View the Project's Code
      2. 15.2. Import the Project into Flash Builder
      3. 15.3. Run the Project from Flash Builder
      4. 15.4. Viewing Help on the Code
      5. 15.5. Viewing the Project in the Design Mode
      6. 15.6. Connecting a Project to Live Data
      7. 15.7. Summary
    3. 16. Returning a Project to Flash Catalyst
      1. 16.1. Flash Builder Projects in Flash Catalyst
      2. 16.2. Merging Projects
      3. 16.3. Using a Flash Catalyst Library Package to Manage Changes
        1. 16.3.1. Create an FXPL file
        2. 16.3.2. Import an FXPL into Flash Builder
        3. 16.3.3. Changing library items in Catalyst
      4. 16.4. Summary
    4. 17. Exporting Catalyst Projects Directly to Flash Player
      1. 17.1. Exporting a Project as a SWF
      2. 17.2. Font Embedding
      3. 17.3. Deploying the Project to the Web
      4. 17.4. Summary
    5. 18. Creating a Project for AIR
      1. 18.1. Understanding AIR
      2. 18.2. Converting a Project to AIR
      3. 18.3. Completing an AIR Project
      4. 18.4. Installing an AIR Application
      5. 18.5. Deploying to AIR Directly from Catalyst
      6. 18.6. Summary
  13. V. Build a Complete Project
    1. 19. Creating a Design Comp in Illustrator
      1. 19.1. Identifying the Design Requirements
      2. 19.2. Design the Application in Illustrator
        1. 19.2.1. Create a new file
        2. 19.2.2. Create the logo
        3. 19.2.3. Organize the Logo's Layers
        4. 19.2.4. Position the logo
        5. 19.2.5. Create the category list
        6. 19.2.6. Add the floral element
        7. 19.2.7. Create the top navigation
        8. 19.2.8. Create the Search and Wish List boxes
        9. 19.2.9. Create the bottom navigation
        10. 19.2.10. Create the backgrounds for the bottom navigation
        11. 19.2.11. Create the main content area for the Home state
          1. 19.2.11.1. Create the featured section heading
          2. 19.2.11.2. Create the subscription form section
        12. 19.2.12. Add the first sidebar
        13. 19.2.13. Create the second sidebar
        14. 19.2.14. Drawing the shopping cart
      3. 19.3. Optimizing the Project
        1. 19.3.1. Rasterize the shopping cart
        2. 19.3.2. Embed linked artwork
      4. 19.4. Summary
    2. 20. Importing the Design into Catalyst
      1. 20.1. Creating a Catalyst Project from a Design Comp
      2. 20.2. Organizing Artwork
        1. 20.2.1. Rename layers
        2. 20.2.2. Create new layers
        3. 20.2.3. Creating new sublayers
        4. 20.2.4. Deleting layers
        5. 20.2.5. Removing unneeded groups
      3. 20.3. Moving, Rotating, and Resizing Artwork
        1. 20.3.1. Moving artwork
        2. 20.3.2. Rotating artwork
        3. 20.3.3. Resizing artwork
      4. 20.4. Convert Artwork to Optimized Graphics
      5. 20.5. Summary
    3. 21. Import Additional Artwork from Illustrator and Photoshop
      1. 21.1. Importing Additional Artwork from Illustrator
      2. 21.2. Importing Bitmap Artwork from Photoshop
      3. 21.3. Using Copy and Paste to Import Assets from Illustrator and Photoshop
      4. 21.4. Edit an Asset in Illustrator with Round-trip Editing
      5. 21.5. Summary
    4. 22. Converting Artwork to Components in Your Projects
      1. 22.1. Creating Custom Components
        1. 22.1.1. Convert artwork to a custom component
        2. 22.1.2. Edit a custom component
      2. 22.2. Nest Components within Components
      3. 22.3. Convert Artwork to a Button
        1. 22.3.1. Create the button
        2. 22.3.2. Rename the button
      4. 22.4. Create Check Boxes and Radio Buttons
        1. 22.4.1. Create check boxes
        2. 22.4.2. Create radio buttons
        3. 22.4.3. Defining a radio button group
      5. 22.5. Convert Artwork to a Text Input Field
        1. 22.5.1. Configure the component
        2. 22.5.2. Reuse components
      6. 22.6. Convert Artwork to a Scrollbar
        1. 22.6.1. Create the scroll bar
        2. 22.6.2. Configure the scroll bar
      7. 22.7. Summary
    5. 23. Create View States in Your Project
      1. 23.1. Creating States in the Main Application
      2. 23.2. Modify the Contents of a State
      3. 23.3. Create New States within a Component
      4. 23.4. Components with Built-in View States
      5. 23.5. Trigger View State Changes with Buttons
        1. 23.5.1. Create the interaction
        2. 23.5.2. Test the interaction
      6. 23.6. Animating State Change Transitions
        1. 23.6.1. Changing the timing of effects
        2. 23.6.2. Applying other effects
      7. 23.7. Summary
    6. 24. Add Data Lists
      1. 24.1. Convert Artwork to a Data List
      2. 24.2. Configuring the Data List's Parts
      3. 24.3. Configuring the Repeating Item's Appearance
      4. 24.4. Set Up Design-time Data
      5. 24.5. Summary
    7. 25. Importing Your Project into Flash Builder
      1. 25.1. Beginning the Import Process
      2. 25.2. Running a Project in Flash Builder
      3. 25.3. Merging Changes from Catalyst into Flash Builder
      4. 25.4. Summary
    8. 26. Connecting Your Project to Live Data
      1. 26.1. Setting Up a Local Testing Server
        1. 26.1.1. Download and install ColdFusion
        2. 26.1.2. Configuring the database
      2. 26.2. Changing the Project Type
        1. 26.2.1. Set up the project
        2. 26.2.2. Configuring the return data
      3. 26.3. Binding the Data to the Visual Component
      4. 26.4. Summary
  14. VI. Appendixes
    1. A. Keyboard Shortcuts
      1. A.1. Basic Commands
      2. A.2. Tool Selections
      3. A.3. Temporary Tool Selections
    2. B. Best Practices
      1. B.1. Designer Best Practices
        1. B.1.1. The Web is not print
        2. B.1.2. Design for interactivity
        3. B.1.3. Do not overuse interactivity
        4. B.1.4. Stay organized
        5. B.1.5. Gain an understanding of Flash Builder and the Flex framework
        6. B.1.6. Communicate
      2. B.2. Developer Best Practices
        1. B.2.1. Gain an understanding of Illustrator and Photoshop
        2. B.2.2. Plan ahead
        3. B.2.3. Do not change skins in Flash Builder
        4. B.2.4. Communicate
      3. B.3. Best Practices When Working in Catalyst
        1. B.3.1. Do things in the right order
        2. B.3.2. Think about using components
        3. B.3.3. Changes apply only to single states
        4. B.3.4. Preview the project at regular intervals
    3. C. What's on the Book's Web Site

Product information

  • Title: Flash® Catalyst™ CS5 Bible
  • Author(s): Rob Huddleston
  • Release date: May 2010
  • Publisher(s): Wiley
  • ISBN: 9780470568156