Flash Catalyst CS5 Bible E-Book

Rob Huddleston

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Serie: Bible
• Sprache: Englisch
• Veröffentlichungsjahr: 2010

Seitenzahl: 481

Beschreibung

Learn to use the new Flash Catalyst to create rich InternetapplicationsAdobe Flash Catalyst enables you to take designs from Photoshopand Illustrator and convert them into rich Flash-basedapplications--without writing or even understanding one lineof code. It may sound too good to be true, but this helpfulreference shows you how to leverage the Flash skills you alreadyhave in order to convert your ideas into functioning applications.You'll explore everything from the basics of the Flexframework to using Flash Builder to complete conversion of anapplication.* Shows you how to use the eagerly anticipated Flash Catalyst toconvert assets from Illustrator and Photoshop directly into Flexcomponents without ever needing to write code* Reviews the basics of the Flex framework and rich Internetapplications* Demonstrates how to import comps and assets into Flash Builderin order to create an applicationConvert your ideas from design into functioningapplications--and avoid writing complex code--with thisauthoritative resource.

Leseprobe

Flash® Catalyst™ CS5 Bible

Table of Contents

Quick Start: Dive Into Flash Catalyst CS5

Rich Internet Applications

The Flash Catalyst Workflow

Introducing Adobe Illustrator

Illustrator interface

Illustrator artboard

Illustrator tools

Importing into Illustrator

Using layers in Illustrator

Introducing Flash Catalyst

Importing an Illustrator file into Catalyst

Optimizing graphics

Creating components

View states

Interactions

Introducing Flash Builder 4

Summary

Part I: Rich Internet Applications and the Flash Platform

Chapter 1: Understanding Rich Internet Applications

Moving Beyond HTML

A brief history of the Web

Dynamic HTML

Ajax

Understanding the Flash Platform

Flash platform overview

Summary

Chapter 2: Introducing Flash Catalyst

Catalyst Projects

The Flash Catalyst Interface

The Start screen

The main workspace

Design and Code workspaces

The Heads-up display

Customizing the workspace

Getting Help

Summary

Chapter 3: Working with Other Applications

Adobe Creative Suite 5 Design Tools

The CS5 Interface

Tools

Panels

Workspaces

Choosing Your Comp Tool

Vector versus raster graphics

Adobe Flash Builder 4

Summary

Part II: Designing the Application

Chapter 4: Wireframing an Application in Flash Catalyst

Creating a New Wireframe Project

Using the Selection, Direct Select, Hand, and Zoom Tools

The Selection and Direct Select tools

The Hand and Zoom tools

Using the Drawing Tools

Draw rectangles, rounded rectangles, and squares

Set strokes and fills

Draw ellipses and circles

Drawing lines

Drawing other shapes

Adding text

Using the Transform Tool

Understanding Layers

Working with Blend Modes

Add Wireframe Components

Run a Project

Saving a Project

Summary

Chapter 5: Creating an Application Comp in Illustrator

Create a New File in Illustrator

Choosing a print document or Flash Catalyst document

Choosing the file name and document size

Drawing in Illustrator

The Tools panel

Selection tools

Drawing tools

Modify Artwork

Revisiting the Direct Select tool

Work with color

Use gradients

Transform objects

Organize Art Work on Layers

Layers and sublayers

Add Text to Your Designs

Text tool

Area Text tool

Type on a Path tool

Apply Effects

Using Multiple Artboards

Best Practices when Using Illustrator with Catalyst

Plan file structure

Follow a naming convention

Do not link to external files

Designate duplicated assets

Create outlines for text that use filters and effects

Create outlines for uncommon, rarely used fonts

Use the Blob brush

Rasterize Brushes

Summary

Chapter 6: Creating Assets in Photoshop

Opening Files in Photoshop

Viewing Images

Selecting Images

Rectangular and elliptical selections

Lasso tool

