Going from print to Web just got a lot easier with Adobe InDesign CS4. In the past, we concentrated on going from InDesign to HTML or PDF. While the interactive features in InDesign still work nicely for PDF, they also now work for going to Flash. There are two ways to turn your InDesign document into Flash content. Lets take a look at both of them.
1 CREATE A MULTIPLE-PAGE DOCUMENT
One of the main things well want people to be able to do is turn the pages of our document on the Web. So for this well need a multiple-page document. You can either work with an existing document or create a new one (from the File menu, choose New> Document, create at least two pages (we used five in our example), and accept the defaults.

2 SWITCH TO THE MASTER PAGE
Wed like to create navigation buttons so that users will be able to turn the pages of the document from within their Web browser. The best place to do this is on the Master Page. This way, you only have to create the buttons once. Bring up your Pages panel (Window>Pages) and switch to the A-Master page.

3 BRING UP THE SAMPLE BUTTONS LIBRARY
The way we create buttons in InDesign CS4 is a little different than we did in CS3, where we actually had a Button tool. In CS4, the Button tool is gone, but we dont need it anyway. You can turn any frame into a button using the Buttons panel, and in CS4 we also now have a library of Sample Buttons. Bring up the Buttons panel (Window>Interactive>Buttons) then from the Buttons panels flyout menu, choose Sample Buttons. Scroll down to the buttons shaped like arrows.

4 CREATE YOUR BUTTONS
We need a Left Arrow button and a Right Arrow button. Pick your favorite ones from the library and drag them onto your A-Master page at the bottom of the page. Once theyre in place, close the Sample Buttons library. With one of the buttons selected, go back to the Buttons panel, and youll notice that the default action is already set for the arrow button to Go to Next Page and Go to Previous Page.

5 REMOVE BUTTONS YOU DONT NEED
Now switch back to Page 1 in your Pages panel. Youll notice that both Arrow buttons are there. Well we dont need the Left Arrow on Page 1 because theres no previous page. So lets delete it. Hold down your Command-Shift (PC: Ctrl-Shift) keys and click on the Left Arrow button with the Selection tool. This unlocks it from the A-Master page so that now you can just delete it. Do the same thing on the last page for the Right Arrow button.

6 ADDING URLS
Since this document will be on the Web, we can take advantage of hyperlinks. Users will be able to click on your text and objects to navigate to other webpages or websites.
Return to the A-Master page in the Pages panel. Create a text frame in the lower-right corner of the page and type the name of the site you want to link to. This text will be for display purposes; it doesnt have to be the actual site address.

7 CREATE A HYPERLINK
Highlight the text with the Type tool. Now bring up the Hyperlinks panel from the Window>Interactive menu, key in the actual URL for the site you want users to go to when they click this link, then press the Return (PC: Enter) key. Once youve entered your link, you can return to Page 1.

8 ADD PAGE TRANSITIONS
Both Flash and Adobe PDF support page transitions and now we can create those transitions right in InDesign CS4. Bring up the Page Transitions panel from the Window>Interactive menu. Choose your favorite Transition from the list and then use the flyout menu to apply it to all spreads.
Note: If you want to have a different transition for each page, you can set them individually, page by page.

9 EXPORT TO SWF
Now were ready to export to SWF. By exporting to SWF, we can take the work weve done in InDesign with all of our interactivity and go straight to a SWF file that can be placed on the Webno additional knowledge of Flash is needed for this.
Choose File>Export and in the Export dialog, select SWF from the Format pop-up menu. Choose a location or folder and click Save.

10 SET YOUR SWF OPTIONS
At this point were pretty set. The defaults in the Export SWF dialog are good. The ones you may want to adjust are: Scale, if youre trying to fit your SWF to a certain screen size; Range of pages if you dont want all of your pages exported; and Image Compression if you have certain requirements. Make sure the View SWF after Exporting box is checked and click OK.

11 TEST IT
Youre now looking at your new SWF file in your default browser and you should be able to click your navigation buttons and hyperlinks. And theres a hidden goodieÂ…because Include Interactive Page Curl was checked by default in the Export SWF dialog, we can also turn our pages by peeling the actual corners of the pages back. How cool is that?

12 EXPORT TO XFL
We could stop here and be happy; however, if we want to do more with Flash, then well need to export our InDesign document in a format that Flash can actually open. InDesign CS4 supports exporting to a new document type called XFL, which can be opened directly in Flash CS4. Choose File>Export, select Adobe Flash CS4 Pro (XFL) from the Format pop-up menu, and then click Save. You can accept the defaults on the next dialog as well and click OK.

13 ADD FLASH CS4 ANIMATION
Once the export is complete, youll be able to double-click on your XFL document to open it in Flash CS4 Professional. Each of your pages will appear as keyframes on the Timeline. Also each spread will appear in your Library as movie clips. At this point youll need to know how to use Flash to go further; however, you should now be able to animate your pages, add more interactive elements, and create full-blown interactive magazines, resumes, brochures, etc.all starting with an InDesign CS4 document.
















Hi Terry – Good tutorial. In step 1, you mention to accept the defaults, but Facing Pages is turned on by default. You may want to tell people to turn this off.
Also, you may want to mention in step 13 that page transitions, hyperlinks, and button interactivity don’t transfer to the XFL file — you have to add those in Flash Pro.
Facing Pages won’t really be a problem, so there’s no need in mentioning that.
The file size for the swf files are really large (5161kb), I have served it to the web as a test and it cannot be viewed as it is so big? Can you recommend anything?
regards
Tom
Tom.dobinson@gmail.com
Thanks Terry! I was in the process of taking a company newsletter to the next level so this was very timely and helpful!
Another big problem in Hyperlinks is:
If you need to export to swf and then use it on a web page, you can’t open hyperlinks into the same browser window – which is really stupid from Adobe…not to be able to specify a parameter for swf to open in _self…
Say you want to create a book and have a button that goes to one of your site’s html pages… What do you do?
Is possible create this effects in Adobe InDesign CS3 version?
thnaks for this nice tutorial, but swf file is not proper working
My flash file isn’t working either. I created a magazine using Indesign CS4 and exported to swf. I did this a few months ago, and it was working up until a few days ago. The hyperlinks don’t work either.
Hi Terry, thanks, it is really useful, I ve tried to make the button and hyperlink, nut none of them doesnt work, what should I do?
[...] Turn Your InDesign Documents into Interactive Flash Content [...]
Very Helpful tutorial, thank you!
Anyway i’ve got another question about interactivity in CS5 -> can you do a scrolling text in an interactive indesign CS5 document? eg.: a table with loads of information can be contained in a smaller page (than the table would require to display all the information at once) enabling a scrollbutton effect for said table?
Thank you so much in advance!
Regards,
Steph
I tried applying different Transitions to Different Pages but then when i Export it to SWF, all the transitions are the same. I wanted the first page to be a flip page then the other pages to just be a shuffle down. Do you have an idea of what the problem may be?
Thanks Terry Great Information!
I have a problem with the final result, it all works ok but when i have facing pages on on the home page and back page i have a page of dure whiteness at the side? and on the single pages it splits up the a4 in to a 1/2 lengh ways? is their any way to amend either?
The link attached is how I want the book im making to look http://cde.cerosmedia.com/1W4be9217f23609165.cde
Is this exported into flash? Please help!
Hi. Really great tutorial. I also wondered how to get the SWF file to open full screen and centered. I have tried all the different screen resolutions, but still need to use F11 and scrollbars to centre; not so good for end users. At present the SWF’s are being uploaded to Windows Sharepoint 2003 (using an intranet). Hope you can help, driving me mad :;}
[...] Turn your InDesign documents into interactive flash content [...]
Thanks for an enlightening tutorial. I’m a newbie to this and it was easy for me to understand. My current issue is how to create HTML and create a widget I can use in my email signature. Any thoughts?
Regards,
Michelle