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?
With the Datalist selected, go to the Interactions panel, and add an On Select interaction:
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”.
This will bring up the 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.
Here is a quick sample FXP that you can look at and play with.