Polygon Lasso and Magnetic Lasso tools

Smart Selection and Magic Wand tools

Combining selection tools

Remove selections

Saving selections

Sizing and Cropping Images

Work with Layers

Copy selections to new layers

Delete layers

Selecting layers versus selecting layer contents

Layer opacity

Layer blend modes

Image Retouching

Color correction

Fixing highlights and shadows

Removing blemishes

Add Vector Shapes and Paths in Photoshop

Add Layer Styles

Add Text

Create embossed text

Create 3D Text

Summary

Chapter 7: Using Fireworks with Flash Catalyst

Creating a New Fireworks File

Fireworks Tools and Panels

Tools

Panels

Working with Color

The Color Palette panel

The Swatches panel

The Kuler panel

Add Text

Importing Bitmaps

Working with Filters

Saving Artwork as Symbols

Adding Prototype Objects

Exporting as FXG

Summary

Part III: Creating the Application in Catalyst

Chapter 8: Converting Illustrator and Photoshop Artwork into Catalyst Projects

Create a New Project from an Illustrator Comp

Create a New Project from a Photoshop File

Import Graphics into an Existing Project

Import images to the artboard

Importing multiple images

Using the Library panel

Round-Trip Editing with Illustrator

Create Optimized Graphics

Summary

Chapter 9: Converting Artwork to Components

Convert Layers and Groups to Custom Components

Editing components

Nesting components

Naming components

Reusing components

Creating Buttons

Convert Artwork to a Toggle Button

Convert Artwork to a Text Field

Convert Artwork to Sliders

Convert Artwork to Radio Buttons and Checkboxes

Convert Artwork to Scroll Panels and Data Lists

Data list properties

Design-time Data

Convert Artwork to a Scrollbar

Create a scrollbar

Associate a scrollbar with a scroll panel or data list

Summary

Chapter 10: Creating View States

Creating New View States

Changing Components in States

Removing or hiding components

Moving components

Applying component changes to states

Sharing components between states

Triggering State Changes with Interactions

Setting Up Transitions

Using Button States

Summary

Chapter 11: Adding Animation

Creating an Action Sequence

Working with the Timeline

Adding Actions

Properties panel

Set Component State

Set Property

Fade

Sound Effect

Move

Resize

Rotate

Rotate 3D

Set action timings

Summary

Chapter 12: Working with Design-time Data

Convert an Asset to a Data List

Selecting the data list parts

Designating the parts

Add Design-time Data

Summary

Chapter 13: Adding Multimedia

Adding SWFs to Your Project

FLA versus SWF

Importing an SWF

Controlling an SWF through action sequences

Importing Video

Converting video to FLV

Importing video into Catalyst

Controlling a Video Player

Video player interactions

Playback controls

Video component properties

Importing and Playing Sound

Importing sound

Playing sound

Summary

Part IV: Exporting Projects into Flash Builder 4

Chapter 14: Flash Builder 4 and the Flex Framework

The Flex Framework

MXML

ActionScript 3.0

Object-oriented programming 101

Flash Builder 4

Interface

Design and Source modes

Creating a Flex Project

Project folders

Understanding Flex 4

Main application file

Namespaces

Components

Running Projects

Debugging

Summary

Chapter 15: Exporting a Flash Catalyst Project to Flash Builder

View the Project's Code

Import the Project into Flash Builder

Run the Project from Flash Builder

Viewing Help on the Code

Viewing the Project in the Design Mode

Connecting a Project to Live Data

Summary

Chapter 16: Returning a Project to Flash Catalyst

Flash Builder Projects in Flash Catalyst

Merging Projects

Using a Flash Catalyst Library Package to Manage Changes

Create an FXPL file

Import an FXPL into Flash Builder

Changing library items in Catalyst

Summary

Chapter 17: Exporting Catalyst Projects Directly to Flash Player

Exporting a Project as a SWF

Font Embedding

