« October 2009 | Main

November 3, 2009

Create an Interactive PDF/Flash Gallery with Adobe InDesign

The goal of this tutorial is to create an interactive Flash gallery using the tools available in Adobe InDesign CS4. What? InDesign? Isn't InDesign for print layout? Well, hmm... no, not only, not any more. What you'll be doing here is to create a Flash image gallery in InDesign to be deployed on a web page. Although this whole procedure also works for creating very cool interactive PDFs (see my example here: ID_PDF_Gallery.pdf [657KB]). Imagine that technique used in a book, or magazine layout!
This idea came to me when I saw the "Show/Hide Buttons" action in the Buttons Panel... Why on earth would you want to hide your buttons? Well, what if the buttons were in fact not buttons?
Very often designers (or their Clients) have more images than will fit into a layout. So here's a quick way to publish them all to an interactive PDF or SWF.

1. Open the necessary files
To follow this tutorial, you can download the necessary files here: ID_Flash_Gallery.zip [2.8MB]. Save them somewhere on your machine, decompress the ZIP file, and open Adobe Bridge to locate them.
You can also download a PDF of the following procedure here: ID_Flash.pdf [917KB].

  • Open ParadiseIsland.indd
  • Locate the image files in Bridge, select them all, and drag and drop them onto the InDesign document. (If you hold down both the Command and Shift key while doing so, you'll be able to place them in a grid. At this point it is important that we see them all, and that they all have the same size.
    ID_Flash_01.jpg

2. Leveraging the new Buttons Panel
  • Transform each of your images into a button by applying a [Normal] state from within the Buttons Panel (Window > Interactive > Buttons). Name the buttons: Image1, Image2, Image3, etc...
    ID_Flash_02.jpg
  • Select all and copy paste them somewhere else on the page and rename the buttons: ButtonImage1, ButtonImage2, ButtonImage3, etc...
  • You can now also add cool rollover effects. What I did here is set the [Normal] state of the ButtonImage instances to 50% transparent, and [Rollover] to 100%.
    ID_Flash_03.jpg
  • This is a good time to use the Event "On Rollover", so that when your user will move the cursor over the button (with no need to click) the main images will change. Apply this Event to all ButtonImage instances.
  • For Action choose "Show/Hide Buttons" and for each ButtonImage choose to Show ID_Flash_04.jpg the Image that should be showing, and Hide ID_Flash_05.jpg all others.
    ID_Flash_06.jpg
  • Resize the button images to the size need for them to act as buttons.
  • Now you can enlarge all Image instances and place them so that they exactly overlap each other (the top most image will be the first image your users will see when opening the PDF or the SWF file).
Interesting fact: if you now go check your Links Panel, you'll see that each image is actually being used three times (the large image, the [Normal] state, and the [Rollover] state).

3. Getting to know the Flash export dialog

  • Choose File > Export and select SWF as your format.
    ID_Flash_07.jpg
  • The only thing that we want to be careful about is that "Include Buttons" is selected. Otherwise all of our effort would have been in vain.
  • If you also select "View SWF after Exporting" your browser will open and show you how your web gallery works.
  • This is a very simple procedure, which will unleash far more creative designs than the one demonstrated here. Personally, I used this technique to create rollover tool tips in some of my publications where the user would hover over a text and other information would appear in a separate box, which allowed me to put much more information onto the page itself.
Extra tip: if you are designing for the Web in InDesign, be aware that you cannot choose Pixels as Ruler Units, but in InDesign 1 Point (pt) equals 1 Pixel (px).