The other day on the Flash Catalyst help forums, someone asked if there was a way to create scrolling content, but not have the scroll track or thumb. Here is what we want the finished application to look like.
If you have tried creating a scrollbar in Flash Catalyst you will notice that both the scroll track and the scroll thumb are required elements (The increment and decrement buttons are optional). So how do you solve this problem?
Let’s start by creating a basic scrollbar. I have “high” quality buttons that I have imported, but my design obviously did not include a scroll track nor thumb. Using the built in drawing tools, I added two basic rectangles to the screen. Exact size and position are not critical for these elements. This is not true for the other two parts. You will need to have these positioned to where you will want these buttons in relation to your data list.
The scrollbar component with all four components shown.
You can test your component by going to File > Run Project. The scroll thumb should move back and forth within the scroll track. So now let’s “remove” it. Double click to access the scroll bar components, then select both the scroll track and the scroll thumb. In the lower right, you will see the Properties Panel. Now just change the Opacity property to 0.
Now if we look at our scollbar, we should see the component looking like this:
The scrollbar component with the track and thumb hidden.
Combining the scrollbar and the datalist.
I am going to skip the portion of attaching a scrollbar to your datalist. If you need help with this step take a look at this tutorial.
The second part of the question was “how do I have each thumbnail do something different?” Again, Flash Catalyst makes this fairly easy.
With the datalist selected, locate the Interactions Panel, and click the Add Interaction button. This will display this dialog:
We want the interaction to occur on the “On Select” event, then click on the CHOOSE STATE menu. You will need to have the states already created before you can add this interaction. For this demo, I have created a state/page for each of the 8 photo collections.
With the correct state selected, change the last option from “When any item is selected” to “When a specific item is selected”
Use the numeric stepper to pick which item in your datalist on which this interaction should happen. Remember, programmers like to start counting from 0.
After a while, your interactions Panel should start to look like this:
You should now be able to use the scroll arrows to move through your list, and clicking on a specific item in the list should take you to that state/page.
It would be nice if we had some visual transitions as we move from collection to collection, but it can be a real pain to create transitions from each item in a data list to all the other items in the data list. Again, Flash Catalyst has some nice features to ease that burden. If you look in the Timelines panel along the bottom, you can simply select all the state to state combinations, and then click the Smooth Transitions button.
You can also just display a specific state set by using the drop list.
And with that we have a nice scrolling selectable datalist. If you examine the FXP, you will notice that I moved the default selection layer and the over layer for the datalist repeated item.
You can download the FXP from here.
Hope you enjoyed this short tutorial!
Prototype A 