Deploying the Project to the Web

Summary

Chapter 18: Creating a Project for AIR

Understanding AIR

Converting a Project to AIR

Completing an AIR Project

Installing an AIR Application

Deploying to AIR Directly from Catalyst

Summary

Part V: Build a Complete Project

Chapter 19: Creating a Design Comp in Illustrator

Identifying the Design Requirements

Design the Application in Illustrator

Create a new file

Create the logo

Organize the logo's layers

Position the logo

Create the category list

Add the floral element

Create the top navigation

Create the Search and Wish List boxes

Create the bottom navigation

Create the backgrounds for the bottom navigation

Create the main content area for the Home state

Add the first sidebar

Create the second sidebar

Draw the shopping cart

Optimizing the Project

Rasterize the shopping cart

Embed linked artwork

Summary

Chapter 20: Importing the Design into Catalyst

Creating a Catalyst Project from a Design Comp

Organizing Artwork

Rename layers

Create new layers

Creating new sublayers

Deleting layers

Removing unneeded groups

Moving, Rotating, and Resizing Artwork

Moving artwork

Rotating artwork

Resizing artwork

Convert Artwork to Optimized Graphics

Summary

Chapter 21: Importing Additional Artwork from Illustrator and Photoshop

Importing Additional Artwork from Illustrator

Importing Bitmap Artwork from Photoshop

Using Copy and Paste to Import Assets from Illustrator and Photoshop

Edit an Asset in Illustrator with Round-trip Editing

Summary

Chapter 22: Converting Artwork to Components in Your Projects

Creating Custom Components

Convert artwork to a custom component

Edit a custom component

Nest Components within Components

Convert Artwork to a Button

Create the button

Rename the button

Create Check Boxes and Radio Buttons

Create check boxes

Create radio buttons

Defining a radio button group

Convert Artwork to a Text Input Field

Configure the component

Reuse components

Convert Artwork to a Scrollbar

Create the scroll bar

Configure the scroll bar

Summary

Chapter 23: Creating View States in Your Project

Creating States in the Main Application

Modify the Contents of a State

Create New States within a Component

Components with Built-in View States

Trigger View State Changes with Buttons

Create the interaction

Test the interaction

Animating State Change Transitions

Changing the timing of effects

Applying other effects

Summary

Chapter 24: Adding Data Lists

Convert Artwork to a Data List

Configuring the Data List's Parts

Configuring the Repeating Item's Appearance

Set Up Design-time Data

Summary

Chapter 25: Importing Your Project into Flash Builder

Beginning the Import Process

Running a Project in Flash Builder

Merging Changes from Catalyst into Flash Builder

Summary

Chapter 26: Connecting Your Project to Live Data

Setting Up a Local Testing Server

Download and install ColdFusion

Configuring the database

Changing the Project Type

Set up the project

Configuring the return data

Binding the Data to the Visual Component

Summary

Part VI: Appendixes

Appendix A: Keyboard Shortcuts

Appendix B: Best Practices

The Web is not print

Design for interactivity

Do not overuse interactivity

Stay organized

Gain an understanding of Flash Builder and the Flex framework

Communicate

Gain an understanding of Illustrator and Photoshop

Plan ahead

Do not change skins in Flash Builder

Communicate

Do things in the right order

Think about using components

Changes apply only to single states

Preview the project at regular intervals

Appendix C: What's on the Book's Web Site

Flash® Catalyst™ CS5 Bible

Rob Huddleston

Flash® Catalyst™ CS5 Bible

Published by Wiley Publishing, Inc.10475 Crosspoint Boulevard Indianapolis, IN 46256www.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, [phone], fax [phone]. 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 [phone], 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 [phone], outside the U.S. at [phone] or fax [phone].

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.

Quick Start: Dive Into Flash Catalyst CS5

IN THIS CHAPTER

