Creating Lightbox Galleries with Flash Catalyst

One of the more popular uses of Flash Catalyst by designers is to create rich and engaging portfolios. However, many can quickly become frustrated as they try to convert their visual designs into the world of components. In this tutorial I will show the how to quickly build a “lightbox”-like gallery.

Here is the basic look of our final application.

and with an image being displayed

The first step is to convert each of the six thumbnails into a button. Select each thumbnail and either use the Heads Up Display (HUD) or the contextual menu to transform it into a button. We are not going to add any interactions to these buttons yet, but now is the best time to rename each of the buttons in the library. Keeping your assets well named and organized is one of the best workflow tips that a team can have. I named each button Photo_1, Photo_2, and so on. Note: You cannot have spaces in the name.

Now let’s turn our attention to the overlays. Many first time users of Flash Catalyst would take the approach of creating a new page for each full size image and then link each button to that specific page. This solution will work, but you will quickly discover that Flash Catalyst only allows a maximum of 20 pages/states. If you have a large portfolio, you quickly will hit this limitation.

The solution within Flash Catalyst is to create what is known as a “custom component”. By encapsulating a portion of project within a custom component, we can usually avoid hitting the 20-page limit. It also allows us to keep the project in a more manageable state.
We are going to apply the same idea that we would have done by placing each photo on a separate page in main application, but now we are going to do it within the context of a custom component.

On main page, let’s add a basic rectangle using Flash Catalyst’s drawing tools. This rectangle will serve as our dimming effect. Set the width and height to match the applications (800×600). Remove the rectangle’s stroke and change the fill to black. Then adjust the opacity of the mask to 50%. All of these can be set using the Property Panel.

Now let’s add the white frame that the photo will sit on. Again, use the basic rectangle tool to draw. The photos are 640×480, so make the rectangle 680×520 pixels and then center the white rectangle on the artboard. Next place the large version of the photo that matches the first photo button, and align it to the center of the artboard. The final step for this template is to add the close button in the upper right of the white frame. Select the close button graphic and convert it to a button using the HUD.

Now select just the mask, the white frame, the photo and the close button. Using either the HUD or the contextual menu, “Convert to Custom Component”.

In the library panel, rename this component to “LightboxComponent”.

Now we can add the individual photos within this component. Double click the newly created component, and then use the Duplicate State button on the Pages/States panel.

Rename the first state to “Off” and the second state to “Photo_1”. With the elements now duplicated, we can delete them from the Off state. Select the Photo_1 State. Now let’s add the interaction to the close button. Set the interaction type to On Click, and choose the Off state as the target.

With this interaction added, you can keep duplicating the photo states as needed. Since the portfolio only has 6 images, only 5 more states are needed. Rename each of the states to match the names of the buttons, as this will make connecting the interactions so much easier in a moment.

With the all the full sized images properly inserted, we can now add the interactions to each of the thumbnails. Using the breadcrumbs, navigate to the top level of the application. Select a thumbnail, and then using the interaction’s panel, add an On Click interaction. From Choose State select the proper state within the Lightbox component. Finally, set the “When in any state” to Off. That last setting keeps the thumbnails from working while an image is being shown.