flash catalyst cs5 bible

The book you need to succeed!
Rob Huddleston
Discover the full power
of Flash Catalyst
Create rich designs
and user interfaces
Transform artwork into
interactive applications
Adobe
®
Flash
®

Catalyst
™
CS5
Adobe
®
Adobe
Flash
®
Catalyst
™
CS5
Shelving Category:
COMPUTERS/Web/Web Page Design
Reader Level:
Beginning to Advanced
www.wiley.com/go/compbooks
$39.99 USA
$47.99 Canada

Huddleston
Create rich, Internet applications
without writing any code
Imagine being able to build visually rich applications
without writing code.  at’s exactly what Flash Catalyst
enables you to do — and this step-by-step guide shows
you how. You’ll learn how to use all of Flash Catalyst’s
functionality to draw shapes, import images, add
animation, incorporate multimedia, and more. Convert
your Photoshop and Illustrator designs to Flash-based apps,
improve your design and development skills, and create
interactivity like never before with this complete guide.
• Create basic wireframes of applications using drawing tools
• Take advantage of Flash
®
Builder
™
and the Flex
®
framework
• Build desktop applications using the Adobe Integrated Runtime
• Integrate Flash movies, sound, and video into your site
• Transform your design from Illustrator into a completed project
• Convert artwork to components and connect to live data
Companion Web Site
Companion
Web Site
Download sample files from
www.wiley.com/go/fl ashcatalystbible
to build innovative new applications.

Rob Huddleston
has been developing Web pages
and applications since 1994, and
has been an instructor since 1999,
teaching Web and graphic design.
He is an Adobe Certifi ed Instructor,
Certified Expert, and Certified
Developer; he serves as an Adobe
User Group Manager; and he has
been named as an Adobe Community
Professional. Huddleston is also the
author of several books, including
Master VISUALLY: Dreamweaver
CS4 and Flash CS4 Professional.
Companion Web Site
• Start your own projects using sample files provided by the author
www.it-ebooks.info
01_568156-ffirs.indd ii01_568156-ffirs.indd ii 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
Flash
®
Catalyst
™
CS5 Bible
01_568156-ffirs.indd i01_568156-ffirs.indd i 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
01_568156-ffirs.indd ii01_568156-ffirs.indd ii 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
Flash
®

Catalyst
™
CS5
Bible
Rob Huddleston
01_568156-ffirs.indd iii01_568156-ffirs.indd iii 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
Flash
®
Catalyst™ CS5 Bible
Published by
Wiley Publishing, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com
Copyright © 2010 by Wiley Publishing, Inc., Indianapolis, Indiana
Published by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-0-470-56815-6
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means,
electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of
the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization
through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA
01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the
Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, 201-748-6011, fax 201-748-
6008, or online at
/>LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO
REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE

CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT
LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED
OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED
HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING
THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL
SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL
PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR
DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN
THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN
THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE
MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT
INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN
THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services or to obtain technical support, please contact our Customer
Care Department within the U.S. at (877) 762-2974, outside the U.S. at (317) 572-3993 or fax (317) 572-4002.
Library of Congress Control Number: 2010925690
Trademarks: Wiley and related trade dress are registered trademarks of Wiley Publishing, Inc., in the United States and
other countries, and may not be used without written permission. All other trademarks are the property of their respective
owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in
electronic books.
01_568156-ffirs.indd iv01_568156-ffirs.indd iv 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
About the Author
Rob Huddleston has been developing Web pages and applications since 1994, and has been an
instructor since 1999, teaching Web and graphic design to thousands of students. His clients have
included the United States Bureau of Land Management, the United States Patent and Trademark
Office, the States of California and Nevada, and many other federal, city and county agencies; the
United States Army and Air Force; Fortune 500 companies such as AT&T, Bank of America, Wells
Fargo, Safeway, and Coca-Cola; software companies including Adobe, Oracle, Intuit and Autodesk;