Rich Internet applicationsUsing Catalyst with other applicationsIntroducing Adobe Illustrator CS5Introducing Flash Catalyst CS5Introducing Flash Builder 4

Most popular software used by professionals today has been around for a long time. Office workers spend large parts of their days using Microsoft Word, Excel, and PowerPoint. Those applications were introduced more than a quarter-century ago between 1983 and 1985.

Graphic designers may spend their days using Adobe Illustrator, which was developed in 1987, and Adobe Photoshop, which celebrated its 20th anniversary in a gala event in San Francisco in February, 2010. Even the Web, considered by many to still be new, will be about 20 years old by the time you read this, having been first developed in 1990.

Thus, while users may feel that they are constantly playing catch-up with a seemingly endless string of new versions, rarely do they have the opportunity to work with a brand-new application. If you are reading this book, however, that is precisely what you are contemplating: working with a never-before-seen application.

Using mature products that have existed since before many people began using computers, and in fact since before some of today's users were even born, has advantages, chief among them a strong base of experts who can teach and guide users through the program.

While 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, a rare opportunity for many in today's software environment.

Rich Internet Applications

In 2002, software company Macromedia released new versions of its core design tools:

• Dreamweaver

• Flash

• Fireworks

These latest versions of the programs were designed to work together to create a new paradigm in Web design, which the company termed Rich Internet Applications, or RIAs.

The development of the Web is credited to a physicist named Tim Berners-Lee. He did not develop it with the idea of creating a tool by which companies could sell books or friends could reconnect with high school acquaintances. Rather, he was building a system for his fellow physicists that would allow them to more easily exchange research data.

This original Web, therefore, did not focus on design or interactivity. Under Berners-Lee's vision, the presentation of Web pages would be left largely to the software used to display these pages, software that we would eventually come to know as browsers.

Berners-Lee knew that his creation had widespread potential, well beyond the insular world of particle physics, and yet he also knew that a closed or proprietary system would be unlikely to succeed, so he opened his technology to anyone who wanted to develop on it. Over the course of the next few years, the Web grew fairly quickly out of its infancy until in 1994 and 1995, companies began to realize the enormous marketing potential offered by the Web.

Yet, despite, or perhaps because of its open nature and extremely quick adoption, the Web still suffered from its original lack of true design capabilities. Many companies and individuals expanded on HTML, the language of Web pages, or built new tools such as Dreamweaver to try to overcome these limitations.

Nonetheless, it was this lack of true design capability and the continuing struggle by developers to enable easy cross-platform and cross-browser Web interactivity that led Macromedia to conceive of RIAs.

At the heart of the RIA idea was Flash Player. Already a mature product, Flash Player was by 2002 the most widely installed software in the world — a position it holds to this day. However, most designers and indeed almost all users saw Flash as a cool means by which you could build animation for your site, but little else.

Macromedia, however, saw Flash as an ideal tool by which developers could create engaging, truly interactive applications for the Web, and because applications in Flash Player run the same on every operating system, developers could conceivably code once; they would not have to struggle through browser-specific issues or hacks like their Web design brethren or create multiple complete copies of their applications like desktop application developers.

While many were quick to embrace the idea behind RIAs, Macromedia did face one large obstacle. If one was to build an application targeting Flash Player, one had to work in Flash Professional. This program, however, was — and is — a very powerful design tool. Developers found building applications that did not primarily rely on animating artwork difficult at best.

Macromedia was thus faced with a choice: It could convert Flash Professional into a development and coding tool, and thereby abandon its large Flash designer user base, or leave it for designers and create something new altogether for developers. Fortunately, it chose this latter option, and thus was born the Flex framework.

Every Flex developer must constantly answer the question, “What is Flex?”

I have found that the simplest answer is the one based on its history: Flex is, at its core, merely Flash for developers. Flex provides a base of code developers can draw upon to create RIAs. Most if not all of the work in building a Flex application is done in code, using two primary languages:

