Foundation Flash Catalyst: [a complete guide to Adobe's new Flash Catalyst software ; covers all of the key features, tools, and workflows ; benefits both developers and designers using Flash Catalyst to build Uls for Flex applications]

249 Pages·2010·49.277 MB·English

by  Goralski, Greg;Leon, LordAlex

Foundation Flash
Catalyst
Greg Goralski
LordAlex Leon
Foundation Flash Catalyst
Copyright © 2010 by Gerg Goralski and 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-4302-2862-2
ISBN-13 (electronic): 978-1-4302-2863-9
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every
occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion and to
the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, service marks, and similar terms, even if they are not identified as such, is not to
be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
Distributed to the book trade worldwide by Springer Science+Business Media LLC., 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 e-mail [email protected] or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions
and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing
web page at www.apress.com/info/bulksales.
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.com in the Downloads section.
Credits
President and Publisher: Coordinating Editor:
Paul Manning Anita Castro
Lead Editor: Copy Editor:
Ben Renow-Clarke Tiffany Taylor
Technical Reviewer: Compositor:
Joshua Freeney Lynn L’Heureux
Editorial Board: Indexer:
Clay Andres, Steve Anglin, Brenda Miller
Mark Beckner, Ewan Buckingham,
Artist:
Gary Cornell, Jonathan Gennick,
April Milne
Jonathan Hassell, Michelle Lowman,
Matthew Moodie, Duncan Parkes, Cover Artist:
Jeffrey Pepper, Frank Pohlmann, Corné van Dooren
Douglas Pundick, Ben Renow-Clarke,
Dominic Shakeshaft, Cover Designer:
Matt Wade, Tom Welsh Anna Ishchenko
To my students: you are my source of insight, inspiration, and great new music.
Through your eyes, I get to rediscover and get excited about digital media every
September.
—Greg Goralski
I dedicate this book to my readers, friends, and family, especially my lovely wife
and daughter for their patience, support, and encouragement.
—LordAlex Leon
iii
Contents at a Glance
About the Authors...................................................................................................xiii
About the Technical Reviewers...............................................................................ix
About the the Cover Image Designer........................................................................x
Acknowledgments....................................................................................................xi
Chapter 1: Catalyst Interface.....................................................................................1
Chapter 2: Your First Flash Catalyst Project..........................................................27
Chapter 3: Wireframing in Catalyst.........................................................................57
Chapter 4: Animation in Catalyst............................................................................81
Chapter 5: Interactions.......................................................................................... 111
Chapter 6: Organizing Artwork and Best Practices............................................. 127
Chapter 7: Data Lists and Design-Time Data....................................................... 145
Chapter 8: SWFs, Video, and Audio...................................................................... 169
Chapter 9: Custom Components and Library Packages..................................... 191
Chapter 10: Catalyst to Flex Builder..................................................................... 205
Index....................................................................................................................... 241
iv
Contents
About the Authors...................................................................................................xiii
About the Technical Reviewers...............................................................................ix
About the the Cover Image Designer........................................................................x
Acknowledgments....................................................................................................xi
Chapter 1: Catalyst Interface.....................................................................................1
Introduction to Catalyst..................................................................................................................1
The Catalyst Interface....................................................................................................................3
Pages/States Panel........................................................................................................................3
Components and States............................................................................................................6
Tools................................................................................................................................................7
The Layers, Library, and Wireframe Components Panels..........................................................9
Layers..........................................................................................................................................9
Library Panel.............................................................................................................................11
Wireframe Components...........................................................................................................13
The Interactions Panel.................................................................................................................14
The Properties Panel...................................................................................................................16
The Timelines Panel....................................................................................................................19
The Design-Time Data Panel......................................................................................................21
The Stage......................................................................................................................................22
Heads-Up Display (HUD).............................................................................................................23
Code View.....................................................................................................................................24
Conclusion....................................................................................................................................25
Chapter 2: Your First Flash Catalyst Project..........................................................27
Creating a Catalyst Project from a Photoshop PSD File...........................................................29
Converting Photoshop Artwork into a Button.............................................................................32
Presenting Content.......................................................................................................................36
Organizing into States..................................................................................................................41
Building Interactivity.....................................................................................................................45
Adding Animation.........................................................................................................................46
Again, With More Control.........................................................................................................48
Creating Buttons with Transitions...............................................................................................49
Playing Sound...............................................................................................................................52
Conclusion....................................................................................................................................55
v
Contents
Chapter 3: Wireframing in Catalyst.........................................................................57
Sketching, Wireframing, and Prototyping Interactivity...............................................................58
Starting the Project.......................................................................................................................60
Adding Motion to the Wireframe..................................................................................................76
Conclusion....................................................................................................................................79
Chapter 4: Animation in Catalyst............................................................................81
Animating Buttons........................................................................................................................82
Animating Across States..............................................................................................................93
3D Flip: Adding Actions to the Animations.................................................................................98
Controlling the Flip.....................................................................................................................104
Action Sequences......................................................................................................................106
Conclusion..................................................................................................................................109
Chapter 5: Interactions.......................................................................................... 111
Changing States.........................................................................................................................112
Triggering Action Sequences....................................................................................................118
Controlling Video........................................................................................................................121
Go To URL..................................................................................................................................122
Interactions on the Application..................................................................................................122
Conclusion..................................................................................................................................125
Chapter 6: Organizing Artwork and Best Practices............................................. 127
The Golden Rule........................................................................................................................127
Organizing Assets in Fireworks.................................................................................................131
Organizing Assets in Illustrator..................................................................................................132
Organizing Assets in Photoshop...............................................................................................133
Using Multiple Instances of the Same Object..........................................................................134
Defining Data List Components.................................................................................................134
Optimizing Graphics...................................................................................................................135
Round-Tripping...........................................................................................................................138
Conclusion..................................................................................................................................143
Chapter 7: Data Lists and Design-Time Data....................................................... 145
Setting Up the Project................................................................................................................147
Creating the Item to Be Repeated.............................................................................................148
Converting an Item into a Data List...........................................................................................150
vi
Creating Transitions on the Repeated Item..............................................................................157
Using Design-Time Data............................................................................................................161
Adding a Horizontal Scrollbar................................................................................................166
Conclusion..................................................................................................................................167
Chapter 8: SWFs, Video, and Audio...................................................................... 169
A Quick Look at the Project.......................................................................................................170
Adding Simple Animation SWFs...............................................................................................172
Controlling SWFs........................................................................................................................176
Adding Audio Effects..................................................................................................................182
Adding Video..............................................................................................................................186
Conclusion..................................................................................................................................189
Chapter 9: Custom Components and Library Packages..................................... 191
Creating a Generic Component.................................................................................................192
Creating a Custom Component.................................................................................................194
Adding Interactions................................................................................................................199
Adding Animation...................................................................................................................203
Library Packages........................................................................................................................203
Conclusion..................................................................................................................................204
Chapter 10: Catalyst to Flex Builder..................................................................... 205
Creating the Interaction in Catalyst...........................................................................................210
Adding a Custom Vertical Scrollbar..........................................................................................215
Adding the States.......................................................................................................................219
Adding Interactions.....................................................................................................................221
Connecting the Application to Data in Flash Builder................................................................222
Conclusion..................................................................................................................................238
Index....................................................................................................................... 241
vii
About the Authors
As a professor of interactive media at Humber College, I get to spend my
time training and being inspired by the next generation of interactive
designers and developers. Over the past few years, I’ve co-developed
IN_situ, an award-winning interactive architectural visualization tool, co-
authored the book Flex for Designers, and represented Canada as a
speaker at Expo in Nagoya Japan on the subject of interactive media
innovation. I am honored to hold the National Post Design Exchange Gold
Award in the Digital category.
More recently, I added an MBA to my tool set and have been undertaking
a critical examination of the business side of our innovative and creative
industry.
Greg Goralski

I am a creative technologist specializing in the Flash Platform, an
entrepreneur, an author, a blogger, a speaker, an active member of the
Flash Platform Community, a geek, and a big fan of science fiction. As
founder and chief evangelist forLordAlex Works (LAW), with over 10+
years of experience creating content and compelling user experiences
for the internet and devices, I help companies and organizations to plan,
execute, and launch their ideas into reality.
I co-authored Flex for Designers and Foundation Adobe Flash Catalyst,
aiming at helping designers and developers work together, create great visual experiences, and create
compelling applications, prototypes, and interactions using the Flash Platform. As a blogger since 2002,
I’ve shared my passion and experiences for the Web with thousands of people. I’ve earned multiple
mentions in Internet articles and most recently was mentioned as one the top 50 Flash developers to
follow on Twitter.
I am an Adobe Community Professional as well as the Adobe user group manager in Montreal, the largest
billingual Adobe UG (swfMontreal) in Quebec. I also like foreign languages: I am fluent in English, French,
and Spanish and am currently learning Russian and Japanese.
LordAlex Leon

viii
About the Technical Reviewers
Josh Freeney is currently a partner in a new Michigan-based
interactive firm called YETi CGI. His focus at YETi is getting high-quality
Flash content and infrastructure in place to serve both business and
entertainment applications. He is also an instructor for the Digital
Animation and Game Design program at Ferris State University in Grand
Rapids, Michigan. Josh teaches Flash game development classes
focused on rapid agile production with maximum reusability. He likes
board games, camping, sleeping in, and anything LEGO.
Louis DiCarro is a long-time developer for the Internet and has been working with Flash since version 1.
He has taught Flash and ActionScript at several college-level schools for a number of years and is
currently a consultant in New York City. In addition to ActionScript developement, he also works in front-
and back-end development and likes to play on servers. He is a regular contributor for Flash and Flex
Developer magazine. Robots of all sorts give him the warm fuzzies.
ix