Flash Catalyst: Gallery & Datalists

When working with Flash Catalyst, often you will use the Datalist for displaying content. What is not always clear is how you can interact with each item in the Datalist. Let’s start with a simple Datalist of five photos.

The user can click on a photo, and view a larger version of the photo and some other information. But how to do this?

Gallery Details Sample

With the Datalist selected, go to the Interactions panel, and add an On Select interaction:

Interactions Panel

Now the additional setting that will make all this work, is the last option, “When a specific item is selected”. You will have to add an interaction for EACH item in your Datalist (this is where knowing ActionScript would play off, as you could write a simple event handler for this). Starting with 0 for the first item (programmers love to start counting from zero), keep adding interactions, and adjusting the item value.

Now you might encounter the 20 state limit of Flash Catalyst, so some up front planning might be needed to wrap the content within a custom component to work around that issue. (Again, if you were programming this design, you would have a template UI that is automatically populated via code).

On the state that displays our larger photo, I have included a Close button to return the user to the initial gallery screen. But there is a slight issue that the item we clicked on in the Datalist is still showing in a selected state. This is not the best user experience. To unselect the Datalist, we need to add an Action Sequence.

Again, with the Datalist selected on the Gallery screen, go to the Interactions panel, and Add Interaction – On Select. Now change the action to Play Action Sequence. Leave the last option to”When any item is selected”.

Now, select the Timelines Panel in the lower left. You should see an item under the Action Sequences panel. Select this item. The timeline will show an empty Action Sequence. There is a button along the button that says “+ Add Action”. Click this menu, then choose “Set Property”.

Available Actions

This will bring up the Properties Panel:

Properties Panel

Set the property to “Selected index” and the value to -1. Flash Catalyst uses -1 to mean that nothing is selected. Now when the user clicks on a photo, the selection state is forgotten.

Here is what a interactions panel will look like for a Datalist with 3 items clickable. Note that the Play Action Sequence is the last item in the list. If you place it before the Play Transition actions, it will not work.

Sample Interactions Panel

Here is a quick sample FXP that you can look at and play with.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s