the University of California, San Francisco State University, and the University of Southern
California; and hundreds of small businesses and non-profit agencies, both in the United States
and abroad.
Rob is an Adobe Certified Instructor, Certified Expert, and Certified Developer, serves as an Adobe
User Group Manager, has been named as an Adobe Community Expert for his volunteer work
answering user questions in online forums, and also helps users as an expert moderator on Adobe’s
Community Help system.
He is the author of XML: Your visual blueprint™ for building expert Web sites using XML, CSS,
XHTML, and XSLT; HTML, XHTML and CSS: Your visual blueprint™ for designing effective Web sites;
Master VISUALLY: Dreamweaver CS4; and Flash CS4 Professional and ActionScript 3: Your visual blue-
print™ for creating interactive projects in Flash CS4 Professional.
You can visit Rob’s blog at
www.robhuddleston.com, or follow him on Twitter at twitter.
com/robhuddles
. He lives in Northern California with his wife and two children.
01_568156-ffirs.indd v01_568156-ffirs.indd v 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
Credits
Senior Acquisitions Editor
Stephanie McComb
Project Editor
Chris Wolfgang
Technical Editor
TJ Downes
Copy Editor
Kim Heusel
Editorial Director
Robyn Siesky
Business Manager
Amy Knies

Senior Marketing Manager
Sandy Smith
Vice President and Executive Group
Publisher
Richard Swadley
Vice President and Executive Publisher
Barry Pruett
Project Coordinator
Patrick Redmond
Graphics and Production Specialists
Jennifer Mayberry
Ronald G. Terry
Quality Control Technician
Jessica Kramer
Proofreading and Indexing
Christopher M. Jones
Word Co Indexing Services
Media Development Project Manager
Laura Moss
Media Development Assistant Project
Manager
Jenny Swisher
Media Development Associate Producer
Josh Frank
Shawn Patrick
Doug Kuhn
Marilyn Hummel
For Kelley, Jessica and Xander. I love you more than I can say.
01_568156-ffirs.indd vi01_568156-ffirs.indd vi 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info

I
n October of 2007, I was sitting in a conference room with members of my team at the inter-
active agency I worked at. We had been asked if we were interested in meeting with some
people from Adobe on some possible features for what was at the time called Flex Builder.
The timing was great because we had recently launched a pretty sophisticated Flex Web applica-
tion for a car manufacturer, and we had pushed Flex Builder and the Flex framework to its limits.
We were thrilled with an opportunity to present all of the issues we had to the team to hopefully
work on in the next version.
We sat in the room and dimmed the lights, and the team’s product manager, Steve Heintz, made a
clarification on the presentation. We weren’t going to see Flex Builder, but an entirely new concept
codenamed Thermo. As we watched the presentation, the team showed features for this mythical
application including:
l
Converting artwork into components without needing to go through the laborious skin-
ning workflow.
l
Editing designs in Illustrator within context of the Flex application.
l
Rigging interactions between components.
l
Capturing user interactions without needing to understand Flex.
l
Working with design-time data to build data lists and components.
l
And all this while writing MXML and ActionScript using the Flex framework behind the
scenes.
We were floored, but at the same time were very skeptical — an application like Thermo was
exactly what we needed for our recent project where we had a separate team of designers sending
over Photoshop files that had to be painstakingly processed and converted into Flex component
skins. The process was time consuming and frustrating. Thermo was promising to take the pain

