The latest release of Flash Catalyst Beta 2 has brought us a lot closer to having a shipping application. We now have the ability to set a host of properties for each object, easier access to skin the wireframe components, and support for video and 3D rotation. Unfortunately, we do not have a full component set available to us. The reason behind not having all the components in Flash Catalyst is due to the different component architecture used in the Flex 4 framework (Spark) versus the Halo components used in the Flex 3 framework. Until a component has been rewritten in the Spark framework, Flash Catalyst cannot use it. The most notable absence is the comboBox. In this article I will show you a simple method to recreate one by creating a custom component. It is not perfect, but it just might be able to tide you over until we have an official component from Adobe.

So first let’s break down the comboBox component. In essence, it is actually just a button and a drop-down data list. With the separation of the component into these base elements, we can begin. Unfortunately I am not a visual designer, nor do I play one on TV, so I just used screen captures of the existing Flex 3 comboBox.

Here is the layout of the Photoshop file after the four states (normal, rollover, selected, disable) have been created:

Let’s bring this first element into Flash Catalyst. Since we are building the custom component, chose the Create New Project > Adobe Flash Catalyst Project. Name the project “comboBox Demo” and set the canvas width and height to 400 pixels. If you chose from an Adobe Photoshop PSD file, you have to adjust the artboard’s size as well.

Now we can import the PSD file into Flash Catalyst. Go to File > Import > Adobe Photoshop file (.psd)… and select the comboBox.psd file. This will bring up a dialog - use the default settings, and click OK. The file will be read in and placed in the center of the canvas. Reposition the element toward the top of the canvas, as we will need this to have room for the drop-down list that we will add later.

Now we need to convert the art into a custom component. Since we are going to have to add a data list, using the Button component will not work. This means we have to add the standard interactions ourselves. One major change from the Beta 1 release to the Beta 2 release is addition of the Interactions Panel. In the Beta 1 release, this functionality was within the HUD.

So let’s wire up this component. The first step is to create the four states of the component (normal, over, selected, disabled). With our Custom Component selected, use the HUD to edit the Custom Component’s appearance, click the State 1 button to get started.

Now use the Duplicate State button on the Pages/States Panel to make the three other states. Once you have made the four states, disable the associated visual layers to create the proper visual state. To name each state, simply click on the text next to the thumbnail.

View image

This is perfect time to stress the importance of good layer naming. Since I took the time in my Photoshop file to name each state, it is quick and painless to identify the matching visual to the components state. Now imagine a more complex visual file filled with the default Layer # names, and match those elements.

You may have noticed I did not do anything with the disabled state of the component in the Photoshop file. We can quickly add our own disabled styling from within Flash Catalyst. Let’s make the text’s opacity about 50%. Make sure you are editing the component’s disabled state, and then select the text element. On the right side of the Flash Catalyst interface, you will find a Properties Panel. One of the sub panels is named Common. It may not update properly in this release, so toggle the small arrow to the left of the sub panel title. You should now see a wide range of text options available to you. Feel free to explore them, but for now we only want to change the Opacity setting to 50.

You also might want to take the time to rename the Custom Component to something more friendly. To do this, select the Library Panel, then in the Custom Component sub panel, select the component and rename it.

Now that we have the four states of the component, let’s make it work. Click the Add Interaction button and add the following interactions:

ON CLICK; Play Transition to comboBox: selected
ON ROLL OUT; Play Transition to comboBox normal if comboBox is in over state
ON ROLL OVER; Play Transition to comboBox over if comboBox is in normal

We will be adding two more interactions later. You may have noticed that we limited the Roll Over and Out state not to include the selected state. We will need that state to be ‘sticky’ in order for us to show and interact with the list.

Now let’s return to the top layer of the canvas. One way to do this is to the use breadcrumb navigation located just below the Pages/States panel.

Let’s go ahead and run the project as it stands. You can either choose File > Run Project or use the keyboard shortcut of Command-Return. Since I do a lot of work with the Flash IDE (Flash Lite development), I have become used to that method of previewing my SWF and always to want to do that when I get to work in Flex/Flash Builder, so that shortcut makes me very happy.

After a few moments, your default browser will open and your newly created button should appear and function as expected. Now on to the next step, creating the drop down list.

Let’s import what will become our drop down datalist. I find it easier to work in small chunks, and then merge together. This allows for easier debugging since they are decoupled.

