Flex 4 ActionScript 3 Lightbox for Flash Player

Here’s a class that duplicates the popular JavaScript lightbox effect entirely in ActionScript 3 for Flex 4 projects. Here’s a demo of the Lightbox class in action. Right-click to view source or download the fxp at the end of this post. (Note: it takes a few seconds after loading this page for all the images to be loaded.):

As usual, when you click on any image the lightbox pops up with that image and dims down the background. Previous/next buttons are included and when switching from one image to the next the lightbox animates the resizing process. Use is made of the Flex Scale, Fade and Move effects. These effects are combined in both Parallel and Sequence effects to either play multiple effects simultaneously or one after the other.

The Lightbox class is easy to use, requiring only two inputs:

• a Vector of LargeImage objects
• the stage size

The stage size is passed into the constructor and the lightbox is added to the display list:

  // Create a lightbox
  _lightbox = new  Lightbox(610, 600);       // matches app  stage size
  addElement(_lightbox);
  _lightbox.visible =  false;

The large images are loaded at run-time using a Loader. When all of the large images have been loaded the Vector of LargeImage value objects is created and passed to the lightbox:

  var images:Vector.<LargeImage> = new  Vector.<LargeImage>;
  for(var i:int = 0; i < _bitmaps.length; i++)
  {
    var  largeImage:LargeImage = new LargeImage("Image " + i, i, _bitmaps[i]);
    images.push(largeImage);
  }
  _lightbox.images = images;         //  Provide the set of large images to the Lightbox class

Each LargeImage object contains three pieces of information: the image’s Bitmap, its title and an ID. The title or description is displayed in the caption area below the image. The ID is used to identify which image to display when the user clicks on one a thumbnail.

At this point, the lightbox is ready for action. To display the lightbox just call its showImage method with the ID of the image to display.

The Lightbox Class

The Lightbox class is composed of the following main parts:

• a dark, translucent dimmer which overlays the stage and dims down everything except the current large image
• a lightboxBackground which is just a white rectangle which provides the frame for the image
• a bitmapContainer which allows the Bitmap to be added to the display list and positioned on the stage
• a white captionArea background for the caption
• a Label caption which displays whatever text is provided for the title

In the constructor these various parts are drawn, as needed, and added to the Lightbox (which extends UIComponent).

When showImage is called the following sequence of events is started:

1. Find the requested image ID (in showImage) and calculate the size of the background/frame which includes a bit of padding. showImage then calls resizeLightbox.
2. resizeLightbox calculates the x & y scale factors needed to resize the lightboxBackground to fit the current image. It then creates two Flex Scale effect objects and combines them in a Sequence effect so that first the width is adjusted and then the height.
3. When the Sequence effect has ended fadeInImage is called. The bitmapContainer is positioned on top of the lightboxBackground and the image is added to it. The close, previous and next buttons are also positioned. Then, all three buttons are faded in together with the image.
4. When the Fade in effect has ended showCaptionArea is called. The captionArea width is adjusted to match the width of lightboxBackground. A fade in (Fade) and a slide down (Move) are combined in a Parallel effect so that both play simultaneously.
5. Once the caption area is in place showCaption is called to set the title for the current image and to fade in the Label.

That’s about it. Clicking the previous/next buttons just repeats the steps above and clicking the close button fades everything out. Enjoy!

Download the Flex 4 ActionScript 3 lightbox sample project.

Tagged as: effects, Lightbox