Guide to Creating Custom PDF Portfolio Themes for Adobe Acrobat X

Adobe Acrobat X PDF Portfolio Layouts (Navigators) can have a variety of “looks” applied to them called “Visual Themes” in the Acrobat User Interface or “Skins”. Because the Visual Themes in Acrobat leverage the Spark Skinning Model, for the purposes of this document, Skins and Visual Themes will be use inter-changeably.

Skins can be of two types; “flex’ and “flash”. Skins of type “flex” are more flexible (no pun intended) because they can have transitions and effects and the position of elements on the card can be changed. However, they must be authored in Flash Builder and must be compiled with your Navigator project. Skins of type “flash” (FlashSkins) are easy to author in Flash Professional, but all objects in the Navigator layout have a fixed size and position. Both skin types are published as .SWF files.

Note: This page focuses on creating custom “flash” skins. The Adobe Acrobat Portfolio SDK contains information on creating “flex” skins.

The screen shot below shows an example of a PDF Portfolio with two different visual themes. The first is the default “Clean” skin and the second is a custom skin created for the Meridien Conference. The content is the same but you can see how a custom theme can make the your PDF Portfolio highly branded and much more visually appealing.

DefaultLinear.png
“Clean” Visual Theme

MeridienLinear.png
Custom Visual Theme

You can create custom skins for PDF Portfolios using either Adobe Flash Professional CS5 or a combination of Adobe Illustrator CS5 and Flash Professional CS5. Examples, source files and documentation can be found in the “CreatingCustomPortfolioThemes.pdf” file in the “Skins” folder of the Adobe Acrobat Portfolio SDK. An example Adobe Illustrator file can be downloaded from the link at the end of this page.

To use a custom theme, click Import Custom Theme. Navigate to the custom theme on your computer and open it. The theme is immediately applied to your PDF Portfolio and appears in the Visual Themes list as “Custom.” Unlike custom layouts, custom themes apply only to the current PDF Portfolio and are not permanently added to the Visual Themes panel.

Using Adobe Flash Professional CS5

Adobe Flash Professional CS5 can be used to create a new FlashSkin. A list of all of the Navigator objects that can be skinned by a FlashSkin is located in the “CreatingCustomPortfolioThemes.pdf” file in the “Skins” folder of the Adobe Acrobat Portfolio SDK.

The Adobe Navigators and any custom Navigators that use the Adobe skinnable components use stage instance names to load the correct visual, resize it to the necessary size, and generate a bitmap from the rendered object. If the named instance cannot be found on the stage, then the affected components will fall back to the visuals provided by the default Gel skins.

Flash 9-slice scaling can be used with most objects.

To create a custom FlashSkin using Flash Professional CS5:

  1. Open the FlashSkins.fla file
  2. To edit the look and feel of an element, double-click the instance on the stage.
  3. Make your changes
  4. Repeat this for each element you want to change
  5. Publish to SWF

Your FlashSkin is now ready to be applied to a PDF Portfolio.

Alternatively, you can create a new project and use the stage instance names specified in the list of objects at the end of this document. The names must be exact and are case sensitive.

Using Adobe Illustrator CS5 and Flash Professional CS5

Adobe Illustrator can be used in conjunction with Flash Professional CS5 to create custom FlashSkins.

To create a custom FlashSkin using Adobe Illustrator CS5 and Flash Professional CS5

  1. Create an Illustrator file and begin drawing your skin parts
  2. Create Illustrator symbols for each of the objects listed at the end of this document
  3. Save the file.
  4. Open Flash Professional and create a new file.
  5. Select File | Import | Import to Stage and select your .AI file from step 1
  6. Save the .FLA file and publish it to SWF. You only need the .SWF so there is no need to export the HTML file, which is selected by default.

Your FlashSkin is now ready to be applied to a PDF Portfolio.

The image below is the same PDF Portfolio shown in the images above except that it uses the “Transparent Aluminum” skin that I originally created in Adobe Illustrator and then used the steps above to create a custom skin.

TransparentAluminum.png
“Transparent Aluminum” Theme

Download the “Transparent Aluminum” Illustrator File