Using Custom Components in Flash Catalyst

One of the unfortunate limitations of Flash Catalyst 1.0 is that it only allows for 20 Pages/States per application (or component). As you start developing more complex prototypes, you might quickly find yourself reaching this limit. This tutorial will walk you through a solution to overcome this limitation by creating custom components.

A common example where one might encounter this problem is when creating a photo slide show project.

Photo Slide Show

To keep this tutorial simple, our slide show will only have 3 photos. Here is the existing slideshow prototype with each photo and its controls laid out as top level Pages. You can download the FXP to see the structure of the Flash Catalyst Project.

Now let’s transform our prototype into a custom component. If you are not familiar with the concept of custom components, the Flex Framework allows you to create your own component just like a Button or Scroll Bar. This ability to merge various components together into a single, more manageable component is incredibly powerful. For example: you can take Image component (such as a photo) and Text component (such as a caption) and combine them into a single component. If you are familiar with MovieClips in Flash Professional, they are much like that.

Let’s get started. Downloaded the FXP and open in Flash Catalyst. Take moment to inspect the structure of the project. You should see each page simply toggles the visibility of the photos, and the interactions use a basic cross-fade type effect.

Select Page 1 from the Page/State navigator. This is one critical step when creating a custom component. Using the Layers Panel, turn the visibility of each photo on.

This will ensure that they will be available within the component. I find it easier to bring in all the assets that my component will use at this step, instead of adding them later.

Now select all the elements on Page 1.

Using the Heads Up Display (HUD), select Custom/Generic Component from the drop down list.

This option is also available through the contextual menu. Since this file had interactions applied to the arrow buttons, Flash Catalyst will warn us that in creating a custom component we will remove all the interactions association with these elements. Click OK.

In the Library Panel, a new component will appear. Let’s change the name from “SanFranCustomComponent” (which is auto-generated by Flash Catalyst) to something more meaningful like “SlideShowWidget”.

We now need to rebuild our interactions within our new component. Open the SlideShowWidget component in the Library Panel. You will notice that the Pages/State Navigator only shows one Page. Now we can add new states within the component, and not count against the top level’s limit of 20 Pages. The component is also limited to 20, but with some careful design you should be able to solve this problem. I would caution that if your efforts are going to used by a Flex developer, you should talk with them as how best to create the components so that they may be used. Also, if you find yourself facing a very large Page/State count problem, it might be time to reconsider the scope of the prototype or solve the problem by using Flash Builder to code portions of the prototype.

I wish there was an easier method other than completely rebuilding the prototype’s interaction inside our component, but there isn’t. Hopefully, by being aware of this limitation, you can use custom components at the start of your project instead of when you reach this limit.

Just like the top level version, we add additional States for each photo, apply Smooth Transitions between them, then add the interactions to the buttons.

Once the new component has been built, we can delete the other top level Pages that previously contained the other slides.

Photo Slide Show

Download the completed FXP.

I hope this simple tutorial has helped you better understand what custom components are, and how you can use them in your next Flash Catalyst project.


One comment

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s