Developing Custom PDF Portfolio Layouts using Flash Builder 4

UPDATED 6/15/2011

The following is the introduction to a series of articles that provide examples and tutorials to help in the development of Custom PDF Portfolio Layouts for Acrobat X.

About PDF Portfolios and Navigators

Adobe Acrobat X Pro allows you to create PDF Portfolios, which are single PDF files that act as a container for other files (called attachments) and an embedded Flash application to navigate and manage those attachments. These attachments can be in different formats, of different types, and created by different applications. The original files retain their individual identities when they become part of the single PDF Portfolio. It’s similar to what happens when you create a ZIP file, just a lot cooler.

The presentation and management of the attachments in a PDF Portfolio, and any actions taken on them, such as viewing and editing, is managed by a PDF Portfolio Layout, or Navigator. In other words, a Navigator is an embedded Flash application that’s used to navigate content in a PDF Portfolio. It defines animations, colors, visual styles, fonts, headers, footers, background, generates previews, determines the treatment of specific document types and more. You create Navigators in Adobe Flash Builder 4 with the Acrobat Portfolio SDK.

Note: This guide uses the term Navigator rather than the marketing term PDF Portfolio Layout. The informal term is more meaningful for developers because it corresponds to the type of file that represents a PDF Portfolio Layout.

A Navigator can include a range of interactive features, including user interface components (widgets), animation, and localized strings. It can also contain media files-such as video clips, images, and mp3 files, to provide a rich media experience. The Navigator interacts with PDF Portfolios through the Acrobat API.

Acrobat Pro allows you to apply PDF Portfolio Navigators to a PDF Portfolio. When applying a Navigator, you can choose from the Navigators installed with Acrobat Pro, or you can apply a custom Navigator that you or others develop. When a Navigator is applied to a PDF Portfolio, it gets embedded and becomes part of that PDF Portfolio. Users of Acrobat X or Adobe Reader X can then view the PDF Portfolio that contains the embedded Navigator. Acrobat users have the ability to update the PDF Portfolio, and Acrobat Professional users can edit the Navigator properties and contents.

The Adobe Acrobat Portfolio SDK for Acrobat X greatly simplifies the process of creating custom Navigators over Acrobat 9. It’s wizards automate the process of creating an initial working Navigator, debugging your Navigator, and packaging the completed Navigator along with its resources as a Navigator (NAV) file.

Watch this video to learn how to create a PDF Portfolio in Acrobat X Pro.
Watch this video to hear Senior Experience Designer, Jacob Surber, share a behind the scenes look at the reinvention of PDF Portfolios in Acrobat X.

Getting Started:

System Requirements: To build Navigators using the Acrobat Portfolio SDK the following must be installed on your system. While the Acrobat Portfolio SDK is free, the authoing tools are not. The links below will allow you to download the free SDKs and trial versions of the required products.

Note: If you are using Flash Builder 4.5, you must download and install the Flex 4.1 SDK. The Portfolio SDK was developed prior to the Flex 4.5 SDK becoming available.

Getting Started

There are seven basic steps to build a PDF Portfolio Layout (Navigator) using the Acrobat Portfolio SDK:

  1. Download the Acrobat Portfolio SDK
  2. Install Acrobat Portfolio SDK and plugins in your Flash Builder programming environment.
  3. Run the Create Navigator Project wizard.
  4. Use ActionScript and the Acrobat Portfolio SDK to program your Navigator.
  5. Test and debug your Navigator using the Debug Adobe Navigator wizards and the AIR-based Previewer application.
  6. Export your Navigator as a Navigator (*.nav) file.
  7. Import your Navigator into a PDF Portfolio using Acrobat X Pro.

Installing the Portfolio SDK

Before you can begin developing your Navigator, install the Acrobat Portfolios SDK, install the acroFlashDebug.api plugin into Acrobat, and install the Navigator plug-ins for Flash Builder. The Acrobat Portfolio SDK was developed based on Flash Builder 4.01 and the Flex 4.1 SDK. All instructions in the Acrobat Portfolio SDK are based on Flash Builder 4.01. I am using Flash Builder 4.5 and other than a few very minor issues, everything works as expected but because the directory structure of Flash Builder 4.5 is slightly different from Flash Builder 4.01, installation is slightly different.

If you are using Flash Builder 4.01, follow the instructions here.

If you are using Flash Builder 4.5, follow the same directions but add the word "eclipse" before the final folder name for the Flash Builder add-ins.

C:\Program Files\Adobe\Adobe Flash Builder 4\plugins\
becomes…
C:\Program Files\Adobe\Adobe Flash Builder 4.5\eclipse\plugins\

C:\Program Files\Adobe\Adobe Flash Builder 4\
becomes…
C:\Program Files\Adobe\Adobe Flash Builder 4.5\eclipse\

MacOS uses a similar directory structure.

Note: For Windows Vista and Windows 7 only you will need to run Flash Builder 4.01 as Administrator. Find Flash Builder 4 in the Programs menu, right click on it and select “Run as administrator”. This is not neccesary if you are using Flash Builder 4.5.

You can test your installation by creating your first Navigator project.