Foundation Flex for Designers Greg Goralski LordAlex Leon Foundation Flex for Designers Copyright © 2008 by Greg Goralski, LordAlex Leon All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-877-1 ISBN-10 (pbk): 1-59059-877-6 ISBN-13 (electronic): 978-1-4302-0434-3 ISBN-10 (electronic): 1-4302-0434-6 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner,with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail [email protected],or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail [email protected],or visit www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. The source code for this book is freely available to readers at www.friendsofed.comin the Downloads section. Credits Lead Editors Production Editor Chris Mills, Ben Renow-Clarke Ellie Fountain Technical Reviewer Compositor Mike Jones Lynn L'Heureux Editorial Board Proofreader Steve Anglin, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan April Eddy Gennick, Jason Gilmore, Kevin Goff, Jonathan Hassell, Matthew Moodie, Joseph Ottinger, Jeffrey Pepper, Ben Renow-Clarke, Dominic Shakeshaft, Indexer Matt Wade, Tom Welsh Brenda Miller Project Manager Cover Image Designer Beth Christmas Corné van Dooren Copy Editor Interior and Cover Designer Liz Welch Kurt Krames Associate Production Director Manufacturing Director Kari Brooks-Copony Tom Debolski Dedicated to Martha Ladly; you teach by example more than you know. By watching you, I have become a better educator and designer. Many thanks. Greg Goralski To my wife Michael Rossana, who has always been there for me, lending all her unconditional love and support, now mother of my daughter Lady Mia, who was born while I was creating this book. To Abuelita, for teaching me to always stay on the path in pursuit of being the best I can be. To my mother Yvania and father Alexis, for always believing in me and giving me such a cool name. To my family and close friends, whom I value the most, for I believe there is no greater treasure. LordAlex Leon CONTENTS AT A GLANCE About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii About the Cover Image Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Chapter 1 Introducing Flex and Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3 Chapter 2 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Chapter 3 Working with States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Chapter 4 Flex and Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Chapter 5 Flex with Photoshop and Illustrator . . . . . . . . . . . . . . . . . . . 91 Chapter 6 Flex Builder and Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Chapter 7 ActionScript in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Chapter 8 Flex Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Chapter 9 Flex Video Gallery with Drag-and-Drop. . . . . . . . . . . . . . . . 177 Chapter 10 Exploring Flex Charting. . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Chapter 11 Creating Forms: The “Will Flex for Food” Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Chapter 12 Flex and AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 v CONTENTS About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii About the Cover Image Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Chapter 1 Introducing Flex and Flex Builder 3. . . . . . . . . . . . . . . . . . . . . 3 Rich Internet applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Creating your first project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 The Flex Builder 3 interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Afirst look at Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Flex fluid layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Displaying content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Pulling in web feeds to Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Sources of feeds and limitations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Formatting the feed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Chapter 2 Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Using styling in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 The Flex Style Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Playing with button styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 CSS in the Style Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Styling panels, text areas, and text inputs . . . . . . . . . . . . . . . . . . . . . . . . . 32 Styling the whole application at once . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Getting the style back into our applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Amore subtle design. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 vii CONTENTS Chapter 3 Working with States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Building a personal website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Setting up the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Building the base state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Creating a new state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Styling the project. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Chapter 4 Flex and Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Creating a Flex layout in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Importing and manipulating images in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . 73 Organizing Flex Components in Fireworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Using Fireworks to align and refine a layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Modifying the images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Bringing the layout into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Chapter 5 Flex with Photoshop and Illustrator . . . . . . . . . . . . . . . . . . . 91 Anatomy of a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Building skins in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Connecting Photoshop skins. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Scale 9 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Using the CSS Design view . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Skinning Flex components in Illustrator using SWF files. . . . . . . . . . . . . . . . . . . . . 104 Importing the Illustrator skins into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . 110 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Chapter 6 Flex Builder and Flash. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Setting up to integrate Flash and Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Creating Flex skins in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Adding animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Bringing in a texture for a Panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Going from Flash to Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Importing Flash animations into Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Integrating Flash and Flex in a deeper way. . . . . . . . . . . . . . . . . . . . . . . . . . 129 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Chapter 7 ActionScript in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 What is object-oriented programming?. . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 What is ActionScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 What is MXML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Some key ActionScript concepts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Understanding packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Classes and objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 viii CONTENTS Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Access modifiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Variables arrays and collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Accessing external data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 E4X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 SWFLoader. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 ActionScript and MXML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Importing ActionScript classes into Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Maintaining your code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Controlling flow with events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Binding data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Chapter 8 Flex Photo Gallery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Starting off. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Building the Thumbnails panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 The Tile component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Proper alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Bringing in the XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Getting the computer to do the work: repeaters. . . . . . . . . . . . . . . . . . . . . . . 166 Creating the View panel. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Connecting the Thumbnails and View panels. . . . . . . . . . . . . . . . . . . . . . . . . 170 Adding some sizzle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Finishing touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Chapter 9 Flex Video Gallery with Drag-and-Drop. . . . . . . . . . . . . . . . 177 Drag-and-drop in Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Drag-and-drop with List controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Manually adding drag-and-drop support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Altering the file to work with video. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Writing the drag-and-drop functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Chapter 10 Exploring Flex Charting. . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Importing a project into Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Alook at the ActionScript involved . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Building the layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Adding the DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Creating a column chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Controlling the visual appearance of a chart through CSS . . . . . . . . . . . . . . . 206 Creating a line chart with animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Creating a pie chart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Adding a second set of data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 ix CONTENTS Chapter 11 Creating Forms: The “Will Flex for Food” Registration Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Getting started. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Adding the Accordion component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Adding panes to the Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Adding content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Adding combo boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Working with validation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Passwords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Filling the Final Thoughts pane. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Styling your Accordion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Chapter 12 Flex and AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Creating a new AIR application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Building the Media Center layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 The ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Connecting FileSystemTree to functions . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Adding the remaining components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Adding CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Exporting an AIR package. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Controlling the application window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Getting rid of the box. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Re-creating the functionality. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Adding the drag functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 x ABOUT THE AUTHORS Greg Goralski is an interdisciplinary interactive designer based in Toronto. He is an alumni of the Canadian Film Centre Media Lab and the Interactive Project Lab. He has won Gold at the National Post Design Exchange awards and has presented his work at numerous festivals, including the World Expo in Aichi, Japan. As a professor at the Humber College School of Media Studies, he divides his time among playing with technology, training the next generation of interactive designers, and being inspired by his students. Greg also drinks too much coffee, and should really be living on a beach. His website is www. greggoralski.com. LordAlex Leon is an active member of the Flash community and a well- respected industry leader with over 7 years of experience creating content and applications for the Internet and devices. He is the founder of LordAlex Works™ (LAW), a Flash platform consultancy firm based in Montreal, Quebec, Canada, helping new media and content providers deliver intelli- gent, rich Internet content and powerful applications based on the Flash platform. LordAlex runs a personal blog dedicated to the Flash platform and related technologies that you can read at www.lordalex.org. You can find LordAlex in his spare time writing tutorials in English, French, and Spanish or speak- ing at international events and conferences. LordAlex also runs the local official Montreal Adobe User Group, the largest AUG in the province of Quebec. xi