Creating An Image Gallery Using a Data List
Ever wanted to create an image gallery with more than 20 images? Ever wanted to play some more with Data Lists in Catalyst? Well, here's your chance. We're going to create an image gallery using Data Lists and the Design Time Data Panel, so that you can create an image gallery with as many images as you want. The end result of this tutorial will look something like the below image.
More after the jump.
Setting the initial position on a scroll panel
If you've been playing around with scroll panels, you've probably noticed that the scrolling content window always starts off displaying the upper left corner of the actual scrolling content. Great for anything text-based, but not so great for anything image-based. For example, if you're scrolling an image, you will probably want to start out with the content window displaying the center of your content.
Example 1 (Centered Content)
Example 2 (Default, Top-left Content)
More after the jump!
Creating an Expandable Wireframe Container
Flash Catalyst comes with some useful wireframe components, but eventually you'll want a component that it doesn't offer. When this happens, you can easily create the component you want, add some interactivity and animation, and reuse the component throughout your projects. Let's dive into the process!
Adding key input to your swf
In Catalyst, it's easy to mock up interactions using mouse events with buttons and other components. But what if you want to add keyboard interactions, for events like pressing the "j" or enter keys? For example, try clicking the button in the below swf. Notice that you can also press the spacebar or the right arrow key to get the same effect.
The easiest way to do this is to mock up your interactions using buttons in Catalyst, and then tweak your project in Builder to add the key events. We'll go over how to do this after the jump.
How do I get components to reset after changing states?
When you transition between pages or states in Catalyst, objects remain just as you left them. If you moved a scrollbar or slider in Page 1, then transition to another page, the scrollbar or slider will be in the same position as you left it. Often, you would like these components to reset, so that when you come back to them, they appear as if you had arrived at Page 1 for the first time.
We'll talk a bit about why Catalyst behaves the way it does, and how to achieve the desired effect after the jump.
Playing sound on application load
Although I'm not a huge fan of websites where audio begins to play immediately on application load, I wanted to try and accomplish the effect in Catalyst.
Just be sure to keep a mute or stop button front and center for your users. 
We're going to use the Adobe Media Encoder to convert the audio file to a video file.
Why? Well Catalyst offers extremely limited support with audio files in 1.0. We can play them, but otherwise cannot control them (pause, stop). The video support offers much better options for controlling content.
First, choose the audio file you'd like to being immediately playing on application launch.
Using List Interactions to Create a Photo Gallery
Lists are great for displaying a series of items, but they also have some handy interactivity features. One such feature allows setting up custom interactions that run when a specific list item is selected.
Tracking objects to the cursor on rollover
This post stems from a desire to 'track a visual object to the mouse' in Catalyst on rollover.
What does that mean exactly?
It means an object animates such that it appears to be following the mouse cursor.
I wanted to create a dodgeball game prototype in Catalyst, whereby the dodgeball hovered on the bottom of the screen, and followed the mouse horizontally.
On click, the dodgeball would animate and appear to bounce and hit a player.
You can achieve this mouse tracking behavior using either action sequences, or state transitions.
In this post, I'll discuss how to achieve this using action sequences.
The final outcome, should look like this: