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 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. 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 [...]... 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. .. www.it-ebooks.info IN THIS CHAPTER Rich Internet applications Using Catalyst with other applications Introducing Adobe Illustrator CS5 Introducing Flash Catalyst CS5 Introducing Flash Builder 4 Quick Start: Dive Into Flash Catalyst CS5 Rich Internet Applications In 2002, software company Macromedia released new versions of its core design tools: l Dreamweaver l Flash l Fireworks These latest versions of the programs... Understanding the Flash Platform .32 Flash platform overview 32 Flash Player .32 Adobe Integrated Runtime .33 xv 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. .. (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. .. 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... chapter, including Illustrator and Photoshop design files and Catalyst and Flash Builder Projects are included on the books Web site (www.wiley.com/ go/flashcatalystbible) Completed versions of the project are also included so that you can see where you are going while you work xxviii www.it-ebooks.info CHAPTER Dive Into Flash Catalyst CS5 M ost popular software used by professionals today has been... 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 ... Adobe marketing has decided to brand this new application as Flash Catalyst CS5, you should remember that it is in fact Flash Catalyst 1.0 While Catalyst will, in time, enjoy the same user base as more, shall we say, mature software, today you are no more or less an expert in the program than practically anyone else who is using it By learning Catalyst now, you are truly getting in on the ground floor,... 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. .. www.it-ebooks.info Quick Start: Dive Into Flash Catalyst CS5 Why not Fireworks? Adobe’s third primary design tool, Fireworks, provides many of the same tools for creating comps as Illustrator However, for technical reasons, Adobe was unable to provide the same importing and editing capabilities between Catalyst and Fireworks in this release as it did between Catalyst and Illustrator In CS5, you can still import Fireworks-created . 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. 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. 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