Requirements

Prerequisite knowledge

A basic understanding of the Flash Catalyst workspace will be helpful. This tutorial is intended for first-time Flash Catalyst users. 

User level

Beginning

In this tutorial, you will use Adobe Flash Catalyst to create a set of interactive wireframes for an expense reporting tool. In addition to getting started with Flash Catalyst you will learn how to:

  • Use states to structure your wireframe
  • Use the Common Library panel to quickly mock-up applications
  • Implement best practices for working in Flash Catalyst
  • Share your interactive wireframes with others

Before you get started, take a look at the final version of what you will be creating.

Note: Not all of the buttons are active.

Create and layout the key states of your prototype

Create a new Flash Catalyst project

  1. Start Flash Catalyst.
  2. Choose File > New Project.
  3. In the New Project dialog box type Expense Report as the project name.
  4. Type 400 as the width and 500 as the height.
  5. Leave the Resizable option selected and the leave background color as white.
  6. Click OK.

Create the first state of the application

In Flash Catalyst everything is managed by states. Think of your application's states as scenes in a movie; they are used to break your application up into specific sections.

Additionally, the components in Flash Catalyst have states. Consider a door in your house; it can be either open or closed. Similarly, in Flash Catalyst your components can have multiple states that you define.

Follow these steps to create a state for a list of projects that will make up the expense report:

  1. Double-click the State1 text in the States panel and type projectList. This will rename the first and only state in the file (see Figure 1).

State names cannot contain any spaces since they directly correspond to the code generated by Flash Catalyst. I recommend using camel case to make reading multiword titles easier.

  1. Select the Rectangle tool (see Figure 2).
  1. Click and drag a rectangle of any size onto the artboard.

The Heads Up Display (HUD) will prompt you to convert the rectangle to a component. Disregard the HUD at this time.

  1. In the Properties panel (see Figure 3), adjust the size and position of the rectangle to the following:
  • X:5
  • Y:5
  • W:390
  • H:490
  1. In the Layers panel, expand the folder named layer1 and double-click the layer rectangle to rename it as Application Background. This will make it easier for you to find this layer in the future.

Create a list of projects

The next step is to create one of the items you want repeated as a list.

  1. Select the text tool (see Figure 4).
  1. Click the artboard.
  2. Type Project Name.
  3. Click the artboard again to place the text.
  4. Format the text field by using the Properties panel (see Figure 5) to set the following attributes:
  • Font: Arial, Bold
  • Size: 14
  • Color: #464646

Note: To set the color, click the color box to the right of the Size option to open the Color Picker.

  1. Follow the steps above to create a second text field. Type 3/12/2011 – 3/14/2011 as the text and set the following attributes:
  • Font: Arial, Regular
  • Size: 12
  • Color: #999999
  1. Create a third text field. Type $1,278.98 as the text and set the following attributes:
  • Font: Arial, Regular
  • Size: 14
  • Color:#464646
  1. Draw a horizontal line with the Line tool (see Figure 6) across the artboard below all of the text fields. This will act a visual separator between the list items.
  1. Using the Select tool (the arrow), arrange the text fields and place the line below all them (see Figure 7).

Now that you've created one item in the list, you're ready to turn this set of objects into a data list.

  1. Use the select tool to select all the text objects and the line by holding down the Shift key and clicking on each object.
  2. Select Choose Component > Data List from the HUD (see Figure 8).
  1. When prompted, type projectListSkin as the name of the component.
  2. Click OK.

Note: Make an effort to use descriptive names for your components. It will help you and any developers that you might be working with.

Once the component has been created you must define what each of the objects in the component is used for.

  1. Select the data list with the pointer tool (if you have not clicked on anything else it will still be selected).
  2. Choose Edit Parts from the HUD. (Alternatively, you can double-click on the component to edit its parts.) Note that the Breadcrumbs bar updates and new states appear, indicating that you're viewing the component (see Figure 9).
  1. Select the three text fields and the line by dragging a selection rectangle around them with the Select tool.
  2. Choose Convert To Data List Part > Repeated Item from the HUD (see Figure 10). You will see the component change and your objects will now be repeated.

Figure 10. The HUD while editing the data list component.

  1. In the Properties panel, adjust the following attributes for the repeated item data group:
  • W:390
  • H:390
  • Layout > Padding, Top:5
  1. Drag a vertical scroll bar from the Common Library panel (see Figure 11) to the artboard.

