How to Make a Lightbox in Flash

Lightboxes allow you to display some of your best work by enlarging it and making your work the focus on the screen. Many scripts to do this are made available online by using JavaScript or CSS coding. Making a lightbox in Flash is best used on a fully-Flash website, rather than just as an embedded flash file. It will allow you to get the full effect, a similar effect as the other JavaScript or CSS-based lightbox codes.

Things You'll Need

• Adobe Flash CS3 or CS4

Instructions

1. Create your Flash file. In this situation, making an entire site in Flash would work best, as the lightbox will fill up the entire screen this way.

2. Open the Library by navigating to "Window" on the drop-down menus, then "Library." Click the "New Symbol..." button on the bottom left corner of the Library window to make a new movie clip. Select Movie Clip, name it "Flashbox" and click OK. You have just created the movie clip you will be working with.

3. Open your movie cli, and create a small grey box, using the rectangle shape tool (R, O, R, O). Your box should be no larger than 3px by 3px in the first frame of your timeline.

4. Create a new keyframe, Frame 5 of your timeline by selecting Frame 5 and right clicking on it. Select "Create a New Keyframe" from the drop-down window. In the fifth keyframe, you will now have a copy of the same box you created in the first frame.

5. With the box in the fifth frame selected, choose the "Free Transform Tool" from the tool bar, and select your box. With this tool selected, pull at the grey box until it fills the entire stage. Place your photo on the stage by navigating to "File," then "Import" and "Import to Stage" and select your file. Adjust its size using the "Free Transform Tool" as you did with the grey box.

6. Create a close button by navigating to the Shape Tool on the toolbar. Select the Shape Tool, and place a small circle on the stage. Pull the circle into the Library. Select "Button" as the file type, and name your button. Give your button an Instance Name in the Properties window (navigate to "Window", "Properties" and again "Properties"). This will be the name used to call it in ActionScript.

7. Pull a copy of your movie clip onto your main stage, and in the Properties window, give the movie clip an Instance Name.

8. On your main stage, create a button or thumbnail, and drag it into your Library. This will be the button that will open up your lightbox, so use a thumbnail of the image in your lightbox if you wish. After pulling it into the Library, select "Button" as the Type in the "Convert to Symbol" window and name your button in the field above the Type selection. Give your button an Instance Name in the Properties window.

9. Add another layer by selecting the "Insert Layer" icon from the bottom left corner of the timeline box. Click on your layer name and type "Actions" in the box. This is where your ActionScript will go. In your new keyframe, navigate to "Window", then "Actions." In the "Actions" window, write the following, making sure to change the words in caps to your instance and function names:

   MOVIECLIPINSTANCENAME.visible = false;

   function FUNCTIONNAME(event:MouseEvent):void{
   MOVIECLIPINSTANCENAME.visible = true;
   }

   BUTTONINSTANCENAME.addEventListener(MouseEvent.CLICK, FUNCTIONNAME);

10. Click back on the movie clip, and once inside, right-click on your timeline, and from the drop-down menu that appears, select "Create Shape Tween." Add another layer by selecting the "Insert Layer" icon from the bottom left corner of the timeline box.

11. Click on your layer name and type "Actions" in the box. This is where your ActionScript will go. In your new layer, on the fifth frame, select F6 to create a new keyframe. Navigate to "Window", then "Actions" to open up your ActionScript window. Write "stop()" in the window. After the stop();, write the following, changing your instance and function names accordingly:

    function FUNCTIONNAME(event:MouseEvent):void
    {
    MovieClip(root).MOVIECLIPINSTANCENAME.visible = false
    }

    BUTTONINSTANCENAME.addEventListener(MouseEvent.CLICK, FUNCTIONNAME)

12. Repeat these steps for all the lightboxes you wish to create, changing the instance and function names slightly with each lightbox you create.

Tips & Warnings

• If your entire site is not in Flash and making a Flash-based website is not an option, see the Resources for a few different ways of creating a lightbox in Flash.

Resources

• Flash ThickBox at After-Hours (in Spanish)