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
User level: All
Required products
Additional required other products (third-party/labs/open source)
Sample files
By downloading software from the Adobe Web site you agree to the terms of our license agreement. Please read it before downloading.
 


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.
 

Exporting Edge animation for InDesign CS6 and DPS use

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.
 
Figure 1: Completed composition opened in Adobe Edge Preview 6
Figure 1: Completed composition opened in Adobe Edge Preview 6
 
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.
 
Figure 2: Seeking to the 2.25 second point in the timeline to set the poster image
Figure 2: Seeking to the 2.25 second point in the timeline to set 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.
Figure 3: Capturing the poster image
Figure 3: Capturing the poster image
 
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).
Figure 4: Publishing the Edge animation for InDesign/DPS
Figure 4: Publishing the Edge animation for InDesign/DPS
 
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.
Figure 5: Output of publishing process
Figure 5: Output of publishing process
 

Making the animation work in InDesign CS6 with DPS

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.
Figure 6: InDesign document with Edge animation placed. Note poster image.
Figure 6: InDesign document with Edge animation placed. Note poster image.
 
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.
Figure 7: Creating a new folio using the Folio Builder panel
Figure 7: Creating a new folio using the Folio Builder panel
 
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.
Figure 8: Creating a new folio using the Folio Builder panel
Figure 8: Creating a new folio using the Folio Builder panel
 
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.  
Figure 9: Setting auto play delay to insure preloading of the animation
Figure 9: Setting auto play delay to insure preloading of the animation
 
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.
Figure 10: Updating folio
Figure 10: Updating folio
 
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.
Figure 11: Choosing “Preview on …. iPad”
Figure 11: Choosing “Preview on …. iPad”
 
Here is how it looks on the Adobe Content Viewer on the iPad.
Figure 12: Previewing the folio and animations on an iPad
Figure 12: Previewing the folio and animations on an iPad
 

Where to go from here

Learn more about Adobe Edge.