• MXML. An XML-based tag language.

• ActionScript. The scripting language originally introduced into Flash over a decade ago.

While Flex opened a whole new world of exciting development opportunities and freed those developers who fear drawing tools and timelines from having to deal with those or other designer issues, it at the same time suffered from its lack of a design base.

While creating beautiful applications was certainly possible in Flex, the nature of those persons who tended to devote the time and energy to becoming a Flex developer made artistically designed applications the exception rather than the rule. Generally, as reluctant as developers were to explore complementary color schemes, designers tend to be just as reluctant to write code. Most people who spend their days performing magic in Illustrator or Photoshop would rather volunteer for jury duty or go get their driver's licenses renewed before they'd consider sitting in front of a code editor and writing 500 lines of MXML and ActionScript.

Adobe, after purchasing Macromedia in 2005 and adopting the Flex framework, recognized this problem. To many, Adobe has long been a design company, so few people were surprised when it announced plans in 2007 to develop a new application that would bridge that gap.

The Flash Catalyst Workflow

As I will make clear through the course of this book, Catalyst is fairly unique in that it's not designed as a true stand-alone application. While it's theoretically possible to create a complete application in Catalyst, few if any serious users will take that approach. Rather, Catalyst is designed as a kind of middle-ware, sitting between Adobe's design-oriented programs on the one hand and the developer-centric Flex framework on the other. Therefore, a typical Catalyst workflow both begins and ends outside of the program.

When you create an RIA in the Flex framework and plan to use Catalyst, you will need to begin with a design comp. This is a visual representation of your application's interface. The design will almost always be created in one of Adobe's two oldest applications:

• Illustrator

• Photoshop

Only once this design is complete will you be ready to open it in Catalyst, which you will use to begin the process of converting the static drawing into an RIA. Then you will need to finish the programming of the application in Flash Builder, Adobe's tool for working with Flex applications.

By separating these three parts of the workflow (creating a design comp in Photoshop or Illustrator, converting the drawings in Catalyst, and programming in Flash Builder) into three or four distinct applications, Adobe has built in to the system the possibility of dividing the work among specialists.

If you are a designer who avoids code as much as possible, you can take on the task of creating the design comp in the familiar environs of Illustrator. On the other hand, if you're a developer whose artistic skills begin and end with simple stick figures, you can have someone else create the design while you focus on your strength, writing code.

In this situation, the designer can easily bring his or her comp into Catalyst and convert it into the beginnings of a Flex application, as you not only do not have to write code in Catalyst but, in fact, you cannot write code in the program. Alternately, the developer can take the designer's Illustrator file, open it in Catalyst, and simply convert the art into the components she needs for the application. While Catalyst has much more of a designer feel to it, either group can use it.

If you happen to be the kind of person who is as comfortable with design as with code, then nothing will stop you from creating the entire project, start to finish, yourself. You merely need to begin with your design, use Catalyst to convert it to Flex, and then finish with programming in Flash Builder.

Introducing Adobe Illustrator

The initial design of your application will be done in a graphics tool. Catalyst supports importing designs from either Adobe Illustrator or Adobe Photoshop.

Illustrator, long the industry standard for vector-based design, provides a slightly richer toolset for creating designs from scratch than does Photoshop, which is a raster-based tool more suited for manipulating existing graphics such as photographs. Therefore, while a chapter of this book is devoted to creating designs in Photoshop, the focus here will be on working with Illustrator.

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 documents, but you don't have as many options for working with the design as you do when dealing with those created in Illustrator or Photoshop.

The primary stumbling block was that Fireworks, a program Adobe acquired from Macromedia, has a radically different underlying architecture than Illustrator and Photoshop. The limited Fireworks-Catalyst workflow is likely to change over time, however.

Illustrator interface

Any introduction to Illustrator needs to begin with the interface.

1. Launch the program. The Start screen appears.