out of that workflow, to have the designs and code be connected in an intelligent way, and to allow
the designers and developers to each do what they do best. It seemed too good to be true.
With Thermo still in our minds, we hopped on a plane for Chicago to attend Adobe MAX 2007. It
was my first MAX, and I was really excited to meet the product teams, evangelists, and community
to talk about Flex, Flash and Creative Suite. We were sitting near the front during the keynote and
then saw the public unveiling of Thermo.
Note
MAX is a developer’s conference hosted every year by Adobe.
vii
01_568156-ffirs.indd vii01_568156-ffirs.indd vii 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
viii
Foreword
“Wow. This is really going to happen,” I thought to myself, anxious and salivating for what Adobe
was demonstrating to the crowd. It was what everyone talked about the entire conference, and I
was proud to have been an early contributor to the product in that first meeting. I was also equally
excited when I was able to share that I just had been offered a job at Adobe as a product manager
for Creative Suite integration with — you guessed, it — Thermo.
Just as before, I was still skeptical, or at least cautiously optimistic about Thermo, the code name
for Flash Catalyst. It promised a lot, and there were big hurdles to overcome, but what struck me
about it was how much it was needed.
Before I came to Adobe, managing a team of designers and developers always brought out tons of
discussions on what was needed to make the RIA development process easier and more stream-
lined. It was an issue echoed by the rest of the industry. Flex, ActionScript, Flash — they are all
extremely powerful, but they weren’t for the timid. You needed to immerse yourself in complex
code in order to make significant progress in developing sophisticated applications.
Outside of my day job, I also teach at San Francisco State University. I conduct classes on Flash
Professional and ActionScript and also work with students as they build their interactive portfolios
to enter into the job market.
Seeing students that are new to Flash and interactive design was an eye-opening experience for me

when I saw first-hand that getting started is very difficult. So much of Flash is driven by ActionScript
and with the release of ActionScript 3.0, novice and intermediate coders were confused, baffled, and
frustrated. Designers that wanted to move beyond print, video pros that wanted to create interactive
portfolios, and Web professionals that needed to create exciting Web sites quickly were lost. As
Thermo evolved into Flash Catalyst, we worked hard to make it easy to create fun and engaging
interactive Web sites, without needing to know the complexities of ActionScript and programming.
Flash Catalyst is for anyone that has a desire to create amazing, interactive Web sites or applica-
tions. Regardless if you are an experienced interactive designer, expert ActionScript or Flex pro-
grammer, or someone new to interactive design with no coding skills, Flash Catalyst is where you
can take your existing skills in design and development and create interactivity like never before.
This book will help you discover all of the great capabilities of Flash Catalyst, as well as how to
successfully use it in your workflows with Creative Suite and Flash Builder to create great Web
sites and applications using the Adobe Flash Platform.
I would like to thank everyone on the Flash Catalyst team for all of their hard work, long hours,
and dedication to deliver a great product. Every person on the team makes me proud to be work-
ing on Flash Catalyst. In addition, I want to extend my thanks to the entire Creative Suite team for
their faith and dedication to creating a streamlined workflow with Illustrator, Photoshop,
Fireworks, and other Creative Suite tools.
I sincerely hope that you enjoy and have fun using Flash Catalyst as much as we had making it.
Doug Winnie
Principal Product Manager
Adobe Flash Catalyst and Flash Platform Workflow
01_568156-ffirs.indd viii01_568156-ffirs.indd viii 4/2/10 11:36 AM4/2/10 11:36 AM
www.it-ebooks.info
ix
S
cience-fiction author Arthur C. Clarke once wrote, “Any sufficiently advanced technology is
indistinguishable from magic.” Surely nothing quite fits that bill as well as the Web, which
will mark its 20th anniversary in 2010. It can be difficult to think of any other invention
throughout history that has changed the way in which we think, communicate, and learn as

