Creating Interactive Rich Media PDFs with Adobe InDesign and More!

Redefining “Portable” in PDF

InDesign is a remarkable achievement for Adobe. It’s a combination of Adobe Illustrator for vector drawing tools and palettes, QuarkXPress for layout, Adobe Photoshop connectivity for quick edits and alpha channel compositing, Acrobat for multimedia interactivity, and Acrobat Distiller for export option settings. You can even “place” QuickTime, Windows Media, and Flash files just like you place Photoshop files. Export the InDesign file as a PDF, click the Play Media button, and the video plays right there inside the PDF. This allows you to download the PDF, close your Web browser, and play the video because it’s embedded inside the PDF! You can also link the PDF to video on a Web server and have it stream into the document.

Case study: Yamaha’s eBrochure

Many people think Yamaha’s guitars are made by robots on an assembly line; however, for the L series guitar (www.yamaha.co.jp/english/product/guitar/aguitar/index.html), they’re handmade in Japan by 28 artisans. All steps such as choosing wood, attaching, shaping, and joining each part together are performed by experienced craftspeople using only manual labor.

The marketing reps thought a printed brochure was not an ideal medium to show this whole process that emphasized how different the quality of L series is from other assembly line models. To get the customers’ attention, they wanted more than the still pictures and text, and felt the solution would be a rich media PDF eBrochure that included video of the production process and virtual reality (VR) photography that could be downloaded from the Yamaha website.

[To experience the Yamaha rich media PDF, we have made it available on the Layers website. Just go to www.layersmagazine.com/downloads.html to download a copy for yourself.]

In this article, we’re going to take you through a step-by-step process to show you how we created the Yamaha L series interactive PDF eBrochure using Adobe InDesign, Adobe Acrobat 7, and a few other QuickTime multimedia tools such as Apple’s Final Cut Pro (www.apple.com), VR Toolbox’s VR Worx (www.vrtoolbox.com), and Discreet Cleaner (www.autodesk.com). We’ll show you how to make a cross-platform rich media PDF that works on both Macs and PCs that contains QuickTime VR and Windows Media video.

From print to PDF

The first part of the process is to create an InDesign template for the eBrochure using the original print brochure. In this case, the original brochure was supplied as a QuarkXPress document, so we’ll need to convert the file to InDesign and then use the converted document to help create the template.

STEP ONE: QuarkXPress to InDesign
A good rich media PDF is one that’s easy to read and navigate. We design the document in landscape display and program the document to fill the screen of the computer monitor from edge to edge. To accomplish this task, we opened the original two-page spread QuarkXPress file into InDesign. When our eBrochures launch full screen, you only see one page at a time, so we create a new document and set the size to 10×7.5″, which matches the aspect ratio of the computer monitor, and we design the pages as single pages, not two-page spreads. This will be our eBrochure template.

STEP TWO: Reformat for onscreen legibility
We modify our standard eBrochure template colors, fonts, and column layout to conform to the style of the client’s original artwork. Style sheets are set up to do likewise. Fonts are substituted and usually resized upward to make them easily readable onscreen. Sans serif fonts are generally easier to read in a PDF file. The small font sizes in the original file, though appropriate for print, are hard to read on a computer monitor. We usually change font sizes to be large enough for users to view the text comfortably on a 12″ laptop computer.

STEP THREE: Convert elements to Photoshop and RGB
We cut-and-paste elements from the converted QuarkXPress file to the newly customized eBrochure landscape template. All photo and graphics files are resaved in Photoshop RGB format. All CMYK swatches are also converted to RGB. Any logos that are in the EPS format should be converted to PSD files to ensure that they display correctly in Adobe Reader 4, because the preferences to smooth the line art are disabled. Adobe Reader 6 and later has its default preferences enabled to smooth any vector art.

STEP FOUR: Export test pages to PDF
A navigation bar, which resides on the master pages, appears on the bottom of every page in the eBrochure. Text and arrows in the bar will be used to designate hot areas of the brochure to navigate the document. We’ll add this interactivity later in Acrobat. Web links are authored in InDesign.
The entire eBrochure is then exported at 120 dpi in two formats: one for Reader 4 and one for Reader 6 and above. Note that Adobe Reader 4 does not support transparency. We always produce versions of our eBrochures that will work without embedded rich media, which requires Adobe Reader 6 or later.

Creating the rich media

The second part of the process involves preparing the media that we’ll later add to the final PDF. For the Yamaha eBrochure, we’ll be working with VR photography of the L series guitar and a video of how the guitars are made.

STEP ONE: Photograph the guitar for the VR movie
The guitar was photographed in front of a black velvet backdrop in varied angles of rotation using a high-resolution Nikon D70 camera. The pictures were color corrected in Photoshop and the blacks for the background were crushed to 100%. Instead of rotating the guitar 360°, we captured a series of images that allow the user to scrub through the views of the fine detail that’s engraved into the neck and body of the guitar. This allowed us to create a small file because only the important portions of the guitar were included in the final VR.

STEP TWO: Assemble the VR
The series of still pictures of the guitar were imported into VR Worx, which converts the photographs into a single QuickTime VR movie. The movie was exported using the JPEG compression codec and the setting was set to Low to allow for high-quality display. The movie was programmed to autorotate (Animation>Enabled) as soon as the image displays, and if you click on the movie you’ll override the autorotate setting, allowing you to interact with the movie to rotate the guitar and zoom in to view the fine detail.

STEP THREE: Edit the video
The original video of the process of making the guitars by hand was delivered to us on a DVD-Video disk and we digitized it using the component outputs from the DVD player to the DVCAM recorder, which feeds into our Power Mac G5 via FireWire. We used Final Cut Pro to digitize and edit the master 20-minute video down to five minutes in length, which featured the highlights of the handcrafting of the guitar. The final video was exported from Final Cut as a self-contained QuickTime master using the DV compression codec at 720×480 pixels.

