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:
- Open your HTML animation.
- Select the stage and change the opacity of its background-color to 0% to get a transparent background.
- In the Poster panel, click Capture to produce a Poster.png file.
- Save your animation and exit Edge Animate.
- Open the /images folder of your Edge Animation. Poster.png is inside this folder.
- Edit Poster.png with Photoshop to replace it with a fully transparent PNG file.
- Open again the Edge animation file and open the File > Publish Settings menu.
- Check the “Animate Deployment Package” box and name your .oam file.
- Click “Save” and publish your animation (File>Publish).
- Quit Edge Animate. You should get now a /publish/animate_package folder with the .oam file.
- Open InDesign. Open an article.
- Drag and drop the .oam file in a dedicated layer on your article.
- Select the animation and open the Folio Overlays panel.
- The Web Content parameters are available. Check “auto play”, “transparent background”, and “scale content to fit”.
- Add your article to a DPS folio with the Folio Builder panel.
- When you add your article, don’t use PDF. Use PNG instead.
- Preview your article on the desktop or on your iPad. You should see the animation with a transparent background.