quickly as has the Web.
When I was in college in the early 1990s, I was one of the few students in my residence hall with a
personal computer, and I had to apply to be one of the lucky few who had his computer connected
to the university’s network. I can clearly recall struggling through learning the archaic command
system to send even simple e-mails. Today, my seven-year-old daughter is as comfortable on a
computer as is her mother, and if not for her father’s insistence on taking a picture to commemo-
rate the event, would never remember sending her first e-mail to ask a family friend a survey ques-
tion for a homework assignment.
My first introduction to Flash came when I was an instructor at New Horizons Computer Learning
Center in Sacramento. I had been asked to learn it so that I could eventually start teaching it. That
was Flash 4, and even then, it was pretty cool: I had never imagined that it could be so easy to
draw a shape and get it to move across the screen.
At the time, however, I definitely considered myself more of a designer. ActionScript, even in its
fairly primitive 1.0 incarnation in Flash 4, was something to be feared and avoided if possible.
Several years later, when Macromedia first coined the term Rich Internet Application and began talk-
ing about moving Flash beyond animation and annoying banner ads and into the world of full-
featured application development, I was comfortable enough with ActionScript and the ideas
behind it that I was no longer intimidated. However, like almost everyone else who made a stab at
working with those early Flash applications, I was sorely disappointed by how difficult it was to
create them in Flash. Surely there had to be an easier way?
Macromedia realized that they had now effectively split the Flash community in two:
l
The designers on the one side continued to want to use the tool as it had been originally
intended and wanted to continue to create artwork and animation.
l
The developers desired ever-better scripting tools and ever-easier development environments.
To their credit, the folks at Macromedia realized fairly early on that one tool could never hope to
satisfy both groups, and thus was born Flex: Flash for developers. Like most software platforms,
Flex had some issues at first, but by the time Adobe released Flex 3, it was a mature application
development platform.

02_568156-fpref.indd ix02_568156-fpref.indd ix 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
Preface
Every year, Adobe hosts an annual developer’s conference called MAX. At MAX 2007, held in
Chicago, Adobe first showed the world an exciting new tool, at the time code named Thermo. I
wasn’t able to attend MAX that year, but I can clearly remember the almost-immediate buzz online
about Thermo. Like many others, I watched, over and over, shaking videos taken from the audience
of this cool new tool that would forever revolutionize the way Flex applications were designed.
It’s amazing, looking back over the two years since I first saw those quick glances of Thermo, how
far it has come. Now officially rebranded as Adobe Flash Catalyst CS5, the greater Flex community
can at last get their hands on it. I hope that everyone enjoys using it as much as I have.
Adobe sells almost all of their products these days as a part of a suite, and they like to stress how
the programs work together. While products like Dreamweaver and Flash Professional may work
better when used in conjunction with other programs, Catalyst is unique in that it really cannot be
used alone.
Your project designs need to be created in another application (such as Illustrator or Photoshop),
and the project needs to be finished somewhere else as well (such as Flash Builder). Therefore,
while this book seeks to be as complete a guide to Catalyst as is possible, you will likely find that
you need to rely on other resources as well to fill out your knowledge of the other programs you’ll
be using.
The Adobe Illustrator CS5 Bible, Adobe Photoshop CS5 Bible, and Adobe Fireworks CS5 Bible are each
excellent resources for those design tools. Likewise, the Flash Builder and Flex Bible will show you
what you need to know to finish your project in Flash Builder.
x
02_568156-fpref.indd x02_568156-fpref.indd x 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xi
S
ince becoming an author myself, I’ve started reading the acknowledgments in other books,
as I’m always curious to see who other authors take this space to thank. There are two over-

