Enhance your DPS folios with HTML animations using Adobe Edge

Prerequisite knowledge

This article assumes you have basic knowledge of Adobe Digital Publishing Suite and InDesign, and that you have a Digital Publishing Suite account.

• Latest version of InDesign CS6 with Digital Publishing Suite tools
• Adobe Digital Publishing Suite Professional or Enterprise account

Required Adobe products (retail)

• InDesign CS6 (Download trial)
• Digital Publishing Suite, Professional or Enterprise Edition
• Adobe Content Viewer for iPad

Additional required other products (third-party/labs/open source)

• Adobe Edge
  • Download Preview
  • Learn More
• Apple iPad 2

Sample files

• edgefiles.zip
• indesignfiles.zip

Adobe Edge is a web motion and interaction design tool that allows designers to create animated web content for mobile and desktop platforms using HTML5, JavaScript, and CSS3. Since Edge creates animations that follow web standards, you can bring them into DPS to create articles for various mobile platforms including Android and iOS.

The goal of this article is to guide you through the process of exporting an Edge animation and bring it into InDesign CS6 to create a DPS article with an embedded animation.

Note: This export mechanism works only with InDesign CS6 and Adobe Edge preview 6 or above.

First lets look at the Edge animation that we will be exporting. Unzip edgefiles.zip and after ensuring that you have Edge installed, open the Jams.edge file (either by double clicking the file or using File>Open dialog within Edge). The file already has an animation set up. You can preview the animation in the browser using File>Preview In Browser.

Setting a Poster Image

For the user to activate the Edge animation within the DPS viewer he/she will have to currently click the element to activate animation. So you need to create a poster Image that would show up.

First lets seek to a position in the animation that you want as your poster. Move the play head to 0:02.250. We will use this position as the poster image.

Make sure that you have “Stage” selected in the Elements panel. Now click the camera icon in the Properties panel and click "Capture" to capture the poster image. A "Poster.png" appears in the Assets panel.

OAM File Export

The export format from Edge for InDesign is .OAM. You can create a .OAM file from Edge using the Publish Settings.

Choose File>Publish Settings to see the Publish Settings dialog. Now check the box next to InDesign / DPS and make sure that the Poster Image is set to Poster.png (that we created earlier).

Click “Publish”. This generates a publish folder in the same folder as your .edge file with a dps subfolder that has the Jams.oam file that we need to import into InDesign.

Download and open the indesignfiles.zip file. Open the Spring Jams.indd file. Place the Edge animation on Page 2 of the document, in the upper right corner (and make the existing text wrap around it).

Placing the animated content

To place the animated content, select File>Place and select the .OAM file. Now place the animation in the desired area and adjust the position. Verify that you can see the poster image. To get the text to wrap, select “Wrap around the bounding box” icon in the InDesign control palette.

Previewing in the DPS desktop viewer

Open the Folio Builder and create a new Folio. Name it “Spring Jams”. I have chosen a landscape orientation for my folio.

Now add a "Jams" article. This will import all content and you are ready for preview. Navigate to the folio level view in the Folio Builder and you can choose the "Preview On Desktop" option in the Folio Builder panel to preview the content in the local DPS viewer.

Previewing in the Adobe Content Viewer on the iPad 2

Before we preview on the iPad, lets take care of any preloading issues with the animation. Click on the animation in the document. Now navigate to the Folio Overlays panel, select “AutoPlay” and set delay to 0.125 secs. This will ensure that your animation has been preloaded so that there is no delay for the user.  

Once you have set this, save your InDesign document, navigate to the Folio Builder and to the Jams Article and select “Update” from the options menu so that the change is applied.

Connect your iPad, navigate to the Folio Builder, choose the Folio (you might need to navigate back to select the “Spring Jams” folio, not the “Jams” article) and select “Preview on <device name>’s iPad”. Make sure that the iPad is unlocked and the Adobe Content Viewer is installed and open.

Here is how it looks on the Adobe Content Viewer on the iPad.

Learn more about Adobe Edge.