Creating an interactive UI in Flash Catalyst

If you haven't done so already, download the sample files that accompany this tutorial and unpack the contents to your local drive.

Import your design file

1. Launch Flash Catalyst. You will be presented with a Welcome screen that gives you the option to open a recent project, create a new project from a design file, or create an empty project. For this tutorial you're going to use an existing design file created in Illustrator CS4.

   Optional: If you'd like to examine the structure of the document in Illustrator and potentially make alterations to the design of the application user interface then you can do so. You should pay particular attention to the use of layer folders and groups to logically specify the structure of the Illustrator document.

2. From the Welcome screen, select the From Adobe Illustrator AI File option (see Figure 4).

   

   Figure 4. Create a new project from an Illustrator AI file.

3. From the file selector window choose the example file that will be used in this tutorial, it is named: employee_app.ai.
4. When the Illustrator Import Options dialog box appears (see Figure 5), click OK to accept the default import options. Flash Catalyst will now import the Illustrator file. You may experience a slight delay during which the import libraries are initialized and the import process takes place.

Figure 5. Accept the default import options.

Flash Catalyst will display the imported Illustrator file on the artboard and you should also see a number of panels open by default, including the Tools panel on the top right, with the Layers and Properties panels directly below (see Figure 6). At the top of the screen you'll see a visual list of pages/states and at the bottom you may see the Timelines panel.

Figure 6. The Illustrator sample file in Flash Catalyst.

Convert artwork to components

The application you are about to build will have multiple states, representing the search input (Search state), the search results (List state), and the detail information for the selected employee (Detail state). Note that the Illustrator sample file only defines a single view and that Flash Catalyst lists a single default state. Later in the tutorial you will define additional states of the application.

First, you need to look at the structure of the imported Illustrator file and decide how to represent the various parts of the user interface in your application.

1. Look at the Layers panel (see Figure 7). You'll see that the designer used layer folders to separate common controls (in the Controls folder) from the search results elements (in the left panel folder) and the detail elements (in the right panel folder). This makes it easier for you to identify graphical assets based on where they are used in the interface and is a recommended approach for designers to take when preparing design files in either Illustrator or Photoshop.

   

   Figure 7. The structure of your design comp.

2. Select the first Group item under the Controls folder; this represents the Close button, which, in a desktop application, lets you exit an application. However, since you want to create a browser-based application, you will use the button to reset the application interface and just show the user the Search state.