riding themes on which we all agree.
First, books, whether they be novels or technical guides, cannot happen without a dedicated team
of editors and staff at the publishing company. On each of my books, I have been fortunate to be
able to work with a fantastic team of professionals at Wiley, and this time was no exception.
Stephanie McComb first approached me to write this Bible and shepherded me through the early
stages of the book, and to her I am grateful. Once the writing got underway, Chris Wolfgang took
over as the project editor, and I can say without any hesitation at all that this would never have
come together without her hard work and dedication to the project. I need to particularly thank
her for her patience through some of the project’s more trying moments.
One particular challenge in writing a book on a brand-new product is finding someone with the
expertise to be the technical editor. When I was asked whom I thought might be a good choice,
one name came to mind immediately, so I am likewise grateful to TJ Downes for his help and dedi-
cation in finding and correcting my errors, as well as for his friendship.
The second theme I read from other authors and that I find holds true is that books cannot be written
without love and support from the author’s friends and family. I am very fortunate to have a loving and
most important, an understanding wife who is okay with me needing to write through weekends, and
likewise two beautiful kids who understand that sometimes daddy needs to work on Saturday.
The Flash Catalyst team at Adobe is an amazing group of people. Steve Heintz took time out of his
schedule to call and personally answer some questions about the product, and for that I am eter-
nally grateful. Ryan Stewart, Adam Cath, Andrew Shorten, Doug Winnie, and the rest of the team
have been patient with me, even when I bombard them on Monday morning with a weekend’s
worth of questions, and have provided invaluable insight. If Catalyst changes the way you work as
much as I think it will, these are the people to thank.
Richard Buikema at New Horizons was once an incredible boss; now, he’s a good friend, and I
need to thank him for opening up a classroom to give me a quiet place to write.
Brian and Laura Armstrong and Olen Sanders generously agreed to appear in pictures in the fake maga-
zines used in this book’s tutorials, and Jake Stroh provided useful insight on Fireworks; they all have my
deep appreciation. Leslie Gallagher continues to be one of the most fantastic friends anyone could have.
Finally, I need to thank Ruth De Jesus. Ruth graciously agreed to design the Magazines Direct site used
as the project in the book, and she did an amazing job. If you need design work, I can’t recommend

Ruth enough; contact her via her Web site at www.impetuswebdev.com or www.ruthdejesus.com.
03_568156-fbetw.indd xi03_568156-fbetw.indd xi 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xii
Foreword vii
Preface ix
Acknowledgments xi
Introduction xxvii
Quick Start: Dive Into Flash Catalyst CS5 1
Part I: Rich Internet Applications and the Flash Platform . . . . 27
Chapter 1: Understanding Rich Internet Applications 29
Chapter 2: Introducing Flash Catalyst 35
Chapter 3: Working with Other Applications 47
Part II: Designing the Application . . . . . . . . . . . . . . . . . . . . . 59
Chapter 4: Wireframing an Application in Flash Catalyst 61
Chapter 5: Creating an Application Comp in Illustrator 87
Chapter 6: Creating Assets in Photoshop 119
Chapter 7: Using Fireworks with Flash Catalyst 151
Part III: Creating the Application in Catalyst . . . . . . . . . . . . 175
Chapter 8: Converting Illustrator and Photoshop Artwork into Catalyst Projects 177
Chapter 9: Converting Artwork to Components 191
Chapter 10: Creating View States 211
Chapter 11: Adding Animation 225
Chapter 12: Working with Design-time Data 233
Chapter 13: Adding Multimedia 239
Part IV: Exporting Projects into Flash Builder 4. . . . . . . . . . . 251
Chapter 14: Flash Builder 4 and the Flex Framework 253
Chapter 15: Export a Flash Catalyst Project to Flash Builder 275
Chapter 16: Returning a Project to Flash Catalyst 293
Chapter 17: Exporting Catalyst Projects Directly to Flash Player 299

Chapter 18: Creating a Project for AIR 305
04_568156-ftoc.indd xii04_568156-ftoc.indd xii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
Part V: Build a Complete Project . . . . . . . . . . . . . . . . . . . . . 315
Chapter 19: Creating a Design Comp in Illustrator 317
Chapter 20: Importing the Design into Catalyst 371
Chapter 21: Importing Additional Artwork from Illustrator and Photoshop 389
Chapter 22: Converting Artwork to Components in Your Project 407
Chapter 23: Creating View States in Your Project 431
Chapter 24: Adding Data Lists 455
Chapter 25: Importing Your Project into Flash Builder 469
Chapter 26: Connecting Your Project to Live Data 489
Part VI: Appendixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519
Appendix A: Keyboard Shortcuts 521
Appendix B: Best Practices 529
Appendix C: What’s on the Book’s Web Site 535
Index 543
xiii
04_568156-ftoc.indd xiii04_568156-ftoc.indd xiii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
04_568156-ftoc.indd xiv04_568156-ftoc.indd xiv 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xv
Foreword .................................................vii
Preface...................................................ix
Acknowledgments ..........................................xi
Introduction .............................................xxvii
Quick Start: Dive Into Flash Catalyst CS5..........................1
Rich Internet Applications 2
The Flash Catalyst Workflow 3

Introducing Adobe Illustrator 4
Illustrator interface 5
Illustrator artboard 6
Illustrator tools 7
Importing into Illustrator 11
Using layers in Illustrator 12
Introducing Flash Catalyst 14
Importing an Illustrator file into Catalyst 15
Optimizing graphics 16
Creating components 18
View states 18
Interactions 19
Introducing Flash Builder 4 23
Summary 26
Part I: Rich Internet Applications and the Flash Platform 27
Chapter 1: Understanding Rich Internet Applications ............... 29
Moving Beyond HTML 29
A brief history of the Web 29
Dynamic HTML 30
Ajax 31
Understanding the Flash Platform 32
Flash platform overview 32
Flash Player 32
Adobe Integrated Runtime 33
04_568156-ftoc.indd xv04_568156-ftoc.indd xv 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
Contents
Flash Professional CS5 33
The Flex framework 33
Flash Builder 4 34

Summary 34
Chapter 2: Introducing Flash Catalyst ............................35
Catalyst Projects 36
The Flash Catalyst Interface 37
The Start screen 37
The main workspace 38
Design and Code workspaces 39
Design panels 40
Code panels 42
The Heads-up display 43
Customizing the workspace 44
Getting Help 46
Summary 46
Chapter 3: Working with Other Applications ...................... 47
Adobe Creative Suite 5 Design Tools 47
The CS5 Interface 48
Tools 50
Panels 51
Workspaces 53
Choosing Your Comp Tool 54
Vector versus raster graphics 54
Adobe Flash Builder 4 55
Summary 57
Part II: Designing the Application 59
Chapter 4: Wireframing an Application in Flash Catalyst ............. 61
Creating a New Wireframe Project 61
Using the Selection, Direct Select, Hand, and Zoom Tools 63
The Selection and Direct Select tools 63
The Hand and Zoom tools 64
Using the Drawing Tools 66

Draw rectangles, rounded rectangles, and squares 66
Set strokes and fills 67
Draw ellipses and circles 70
Drawing lines 71
Drawing other shapes 72
Adding text 73
Using the Transform Tool 74
xvi
04_568156-ftoc.indd xvi04_568156-ftoc.indd xvi 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xvii
Contents
Understanding Layers 75
Working with Blend Modes 79
Add Wireframe Components 81
Run a Project 83
Saving a Project 85
Summary 85
Chapter 5: Creating an Application Comp in Illustrator..............87
Create a New File in Illustrator 87
Choosing a print document or Flash Catalyst document 88
Choosing the file name and document size 89
Drawing in Illustrator 90
The Tools panel 90
Selection tools 91
Drawing tools 92
The Pen tool 92
Modifying paths 95
Combining straight and curve segments 95
Changing the direction of curves 97

Draw shapes 99
Precise shapes 100
Smart Guides and the Info tooltip 100
Painting 101
Erasing drawings 102
Modify Artwork 103
Revisiting the Direct Select tool 103
Work with color 104
Use gradients 107
Define a custom gradient 107
The Gradient tool 109
Transform objects 109
The Rotate tool 109
The Reflect tool 109
The Scale tool 110
The Shear tool 110
The Free Transform tool 110
Organize Art Work on Layers 110
Layers and sublayers 110
Add Text to Your Designs 113
Text tool 113
Area Text tool 114
Type on a Path tool 114
Apply Effects 114
Using Multiple Artboards 114
Best Practices when Using Illustrator with Catalyst 115
04_568156-ftoc.indd xvii04_568156-ftoc.indd xvii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xviii
Contents