2. Open an existing file or create something new (see Figure QS.1). When beginning work on a Catalyst project, you should select Web Document.

Figure QS.1

The Illustrator Start screen

3. Set up the basic parameters of your document. Of particular importance are the width and height of the project (see Figure QS.2). Hopefully, you will have had discussions with everyone involved in the project — in particular, the developer and the client — as to what these dimensions should be.

Figure QS.2

Setting the dimensions of the project

Cross-Reference

Chapter 5 presents a more detailed explanation of the other options in this dialog box.

4. Click OK to save your settings. You are ready to begin creating your design.

Illustrator artboard

The main area in which you work in Illustrator is the artboard. You can select tools from the Tools panel, which by default appears along the left edge of the screen. Additional options and controls are located in the other panels, most of which are grouped on the right edge of the screen (see Figure QS.3).

You are basically free to use whatever tools exist within Illustrator to create your design comp. For the most part, your imagination is the only limit as to what you can design.

One of the ideas behind the creation of Catalyst and the changes to the Flex framework that have been made to support it is that applications do not have preconceived notions as to what things should look like. Buttons, for example, need not be boring, gray rectangles, but can instead be drawn however you like. Of course, you should not sacrifice usability for making things cool: A button may be made up of blue brush strokes, but it still needs to be obvious that it is something with which the user can interact.

Figure QS.3

The Illustrator artboard

Illustrator tools

Illustrator contains a host of drawing tools, including paint brushes, shape tools, and line tools. All of them draw vectors shapes that can be freely edited.

Illustrator's most powerful tool is the Pen tool. The Pen allows you to create precise lines and curves (see Figure QS.4). While the Pen can be somewhat difficult to learn and master, once you are comfortable with it, you will likely find that it is also perhaps Illustrator's most useful tool.

In addition to the Pen tool, Illustrator contains a Paint Brush tool. The brush's biggest advantage is not the ease with which you can draw by simply clicking and dragging with the mouse, but rather the fact that you can use it with a wide variety of brush tips to create anything from simple strokes to painted shapes (see Figure QS.5).

Illustrator ships with nearly 30 brush libraries, each containing from a few brushes to dozens of them (see Figure QS.6).

Figure QS.4

Drawing shapes with the Pen tool

Figure QS.5

Drawing complex patterns with the Brush tool

Not everything need be drawn by hand. Illustrator contains a large set of shape tools that you can use to draw rectangles, rounded rectangles, ellipses, polygons, starts, and flares. With each of these tools, you can create a shape by merely clicking and dragging on the artboard (see Figure QS.7). You can adjust the fill and stroke size and color either before you draw a shape or after.

Figure QS.6

Selecting a new brush library

Figure QS.7

Drawing basic shapes

Importing into Illustrator

While most of your work in Illustrator will involve drawing new art, you can also import images for use in your design. Illustrator supports almost every image file format, including common image formats such as JPG and GIF and native files from other Adobe applications, including Photoshop PSD and Fireworks PNG files.

You can import files by following these steps:

1. Choose File⇒Place (see Figure QS.8).

2. Select the image to import.

3. Click on the artboard where you want the image to appear (see Figure QS.9). The image appears on the artboard. Its top left corner will be at the point at which you clicked.

Figure QS.8

The Place command

Figure QS.9

An imported image on the artboard

Using layers in Illustrator

Illustrator designs become quite complex very quickly. Therefore, it is important to keep the file organized with layers. By placing each piece of your design on its own layer, you can keep the art separated into editable parts.

Layers are automatically created with each new shape you draw, and you can organize and controlled via the Layers panel (see Figure QS.10). You can move layers freely up or down to change the stacking order of objects on the artboard, rename them to be descriptive of their contents, and show and hide them as needed using the panel.

Once you complete your design, you can simply save it as an Illustrator file. You do not need to do anything special to save the file in order to import it into Catalyst (see Figure QS.11).

