Adobe: Getting started with Adobe Flash Catalyst CS5.5

What is Flash Catalyst 5.5

Flash Catalyst CS5.5 enables designers to expand their skillset and design user interfaces and interactive components for Flex based applications without writing code. Designers can rapidly prototype user interfaces using skinnable components and interactions, which can then be sent to clients for approval. These prototypes are based on the open-source Adobe Flex framework, and can be exchanged Adobe Flash Builder 4.5 for more advanced development.  The collaborative workflow allows Flash Catalyst and Flash Builder users to work in parallel, thereby maximizing team productivity.

Flash Catalyst combines an intuitive user interface and toolset—similar to those in Adobe Photoshop, Illustrator, and Fireworks—with the expressiveness, consistency, and reach of the Adobe Flash Platform.

Using lesson files

The purpose of this tutorial is to introduce designers to the basic concepts and workflow involved in using Flash Catalyst.

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

• To use best practices when building an Illustrator AI file and how to import the artwork into Flash Catalyst CS5.5.
• To turn a static file into an interactive user interface, including how to create individual user interface states and button components to enable navigation.
• Flash Catalyst uses layers to manage the visibility of artwork within different states. Within the specific tours state, you will create a popup area that contains upload form. In the process, you will learn about creating default and custom actions for state transitions between states, such as moving, resizing, and fading layers.
• To preview and publish the finished project to a SWF file and AIR application.

Note: This article discusses the use of Adobe Illustrator to create artwork for use in Flash Catalyst. You can also use Adobe Photoshop to create artwork; many of the hints and tips below can be applied to a Photoshop .psd file.

Designer developer workflows

Flash Catalyst CS5.5 and Flash Builder 4.5 enable designers and developers to collaborate and work in tandem on projects. 

Wireframing and prototyping workflow

This workflow outlines a common set of steps designers will often complete within Flash Catalyst and other CS apps to produce wireframes and rapidly prototype applications. With the involvement of a developer, Flash Catalyst projects can be extended further using Flash Builder- for example to connect to a database or web services. This tutorial focuses on the workflow within Flash Catalyst. There are several other articles on Flash Catalyst and Flash Builder that show how, for example, files and parts of applications-- like skins and components-- can be exchanged between designers and developers. See Where to go from here at the end of this tutorial.

Figure 1. Wireframing and prototyping workflow

Project basics

If you haven't done so already, download and unzip the sample files that accompany this tutorial. Open the pixd_ui.ai file. Note the well-labeled structure (or order) of the layers in this file (see Figure 5). Use these best practices as you design and build your own user interfaces for Flash Catalyst.

The background layer contains elements common to all states in the design. Some of the graphic elements that you won't be building out in this tutorial have been flattened for simplicity's sake.

• The header layers contain the logo, search, welcome message, login, and post a screenshot button. This last item will be converted into a functional button in Flash Catalyst for this tutorial.
• The folders layer contains the text and graphics for the mockup project and users filters.
• Other layers contain the page look and feel content.

Designing user interfaces in Illustrator

As you create your own Illustrator AI file, organize your elements into logical groups such as background, navigation, header, and individual page content. The folder and layer structure of this AI sample file is simple (see Figure 2).

Figure 2. The Pixd user interface layers in Illustrator.

As you create Illustrator interfaces, your layer folders and subfolders will likely contain artwork at a more granular level. Consider grouping artwork that will eventually become individual Flash Catalyst components such as scroll bars, drop-down menus, and buttons. This will make your AI file much easier to work with when imported into Flash Catalyst. As you create different interactive states in Flash Catalyst you will turn on and off these different layers.

You should be aware of the following practices:

• Design your artwork using a single art board.
• Give everything a name. Just as with naming layers and groups, it is also important to name individual graphics and elements within the Illustrator file.
• Don't link to external image files. Keep all your assets within one Illustrator file.
• Use "create outlines" for text with filters and effects
• Define all the states of a component in Flash Catalyst as opposed to Illustrator. Flash Catalyst provides comprehensive options for editing text and graphic properties, including fills, gradients, and strokes

