Exporting Interactive Documents to SWF

| 14 Comments

One of the big new features in InDesign CS4 is the ability to export InDesign documents to SWF format. When played in Adobe Flash Player or a web browser, SWF files look like slideshows, or flip books. SWF files are similar to interactive PDF files that include hyperlinks, page transitions, and navigation buttons. One difference is that SWF files include the whiz-bang page curl feature.

SWF.jpg

Tomasz Kuczborski created this sample SWF flip book. You can open it and play with the page curl feature. Just drag any corner of the page to turn it. Check it out:

Click here to view the sample file. You can also right-click the link and choose to download it.

Document Setup

You can create a SWF file from any InDesign document, regardless of its page settings. If you're creating a document from scratch with the sole intent of exporting it to SWF, you can choose a preset such as 1024 x 768 from the Page Size menu in the New Document dialog box.

To help make decisions about page setup, think of a SWF file as a movie. When you export the InDesign document to SWF, the InDesign spreads become separate clips in a timeline, like slides in a slideshow. When you export to SWF, the Spreads option is turned on by default. If you deselect Spreads, the SWF file advances page by page rather than slide by slide. I've never seen a case in which you'd want to advance page by page in a document with facing pages, but you may have your reasons. In my experience, the easiest approach is to turn off the Facing Pages option and think of each page/spread as its own slide. See the Flash export issues and the Create interactive SWF (Flash) files for the web Help topics.

Page Transitions

SWF files based on InDesign documents can have two kinds of page transitions. If you select "Include Interactive Page Curl" in the Export SWF dialog box, you can drag the page corners to turn pages, as you can see in Tomasz's sample file. In addition to the page curl, you can apply page transitions that take effect when you press arrow keys or click navigation buttons to move forward and backward through the SWF file.

transitions.jpg

I like to apply the same page transition to all the pages in the document. Applying different transitions to different pages seems jarring to me, unless you want to alternate between, say, a left wipe and a right wipe.

1. Choose Window > Interactivity > Page Transitions to open the Page Transitions panel.
2. Select the type of transition you want to use, such as Dissolve or Fade. Or, select Page Turn for a consistent look with the page curl.
3. Click the "Apply To All Spreads" icon in the bottom right.

You can also choose Choose from the Page Transitions panel to select the transition using the dialog box shown above.

An icon appears next to all the pages in the Pages panel to which the transition has been applied. You won't be able to preview the transitions until you export to SWF. For more details, see the Page transitions Help topic.

Navigation Buttons

Tomasz didn't include any navigation buttons in his SWF file, but they're easy enough to add, especially with the new Sample Buttons panel.

sample_buttons3.jpg

1. Open your master page.
2. Open the Sample Buttons panel. (Choose Window > Interactivity > Buttons, and then choose Sample Buttons from the Buttons panel menu.) Scroll down to view the navigation arrows.
3. Drag left and right arrow buttons from the Sample Buttons panel to your master page.
4. To make sure each button has the right action, select the button on the master page, and then look at the Buttons panel. The left arrow button should have a "Go To Previous Page" action. You can edit these button actions.

For details on creating your own buttons, see the Make buttons interactive Help topic.

Color

SWF files use RGB colors, so all CMYK colors are converted when you export to SWF. The only significant color changes that occur during this conversion are in transparency images, such as when a transparency effect is applied to text that appears over a grayscale image. To avoid surprises with such transparency issues, choose Edit > Transparency Blend Space > Document RGB. However, keep in mind that the Document RGB color space may throw off colors if you print the InDesign document.

Hyperlinks

You can add hyperlinks to the InDesign document that jump to URL pages or to other areas of the document. See the Create hyperlinks Help topic for details.

If you create a hyperlink to a URL, make sure the hyperlink type is a URL, not a Shared Destination. Some people have reported issues with Shared Destination hyperlinks not working.

SWF Export

I've been focusing on SWF files, but I wanted to mention that you can also export XFL files. Unlike SWF files, XFL files can be edited in Flash Pro. However, all interactivity features such as page transitions and buttons are stripped out of the XFL file, so you have to rely on Flash Pro to add animation and other effects.

Here's how to export to SWF.

1. Choose File > Export, and then specify a filename and location.
2. Choose SWF from the Save As Type (Windows) or Format (Mac OS) menu, and choose Save.
2. Change the settings as needed, and then click OK. For details, see the Export content to SWF Help topic.