Plan file structure 115
Follow a naming convention 116
Do not link to external files 116
Designate duplicated assets 116
Create outlines for text that use filters and effects 117
Create outlines for uncommon, rarely used fonts 117
Use the Blob brush 117
Rasterize Brushes 117
Summary 118
Chapter 6: Creating Assets in Photoshop ........................ 119
Opening Files in Photoshop 119
Viewing Images 121
Selecting Images 123
Rectangular and elliptical selections 123
Lasso tool 124
Polygon Lasso and Magnetic Lasso tools 125
Smart Selection and Magic Wand tools 126
Combining selection tools 127
Remove selections 128
Saving selections 129
Sizing and Cropping Images 130
Work with Layers 132
Copy selections to new layers 133
Delete layers 133
Selecting layers versus selecting layer contents 133
Layer opacity 134
Layer blend modes 134
Image Retouching 134
Color correction 134
Fixing highlights and shadows 136

Removing blemishes 137
Spot Healing Brush tool 137
Healing Brush tool 137
Patch tool 139
Red Eye Removal tool 140
Add Vector Shapes and Paths in Photoshop 140
Add Layer Styles 144
Add Text 145
Create embossed text 146
Create 3D Text 147
Summary 149
04_568156-ftoc.indd xviii04_568156-ftoc.indd xviii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xix
Contents
Chapter 7: Using Fireworks with Flash Catalyst ................... 151
Creating a New Fireworks File 152
Fireworks Tools and Panels 153
Tools 153
Panels 157
Working with Color 160
The Color Palette panel 161
Selector mode 161
Mixer mode 161
Blender mode 162
The Swatches panel 162
The Kuler panel 165
Add Text 165
Importing Bitmaps 166
Working with Filters 167

Saving Artwork as Symbols 169
Adding Prototype Objects 171
Exporting as FXG 173
Summary 174
Part III: Creating the Application in Catalyst 175
Chapter 8: Converting Illustrator and Photoshop Artwork into
Catalyst Projects ........................................... 177
Create a New Project from an Illustrator Comp 177
Create a New Project from a Photoshop File 180
Import Graphics into an Existing Project 183
Import images to the artboard 183
Importing multiple images 185
Using the Library panel 186
Round-Trip Editing with Illustrator 187
Create Optimized Graphics 188
Summary 189
Chapter 9: Converting Artwork to Components ................... 191
Convert Layers and Groups to Custom Components 193
Editing components 194
Nesting components 194
Naming components 195
Reusing components 195
Creating Buttons 196
Convert Artwork to a Toggle Button 198
Convert Artwork to a Text Field 199
Convert Artwork to Sliders 201
04_568156-ftoc.indd xix04_568156-ftoc.indd xix 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xx
Contents

Convert Artwork to Radio Buttons and Checkboxes 203
Convert Artwork to Scroll Panels and Data Lists 204
Data list properties 206
Design-time Data 206
Convert Artwork to a Scrollbar 207
Create a scrollbar 208
Associate a scrollbar with a scroll panel or data list 209
Summary 210
Chapter 10: Creating View States.............................. 211
Creating New View States 211
Changing Components in States 213
Removing or hiding components 214
Moving components 215
Applying component changes to states 215
Sharing components between states 217
Triggering State Changes with Interactions 217
Setting Up Transitions 220
Using Button States 223
Summary 224
Chapter 11: Adding Animation ................................ 225
Creating an Action Sequence 225
Working with the Timeline 226
Adding Actions 227
Properties panel 228
Set Component State 228
Set Property 229
Fade 230
Sound Effect 230
Move 231
Resize 231

Rotate 231
Rotate 3D 231
Set action timings 232
Summary 232
Chapter 12: Working with Design-time Data ..................... 233
Convert an Asset to a Data List 233
Selecting the data list parts 234
Designating the parts 235
Add Design-time Data 236
Summary 237
04_568156-ftoc.indd xx04_568156-ftoc.indd xx 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xxi
Contents
Chapter 13: Adding Multimedia............................... 239
Adding SWFs to Your Project 239
FLA versus SWF 240
Importing an SWF 241
Controlling an SWF through action sequences 242
Importing Video 243
Converting video to FLV 243
Importing video into Catalyst 244
Controlling a Video Player 245
Video player interactions 245
Playback controls 246
Video component properties 248
Importing and Playing Sound 249
Importing sound 249
Playing sound 249
Summary 250

