Foundation Flex for designers: [build custom-styled Flex and AIR applications ; add life to rich Internet applicatons through animated transitions and effects ; integrate Flex with Flash, Photoshop, Illustrator, and Fireworks]

279 Pages·2008·20.359 MB·English

by  Goralski, Greg;Leon, LordAlex

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 [phone], 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 [phone], fax [phone], 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