Note: For a more detailed discussion of preparing artwork in Adobe Illustrator, read Andrew Shorten's article Adobe Flash Catalyst best practices.

If you are using Adobe Photoshop, structure your file using the tips layers discussed in this section.

Importing an Illustrator design

After creating your user interface design in Adobe Illustrator, you can import it into Flash Catalyst:

1. Open Flash Catalyst and, on the Welcome screen, select the option Create New Project from Design File > From Adobe Illustrator File (see Figure 3).

Figure 3. The Adobe Flash Catalyst Welcome screen.

2. Navigate to the pixd_ui.ai file you downloaded and select it. The Import dialog box provides you with some customization options (see Figure 4). You're going to keep all the layers editable and import any non-visible layers.

Figure 4. The Illustrator Import Options dialog box.

3. Click OK to finish importing the file.

After the import is completed, the user interface will appear as it did in Illustrator (see Figure 5). The individual layers will be listed in the Layers panel on the right. Clicking a visible item in the Layers panel will select and highlight that specific layer item on your interface.

Note: If the Timeline panel is open, double-click the tab to minimize it. I will discuss the Timeline panel in more detail when we create state-to-state transitions.

The Flash Catalyst user interface

The Flash Catalyst user interface has two workspaces: Design and Code. The Design workspace shows a graphical representation of your project. This workspace includes the panels and tools used for creating and editing projects. The Code workspace shows the underlying application code. This code is generated automatically as you work in Flash Catalyst. Viewing the MXML code gives designers the opportunity to understand how the application is programmed. The Code workspace is read-only. To edit the code, open the project in Adobe Flash Builder 4.5.

Figure 5. The Flash Catalyst interface featuring the Timelines and Layers panels.

Main areas to note in the Flash Catalyst interface include:

• States:This area only has one State at the moment (see Figure 5). In the next section you will be adding states to your project.
• HUD: The heads-up display (HUD) gives quick and easy access to commands related to the item that you have selected on canvas. In Figure 8, the tour navigation Graphic is selected. The relevant commands for Graphics are displayed.
• Tools panel: The Tools panel includes tools for creating, selecting, and transforming objects, including simple lines, shapes, and text.
• Align panel: The new Align panel is similar to that found in other Adobe design applications such as Illustrator. It can be found grouped with the Interactions panel and contains align, distribute, distribute spacing, and match size functions.
• Timelines panel: The Timelines panel provides controls for creating and editing transitions and action sequences. You can also use the Timelines panel to control the playback of video and SWF content, and to add sound effects.
• Design-time data: After creating a data list component, use the Design-Time Data panel to control the order for the data (images and text) to appear in the data list.
• Common Library panel: The Common Library (see Figure 6) contains a set of wireframe components that are ready-to-use interactive components with a simple default appearance. Note that the components fall into two categories:
  • Flex components: Flex Spark components, written to support Adobe Flex 4.5, can be skinned and used directly by developers when projects are opened in Flash Builder 4.5. Flash Catalyst editable Flex components are identified with pencil icons in the Common Library panel. Skins without pencil icons must be edited in Flash Builder.
  • Placeholders: Unlike Flex components, placeholders are not Spark components, and they cannot be skinned in Flash Catalyst. They are intended for use as mockups or placeholders, which a developer can modify later in Adobe Flash Builder 4.5.

Figure 6. The Common Library panel containing Flex components and Placeholders.

Working with states

When you create a Flash Catalyst project you will usually need to create more than one type of state for the user interface. These are referred to as States in Flash Catalyst.

• The term state is generally used to describe the different pages or screens of a web site or application.
• It can also be used to describe the different state in components. For example buttons usually have a separate up, down, over and disabled state.

The workflow for developing a project requires that you initially create individual states within the application. To control navigation between states, user interaction components such as buttons can be created from imported artwork. These buttons are then linked to destination states.

After the states and buttons are set up, you can add component interactivity and transitions. Interactivity between states is controlled by user interactions with a component. Clicking a button component, for example, might cause the current state to animate to another state. With the user interaction defined, you can fine-tune the transitionsfrom one state to another. These are called transitions. Options for transitions include fades, resizing, rotation, and movement.