Make sure you are at the top level of the Canvas, then import the listItems.psd file. You can keep the default settings. After the PSD file has been imported, let’s take a moment to keep our assets managed within Flash Catalyst. Like most Adobe applications, Flash Catalyst supports the idea of folders to group visual assets. You will notice that assets are automatically placed in the Layer 1 folder. Let’s make a new folder and name it ComboButton, then move the layer name Button into it. Now rename the Layer 1 Folder to Datalist.

Now, let’s build our data list component. One of the first things we need to do is actually to remove some assets from the canvas. Select all the avatars and labels except for Anne and delete them from the canvas. You should also leave the grey line and background.

Make sure all the visual assets are selected again, except for the button we made earlier. Again using the HUD, convert the artwork into a datalist. Once this is done you will notice the HUD is informing us of an issue with the component. Don’t worry, we will correct that next.

Click on the Edit Parts on the HUD, and we will get started.

One of the first things you might notice if you have not use Flash Catalyst before is the ability to Edit in Place. When using Edit in Place, the canvas will be dimmed, and the component that you are editing remains in focus.

Now select the just the Anne avatar, label and grey rule, then using the HUD, click the Convert Artwork to Data List Part, and then select the Repeated Item. After a few moments, you can see one of the really powerful features of Flash Catalyst. It has taken these elements, and turned them into a repeated list for us. By default, it simply repeats the elements that we told it to repeat, but we can quickly change our data set. But first, let’s adjust our view port. You will notice that a dashed blue line surrounds the repeated datalist and resize handles have also been added. We can manually adjust them or use the Common Properties panel. Set both the X & Y location to 1, and the width to 218 pixels and height to 222 pixels.

You might have noticed a new panel, Design-Time Data, along the bottom of the interface once we created a date list item. We can use this panel to change the data that this data list uses. First let’s update each of the avatar icons. Simply click on the avatar in each row. A dialog will appear that you can then quickly choose a new image to use. For the text labels, you can edit that within the panel. Leave the image 2 column as is.

Unfortunately, the dialog box for selecting images, does not keep the folders in their last state, so you will need to reopen the folder to update each avatar.

Default, the data list only creates 5 items. We need 6 items for our example, so let’s add one. Click the + Add Row button located in the lower left of the panel, then add our last person.

Our data list is all set, but we need to make a change to our background image. Carefully select the background graphic and delete it. Then select the rectangle tool and draw a rectangle that is 220 pixels wide and 230 pixels high. Set the background color to white and the weight (aka stroke) to 1 pixel and its color to black. Unfortunately, this rectangle sits above our data list, so right click (control-click for us Mac users), then select Arrange > Send To Back.

If we run the project now, we will have a working data list. However, as you rollover each data item, you will see the default rollover and selection effects that Flash Catalyst adds by default. Let’s go make these changes. You might notice that there is a gap between each row and rollover and selected states. Not quite the look we were going for since we have a custom separator in our design. This is easily fixed. Return to Flash Catalyst, and select the data list, the open the Layout sub panel. There change the spacing value to 0. There are a lot of other properties here, so make sure you take the time later to explore them.

Let’s run the project again, and we should have the look we were going for. If you want to change the color or opacity of the over or selected states of a data list item, simply double click the data list item. This will allow you view each of the three states of the data list item.

Now let’s combine this two components together to simulate our comboBox.

Select the data list component, then Cut and Paste it into the comboBox Button’s Selected State. You will need to reposition the data list component to fit under the comboBox button.

If you run the project now, you should see the data list appear with your click on the comboBox button. Unfortunately, there is no way to dismiss this state once it is opened. So let’s go add that interaction.

Return to the top level of the canvas, and select the comboBox button, then add the following interaction: ON CLICK Play Transition to comboBox Normal if comboBox is in the selected state.

The next step in recreating our comboBox is to do something if the user actually selects one of the items from the list. A new feature in Flash Catalyst Beta 2 is the ability to handle just this type of interaction. On the datalist element, we are going to add the following interactions:

You will see that we can specify the condition, in this case to occur only when Item 1 in the datalist is selected. You will need to add this interaction for each list, just remember to change the item value. I also had each selection go to a different Page that contained a text field informing the user of their selection. Here is what the final interactions list looked like:

Lastly, another item that is not handled quite right is if the user clicks outside the comboBox while the list is displayed. To solve this I added a rectangle that has no fill. I turned this into another custom component, so I could apply an interaction to it. You can download the completed FXP (along with the PSD files) comboBox_demo_files.zip.

Read more from Chris Griffith.