3. Locate the Heads-up display, or HUD (it's the black floating panel), and select Button from the Convert Artwork to Component popup menu (see Figure 8).

   

   Figure 8. Convert your artwork to a component.

   Note that Flash Catalyst changes the description of the element from a Group to a Button. Behind the scenes, Flash Catalyst has created a Flex Button component and made sure that the generated graphical skins for that button are representative of the visual design.

4. Repeat Steps 2 and 3 to convert the Minimize button (<) to a Button component as well.

5. The Controls folder also contains a number of graphics that together will represent the Text Input component that lets users enter their search criteria. Select all four graphics and then convert them to a Text Input component using the appropriate menu item in the HUD. After doing so, your layers panel should look similar Figure 9.

   

   Figure 9. The Layers panel after you've converted the artwork into components.

Define states for your button components

Typically, button controls and other user interface elements provide a visual response as the user interacts with it. Just as an application can have multiple states defined, each component can also have a number of different states; a button, for example, can have an Up, Over, Down, and Disabled state.

1. Select the Close button on the artboard and from the HUD select the Over state button under Edit Button Appearance (see Figure 10). You are now editing the individual states of the selected button and can make changes that the user will see when they interact with the component.

   

   Figure 10. Edit the individual states of the selected button.

2. Select the path used to define the button, either directly using the Direct Select tool (the white arrow in the Tools panel) or by expanding the group at the top of the layers panel and selecting the Close layer, and then change the color using the Properties panel (see Figure 11).

   

   Figure 11. Change the button color.

   If you want to make edits to the other states of the button, you can select an alternative state using the Pages/States panel (see Figure 12).

   

   Figure 12. You can select states from the Pages/States panel.

3. When you have finished making changes to the component and want to return to editing the application, use the breadcrumb navigation at the top of the artboard to step out of the button component (see Figure 13).

   

   Figure 13. Use the breadcrumbs to step out of a component.

At anytime you can use the File > Run Project menu command to compile the application and test it in the browser (see Figure 14). If you do this now you should be able to test the rollover functionality of the button you just worked on.

Figure 14. At any time, you can test your changes by selecting File > Run Project.

Creating the scrollbar and list components

You need to create two more complex components in your application: a customized scrollbar and a list control that is used to display the search results (look closely, and you'll see that the designer has already created graphics for these two items).

1. Start with the scrollbar. Select the graphical parts of the scrollbar either in the layers panel or on the artboard and then choose Convert Artwork to Component > Vertical Scrollbar in the HUD. You should see that the HUD reports that there are component issues (see Figure 15). This is to be expected because you haven't told Flash Catalyst which graphics relate to the various parts of the component.

   

   Figure 15. Flash Catalyst reports component issues for you to fix.

2. Click the Edit Parts button in the HUD to edit the newly created scrollbar component.

3. Select each graphical part of the scrollbar in turn and assign it correctly using the Assign Parts menu in the HUD (see Figure 16); only the Thumb and Track are required, but your design also specifies the Up/Down buttons, so you should assign those as well. When you are finished assigning the correct parts, navigate out of the component.

   

   Figure 16. Specify the vertical scrollbar parts.

4. Select the text element and the background element for the list item and use the HUD to convert them into a "Data List" component. You will notice that the HUD reports component issues, just as we saw with the scrollbar.

   In this case, you need to specify which part of the design will repeat for each and every data item.

5. Click the Edit Parts button in the HUD, then reselect both the text element and the background element and choose Repeated Item (required) from the HUD to specify that both of these will repeat. You should see that Flash Catalyst now repeats the item a number of times on the artboard.

   

   Figure 17. Specify the repeated item of the Data List.

6. With the repeated item selected, use the Properties panel to adjust the vertical spacing between each item; the default value is 6, but for this design a space of 2 is more appropriate. Also adjust the height of the repeated item so that it is approximately 325 pixels high; you can do this either on the artboard or through the Properties panel (see Figure 18).

   

   Figure 18. Adjust the vertical spacing of the repeated item.

   The final step in creating the data list is to edit the states for the repeated item so that when a user moves the mouse over an item in the list the background changes color.

7. Double-click the repeated item to edit the actual item renderer for the data list, then select the Over state as shown in Figure 19.

   

   Figure 19. Select the Hovered state.

8. Use the Layers panel to remove the layer named ItemHighlight by selecting it and clicking the Trashcan icon. This default roll-over effect will be replaced by an effect you'll define shortly.

9. Use the Properties panel to set the color of the rectangle that provides the background for the item renderer (see Figure 20).

   

   Figure 20. Specify the background color for the item renderer.

10. Navigate out of the data list component and return to the main application user interface.

    Optional: You can use the Design-Time Data panel to add dummy data so as to see how your user interface will render typical data values (see Figure 21); add/remove rows and edit the text in each row and Flash Catalyst will update the artboard accordingly.

    

    Figure 21. Populate the Design-Time Data panel with dummy data.

    Next, you need to ensure that the scrollbar is attached to the data list component, so that in the completed application the user can scroll through the search results.

11. Select the scrollbar component and press Ctrl+X (Cmd+X) to cut it. Next, double-click the data list component to edit it and then paste in the scrollbar. This automatically associates the scrollbar with the data list.

Define the user interface states and navigation

Next, you'll define the different states of the application user interface as well as specifying the user interaction required to navigate between those states.

1. Double-click the Page 1 text in the Pages/States panel and rename the state to Detail. Then click the Duplicate State button to make a copy of the current state; rename this new state to List.

   

   Figure 22. The currently selected state is shown with a blue background.

   With the List state selected (indicated by a light blue background) you need to make the necessary changes on the artboard to represent the user interface for this state.

2. In the Layers panel, use the context menu on the right panel folder and select the Group menu option; this will allow you to perform transitions on the group, rather than each individual element later in the tutorial.

3. Click the eye icon next to the right panel folder to make that folder invisible (see Figure 23); this has the effect of removing any items contained within the folder from the List state.

   

   Figure 23. Get ready to make the right panel folder invisible.

   You should also hide the minimize (<) button using the same technique, as this will not be shown in the List state.

4. Use the Selection tool (the black arrow in the Tools panel) to move the Close button and the Signed In indicator, and then to resize the panel. The List state for your application should look similar to Figure 24.

   

   Figure 24. This is how your List state should look.

5. Now duplicate the List state in the Pages/States panel and rename the newly created state Search. The Pages/States panel should now show three states: Detail, List, and Search (see Figure 25).

   

   Figure 25. Your three states.

6. Apply the same techniques as before to amend the user interface presented in the Search state so that it is similar to Figure 26.

   

   Figure 26. Your Search state user interface should look like this.

7. When your application loads in the browser, you want the user to initially be presented with the Search state. By default Flash Catalyst will show the first state, which in this case is actually the Detail state. To change this, use the context menu on the Search state in the Pages/States panel and select the Set as Default State option (see Figure 27).

   

   Figure 27. Set the Search state as your default.

Now that you've defined the states of your application, you need to specify what will trigger the actual change of state when the application is running; typically this will be in response to the user interacting with user interface elements.

1. With the search Text Input component selected in the Search state click the + Add Interactions button in the Interactions panel. You will see a number of interactions that are available for use with the Text Input component listed.

   You want to display the List state of the application after the user has typed his or her search criteria and then pressed Enter on the keyboard, so the trigger here will be the On Enter interaction (see Figure 28).

   

   Figure 28. Use the On Enter interaction.

2. Select the On Enter interaction and then, using the popup menus, select Play transition to state in the first; then, in the second, select the state you want to show the user, so select List.

3. Now move to the List state using the Pages/States panel and select the Data List component on the artboard. You'll need to repeat the process for the Text Input component, however, note that the list of custom interactions for a Data List is different. Select the On Change interaction > Play transition to State > Detail so that the application will display the Detail state when the user selects an item from the list of employees (see Figure 29).

   

   Figure 29. Specify the Detail state.

4. Finally, move to the Detail state; select the minimize button (<) and apply a custom interaction such that when users click the button, the application will display the List state; repeat the operation with the Close button (x), but this time the interaction should cause the Search state to display.

Applying transitions between states

Although you could just have the application jump between different states, it is likely that you'll want to apply smooth transitions that provide users with a sense of context as to where they have come from and where you're taking them to in the application user interface.

You can apply such transitions between states using the Timelines panel.

1. If it is not already visible, then double-click the panel header to display it. You should see a list of state transitions for the application, none of which have any timeline-based animations specified as of yet (see Figure 30).

   

   Figure 30. The Timelines panel lets you apply transitions between states.

2. You can apply a default set of transitions between states by selecting the desired State transition from the list on the left side (in this case you're working with the Search > List transition) and then clicking the Smooth Transition button (see Figure 31).

   

   Figure 31. Choosing a smooth transition.

   Although this is most likely an improvement over the static movement between states, if you test the animation by clicking the Play button in the Timelines panel you'll see that the order and length of the individual animations could be improved to provide a better effect.

3. Try adjusting the position of the Fade and Move operations as shown in the timeline in Figure 32, and then extend the length of the Resize effect. Experiment with applying timeline-based effects between different states of the application.

   

   Figure 32. Make edits to the transitions.

   Note: In addition to previewing the animations using the Timelines panel, you should always test the state transitions by running the project to ensure that you get the desired effect when the application is deployed.

   The final step you need to complete is to export the project so that a developer can undertake further development of the application in Flash Builder.

4. From the File menu, select Save As and save an FXP file to a location of your choice. This file can be opened in Flash Catalyst, should you wish to make further changes to the project, or you can pass the FXP file to a developer who can import it using Flash Builder.

Page 2 of 3

Previous Page

Next Page