STEP FOUR: Compress the video
To compress the video for playback inside the PDF we used Discreet Cleaner. Two versions of the video were produced for streaming the video that would be linked to the PDF. Windows Media version 7 video was chosen for the compression codec at a display size of 640×480 for the PC. QuickTime Sorenson 3 was used for the Macintosh because Windows Media video can’t play on a Mac inside a PDF. Finally, an additional high-res version was produced in the QuickTime format that would be embedded into the document.

Adding the content

Now it’s time to add the media files and the buttons to play them to the PDF. We’ll do this using Acrobat.

STEP ONE: Insert the VR into the PDF
In Acrobat, select the Movie tool and double-click on the page. This will open the Add Movie dialog and here you’ll select the Acrobat 6-compatible media (the QuickTime VR), check the Embed Content in Document option, and set the Poster Settings to Use No Poster. This will allow you to hide the video from initial view and you can then use a button to launch the QuickTime VR movie.

In the Rendition Settings dialog (double-click the movie box with the Movie tool and click the Edit Rendition button in the Multimedia Properties dialog), click the Playback Settings tab and select Forever Once Activated in the Keep Player Open drop-down menu.

STEP TWO: Link and embed the video to the PDF
Using a Windows computer, select the Movie tool in Acrobat and double-click on the page. This will open the Add Movie dialog, but this time you’ll provide a URL link in the Location field to either the QuickTime or Windows Media video that resides on a Web server. Set the Poster Settings to Use No Poster and click OK.

Double-click on the movie box on the page to launch the Multimedia Properties dialog. Click the Settings tab, click the Add Rendition button, and choose Using a URL from the drop-down menu. Enter the URL for the other video that you did not enter in the Add Movie dialog and click OK.

Back in the Settings tab of the Multimedia Properties dialog, choose one of the videos from the Renditions list and click the Edit Rendition button. This will allow you to program the PC to play the Windows Media version and the Mac to play the QuickTime movie. To specify a player, click the Playback Settings tab in the Rendition Settings dialog and click the Add button.

STEP THREE: Create the buttons for the VR and video
The buttons to launch the VR and video were created in InDesign and saved as PDF files. After you create your up, down, and rollover versions of your button in InDesign, select the Button tool in Acrobat and draw a button on the page. In the Button Properties dialog, select the Options tab, choose Icon Only in the Layout drop-down menu, and choose Push in the Behavior drop-down menu. Choose the Up state and click the Choose Icon button to import the PDF button that was created for the Up state into Acrobat. Repeat this process for the Down and Rollover states of the button until all of the buttons have been imported into the PDF.

STEP FOUR: Link the buttons to the video and VR
To launch the rich media using the button, select the Actions tab. Then, choose the Mouse Up function from the Select Trigger drop-down menu. Select Play Media (Acrobat 6 and Later Compatible) from the Select Action drop-down menu and then select the Add button. This will present a list of Acrobat 6-compatible media. Choose Play from the Operation to Perform drop-down menu and select the appropriate rich media file from the window below. In this case, the video button is linked to the video on page 4 of the PDF and the VR button is linked to the VR on page 3.

Making the document interactive

To use the navigation bar at the bottom of each page to turn the pages, launch the document in and out of full screen viewing mode, print, quit, and jump to a specific page using a menu, JavaScript code must be written or added to the document using the Execute a Menu Item command in the Button Properties dialog. First, select the Button tool, then draw a box over an item on the navigation bar text (Print, View, Exit, etc.). For instance, if we draw a box over the next page arrow, Acrobat will launch the Button Properties dialog. Make sure that the button has no Border Color or Fill Color in the Appearance tab, and then select the Actions tab. Choose Execute a Menu Item from the Select Action drop-down menu. Click Add. A prompt will direct us to the top menu bar, where we select View>Go To>Next Page. That’s one macro down, several more to go: the same procedure is then repeated for the remaining navigation icons and text, adding to the dialog’s Actions list in the process.

To create the pop-up menu for the index, you’ll need to learn to write JavaScript and that’s a separate article in itself. Adobe has written their own version of JavaScript (which is constantly being refined with each release of Acrobat), so there are many things to consider if you’re planning to write the code yourself. It’s best to hire a professional programmer who knows the Adobe JavaScript language and pay him or her by the hour.

Integrating the PDF into the website

PDF has a great reputation in the print business, but for easy onscreen viewing the complaints are numerous. The Web developer will often just provide a direct link to the PDF file, which will cause the PDF to load into the Web browser via the Adobe Reader plug-in. It’s important to allow the user to download the PDF so that it can be viewed outside the constraints of the Web browser.

The solution is to supply a few words of text on the webpage, such as “Right-click Here and Select Save Target As,” which will force the PDF file to download. For Mac users with a single-button mouse, you should supply the text “Control-click Here and Select Download Linked File.” This is not the sexiest method. The ideal way is to write a PHP script or an ASP script that will force the PDF file to download.

If you have a dedicated server, you can write an Apache script to create a Download Folder on your Web server. Then you can link to any file in that folder and Apache will force the file within that folder to download. In our case, it’s the PDF file.

Finally, don’t assume that everyone will have Adobe Reader 6 or later, which is required to play embedded rich media on their computers. We make three versions of our eBrochures: “Standard” has no rich media and works with Adobe Reader 4; “Enhanced” requires Adobe Reader 6 and has linked rich media that resides on a Web server—this version is under 5 MB and is small enough to email; and the “Full” version has all of the media embedded into the PDF. Once it has been downloaded, you can close your Web browser and everything is there—contained right inside the PDF. Unplug your computer and take it on the road.