Figure QS.10

The Layers panel in a complex project

Figure QS.11

A completed design in Illustrator

Introducing Flash Catalyst

Once you complete your artwork, you are ready to import the piece into Catalyst and begin converting it from static art into the first stages of an RIA. Catalyst has been designed to look, feel, and behave similarly to other design tools such as Illustrator. In fact, as much as possible, Adobe's engineers borrowed names and even keyboard shortcuts from Illustrator. For example, the drawing area in Catalyst is known as the artboard, just as it is in Illustrator.

Also like Illustrator, Catalyst displays a Start screen when you first launch it (see Figure QS.12). The Start Screen provides options to create new projects from Illustrator, Photoshop or FXG files, or create a blank project into which you can draw using Catalyst's limited drawing tools. You can also open existing projects from here.

Figure QS.12

The Catalyst Start screen

Importing an Illustrator file into Catalyst

To import an Illustrator file to Catalyst, follow these steps:

1. Click the option on the Start screen to create a new project from an Illustrator file.

2. Select the file you saved from Illustrator, which has an AI extension. Catalyst then analyzes the file and displays a dialog box.

3. Confirm the dimensions of the project. These dimensions should already be set to the same values as the Illustrator file by default.

4. Specify how Catalyst should treat objects in the file (see Figure QS.13).

Figure QS.13

The Illustrator Import Options dialog box

5. Click OK in this dialog box. Catalyst imports the file onto its artboard (see Figure QS.14). All of the layers you created in Illustrator will be converted to Catalyst layers.

Depending on the options you selected in the Import dialog box, you should be able to move, resize, and even edit the objects on the artboard.

Figure QS.14

A file in Catalyst after import

The Catalyst interface is similar to Illustrator's, albeit with fewer panels. The top panel displays the states or pages in the application. The right edge of the screen contains a toolbox, the Layers and Library panels, the Interactions panel, and the Properties panel. The Timeline and Design-Time Data panels stretch across the bottom. Floating somewhere on the screen is the heads-up display (HUD).

Note

You cannot customize the layout of panels in Catalyst.

Optimizing graphics

Your first step in beginning to work with the file will be to optimize the graphics.

Every object you see on the artboard is being represented in Catalyst by code. Most objects will take multiple lines of code, so very complicated designs could require tens of thousands of lines. You do not need to worry specifically about this code, and in fact you cannot edit it directly in Catalyst, but the fact that so much of it will likely exist is going to almost certainly slow Catalyst down.

Optimizing images is an effective countermeasure: When you optimize the image, you combine it within Catalyst into a distinct object that can be rendered more easily. You should optimize any image that does not need to be manipulated as the project runs. These would include logos and images being used as separators or merely visual flair. You can optimize an image by following these steps:

1. Choose the Select tool (the black arrow in the toolbox).

2. Select the object you want to convert.

3. Click Optimize Image in the HUD (see Figure QS.15).

Note

If you import a very large and complex Illustrator file, Catalyst is likely to run very slowly at first. This performance will improve quite dramatically as you proceed through the process of optimizing images and converting objects to components. In the meantime, collapsing the Timeline panel by clicking its tab can help speed up the project.

Figure QS.15

Using the HUD to optimize an image

Creating components

Your next step in Catalyst is to convert objects or groups or objects to components. Components are the building blocks of a Flex application. Each distinct section of your application will likely need to be converted to a component.

Catalyst allows you to choose from a variety of predefined components such as buttons and data lists, but most of the time you will create custom or generic components. Just as you did when optimizing images, you define components by selecting their elements and then using the appropriate option on the HUD (see Figure QS.16).

Figure QS.16

Converting the main application elements into a custom component

View states

Traditional Web sites are made up of a series of pages, each representing a distinct state of the application.

