15 May 2012
This article assumes you have basic knowledge of Adobe Digital Publishing Suite and InDesign, and that you have a Digital Publishing Suite account.
Note: If you have questions about this article, use the comments feature at the bottom of the article. Please don’t contact technical support with questions about Adobe Developer Connection articles.
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.
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.
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).
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.
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.