Export from InDesign to SWF

Create interactive Adobe® InDesign® documents that include buttons, hyperlinks and page transitions. Then export to SWF for playback in Flash® Player.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe InDesign CS4

• Try
• Buy

Sample file

lrvid4030_id.zip (ZIP, 2M)

Prerequisite knowledge

Basic knowledge of page transitions and exporting files from InDesign

Export from InDesign to SWF

When sending InDesign documents for review, whether to clients or to coworkers, you may want to create a more compelling presentation by exporting them as a PDF file or Adobe Flash® SWF file. You can open SWF files in most web browsers and you can add custom buttons, such as next page and previous page, which allow users to interact with the document. Before exporting to a SWF file, you can add effects like page transitions such as fades or wipes, and animations such as page curls. You don't need Flash to build these presentations; you can add all these special features directly within InDesign.

Creating navigation buttons in InDesign

A master page can house elements that you want applied to an entire document. For example, if you want to add navigation buttons to each page of your document, it makes sense to put them on a master page. To create a master page:

1. Choose New Master from the Pages panel menu. The icon for this menu has a downward facing arrow and some lines next to it. The icon is located in the upper right corner of the Pages panel.

   

   Figure 1: Creating a master page
2. Select the artwork for your buttons and position it on the master page. Almost anything can be a button: you can use a graphic drawn in InDesign, a placed image, or even a piece of text.
3. Open the Buttons panel by choosing Window > Interactive > Buttons. The buttons panel will appear as a free-floating panel which can then be docked along the right side of the InDesign window.

   

   Figure 2: The Buttons panel
4. Select your button artwork and activate its normal state by clicking the Normal layer in the State Appearance area of the Buttons panel. The artwork is now a button.
5. Click Rollover to add a rollover state to the button. If you want the appearance of the button to change during the rollover state (that is, when the user mouses over the button), you can change it now. You can add a stroke or fill, change the size or position of the graphic, or add an effect.
6. To change the fill color of the rollover state, make sure the button is still selected and open the Swatches panel. Make sure Fill is selected in the upper left-hand corner of the panel and click a color swatch.

   

   Figure 3: Changing the appearance of a button
7. Return to the normal state by clicking the Normal layer in the Buttons panel. Any changes you've made to the rollover state of the button aren't visible at this point.
8. Click the plus sign in the Buttons panel to add an action.
9. Choose Go To The Next Page from the context menu. This action turns your button into a next-page button, allowing users to navigate forward through the file when it is exported as either a SWF or PDF file.

   

   Figure 4: Making the button perform an action
10. Repeat steps 2-8 to create a Previous Page button on the master page.
11. To associate the master page and the elements you have created with the rest of the pages in your document, choose Apply Master To Pages from the Pages panel menu.
12. To remove master page elements from an individual page, such as the Previous Page button on the first page of a document, override the elements by pressing Cmd+Shift/Ctrl+Shift and click the element, and then press the backspace key.

Creating hyperlinks

InDesign allows users to create hyperlinks within documents. To create a hyperlink from existing text:

1. Press the T key to switch to the Type tool.
2. Highlight the text to be converted to a hyperlink.
3. Choose Window > Interactive > Hyperlinks to open the Hyperlinks panel.

   

   Figure 5: Accessing the Hyperlink command
4. Click the Hyperlinks panel menu and choose New Hyperlink from the context menu to open the New Hyperlink dialog box.

   

   Figure 6: The Hyperlinks panel
5. Type the link address in the URL text box.
6. Click OK to apply the changes. The selected text is transformed into a live hyperlink, indicated by the bounding box (the clickable or target area for the link) that appears around the text. To make the bounding box invisible, choose Invisible Rectangle from the Type menu in the New Hyperlink dialog box before clicking OK.

Adding page transitions

Page transitions add visual appeal to InDesign documents with multiple pages. To add a page transition to your document:

1. Click the Pages panel menu and choose Page Transitions > Choose. The Page Transitions dialog box opens.

   

   Figure 7: Creating a page transition
2. Drag the cursor over the various page transitions thumbnails to view an animated preview of each.

   Note: The transitions that appear are those available in Adobe Acrobat® Reader. If you are using Adobe Acrobat Professional, you can add these transitions to the PDF files you create. These transitions will be honored when exporting documents as PDF files. The only exception is the Page Turn transition, which is only available for SWF files.

3. Choose the Wipe transition.
4. Select Apply To All Spreads in the Page Transitions dialog box and click OK. The Page Transitions panel appears, which allows you to change the attributes of the transition (for example, the Direction and Speed of the wipe). You could also choose a different transition from this panel.

   

   Figure 8: Changing Page Transition attributes
5. Click the Apply To All Spreads button in the lower-right corner of the Page Transitions panel to apply the wipe.

   Note: After you apply the wipe, an icon appears next to each of the page thumbnails in the Pages panel indicating that a transition has been applied to the document.

Exporting InDesign documents as SWF files

Once you've added interactive elements to your InDesign document, such as buttons, hyperlinks and page transitions, you're ready to export the document as a SWF file for use with the Flash Player. To export an InDesign document as a SWF file:

1. Choose File > Export. The Export dialog box opens.
2. Choose SWF from the Save As Type pop-up menu. Name the document and click Save. The Export SWF dialog box opens.

   Note: Alternatively, you can choose Acrobat (PDF) from the Save As Type menu to export a PDF file.

   

   Figure 9: The Export SWF dialog box
3. Select the size of the document. You can scale the document or fit it to preset screen resolutions included in the Fit To menu.
4. Check View SWF After Exporting and make sure InDesign Text To Flash Text is selected in the Text menu.
5. Select all options under Interactivity.

   Tip: Selecting Include Interactive Page Curl automatically adds the page curl effect to the SWF file, which is a great feature because you don't have to write any code for this animation.

6. Click OK to export the file as an SWF file and open it in your default web browser.

Where to go from here

• InDesign CS4 Help and Support
• Learn InDesign CS4
• Introducing InDesign CS4, by David Blatner
• Working with Smart Guides, by Michael Ninness
• Using the Links panel, by Michael Ninness
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors