Accessibility
Tanya Heins

Tanya Heins

Numen Communications Inc.

Table of Contents

  1. Introduction
  2. Designing user interfaces in Photoshop
  3. Importing a Photoshop design
  4. Working with pages and states
  5. Creating a popup window in a project
  6. Designing transitions between states
  7. Publishing a project for distribution
Created:
1 June 2009
Modified:
5 October 2009
User Level:
All
Products:
Flash Catalyst beta

Getting started with Adobe Flash Catalyst beta 2

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces and interactive content, without writing code. You can use Flash Catalyst to create interactive advertisements, product guides, design portfolios, and user interfaces for rich media applications.

The purpose of this tutorial is to introduce designers, familiar with Photoshop, to the basic concepts and workflow involved in using the beta version of Flash Catalyst. The sample project you will be working on is based on a fictional website called EcoTours. View the following screencast to get an idea of the scope of the EcoTours project before you begin the tutorial.

Running time: 0:56

This tutorial covers all the skills and techniques needed to take a concept from a static file to a completed interactive, multimedia interface. More specifically, you will learn how:

  • To use best practices when building a Photoshop PSD file and how to import the artwork into Flash Catalyst beta.
  • To turn a static file into an interactive user interface, including how to create individual states and button components to enable navigation between the different states.
  • Flash Catalyst beta uses layers to manage the visibility of artwork within different states.

Within the specific tours state, you will create a popup area that contains tour details. In the process, you will learn about creating default and custom actions for state transitions between pages and states, such as moving, resizing, and fading layers.

  • To preview and publish the finished project to a SWF file and AIR application.

Requirements

In order to make the most of this tutorial, you need the following software and files:

(optional) Photoshop CS4 or CS3

Adobe Flash Catalyst beta

Flash Player 10

Sample files:

The ZIP archive includes the following files:

  • Adobe Photoshop PSD source file
  • Finished Adobe Flash Catalyst FXP file
  • Three compiled builds, one for web deployment and one for running locally in your browser and a third AIR application for desktop installation.

Prerequisite knowledge

Working knowledge of Photoshop is recommended.

Page 1 of 7
Next Page

About the author

Tanya Heins is owner, visual communication designer, and education consultant for Numen Communications Inc., based in Ottawa, Canada. With over 10 years of experience working for companies such as Macromedia, Adobe, and Apple, Tanya collaborates with marketing and product teams to create world-class education products, curriculum, and learning content.