Edge animations and DPS

Edge animations and DPS

Adobe DPS (Digital Publishing Suite) is a great platform to produce digital magazines from InDesign. I use this platform every month to produce Appliness. You can embed HTML5 animations produced with Edge Animate in your DPS publications, but if you want to keep a transparent background, it’s tricky. I’ve found a way to make it work. Look at this video to understand how to embed Edge animations in DPS with a transparent background, or read the steps below the video.

Step by step

In Edge Animate:

  1. Open your HTML animation. 
  2. Select the stage and change the opacity of its background-color to 0% to get a transparent background.
  3. In the Poster panel, click Capture to produce a Poster.png file.
     

    Capture a poster to produce a Poster.png file in the images folder.

    Capture a poster to produce a Poster.png file in the images folder.

  4. Save your animation and exit Edge Animate.
  5. Open the /images folder of your Edge Animation. Poster.png is inside this folder.
  6. Edit Poster.png with Photoshop to replace it with a fully transparent PNG file.
  7. Open again the Edge animation file and open the File > Publish Settings menu.
  8. Check the “Animate Deployment Package” box and name your .oam file.

    Create an Animate package (oam file)

    Create an Animate package (oam file)

  9. Click “Save” and publish your animation (File>Publish).
  10. Quit Edge Animate. You should get now a /publish/animate_package folder with the .oam file.

 

In InDesign:

  1. Open InDesign. Open an article.
  2. Drag and drop the .oam file in a dedicated layer on your article.
  3. Select the animation and open the Folio Overlays panel.
  4. The Web Content parameters are available. Check “auto play”, “transparent background”, and “scale content to fit”.
  5. Add your article to a DPS folio with the Folio Builder panel.
  6. When you add your article, don’t use PDF. Use PNG instead.
  7. Preview your article on the desktop or on your iPad. You should see the animation with a transparent background.

 

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

9 Comments

  1. Top, l’amin et fond transparent, super merci.

  2. Thanks for your tips, I had the same idea with deleting content of the poster.png to make it transparent, but I din’t get to set png format of article.
    But what about different resolutions of iPads? I want my folio to look good in both 2048 and 1024, how to do it with png format?
    And another question – did you face the problem when animation is twice or fourfold smaller on iPad while it is ok on desktop preview.

    • It sounds like you are gathering lots of different ideas in your Word. thank you…

  3. I was looking to do that but without any success on my DPS :'(
    Thanx for sharing the tips !! 😀

    This is a great feature!

  4. DPS Is just fantastic for all beginner of in design learner, and this is very good task this site doing..

  5. Thanks Michaël for the informative tutorial. Very helpful. Here’s one problem/observation with your method and I wonder if you have a solution. When you add the article to InDesign using the PNG setting (instead of PDF), I lose the vector quality of the PDF. The good news is the animation works with the transparent background. The bad news is that the reader cannot zoom in and out on the article and when using an iPad with retina display, there’s a slight blur on the text because it’s an image vs. a vector supported PDF. It doesn’t affect readability, but it is noticeable.

  6. DPS is fantastic platform. thank you for giving the tips.It is mind blowing..

  7. I like the DPS platform.It’s mind blowing.

Trackbacks/Pingbacks

  1. Refining Animation in InDesign | Research Log - [...] http://creativedroplets.com/edge-animations-and-dps/ [...]

Submit a Comment

Your email address will not be published. Required fields are marked *