*** From the Archives ***

This article is from September 10, 2009, and is no longer current.

Mix Acrobat and Flash for Better Interactivity

Reprinted with permission from the Acrobat User Community and the author, Chris Converse, partner and multimedia designer and developer at Codify Design Studio.
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 PDF file that can be run without an Internet connection. Download the 4.8MB NueLife Tour. (Requires either the Adobe Reader 9 or Acrobat 9.)
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 (Figure 1; click the figure to see a larger version).

This gives us our Flash file inside of a PDF document, but you’ll notice the navigation isn’t available (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 (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 (Figure 4; click the figure to see a larger version).

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 (Figure 5; click the figure to see a larger version).

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 1024×786 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 (Figure 6; click the figure to see a larger version). 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.”
 

Chris Converse has more than 25 years of experience in graphic and interactive design,with a unique focus on both design and development. He is a featured speaker at various industry-related conferences, including Adobe MAX, NAB, CreativePro Week, and Keyframes. You can find more of Chris’ events at codifydesign.com or watch his courses online at LinkedIn Learning, Udemy.com, Skillshare, CreativeLive, Pluralsight.com, and Amazon Video.
  • Anonymous says:

    When I tried to view this using Acrobat 8 I got the message “There was an error opening this document. Acrobat cannot decrypt this document.” Does that mean that viewers would need to download Acrobat Reader 9 to view this Flash/PDF file?

  • amarie0 says:

    The article actually didn’t mention Reader at all, only Acrobat. (How many salespeople have the full Acrobat program?)

    I’m fairly certain that the PDF is only viewable with Reader 9 or Acrobat 9. They’re the ones that support Flash in the way described in the article.

    AM

  • amarie0 says:

    So I just checked, and yes, the flash-in-pdf-clothing file opens and works just fine in Reader 9. You’d only need Acrobat Pro to create/edit it.

    Very cool article by the way. I had no idea you could dig into the innards of a SWF from within Acrobat in that way. Clever solution for the client, too!

  • >