| About the Authors | p. xiii |
| About the Technical Reviewer | p. xiv |
| About the Cover Image Designer | p. xv |
| Acknowledgments | p. xvi |
| Introduction | p. xvii |
| Flash Overview | p. 3 |
| Why Flash? | p. 4 |
| From the user perspective | p. 4 |
| From the creator perspective | p. 4 |
| Ease of use | p. 5 |
| Animation | p. 6 |
| Video integration | p. 8 |
| Browser autonomy | p. 8 |
| Browser embedding | p. 9 |
| Benefits of vector graphics over raster graphics | p. 10 |
| Summary | p. 11 |
| Creating Usable and Innovative Experiences | p. 15 |
| Creative direction | p. 15 |
| Design layers | p. 16 |
| Purpose | p. 16 |
| Style | p. 17 |
| Structure | p. 17 |
| Craftsmanship | p. 18 |
| Surface | p. 19 |
| Critiques | p. 19 |
| The experience | p. 20 |
| Metaphors | p. 20 |
| Tangible metaphors | p. 21 |
| Conceptual metaphors | p. 22 |
| Physical metaphors | p. 23 |
| Narrative in Flash | p. 24 |
| Interactive animation | p. 26 |
| Benefits of animation | p. 26 |
| Components for interaction | p. 26 |
| Emerging interactions | p. 27 |
| Summary | p. 31 |
| Interface Designers' Guide to Color | p. 33 |
| Basic color theory | p. 34 |
| Selecting color | p. 35 |
| Monochromatic | p. 37 |
| Analogous | p. 37 |
| Complementary | p. 38 |
| Split complement | p. 38 |
| Triadic | p. 38 |
| Tetrad | p. 39 |
| Color on the computer | p. 39 |
| Color modes | p. 40 |
| Gamma | p. 41 |
| Nuts and bolts | p. 41 |
| Color systems | p. 43 |
| Hexadecimal color | p. 43 |
| Other web palettes | p. 44 |
| HSL color | p. 44 |
| HSB color | p. 45 |
| LAB color | p. 45 |
| Communicating with color | p. 46 |
| Color symbolism | p. 47 |
| Color psychology | p. 48 |
| Color strategy | p. 49 |
| Design tools and techniques | p. 50 |
| Using Flash color palettes | p. 50 |
| Applying color using ActionScript | p. 56 |
| Summary | p. 57 |
| Planning Your Interface Design | p. 61 |
| Initial information | p. 61 |
| Structure planning | p. 63 |
| Wireframing and prototyping | p. 64 |
| What is prototyping? | p. 66 |
| Using your space efficiently | p. 67 |
| Text spacing | p. 67 |
| Interface padding | p. 68 |
| Uniformity | p. 69 |
| Summary | p. 69 |
| Vector Drawing and Effects in Flash and Illustrator | p. 71 |
| Pros and cons: Illustrator and Flash | p. 72 |
| Making it pop | p. 73 |
| Creating button graphics using Illustrator | p. 73 |
| Creating inlays using Illustrator | p. 78 |
| Creating indents using Illustrator | p. 80 |
| Technical drawing in Illustrator | p. 82 |
| Photo illustration using Illustrator | p. 82 |
| Interface layout design in Illustrator | p. 87 |
| Moving from Illustrator to Flash | p. 88 |
| Exporting SWF graphics from Illustrator | p. 88 |
| Importing SWF graphics created in Illustrator | p. 90 |
| Summary | p. 93 |
| Understanding the Timeline and Layers | p. 95 |
| Anatomy of the timeline | p. 96 |
| A layering example: the gel pill | p. 100 |
| Creating the layers | p. 100 |
| Drawing the pill body | p. 101 |
| Adding the bottom highlight | p. 101 |
| Adding the top highlight | p. 103 |
| Creating a translucent shadow | p. 104 |
| Adding text | p. 104 |
| Blending modes | p. 106 |
| Masks | p. 108 |
| Motion guides | p. 109 |
| Summary | p. 110 |
| Working with 3D Vectors | p. 113 |
| Working with real 3D assets | p. 114 |
| Working with semirealistic 3D assets | p. 114 |
| User icon | p. 115 |
| The base shape | p. 115 |
| The bottom highlight | p. 116 |
| Depth with inner glow | p. 117 |
| Adding gloss | p. 118 |
| Domain icon | p. 119 |
| Creating the shadow | p. 119 |
| Creating the orb | p. 119 |
| Outer glow | p. 120 |
| Inner glow | p. 121 |
| Stars | p. 121 |
| Adding gloss | p. 122 |
| Statistics icon | p. 122 |
| The base shape | p. 122 |
| The graph | p. 124 |
| The reflection | p. 124 |
| 3D graphics using Illustrator and Flash | p. 124 |
| Creating a 3D vector graphic | p. 124 |
| Summary | p. 133 |
| Using Video in Flash | p. 135 |
| Video content for Flash | p. 136 |
| Shooting video content for the Web: A basic guide | p. 136 |
| Equipment basics | p. 137 |
| Shooting and editing basics | p. 140 |
| Final Cut Pro basics | p. 142 |
| Batch-capturing video | p. 142 |
| Editing basics | p. 145 |
| Exporting your sequence | p. 148 |
| Bringing video content into Flash | p. 150 |
| Formats and compression | p. 150 |
| Encoding the video | p. 151 |
| Using video in Flash | p. 157 |
| Bitstreaming video | p. 159 |
| Embedding video | p. 163 |
| Summary | p. 168 |
| Glossary | p. 169 |
| Photoshop Techniques | p. 175 |
| Photoshop overview | p. 176 |
| Setting up your file | p. 178 |
| Creating the background | p. 181 |
| Light source | p. 181 |
| Background depth | p. 185 |
| Foundation shapes | p. 185 |
| Foundation base | p. 185 |
| Foundation borders | p. 187 |
| Background shadows | p. 188 |
| Experimenting with colors | p. 192 |
| Adding the logo | p. 192 |
| Creating the interface layers | p. 194 |
| Visor shape | p. 195 |
| Body highlights | p. 198 |
| The visor top group | p. 203 |
| Visor shading | p. 204 |
| Seam | p. 206 |
| Adding gloss | p. 208 |
| The visor inset shape | p. 211 |
| Creating the secondary navigation area | p. 212 |
| Adding details to the visor | p. 215 |
| Creating the primary navigation | p. 217 |
| Visor Top group and Primary Nav | p. 218 |
| Adding a highlight | p. 221 |
| Navigation bar shadow | p. 222 |
| Adding details to the logo | p. 224 |
| Cloud pictures | p. 224 |
| Light rays | p. 225 |
| Creating the content containers | p. 225 |
| Main content area | p. 225 |
| Content background | p. 225 |
| Content top | p. 227 |
| Content borders | p. 229 |
| Left column content area | p. 230 |
| Content and buttons | p. 231 |
| Mouseover states | p. 231 |
| Moving from Photoshop to Flash | p. 232 |
| Summary | p. 232 |
| Moving from Photoshop to Flash and Effective PNGs | p. 235 |
| Preparing the files | p. 236 |
| The background | p. 237 |
| The logo | p. 238 |
| The logo rays | p. 240 |
| The Flash file | p. 240 |
| Navigation bar tutorial | p. 242 |
| Re-creating in vector | p. 242 |
| Masking the navigation bar | p. 246 |
| Adding details | p. 248 |
| Animating the navigation bar | p. 249 |
| Logo tutorial | p. 249 |
| Animating the logo | p. 249 |
| Animating the rays | p. 250 |
| Exporting vector objects to create raster assets | p. 251 |
| Summary | p. 253 |
| Creating Animated Effects | p. 255 |
| Cause, effect, and timing | p. 256 |
| Realistic car | p. 256 |
| Cartoon car | p. 257 |
| Depth | p. 257 |
| Implying speed | p. 258 |
| Motion blur | p. 258 |
| Faking motion blur | p. 258 |
| Animation style | p. 259 |
| Frame rate | p. 259 |
| Animation effects | p. 260 |
| Elasticity | p. 260 |
| Bounce | p. 263 |
| Overflow | p. 265 |
| ActionScript animation techniques | p. 267 |
| Setting up the movie | p. 267 |
| Scripting animation | p. 267 |
| Deconstructing interactive animation | p. 269 |
| Setting up the animation | p. 269 |
| Animating the menu | p. 274 |
| Setting up the icon | p. 284 |
| Animating the icon | p. 285 |
| Scripting the interaction | p. 287 |
| Summary | p. 288 |
| Flash Textures | p. 291 |
| Creating texture with displacement maps | p. 291 |
| Still images | p. 292 |
| Animated images | p. 297 |
| Summary | p. 303 |
| Photo Editing in Photoshop and Flash | p. 305 |
| Working with bitmapped images | p. 306 |
| Scaling down our image size | p. 307 |
| Straightening up our lighthouse | p. 307 |
| Removing our image background | p. 310 |
| Color-correcting our image | p. 317 |
| Images in Flash | p. 324 |
| Exploring blend modes | p. 329 |
| Filters | p. 331 |
| Summary | p. 335 |
| Finishing Off Your Site | p. 337 |
| Optimization | p. 337 |
| The Bandwidth Profiler | p. 338 |
| Compressing assets | p. 338 |
| Publishing | p. 339 |
| Embedding in HTML | p. 339 |
| Detecting Flash | p. 340 |
| QA testing | p. 340 |
| Launching and post launch | p. 341 |
| Maintenance | p. 341 |
| Source files | p. 342 |
| Continue analyzing | p. 342 |
| Usability testing | p. 342 |
| Summary | p. 343 |
| Index | p. 345 |
| Table of Contents provided by Ingram. All Rights Reserved. |
