// you’re reading...


30 Days of CS5: Indesign Interactivity

The past several months have been a wild ride for anyone looking to create and distribute interactive Web sites, digital video and multimedia accessible via desktop Web browsers and mobile devices. Apple’s reluctance to allow Flash onto the iPhone and iPad, and the resulting brouhaha between the two companies, has taken some of the steam out of the growth and expansion of the Flash publishing platform. The new iPhone packager feature within Flash Professional CS5 has been rendered useless by the announced updates to the iPhone 4.0 operating system. As a result, this has tempered interactive designer’s enthusiasm for some of the new interactive features in InDesign, Flash Catalyst and Flash Professional CS5.

Still, the rapid proliferation of smartphones and tablet PCs indicates these devices will play a prominent role in the future of publishing. As such, designers, photographers and others are working within the limitations of the tools and platforms available to create interactive sites and applications.

Several new features within InDesign are aimed at making it easier for print designers to begin developing and repurposing content for these new platforms. The promise of using familiar tools to access new mediums is exciting, though there are many potential pitfalls. Several tutorials and articles have already done a good job of showcasing the new animation tools, so I’ll focus instead on how the interactive features in InDesign CS5 can fit into your workflow and focus on what decisions you need to make to ensure compatibility on a wide variety of browsers and mobile devices.

Page Setup
The interactive changes to InDesign CS5 begin in the document setup window. Here, you’ll notice a new pull-down menu labeled Intent. This allows you to specify whether the document will eventually be published in print or on the Web. Selecting “Web” changes the document page size from one designated in points to one using pixels. This also provides a drop-down menu to select from several common Web page document presets. Behind the scenes, selecting Web also changes the document blend space from CMYK to RGB to provide for more reliable color on output.

Decisions, Decisions….
Using the new tools within InDesign CS5, you can create electronic books in the EPUB format, interactive PDFs or even Web pages complete with videos, hyperlinks and more. Unfortunately, print designers will likely find that publishing in any of these formats isn’t as plug-and-play as one might expect. Here’s a brief rundown of the considerations, preparations and limitations you’ll want to address with each format.

Ebooks (EPUB) format:
The EPUB format is quickly becoming the standard format for electronic books and enjoys widespread support from a variety of different ebook readers including Amazon’s Kindle and Apple’s iPad. The EPUB format is essentially an XML text file with additional elements for navigation and packaging. As an XML text file, the text will reflow according to the screen size. While this makes it easy to port your EPUB document between different ebook readers, it makes it difficult to create graphically-rich publications since text and images can separate when the page reflows.

Adobe has created a series of excellent guides to aid in the creation of ebooks in InDesign. You can find the full index of resources here and a specific tutorial on preparing an ebook to handle graphic elements here.

Additionally, the Adobe Digital Editions blog has a useful post on styling text and images in the EPUB format.

If you need absolute positioning of text, graphics and multimedia elements, you may wish to consider creating an interactive PDF. You can add photos and videos, style text and even add security to protect your content. Interactive PDF’s will need to be viewed by a recent version of Adobe Reader, Preview won’t display the video files and, as a result, neither will the iPad or iPhone using their native PDF previews. (I haven’t yet tested whether third-party PDF apps can view interactive PDFs).

Graphics within your PDF, animated using InDesign CS5’s new Animation panel, won’t work either, since these are only supported if your document is exported in the SWF format.

So, there are some serious limitations in using PDF as a multimedia container format for wide distribution. It is a good option, however, if you’re creating a graphically rich document with text and still graphics and need interactivity via hyperlinks and control over positioning and styling of elements.

Flash (FLA) Export
You’ll have the greatest success exporting interactive documents from InDesign into Flash Professional for additional styling and interactivity. Unfortunately, this too is not foolproof. In my initial tests, creating an interactive document in InDesign (animation+movies), I encountered some unexpected obstacles. In the FLA export, the entire spread came across as a single movie clip and the movie files were converted to bitmap placeholder graphics.

Additional research confirms that the movie files do not carry over correctly between InDesign and Flash Pro. Instead, the movie files are stored in a separate folder labeled YourFileName_Resources alongside the exported FLA file. You’ll need to manually add the movies back into the document for them to work correctly in Flash. While not an impossible task, it isn’t quite as simple as the process should be.

Additionally, as a preparatory step, you’ll want to place items on separate layers for best control moving over into Flash, as the export process merges all items on a given layer into a single Movie Clip. You can still adjust these by editing the movie clip directly, but your workflow will be simpler if all items exist on separate layers.

Here is some additional background on the Flash Export process along with a listing of what is and is not supported during export.

For the past several versions, InDesign has allowed you to export a spread item into Dreamweaver for further styling and interactivity. CS5 has some improvements, but, as you’ve probably gathered, they isn’t foolproof either. The short, simple version of what is and isn’t exported to XHTML can be found in this Adobe Help File.

In practical terms, creating interactive documents in InDesign takes a lot more work than making a standard print document and selecting Export. Realistically, you’ll want to have a concrete plan of how, and where, your interactive document will end up, and tailor your designs based on the limitations found in handing off your InDesign file to the next link in the production chain. To do so effectively, you’ll need to spend some time brushing up on multimedia container formats, testing compatibility between applications and testing the finished product on a variety of different devices—in short, the same thing you would have to do if you’re creating content natively in an interactive design application like Dreamweaver or Flash. Where InDesign shines is in having a familiar interface to get the design process started and being able to export components that can be reconfigured, or reassembled in some cases, by an interactive designer well versed in the specific technical needs of Web and mobile publishing.


3 comments for “30 Days of CS5: Indesign Interactivity”

  1. Thanks for this succinct and candid overview. InDesign interactivity is clearly in its early stages.

    Posted by Joe Croker | June 1, 2010, 6:33 am
  2. I’m about to embark on seeing how far InDesign can go in interactive presentations for clients in the iPad environment…unfortunately, looks like InDesign has a ways to go before this is as beefy as it needs to be.

    Thanks for the overview! It was very helpful!

    Posted by Nichole Trobare | June 29, 2010, 8:59 am
  3. Nichole, please keep me posted on your InDesign/iPad experiments. I’d love to hear what workarounds you find for a successful workflow.

    Posted by Jay | June 29, 2010, 9:18 am

Post a comment