Exporting Interactive Documents to SWF (CS4)

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.

3. 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.

57 Responses to Exporting Interactive Documents to SWF (CS4)

  1. Andrea says:

    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]

  2. Don Abel says:

    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/wishThanks. -Bob]

  3. Peter Lu says:

    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

  4. Akif Ersoy says:

    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

  5. Jane says:

    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/

    • Hi Jane,

      I just came across this old post of yours. I’m facing the same problem, and have been surfing the internet for the answer, with so far, no luck. Did you already figure out how to solve this problem? I hope you can help… Cheers, Judith

  6. JR Hunt says:

    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 thedestination 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

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

  8. Mike Fulton says:

    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.

  9. Nick says:

    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

  10. Bob Bringhurst says:

    See the Help topic on creating hot spots:http://help.adobe.com/en_US/InDesign/6.0/WS8E75577F-28B0-4edd-A95F-D4BEDD570EE1.htmlIt includes a couple of links to more detailed topics I wrote.

  11. Bob Bringhurst says:

    In CS4, videos play in PDF files but not SWF files. If you really want videos to play in the SWF file, export to XFL, and then add the video using Flash Pro.

  12. Lasse says:

    helloimpressive writing.I Have 2 questions1. 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

  13. Richard says:

    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 .

  14. abuakram yousif says:

    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

  15. Ben Suski says:

    ok, now how do I add print, zoom and download buttons to this like I see on a lot of the online documents?

  16. Jo Vandenberg says:

    I’m using CS4 Indesign to create page transitions (page flip, with page curl). But when I check the swf-file in my browser I get an ‘echo’ of the right page when I turn it. Sort of a reflection pops up above the right page. This doens’t happen if I turn the left page. I also see this in the sample file above. Is it a CS4 bug?

  17. zeus says:

    How can I link to another SWF using InDesign and have it open the linked SWF in the same window if I’m using InDesign? Is this possible?

  18. Arjen says:

    Is there a way to remove the ‘sides’ from the first and last page? On the sample of Tomasz Kuczborski they’re grey. It looks a bit strange. I’d like it to be like a normal ‘closed book look’.Thanks in advance!

  19. Rich Metter says:

    I’m wondering if Ben found the answer to his question. I have not yet upgraded to CS4 and I have a client who needs a flipbook. I was going to buy a standalone product and was thrilled to see CS4 can do this. And the sample linked to here is very nice. But I’m sure people will want to at the very least have the ability to zoom in or get simple page views. I’m wondering how much Flash programming I’d need to learn to add that.

    • pamela hettrick says:

      I have the same problem. I have cs4 and have created my newsletter in Indesign exported it as a SWF file. I hoped that once I put it into acrobat and saved it as a pdf, it would allow the user to zoom in and out. It does not. Did you find any solution to the problems.

      I would greatly appreciate the advice. Thank you

  20. How do you get the spiral effect for the spine? That is the best part of the book.

  21. jM says:

    I cant open link in SWF.I dont know why.I’ve attached link(files) to a specific procedures namesSo the people can open from the book however it doesnt workI will appreciate help

  22. Mukti Lad says:

    I love how easy it is to apply and use this page fab page flip feature! However is it possible to have more control over the page flip? So perhaps the corner of the page can be dragged across with the mouse?

  23. Mary says:

    As per Rich’s questionHow do you get the spiral effect for the spine? That is the best part of the book.I would like to have this info as well.

  24. Jan says:

    Same question from me! How do you get rid of those vestigial blank pages adjacent to the front and back cover pages??!

  25. Jan says:

    I’m guessing that’s just a vector image illustratoin of the spiral binding placed into the Master pages and “in front of” all other objects, close to the inner edges on every finished page of the document, so it simply exports with the rest of the page layout.

  26. Sergio says:

    Please I´ve been looking forward the new Indesign CS5 release, hoping it will allow to export my swf interactive books with a ZOOM and SPAN option….Will Indesign CS5 allow me to do that?Thank youSERGIO

  27. Chris says:

    This works great, but all the linked Illustrator files are turned into low res images. Is there any way to preserve them as vector files so they can be clearly seen?

  28. David says:

    Again… Does anyone know how to export a page flip with the blank pages at the start and end set to transparent or removed.

    • Emily says:

      Create a box the size of your page using this fill colour: (RGB) 153 153 153 (HEX) 999999. This colour is the same as the background in your browser. If you are putting the file into another file with a background colour, replace the fill colour with your own. This isn’t perfect, obviously, but it at least creates the illusion of the page not being there.

    • Tony says:

      All you have to do is create a new layer in your master page bigger than the field it is. Fill your field with the color you want if no color than use transparent base. This will keep all page backgrounds the same. if you only want the first and last page with a different color, just create a new layer on the first and last page and fill with desired color.

  29. Here’s how Tomasz says he created the spiral effect:———–1. Find a nice spiral-bound book or sketchpad or anything.2. Scan it on a flatbed scanner, one scan with all pages on one side, one scan of open spread. Be sure to scan in high resolution, and same scale for both scans.3. Crop and clean both images in Photoshop. Carefully remove everything except visible parts of the spiral and the inside of the paper holes. All the rest should be transparent.4. Now you have your set of two spirals ready to be layered over the flipbook-pages and graphics on the pages. One with one row of holes for front and back cover, and one with two rows for spreads. You can use all or part of the spiral to get different proportions of the binding. Remember to recreate the gap between the pages in spread view.That’s about all. I have chosen this method, because the binding looks very natural, with all segments of the spiral slightly different from each other.———–

    • angelica says:

      i love the spiral effect, sadly I don’t have a scanner, any chance you can tell me where to download the images? PLEASE!
      thanks, and great job, it looks really cool

  30. pamela hettrick says:

    How do you allow the user to zoom in on the document? I have created a enewsletter in indesign with page turn and buttons. However I would like the user to be able to view each article at the size thay prefer.

    Thank you any help is greatly appreciated.

  31. Emily says:

    @David – create a box the size of your page using this fill colour: (RGB) 153 153 153 (HEX) 999999. This colour is the same as the background in your browser. If you are putting the file into another file with a background colour, replace the fill colour with your own. This isn’t perfect, obviously, but it at least creates the illusion of the page not being there.

    @Jo V – I’m having the same issue. Were you able to find a fix??

    “I’m using CS4 Indesign to create page transitions (page flip, with page curl). But when I check the swf-file in my browser I get an ‘echo’ of the right page when I turn it. Sort of a reflection pops up above the right page. This doens’t happen if I turn the left page.”

  32. Neal says:

    Dear Bob and other experts,
    We’ve created a flip book in InDesign CS5 and we are trying to load this as an external swf in an AS3 project. The flip book crashes (create large white box) and we’ve checked all the settings (i.e. fps, dimensions etc).

    However, if we remove all the images, so only text, the file imports and works.

    Interestingly: your flipping book imports nicely, too.

    Any suggestions? I’ve not found any answers on the web anywhere.

    Neal

  33. What a great way to showcase work or make a portfolio flip book. This SWF tutorial means I can now create what ive been looking for thanks.!

  34. Bri says:

    I created a swf file, love the way it looks, but when I add it to my page, it just shows up as white… I have a flash player installed on my computer, and so does my friend (who tested the site for me) but it won’t load…

    What can I do?

  35. Kelly says:

    Hello. This is such a great resources, as I just saved my company about $5k from hiring another company to complete this. I am messing around with the features while I am still completing my indesign document. When I test the SWF file locally, it looks great, but clicking on the link doesn’t work. It pops up notifying me to change my settings, and I follow it step by step, refresh the page, clear my cookies, I’ve done everything. Still, the link gives me the security pop up.

    I want to know how to test this before I load it to our site so I know that we absolutely do not need an outside company. Also I wanted to test before entering every single link. It’s a product catalog, so there will be many links. Thanks!

  36. Peggie says:

    we want to take our 300 page catalog that references other pages thru-out and make a flip book. Is 300 pages too big, do you have samples this large? Some pages have fold out 11 x 17 pages, can that work. Also once you link to a page, just say you are on page 58 and link to 189, can you then go back to 58? One more question, can you link to other flip book?

  37. Eric says:

    Still have not seen an answer to the question about adding a zoom feature to the swf file. I have been googling like crazy trying to find this, and all I can find is stand-alone programs that will cost my company a couple hundred bucks extra. All to add a simple zoom feature. Would’ve been nice if Adobe had included this feature in Indesign…

  38. Liz A says:

    Hi, I’m doing a .swf book with flip pages effect in InDesign. when it’s saved in my desktop, this has 130KB, however in my laptop the same book has 4MB which takes too much time to download in my website. I’ve compared the configurationin both, but I see both are the same (desktop computer and laptop).
    My question is, what makes this difference in size?

    (Note. I already dplayed with the Export SWF screen (Image compression, JPEG quality, etc) but The laptop book is alwasy bigger).

  39. Surya says:

    Thank you ADOBE ….i created a book ….it uploaded on the website……thanks once again

  40. Josh H says:

    Thanks so much! This was very helpful.

  41. olga says:

    Hi,
    I have created gallery in InDesign, exported to swf file. I am using this file as a part of website, having it as external movie/gallery. In flash player it works perfectly, but when playing index – my main movie, after releasing this file plays over and over. I need to stop it in first page. How do I get control over this external, indesign swf?
    I am using AS2 and have this AS on button which calls the external movie
    on (release){
    gotoAndStop(“ref”);
    plop.loadMovie(“galeria.swf”);
    }
    Could someone help with this, please?
    Thanks

  42. Christine Barker says:

    I have got my file exported as swf from PS4 working fine, but I cannot get the orientation right. | want it to have a top binding – I just need to rotate it. I have done this in PS4 but when I export it it is the wrong way up. Anyone please.

  43. Rick says:

    Any news on “zoom” options?

  44. Cody says:

    Is there any way to get rid of the spacing around the swf file in the browser? The ebook is in the center of the browser and i would like it towards the top left corner…any one have any thoughts?

  45. Brian says:

    I have exported a document from InDesign CS5.5 as a swf and it works great. However, when i try and load this swf into a gallery i am making in Flash, it simply runs as if it were constructed as a frame by frame animation with no stop actions. Does anyone know any way to stop this from happening?

  46. nik says:

    When I export a multipage .swf presentation from InDesign, when I switch between pages, the top elements of my page appear briefly when the page opens. How do I stop this happening?

  47. isa says:

    can anybody help me understand what is the process of uploadin a .swf flipbook to my web page? it is 114 pages and it is 30 mb…it has hyperlinks, pictures and some text…
    i’ve tried almoust everything..but this is my first time uploading one..maybe im missing something?