Part IV: Exporting Projects into Flash Builder 4 251
Chapter 14: Flash Builder 4 and the Flex Framework ............... 253
The Flex Framework 253
MXML 253
ActionScript 3.0 254
Object-oriented programming 101 255
Classes 255
Objects 255
Properties 256
Methods 256
Packages 256
Dot notation 257
Flash Builder 4 257
Interface 258
Design and Source modes 259
Creating a Flex Project 260
Project folders 264
Understanding Flex 4 265
Main application file 265
Namespaces 266
Components 267
Running Projects 270
Debugging 271
Summary 274
04_568156-ftoc.indd xxi04_568156-ftoc.indd xxi 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xxii
Contents
Chapter 15: Exporting a Flash Catalyst Project to Flash Builder ....... 275
View the Project’s Code 275

Import the Project into Flash Builder 277
Run the Project from Flash Builder 279
Viewing Help on the Code 280
Viewing the Project in the Design Mode 282
Connecting a Project to Live Data 283
Summary 292
Chapter 16: Returning a Project to Flash Catalyst .................. 293
Flash Builder Projects in Flash Catalyst 293
Merging Projects 294
Using a Flash Catalyst Library Package to Manage Changes 295
Create an FXPL file 296
Import an FXPL into Flash Builder 296
Changing library items in Catalyst 297
Summary 298
Chapter 17: Exporting Catalyst Projects Directly to Flash Player ....... 299
Exporting a Project as a SWF 299
Font Embedding 302
Deploying the Project to the Web 302
Summary 304
Chapter 18: Creating a Project for AIR.......................... 305
Understanding AIR 305
Converting a Project to AIR 307
Completing an AIR Project 308
Installing an AIR Application 311
Deploying to AIR Directly from Catalyst 312
Summary 314
Part V: Build a Complete Project 315
Chapter 19: Creating a Design Comp in Illustrator ................. 317
Identifying the Design Requirements 317
Design the Application in Illustrator 318

Create a new file 318
Create the logo 322
Organize the logo’s layers 323
Position the logo 324
Create the category list 325
Add the floral element 325
Create the top navigation 327
04_568156-ftoc.indd xxii04_568156-ftoc.indd xxii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info
xxiii
Contents
Create the Search and Wish List boxes 327
Create the bottom navigation 329
Create the backgrounds for the bottom navigation 330
Create the main content area for the Home state 333
Create the featured section heading 334
Create the subscription form section 342
Add the first sidebar 352
Create the second sidebar 355
Draw the shopping cart 360
Optimizing the Project 364
Rasterize the shopping cart 364
Embed linked artwork 367
Summary 368
Chapter 20: Importing the Design into Catalyst................... 371
Creating a Catalyst Project from a Design Comp 371
Organizing Artwork 377
Rename layers 377
Create new layers 378
Creating new sublayers 379

Deleting layers 381
Removing unneeded groups 381
Moving, Rotating, and Resizing Artwork 382
Moving artwork 382
Rotating artwork 383
Resizing artwork 384
Convert Artwork to Optimized Graphics 385
Summary 387
Chapter 21: Importing Additional Artwork from Illustrator and
Photoshop ............................................... 389
Importing Additional Artwork from Illustrator 390
Importing Bitmap Artwork from Photoshop 393
Using Copy and Paste to Import Assets from Illustrator and Photoshop 398
Edit an Asset in Illustrator with Round-trip Editing 402
Summary 405
Chapter 22: Converting Artwork to Components in Your Project ..... 407
Creating Custom Components 407
Convert artwork to a custom component 408
Edit a custom component 410
Nest Components within Components 412
Convert Artwork to a Button 413
Create the button 413
Rename the button 415
04_568156-ftoc.indd xxiii04_568156-ftoc.indd xxiii 4/2/10 11:37 AM4/2/10 11:37 AM
www.it-ebooks.info