You can play the SWF file in Adobe Flash Player, or you can upload it to the web to be viewed in a web browser.

14 Comments

How do you create and SWF file from multiple .indd files?? I have a catalog formatted as a indb file that I want to post on the web as the complete catalog. About 15 separate indd documents make up the book. How do I do this?

[Reply - You can't. You'd need to combine the documents into a single document and then export to SWF. -Bob]

Bob,
The swf features in Indesign are good but need one added feature to be great. In the goto actions, a goto last page visited action would complete the tools I need to create easy-to-use instruction manuals for my web site. As it is, I can send a users to a page but have no good way to get them back. This would be like having a browser with no back button. I understand that Adobe only responds to large numbers of people requesting the same new feature. Can you be of help in this area?

Thanks,
Don Abel

[Excellent suggestion, Don. What we need is something like the Alt/Option+Left Arrow in Acrobat Reader to jump back to the previously viewed page. I'll suggest this to the program team. You can also add suggestions by going here:

www.adobe.com/go/wish

Thanks. -Bob]

A quick big-picture question about slide presentations. I've used InDesign since the beginning, and find it second-nature to use. I have made many presentations, including movies, using the PDF export. The text controls are obviously the best anywhere, and when I only needed basic interactivity, namely playing movies in an external viewer, InDesign was adequate. However, more recently, I switched to Flash, in order to have far more control over animation within slides, in addition to control over transitions, when the presentations were a bit more complicated. However, the Flash Screens environment only supports ActionScript 2.0; and now InDesign exports .SWF files. So if one wants to give rich, slideshow presentations (where I'm giving a lecture and manually advance the slides), does Adobe have a recommended solution? Seems like there's (1) InDesign, (2) Flash Screens (Actionscript 2.0) and (3) Flash Scenes (Actionscript 3.0). All have strengths and weaknesses. Do you have a recommendation? Thanks!

[Excellent question. I don't have enough experience with Flash to give an adequate answer. Perhaps you should ask experts in the user forum:

http://forums.adobe.com/

-Bob]

Hello, when I am creating projector exe from the xfl created by indesing all page transitions disappear. Pages loops just like forever. Any suggestions for that issue?

[Ask this type of question in the user forum:

http://forums.adobe.com

-Bob]

I need to change the background color in an exported swf page flip catalogue. I cant seem to find the settings for background color? Any help might just save my job!
____________________________

I'm not sure what you mean by background color. If I'm not mistaken, before you export, you can play an background object or image on a layer and move it to the back. By the way, you'll get a much quicker response if you ask these types of questions in the user forum:

http://forums.adobe.com/

Question. I'm exporting .sfw files from CS4. once open i can see my hyperlinks are live but they do not take me to the URL described.
Are they suppose to at this point.
or do I have to wait til its actually live and being served to be able to see the
destination URL.

[The live hyperlinks should go to the right place. Ask this question over at the InDesign user forums so we can help you troubleshoot it:

http://forums.adobe.com/community/indesign

-Bob]

A great feature! My webdesigner has been extolling the virtues of swf and cannot find fault.

I am new to this. I have created some interactive pages PDF files that play video, etc. If I try and export to SWF format so that I can get the same interactivity but with the page flip feature, the page flip works but the videos do not play.

Can anyone tell me what I am doing wrong. Thanks.

Is there a way of creating a hoverbox style preview when you rollover a jpeg thumbnail? I have a document I want to export as .swf with lot of pictures, this could save much space by just having thumbnails that you could then preview at a larger size by rolling over them

hello
impressive writing.
I Have 2 questions

1. Do you have experience of adding interactive stuff created with AS3 . For instance if I want to make a reading book to children and on one page add an interactive toy/game programmed in AS3.

I guess my question is in short can I add or work with the files after they are exported. Is there a .fla file to open, or can I in any other mode add interactivity.

2. can I add SEO features and make my content searchable and other typical things that customers often ask for.

regards / Lasse

This works great, but all the embedded Illustrator fiels are turned into low res images. Is there any way to preserve them as vector files so they can be zoomed in on .

I checked the sample file and wondered how to export a similar swf file that starts with the last page as the first page (Right to left as in arabic books). I couldn't solve this problem

Leave a comment

About this Entry

This page contains a single entry by Bob Bringhurst published on March 13, 2009 9:28 AM.

Bookmarks and Text Anchors was the previous entry in this blog.

Help Update - New Topics is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.