Flash Catalyst will automatically link the repeated items to the scroll bar in the data list component you created.

  1. Select both the repeated items data group and the scroll bar.
  2. In the Align panel (see Figure 12), ensure Relative To Artboard is deselected and click the Match Height button (it's the middle icon under Match Size).
  3. Next, align the objects to the right and top using the appropriate buttons under Align (Horizontal Align Right and Vertical Align Top).
  1. Navigate back to the root level of the application by either clicking on Expense Report in the Breadcrumb bar or by double-clicking the artboard outside of the data list.
  2. Reposition the data list component by selecting it and setting the following properties:
  • X: 5
  • Y:105

Add a search and filter bar to your design

  1. Using the Rectangle tool, draw a rectangle above your data list and set its properties as follows:
  • X:5
  • Y:55
  • W:390
  • H:50
  • Stroke color: #5C5C5C
  • Fill color: #E2E3E3
  • In the Layers panel, expand the folder layer1 and rename the layer with the above rectangle to Header Bar Background.
  1. Drag a text input from the Common Library panel to the artboard and position it in the rectangle. This will act as the search bar.
  2. Select the text input and set the prompt text to Search in the Properties panel under Common (see Figure 13).

Note: Prompt text is text that is deleted when the user clicks in the text field to begin typing.

  1. Drag a button bar from the Common Library panel to the stage. This will act as a filter that allows the user to filter the list of expense reports based on a selected number of days.
  2. Select the button bar and open the Design-Time Data panel (see Figure 14).
  3. Change the values to 30, 60, 90, and All.

There is a direct correlation between the rows of design time data and the number of buttons on the button bar, so you'll want to delete the fifth row.

  1. Select the fifth row and click the trash can icon at the bottom of the panel to delete the last button.
  1. Set the default selection of the button bar to 60 by setting the Selected Index to 1 in the Components section of the Properties panel (see Figure 15).

Note: The selection index is set to -1 by default, indicating there is no selection. The first button (left to right) has index 0, which correlates to the row number of the design-time data.

  1. Resize and position the search field and button bar using the Align panel (see Figure 15).
  1. Drag a button from the Common Library panel and position it above the button bar (see Figure 16).
  2. Change the label of the button to New Project in the Common section of the Properties panel.

Create a project details state

In this section you'll create a new state that will be used to display project details.

  1. Click + New Blank State in the States panel and rename the state to projectDetails.
  2. In the Layers panel, turn on the visibility of the Header Bar Background and Application Background layers by clicking on the leftmost column of the respective layer. In addition to seeing the objects appear on the stage you will also see an eye icon appear, indicating the layer is visible.

Flash Catalyst, like many Adobe applications, supports layers. However, layers in Flash Catalyst are unique in a couple of notable ways:

  • Their visibility can be controlled by the state of the application.
  • Individual components have their own layers, which are managed by the component's state.

In larger projects layer management is critical. I recommend using folders and renaming layers as needed to help you manage a project.

Follow these steps to set up the header of the projectDetails state:

  1. Use the text tool to place Project Title in the header of the application (see Figure 17) and set its properties to the following:
  • Font: Arial, Bold
  • Size: 16
  • Color: # 464646
  1. Add a button to the upper left of the application from the Common Library; set its label to All Projects.

Next, you'll create a quick entry bar (see Figure 18). Now that you're familiar with placing and configuring elements in Flash Catalyst, this should be relatively straightforward, so the steps here are less detailed.

  1. Add a text field with the text Quick Entry: and the following properties:
  • Font: Arial, Bold
  • Size: 12

Note: Use the Common Library panel for the next four steps.

  1. Add a text input and set the prompt text to Date.
  2. Add a dropdown and set the prompt to Expense type.
  3. Add another text input and set the prompt text to $ Amount.
  4. Add a button and set the Label to Add.
  5. Arrange the components as shown in Figure 18.

Next you'll create a new data list for expense items (see Figure 19).

  1. While still in the projectDetails state of the application, create the following text fields below their associated items in the quick entry bar.
  • Date
  • Expense Type
  • $ 345.23
  1. Align the text fields.
  2. Draw a line underneath the text fields.
  3. Select the three text fields and the line.
  4. Convert the objects to a data list named projectDetailsSkin.
  5. Define the repeated items, by clicking Edit Parts in the HUD, selecting the four elements, and choosing Convert To Data List Part > Repeated Item in the HUD.
  6. Set the properties of the repeated item data group to:
  • W: 390
  • H: 275
  • Layout > Padding, Top: 7 (or whatever value looks right to you)
  1. Add a vertical scroll bar.
  2. Return to the projectDetails state of your application and adjust the position of the data list to:
  • X:5
  • Y:105

Now, create an expense report overview panel.

  1. Indicate a resizable panel below the expense list by using the line tool to draw a panel and handles (see Figure 21).
  1. Populate the panel with the following items from the Common Library panel, resizing the objects as needed (see Figure 21):
  • A pie chart placeholder.
  • Five check boxes each labeled Expense Type.
  • A button labeled Save.
  • A button labeled Submit.
  1. Use the Text tool to add $1,234.89 with the following properties:
  • Font: Arial, Bold
  • Size: 22

Add a modal state

  1. Select the projectDetails state of the application and click Duplicate State in the States panel. This creates a new state with the same layers turned on as its parent state.
  2. Rename the new state as Modal.
  3. Draw a rectangle with the following properties to create the darkened background of the modal state (see Figure 22).
  • No Stroke
  • Fill color: #333333
  • Opacity: 80%
  1. Use the Align panel to size and align this rectangle relative to the artboard.
  2. Draw a rectangle with the following properties to create the modal window:
  • Stroke color: #CCCCCC
  • Fill color: #FFFFFF
  1. Place three buttons from the Common Library panel in the modal window with the following labels:
  • Add image via webcam
  • Browse for image
  • Don't add an image
  1. Size and position the objects as needed.

Create the modal component

Since the modal window will have multiple states you need to create a new component to manage them.

  1. Select the three buttons and window background.
  2. From the HUD, choose Choose Component > Custom /Generic Component (see Figure 23).
  3. Name the component modalComponent.

Next, add an imageCapture state to the modal component.

  1. Begin editing the modal component by double-clicking it or by selecting it and choosing Edit Custom Component Appearance > State1 from the HUD.
  1. Rename State1 to addImageHow.
  2. Select the addImageHow state and click Duplicate State in the States panel.
  3. Rename the new state imageCapture.
  4. In the imageCapture state, use the Layers panel to hide the three buttons by clicking on the associated eye icons.

In addition to hiding components, you can specify different object properties (size, color, and so on) in each state. This allows for tweening of the objects or components during transitions between each state.

  1. Select the modal background and enlarge it using the object's handles (see Figure 24) or the Properties panel by setting the following values:
  • W:390
  • H:340
  1. Drag an image placeholder from the Common Library panel onto the modal window and set its size to the following:
  • W:375
  • H:325

Center the image placeholder on the background using the Align panel (see Figure 25). The image placeholder represents the image from the user's webcam.

  1. Draw a rectangle (the footer) at the bottom of the window with the following properties:
  • Stroke: none
  • Fill color: #333333
  • Opacity: 80%
  • H:40
  • W:375
  1. Align the footer with the bottom of the image placeholder.
  2. Place three buttons on the footer with the following labels:
  • Cancel
  • Retry
  • Accept
  1. Choose File > Save to save your file.

Link states together with interactions

Now that you have the key states of the application defined it's time to link the states of the components together so that the user can interact with the application. For this tutorial you will be using mostly on click interactions. You can, however, define a multitude of other interactions in Flash Catalyst including on double-click, on roll out, on select, and on change.

Creating your first interaction

  1. Navigate to the projectList state of the application
  2. Select the projectListSkin Data List
  3. In the Interactions panel, click Add Interaction and select the following properties (see Figure 26):
  • On Select
  • Play Transition To State
  • Target: Application
  • State: projectDetails
  • When Any Item Is Selected
  1. Click OK.

In Flash Catalyst you can define separate interaction for each list item or attach the same interaction to all list items. This lets you create clickable wireframes of varying detail and complexity.

  1. Choose File > Run Project.

This will preview the project in your default browser and allow you to test your interaction.

  1. Click one of the line items in the project list and you'll be taken to the project details view.

If you do not see the the project details when you click an item, recheck your settings in the Interactions panel.

Adding more interactions

In this section you'll continue adding interactions to the application's components using the same steps as above. Run your project from time to time to confirm the interactions are working. Remember, you are defining a specific path through the application to help visualize the experience; therefore you do not need to define an interaction for every component.

For all of the following interactions, select On Click and Play Transition To State.

  1. In the projectDetails states of the application, select the All Projects button.
  2. Add an interaction with the following settings:
  • Target: Application
  • State: projectList
  • When In: projectDetails
  1. Select the Add button.
  2. Add an interaction with the following settings:
  • Target: Application
  • State: Modal
  • When In: projectDetails
  1. Switch to the addImageHow state of the modal component.
  2. Select the Add Image Via WebCam button.
  3. Add an interaction with the following settings:
  • Target: modalComponent
  • State: imageCapture
  • When In: addImageHow
  1. Select the Don't Add Image button.
  2. Add an interaction with the following settings:
  • Target: Expense Report
  • State: projectDetails
  • When In: addImageHow
  1. Switch to the imageCapture state of the modal component.
  2. Select the Cancel button.
  3. Add an interaction with the following settings:
  • Target: Expense Report
  • State: projectDetails
  • When In: imageCapture
  1. Select the Accept button.
  2. Add an interaction with the following settings:
  • Target: Expense Report
  • State: projectDetails
  • When In: imageCapture
  1. Save your changes and run the project to try out the transitions.

Sharing the wireframes with others

Follow these steps to publish your wireframe so you can share it colleagues, clients, or anyone else:

  1. Choose File > Publish to SWF/AIR
  2. Select the output directory for your published files.
  3. Leave the other settings at their default values.
  4. Click Publish.

This will create a folder with two subfolders:

  • deploy-to-web – You can upload the contents of this folder to your server and share the project via your URL.
  • run-local – You can share this folder over your network; just instruct your team to open the file Main.html in a web browser to view your project.

Where to go from here

Now that you've learned the basics of how to create a wireframe in Flash Catalyst, you may want to add additional interactivity to this project by building out new states and linking them together. Or, start a new wireframe for your own project.