Flex applications are run in a single file within Flash Player. Instead of breaking your application into separate files, you break it into states. For example, an e-commerce application in HTML would likely contain a product list page, a product detail page, a shopping cart page, and a checkout page. A similar Flex application would contain a product list state, a product detail state, a shopping cart state, and a checkout state.

You create and name states in the Pages/States panel at the top of the screen. Each state can either be a duplicate of the state to its left or a blank state. They can contain any content. You should also plan for states early in the design process, and create their assets on separate layers in Illustrator.

After importing into Catalyst, you can convert these assets into components, and then show or hide them as needed from one state to the next (see Figure QS.17).

Figure QS.17

A new state created in the application, displaying different components and layers

Interactions

At the beginning of this Quick Start, I described Flex as Flash for developers. Your application will eventually end up running in Flash Player. Therefore, any of the things you would normally expect to see and do in Flash can be done in Flex, such as how a user interacts with your application.

One fairly obvious place where clients might expect to see animation is in the transitions between states. Fortunately, Catalyst makes creating this animation easy.

State changes are most often triggered by a user action. For example, the user might click an Add to Cart button to switch to the cart state. As I mentioned earlier, you can use any artwork to create buttons; follow these steps to create a button:

1. In Catalyst, select the artwork.

2. Choose Button as the component type in the HUD to create one (see Figure QS.18). The button is created.

Figure QS.18

Creating a button component

3. Use the Interactions panel to define what occurs when the user clicks it. You can easily have the button trigger a state change by clicking Transition to State in the panel and then selecting the desired state (see Figure QS.19).

4. Once the interaction is defined, create an animated effect to hide the elements that will be removed from the state and show those that are being added. For example, you might have the old component slide off one edge of the screen while the new one slides in from the opposite edge.

You begin setting up an effect like this by simply positioning the elements where you need them to either start or stop (see Figure QS.20).

Figure QS.19

Setting up a transition in the Interactions panel

Figure QS.20

Getting ready to transition by moving components off the artboard

Tip

You can quickly zoom out to see the entire artboard by double-clicking the Hand tool in the tool bar in the top right corner of the screen. If you do this, make sure you select the Select tool again.

Tip

You can press and hold the Shift key while dragging the component to ensure that you drag it perfectly horizontally or perfectly vertically.

5. Control the effects and timing of the component animation by using the tools provided by the Timelines panel (located along the bottom of the screen). You can drag the bars that represent each component to change how long they animate and control their timing relative to other components (see Figure QS.21).

Figure QS.21

Using the Timelines panel

Once you complete your design work in Catalyst, you are ready to move to Flash Builder.

Introducing Flash Builder 4

Catalyst, as I mentioned, is designed to bridge the gap between the designer and the developer. In a team setting, the designer is likely to be an expert in Illustrator but know little code, while the developer would be the opposite: an expert in coding with little design skill. Flash Builder is the developer's tool in the Catalyst workflow.

While Flash Builder contains a design interface, you will spend most of your time in the program working in code. Flex applications are made up of MXML and ActionScript. The MXML primarily describes the look and feel of the application and is mostly what Catalyst generates, while ActionScript is a true programming language and is used to create the core functionality of the application.

Flash Builder is built on the Eclipse toolset. Eclipse is a powerful and popular open-source platform for developers. As Flash Builder is built for coders, it has a significantly different interface than Adobe's design tools (see Figure QS.22).

Figure QS.22

The Flash Builder interface

Catalyst projects are saved as FXP files, which is the main file format for Flash Builder projects as well. Therefore, you can import a Catalyst project into Flash Builder by choosing File⇒Import Flex Project (FXP). A dialog box appears that you can use to navigate to the project you created in Catalyst (see Figure QS.23).

Once imported, you can view the project's files in the Package Explorer view or panel in the top-left corner. You can open files in either Design mode (see Figure QS.24), which provides a visual view of the project, or in Source mode, where you can work with code (see Figure QS.25).

Figure QS.23

Importing a project

Figure QS.24