At each phase along the design path you will test the navigation, components, and transitions within your project, and fine-tune as necessary. When finished, you can output an AIR desktop application or a SWF file and view it on the desktop, or post it to a server. Or you can share the project with a Flex developer (using Flash Builder) to incorporate more advanced programming tasks such as dynamic content and database integration.

Note: For an example of a Flash Catalyst and Flash Builder workflow, refer to Andrew Shorten's tutorial, Building a data-centric application using Flash Catalyst CS5 and Flash Builder 4. To explore your workflow options, readExploring Flash Catalyst and Flash Builder workflows.

Creating different states

States are a central concept in Flash Catalyst. You can have a number of states that represent various views, or pages, of the application. Users navigate between different states depending on the navigation scheme you design.

In the same way, states can also exist within a component. For example, a button component may display a state such as Up, Over, Down, and Disabled.

1. In the States panel, click the Duplicate State button (located at the bottom of the States panel) to add another state to your application.
2. Double-click the title area of each state and name them normal and uploadForm to correspond with the two main areas of the project (see Figure 7). Note that titles for states cannot have blank spaces.

Figure 7. Rename the duplicate state.

Working with states

To navigate between states in Flash Catalyst, you select it in the State panel. The artboard shows all visible objects in the selected state. You can also view the different states of a component by double-click it in the artboard to enter Edit-In-Place

Note: When a component is in Edit-In-Place mode, the Layers panel splits into sections. It shows layers for both the project and any components you have open. You can drag objects from the main application layers into the component.

Next, I'll show you how to control the visibility of layers within the States panel.

Manage the visibility of layers

The management of artwork and components in Flash Catalyst is controlled from within the Layers panel. This functionality provides designers with a straightforward inventory of all elements used in a project. You can organize items into folders and subfolders according to what makes sense to the project such as where or how they are being used. For example, all the background graphics used in this project are kept in the background folder. As you develop and expand the various states in your project, the Layers panel will allow you to control the visibility and invisibility of your artwork.

1. With the normal state selected in the pixd_ui document, click the eye visibility icons in the Layers panel to make the relevant layers visible in each state. In Figure 8, the postScreenshotForm layer for the uploadForm state are invisible.

Figure 8. The normal state with uploadForm state invisible.

2. Click the uploadForm state and then select postScreenshotForm layer’s visibility icon in the Layers panel to show the elements that should be visible for this state (Figure 9).

Figure 9. The uploadForm layer selected with normal state made invisible.

Adding navigation between states

Now that you have created the application states, you need to create interactions and transitions between them. In this section, you will create one button component for the post a screenshot page for the Pixd application.

It does not matter which state you have selected, as a button component can be made available across all states as long as they are made visible in the Layers panel for that state.

1. Select the graphical item or items that you would like to convert into the button component. In this case, the graphical elements that make up the Post Screenshot button are the grouped text and blue rectangle (see Figure 10).

Figure 10. Select the graphical elements for the button.

2. In the HUD, select Convert Artwork to Component > Button (Figure 12).

Figure 12. Select the Button option in the Choose Component menu.

3. In the Convert Artwork to Button dialog box that opens, you can rename the button to be more descriptive or accept the default setting (Figure 13). You can also rename buttons using the Layers panel.
   
   

Figure 13. Convert Artwork to Button dialog box.

4. After the layers have been converted to a Button component, the HUD will change to show the button options for the Up, Over, Down, and Disabled states (Figure 14).

Figure 14. The HUD with Up, Over, Down, and Disabled button options.

5. Notice the four constraint handles that appear around the sides of the button. Click once on the top constraint handle. This attaches the component to the top of the application bounds, and ensures that the component will always appear the same distance from the top.
6. Click once on the right constraint handle. This attaches the component to the right side of the application bounds, and ensures that the component will always appear at the same distance from the right (Figure 15). We will discuss constraints further along with resizable layouts in a later section.

Figure 15. Setting the top and right side constraint handles.

7. This button component has an up, over, down and disabled state. You can choose each state and edit the look and feel to reflect the desired behavior of the button. For example the down state may have a bright blue background, whereas the disabled state may have a gray background. Select the button and in the HUD, click any of the button states that you want to redesign.
8. You are now editing the button component in Edit-in-Place and need to set the label for the button. In the Layers panel, expand the post screenshot group and select the “Post Screenshot” text layer (see Figure 16).
9. In the HUD click the to Convert Artwork to Button Part > Label button (see Figure 16) to assign a label to the button.

Figure 16. Converting artwork to button label

10. As you design your up, over, down and disabled state, you can turn layers on and off in each state by clicking the visibility icon the Layers panel.
11. You can also use the Tools panel or import artwork to add specific graphical elements that might not have been designed in your original Illustrator file (Figure 17).

Figure 17. Adding graphical elements to the Over state of a button.

12. Remember that any changes made to the Up, Over, Down, and Disabled state will appear in all instances of this button component as it is reused.

Figure 18. Artwork in the layers renamed to reflect the states of the navigation button.

13. Now that the button component to navigate to the Post Screenshot state is created you will need to create a new button to return to the Home state. Return to the top level of your project by clicking pixd_ui on the breadcrumb navigation below the states panel (see Figure 19).

Figure 19. Navigate to the top level of your project file.

14. Click on the uploadForm page in the States panel.

Figure 20. The upload Form state.

15. Select the Post graphical item to convert into the button component.
16. Repeat Steps 2 to 13 of this section to convert this artwork to a button component, skin the component states and rename the layers.

Creating the interaction between states

After the Buttons are completed, you need to create the interactions that will tell the application what to do when a user clicks a button.

1. Select the Post Screenshot button. If closed, double-click the Interactions tab to open. In the Interactions panel, click the + Add Interaction and then select the following parameters (see Figure 21):
   • Choose the event that triggers the interaction, such as On Click.
   • Choose the response to that event, such as Play Transition to State.
   • Choose the state where that interaction occurs, such as in the Application
   • And select the state that you would like the button to navigate to within your application, such as the uploadForm state.

Figure 21. Select On Click and location state options.

2. Navigate to the uploadForm state and repeat Step 1 for the Post button so that the button returns users to the normal state.

Previewing a project

Now that you have enabled interaction and navigation in the project, you can preview the results in a web browser.

1. Select File > Run Project (see Figure 22). Flash Catalyst will open your default browser and play your project.

Figure 22. Select Run Project from the File menu.

2. Click the navigation buttons to test that they are clicking through to the correct states (see Figure 23).

Figure 23. Preview and test your Flash Catalyst project in the browser.

Designing transitions between states

In this section, you create animations or transitions between states. Begin by making sure the Timelines panel is open in the lower area of your screen (see Figure 24). If closed, double-click the Timelines tab to open

Figure 24. Flash Catalyst interface with Timelines Panel open.

To the left of the Timelines panel, a list of the State Transitions is displayed for all states. On the right, the timeline for the selected State Transition is available. In the timeline, you can create transition actions (fade, scale, move, resize, rotate) between the two states and specify how items should animate in and out. State Transitions may also be added within components. For example, you may want to fade in text for a Button component in an Over or Down state.

Creating transitions with the Smooth Transition button

Follow these steps:

1. In the bottom bar of the Timelines panel, click the arrow next to the Smooth Transition button. This will open the Smooth Transition Options. Here you can set the Duration of the transition, the Timing, and whether you would like to overwrite any existing transitions when you press the Smooth Transitions button (see Figure 25).
   • Set the Duration to 0.75 sec.
   • Set the Timing to Smart Smoothing.
   • Check the option to Overwrite existing effects.
   • Click OK

Figure 25. Specify the transition options.

The new Fade In transition options are applied in the timeline between the Normal and uploadForm states (Figure 26).

Figure 26. Smooth state transition applied between states.

2. In the Timelines panel, select the next State Transition in the list that you want to apply a transition to, in this case the uploadForm > Normal transition.
3. Click the Smooth Transition button and note the transition created in the timeline.

