Adobe Flash Catalyst: Designing Interactive Applications

Prerequisites

Working knowledge of either Photoshop and/or Illustrator

Audience

Designers wishing to use Flash Catalyst as an application development tool. There will be an emphasis on preparing Photoshop/Illustrator files for use in Catalyst, as well as preparing assets for handoff to Flex application developers.

Description

In Adobe Flash Catalyst: Designing Interactive Applications, you will learn how to build interactive applications using Adobe Flash Catalyst that can be published to the web or desktop as fully functional applications. If you are building dynamic data-driven applications with Adobe Flash Builder, you will also learn how to import the Flash Catalyst projects into Flash Builder to use as the basis for your site.
This course will help both designers and developers use Flash Catalyst to optimize the design, planning and prototyping of their applications.

Designers who have worked with Adobe Photoshop, Adobe Illustrator, Adobe Flash Professional or Adobe Fireworks will find that the Flash Catalyst interface is a familiar and comfortable environment. In this course you will learn how to:

* Create functional wireframe prototypes that you can use to test concepts and pitch ideas
* Convert visual designs and assets you have created in Photoshop, Illustrator, Flash Professional and Fireworks into interactive components
* Build interactions to respond to user clicks, rollovers and selections
* Design animated transitions to engage users in a visual dialog
* Optimize your assets and design files for web production and to hand off to developers
* Build a fully functional application without writing one single line of code

Developers who have experience building Adobe Flex 4 applications using Flash Builder 4 will learn how to:

* Use Flash Catalyst to create proof of concepts
* Use Flash Catalyst to build wireframes for pitching ideas
* Use Flash Catalyst to create skins for Flex components
* Import Flash Catalyst projects directly into Flash Builder
* Modify and extend the generated Flash Catalyst code with their own business logic and dynamic data
* Export Flex Library Projects from Flash Catalyst with complete component skins

By the end of this course, you should be able to build fully functional interactive applications in Flash Catalyst that can be viewed in a web browser or as a desktop application. You should also be able to share code, skins and assets from Flash Catalyst to Flash Builder, where developers can then add business logic and dynamic data integration.

Outline

Introducing the Course

    * Introducing mastery learning
    * Understanding the course format
    * Reviewing the course prerequisites
    * Reviewing the course outline

Introducing Adobe Flash Catalyst

Introducing the Adobe CS5 tools

    * Introducing the tools for this course
    * Creating applications
    * Bridging the designer/developer workflow gap
    * Designing interfaces with Flash Catalyst
    * Creating applications with Flash Catalyst

Getting started with Flash Catalyst

    * Creating Flash Catalyst projects
    * Exploring the Design workspace
    * Exploring the Code workspace
    * Aligning elements on the artboard
    * Running the application

Converting artwork into interactive components

    * Introducing the Data List component
    * Creating a Data List component from artwork
    * Editing components in place
    * Modifying component states

Introducing the Adobe Flash Platform

    * Introducing the technologies
    * Building compelling applications
    * Learning more about Flash Catalyst

Publishing an application

    * Selecting publishing options
    * Understanding the published files

Importing Flash Catalyst project to Flash Builder

Wireframing

Designing interactive systems

    * Exploring an iterative, evidenced-based design process
    * Gathering information
    * Implementing an iterative process
    * Evolving from abstract to concrete models
    * Prototyping with Flash Catalyst

Defining the grid system and guides

    * Defining the artboard size and color
    * Understanding the coordinate system
    * Defining the grid system
    * Setting guides

Drawing with the Flash Catalyst tools

    * Exploring the tools
    * Reviewing keyboard shortcuts
    * Working with objects in layers
    * Grouping objects
    * Using the Properties panel

Understanding the generated code

    * Exploring the base code
    * Generating the project files
    * Adding Flash Catalyst interface code

Working with the Text tool

    * Creating Point Text
    * Creating Area Text
    * Creating Fit Height text
    * Working with text

Introducing the wireframe components

    * Exploring the wireframe components
    * Knowing about available components
    * Exploring the generated code

Creating states and pages

Editing wireframe component states

    * Modifying wireframe component states
    * Sharing and hiding objects between states
    * Understanding component parts
    * Exploring the generated code

Creating application pages

    * Creating states/pages

Handling user interaction

    * Defining user interactions
    * Defining an event when the application starts
    * Exploring the generated event handler code

Creating custom skins and components

Introducing custom component skins

    * Introducing instances
    * Creating custom component skins

Modifying the default Data List component skin

    * Reviewing Data List component parts
    * Modifying the component skin

Creating custom/generic components

    * Introducing custom component examples
    * Creating custom/generic components

Exchanging assets between CS5 tools

Working with FXG

    * Introducing FXG and MXML Graphics
    * Exporting FXG from Fireworks
    * Exporting FXG from Flash Professional
    * Exporting FXG from Illustrator
    * Exporting FXG from Photoshop
    * Importing FXG into Flash Catalyst

Round-tripping with Illustrator

    * Round-tripping between CS5 tools
    * Editing objects in Illustrator
    * Launching Fireworks from Illustrator
    * Understanding editable assets in Illustrator
    * Exploring tips for round-trip editing with Illustrator

Round-tripping with Photoshop

    * Installing the extension
    * Round-tripping between Flash Catalyst and Photoshop
    * Exploring tips for round-trip editing with Photoshop

Creating a project from imported assets

Optimizing design files for import

    * Starting a project with imported artwork
    * Exploring optimization tips for Illustrator and Photoshop

Importing image and SWF assets

    * Importing images
    * Linking to external image files
    * Importing SWF files
    * Importing video and sound files

Applying animation and action sequences

Animating with action sequences

    * Creating an action sequence
    * Adding the animation
    * Editing properties

Creating composite animation

    * Adding additional animation
    * Animating multiple objects

Introducing transitions

    * Modifying the default transition

Using action sequences to create conditional list interactions for the video player

    * Creating a conditional list interaction
    * Optimizing video player use

Editing applications in Flash Builder

Working with the Flash Catalyst project in Flash Builder

    * Importing the project
    * Resolving font references
    * Refactoring up the code

Adding dynamic data in Flash Builder

    * Reviewing the generated static data
    * Registering the data service
    * Applying the dynamic data

Applying skins built in Flash Catalyst

    * Exporting a Flex Library Project from Flash Catalyst
    * Importing a Flex Library Project into Flash Builder
    * Adding the Flex Library Project to the build path
    * Using the skin class files

Replacing a custom skin

    * Merging the changes