Embedding Flash brings interactive PDF product tour to life

NueLife.com, a dynamic website that provides customized resources for the health and wellness needs of America’s seniors and healthcare professionals, hired Codify Design Studio to design an interactive product tour for them. They needed it to serve three distribution channels, each with a specific purpose: provide a seamless interactive experience online; be easily downloadable by website visitors; and be available to their sales force — whose 'offices' are out in the field — for use in remote customer presentations.

Codify's challenge was to create an interactive tour that would include narration and sophisticated animation techniques in one file that could be repurposed across the three different channels.

The answer: Adobe Acrobat 9 Pro and Adobe Flash. With Acrobat 9 now fully supporting Flash, Codify was able to embed a Flash file into a PDF file, and also embed all external resources the Flash application needs. The tour is contained in a single, downloadable interactive PDF file that can be run without an Internet connection.

Here's how we did it

Codify's Flash application consists of a main file that controls navigation items and player controls. Once the application starts, it loads an XML file that specifies the animations to play, as well as the left-side navigation items and a clickable poster frame. Once a user clicks the Begin button on the poster frame or selects a navigation item, the application loads that animation file and plays it.

This is a very efficient, modular workflow, allowing Codify to swap out and modify individual assets as the application grows and changes. The challenge is that the main shell file has dependencies to these XML and other Flash files in order to play correctly — meaning the users and sales force would need to download all files for the application to work.

The solution lies in the resources tab of the Flash tool properties. Codify embedded its main tour file using the Flash tool in Acrobat 9 Pro, then embedded all dependent files in the resources area. This means the PDF file acts like a miniature file server for Flash, allowing it to load these dependent files from within the PDF.

1. Create a new PDF file from a Flash file

In Acrobat, create a new file based on Flash by selecting File > Create PDF > Form File. From this menu, choose the main Flash file that runs the tour, a file named neuLife_player.swf. Click OK (see figure 1).

This gives us our Flash file inside of a PDF document, but you'll notice the navigation isn't available (see figure 2), as well as the timeline chapter points. Next, add these resources to the PDF so Flash can load them.

2. Set the Flash file Enable properties

Select the Flash tool from the Tools > Multimedia > Flash Tool, or select it from the document toolbar (see figure 3).

Next, double-click the Flash object on the page to access the Edit Flash dialog box. First, we want to set the Flash object to play only when the user is looking at the particular page containing the Flash object. Select The page containing the content is visible pop-up menu item next to the Enable When setting (See figure 4).

3. Embed the external resources

In the Edit Flash dialog box, click the Resources tab, click the Add button and select the media directory containing the files that Flash needs to run (see figure 5).

4. Set the page size

We chose a horizontal display of 980 pixels by 500 pixels so the Flash application would fit into the website's template and still be large enough for the sales team to present on standard 1024x786 projectors without much wasted space. To set the PDF page size, choose Document > Crop Pages, set the Units to Points (same measurement as pixels). Under Change Page Size, set the width to 1024 and the height to 768 (see figure 6). Click OK.

5. Set the PDF file's Open preferences

In Acrobat 9 Pro, we set the PDF document's Initial View state to open in full-screen mode and hid all of the menu items. This way, the sales team can present the tour without anything else showing on the screen. To set this, go to File > Document Properties and select the Initial State tab. Check the preference for Open in Full Screen mode in the Window Options section, and check the box for Hide menu bar in the User Interface Options.

Flash in PDF: 'The ideal solution'

"As a budding health–focused, start-up organization with a highly interactive online portal, our intent was to create a portable, reliable and accessible tutorial that demonstrates to prospective customers both the experience their users would have with our system," says Michael Wysocki, Senior Manager, Technology American System for Advancing Senior Health, which produces NueLife.com.

"A second objective was to ensure that any user -- internal or external –- could view the demo anywhere, with as few technological restrictions as possible including 'prowess on the part of the user as well as accessibility related to firewalls, security controls and other technological barriers within the institutions of our customers."

"The strategy of embedding Flash content within a PDF was the ideal solution," says Wysocki. "Because our Flash content will be executed in the Acrobat 9 client -- whether or not our prospects have the Flash player installed -- we know that the content will be viewable by all. Additionally, because the tour is a PDF, the document can be shared internally and externally -- both electronically and in print."