Flash^® Catalyst^™ CS5 Bible

Flash^® Catalyst™ CS5 Bible

Rob Huddleston

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 http://www.wiley.com/go/permissions.

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.

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 blueprint™ 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.

For Kelley, Jessica and Xander. I love you more than I can say.

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

Marilyn Hummel

Doug Kuhn

Shawn Patrick

Foreword

In October of 2007, I was sitting in a conference room with members of my team at the interactive 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 application 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:

• Converting artwork into components without needing to go through the laborious skinning workflow.

• Editing designs in Illustrator within context of the Flex application.

• Rigging interactions between components.

• Capturing user interactions without needing to understand Flex.

• Working with design-time data to build data lists and components.

• 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.

“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 streamlined. 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 applications. Regardless if you are an experienced interactive designer, expert ActionScript or Flex programmer, 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 working 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

Preface

Science-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 commemorate the event, would never remember sending her first e-mail to ask a family friend a survey question 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 talking 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:

• 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.

• 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.

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.

Acknowledgments

Since 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 overriding 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 dedication 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 eternally 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 magazines 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. 

Introduction

Creating beautiful graphic designs and user interfaces is an obviously creative pursuit that combines a large degree of both natural talent and learned skills. Writing code, however, is every bit as creative a process as design. There is no one right way to write code.

Design and coding, however, require quite different skillsets and talents, and while there are some whose talent at design matches their talent at code, most find they excel at one or the other.

Flash Catalyst CS5 seeks to bridge the gap between the two, providing a means by which designers can utilize their skills in Illustrator and Photoshop to create rich designs, but avoid having to get deeply into what they likely consider the fairly intimidating world of writing code. Catalyst also provides a means by which coders who may not be great at design — who likely consider Illustrator to be every bit as intimidating as their design counterparts think of Flash Builder — can take the designs created by others and implement them in their projects.

Flash Catalyst CS5 is the first version of this product. Many, if not most, people today are used to working in programs that have been around for years, if not decades. They are used to finding a lot of people who have a deep understanding of the program and what it can do, and used to finding many resources available for it. As the new kid in the Adobe product line, Catalyst does not yet have that user base or the number of resources available as of yet.

You are getting in on the ground floor of this exciting new product.

Who the Book Is For

Flash Catalyst CS5 is a product designed for people with little or no skill or desire to write code. It is aimed at designers — those people who love and use Illustrator and Photoshop — and provides them with a means by which they can create user interfaces for Rich Internet Applications without needing to know or learn code or the Flex framework. This book is targeted at precisely the same audience.

Catalyst does not let you edit code, so you will not find page after page of code samples here. Rather, Catalyst allows you to draw shapes, import images, add animation, and work with sound and video. This book, therefore, includes chapters on drawing shapes, importing images, adding animation, and working with sound and video.

How the Book Is Organized

This book is organized into six main parts:

• Part I: Rich Internet Applications and the Flash Platform

• Part II: Designing the Application

• Part III: Creating the Application in Catalyst

• Part IV: Exporting Projects into Flash Builder 4

• Part V: Build a Complete Project

• Part VI: Appendixes

In Part I, you'll find chapters that start you off right by letting you know what a Rich Internet Application is, why the Flex Framework was created, and how Catalyst fits in to the big picture. This part also discusses the other applications which you'll need in order to create Catalyst projects.

Part II gets you started in designing projects. Chapter 4 shows how you can use the drawing tools provided in Catalyst to create basic wireframes of applications, while Chapters 5, 6, and 7 take provide introductions to Adobe Illustrator, Adobe Photoshop, and Adobe Fireworks and show you how to use these programs to create the initial assets you will use in your Catalyst project.

Part III pulls those design assets together. In Chapter 8, you will learn how to import designs created in Photoshop and Illustrator into Catalyst. In Chapter 9, you begin converting those imported assets into components, the building blocks of Flex projects. Chapter 10 shows how to create view states, the pages that make up a complete Rich Internet Application, while Chapter 11 shows how you can leverage the fact that your project will ultimately end up in Flash Player to add animation. Chapter 12 teaches how to add sample data to your project, and Chapter 13 discusses adding Flash movies, sound, and video.

Part IV switches gears and moves into Flash Builder to show you how to complete the project. Chapter 14 introduces Flash Builder and the Flex framework, while Chapter 15 shows how to move the project from Catalyst to Builder. Chapter 16 shows how to return the project to Catalyst for further design work, and Chapter 17 discusses other export options. Chapter 18 introduces you to AIR, the Adobe Integrated Runtime, which allows you to use Catalyst as a part of a design process for creating desktop applications.

Part V provides a step-by-step tutorial for creating a complete project, from start to finish. Its chapters take you from creating the initial design in Illustrator to the completed project in Flash Builder, with detailed instructions and illustrations for each step along the way.

The files needed to follow along in each chapter, including Illustrator and Photoshop design files and Catalyst and Flash Builder Projects are included on the books Web site (www.wiley.com/flashcatalystbible). Completed versions of the project are also included so that you can see where you are going while you work.