Main-Image-Adobe-Edge-Animate-Banner*note that this works for both Digital Publishing Suite and InDesign created .articles in Digital Publishing Solution.

Adobe Edge Animate is an amazing piece of software that allows you to easily create interactive or non interactive motion graphics and animations. Along with Adobe After Effects, Edge is one of the most fun applications I get to use at work. Here I’ll go over how to put your Edge Animate content into DPS articles using InDesign and some tips and tricks that I’ve found with my time using edge animate.

How to insert HTML Content into DPS

It’s a fairly simple process to put your edge content into adobe Digital Publishing Solution (DPS). When you save out an edge composition it will create a .html file that you can put into your DPS article through indesign. When you are on your indesign page you will need to create a rectangle that will hold your html content. You need to make sure the rectangle is the same size of your edge composition. A very easy way to do this is to select your rectangle tool and to simply click on your page to bring up a dialog box where you can input the exact size you want.

Once this is done, with your rectangle selected, use your folio overlays panel and select “web content.” This will change the simple rectangle object in indesign into a web content container that can host your html content. From the folio overlays panel you will now have options to choose your html content by clicking the folder icon.

John Cunningham Headshot

John Cunningham is an interactive designer at 6D Creative/Mobile. His unique combination of both developer and design skills positions him perfectly for interactive design in the app world. John also specializes in animation, motion graphics, and UI/UX design. John is based in 6D Global’s Portland, OR office.