You can customize and add more than one effect to the same objects to create more advance transitions by selecting the transition then clicking the + Add Action button and choosing an action or effect from the pop-up menu (Figure 27). For example, an object can fade in, rotate in 3D, and play a sound effect at the same time.

Figure 27. Adding advanced transitions.

4. Test the effects of the transitions by previewing the project in a web browser by selecting File > Run Project.

Creating a resizable application

In a previous section, you constrained the Post Screenshot button to the top and right side of the layout. In this section, you will set constraints for other graphic elements in your application to create a liquid layout. A liquid layout will resize to fit different screen sizes or in response to your user resizing his or her browser. Components contained within the application can be set to resize dynamically as the application resizes.

Objects and components on the artboard display with small circles, called constraint handles, on each of their four sides. You can use constraint handles to control how the components and elements within your application will behave when the browser window is adjusted, or when the application is displayed on different-sized screens.

1. To set an application to resize, either:
   • Select the Resizable checkbox in the New Project dialog box.
   • Choose Modify > Artboard Settings... and select the Resizable checkbox (Figure 28).

Figure 28. The Resizable option in the Artboard settings dialog box.

2. Flash Catalyst CS5.5 features a resize handle at the bottom right corner of the artboard (Figure 29) that you can use to temporarily change the size of the artboard and preview how your application will resize based on the constraints you define. In this way, you don’t have to compile and test content in a browser to make sure your constraints are set up correctly.

Figure 29. The resize handle in the artboard.

Drag on the resize handle to temporarily adjust the size of the artboard. Notice how the elements in the application remain in place. When you release the mouse, the artboard returns to its original target size.

3. Using the Selection tool, select the welcome message group that appears in the top navigation bar of the artboard. Notice the four circular constraint handles that appear around the sides of the group (Figure 30).

Figure 30. Constraint handles for the welcome message group.

4. Click once on the top constraint handle. This attaches the component to the top of the application bounds, and ensures that the component will always appear the same distance from the top.
5. Click once on the right constraint handle. This attaches the component to the right side of the application bounds, and ensures that the component will always appear at the same distance from the right (Figure 31).

Figure 31. Constraints set to top and right for the welcome message group.

6. Drag on the resize handle to temporarily adjust the size of the artboard. Notice how the welcome message group sticks to the upper and right sides of the artboard.
7. Click on the gridView > list object, which appears in the center of the artboard.
8. Click the top constraint handle for the gridView > list object to attach it to the top of the artboard.
9. Right-click (Control-click with a one-button mouse on Mac OS) the left constraint handle, and then choose Center from the context menu. This sets constraints on both the right and left sides of the component, which display with squiggly lines (Figure 32). The constraint ensures that the component will always appear centered within the browser window.

Figure 32. Centered component constraints display with squiggly lines.

10. Repeat the center constraints for the gridView > delete me object to keep it centered in the browser window with the gridView > list object object.
Note: the delete me object is simply a mock up, data list placeholder and should be removed once design-time data is included. For more information about how to build a data list, see to Andrew Shorten's tutorial Building a data-centric application using Flash Catalyst CS5 and Flash Builder 4.
11. Drag on the resize handle to temporarily adjust the size of the artboard. Notice how the gridView objects continue to adjust their placement within the artboard.

Publishing a project for distribution

You are now ready to publish the project.

Select File > Publish to SWF/AIR and then choose a location where you would like the files saved (see Figure 33). Flash Catalyst will create an output folder with two versions of your project:

• One folder, entitled deploy-to-web, will be suitable for posting to a web server.
• Another folder, run-local, lets you test the build locally.
• If the Build Air application option is selected, a third folder will be created with an AIR an application that can be installed to your desktop.

Figure 33. Flash Catalyst project output folders.

Where to go from here

This tutorial provides a brief introduction on how to create interactive content or prototypes with Flash Catalyst. Although simple, the tutorial and sample project demonstrates the necessary workflow and key concepts you will need to get started. In addition to the workflow and core concepts, remember to maintain a clear folder and subfolder structure in your Layers panel. Keeping organized will allow you to easily modify artwork as you move between states and add components and transitions.  It will also make the process of extending your project in Flash Builder, much easier for the developer.