Adobe recently announced the release of Edge Preview 7 (now called edge Animate). With a timeline user interface similar to Flash, Edge creates animated and interactive content using HTML5, CSS3, and JavaScript. New to this version are some much-anticipated features such as drop shadows for text and objects, enhanced text support, and liquid layouts.

One thing you can do with Edge is to open an HTML document and animate its objects. That is where Adobe InDesign CS6 and Edge can come together: You can design your page in InDesign, export your page to HTML, and then animate it in Edge. 

When you export a page to HTML from InDesign CS6, three things happen:

• You get an HTML file

• Your document’s assets can be optimized for web and saved in an “image” folder.

• You can let the export create a .css file which will be saved in a “css” folder.

Both the “image” and “css” folder will be in a folder named the same as the HTML file with “-web-resources” appended.

Here is a generalized outline for exporting an InDesign document ( CS5.5 or above) for HTML with Edge Animate in mind.


1. Create a folder for your project. Inside the folder, include your images (saved in an “images” folder).

2. Create your page layout with all text styling controlled by paragraph and character styles.

3. Assign HTML tags for your paragraph and character styles in the Export Tagging panel of the Paragraph Style Options dialog.

4. Export your document as HTML to the folder created

a. In the General Tab: Export the document based on either Page Layout or Articles Panel

b. In the Image tab: Allow the export to optimize the images, setting the other properties as required by your document.

c.In the Advanced tab, select Embedded CSS including style definitions. 

5. Click OK.

The problem is the resulting HTML is linear and, depending on your layout, may not be exactly the way you designed it.  If you have a favorite HTML editor and are familiar with HTML5 and CSS, you may find it easier to make your changes and/or modifications there rather than in EDGE. Your modified HTML page should appear in a browser exactly the way you want it to look after initial animations occur (on page open).

Note: This only works with export from CS6. A workaround for CS5.5 is in the works.


For initial animations (those that happen when the page opens), the simplest way to animate in Edge is to start with the page as it will be when animation completes. 

1. To see more of your page, grab the bottom of the HTML tab  (bottom line of the enclosing yellow box), and drag down. You may also need to zoom out to see the entire page (View > Zoom Out or Command+-).

2. Make any adjustments to text frames, etc. before you add any animation.

3. Place a pin at the first animation point (.01 for instance).

4. With the playhead at 0.00, animate an object (move it off the page, change its opacity, etc).

5. Test the animation (press the spacebar to play).

6. Repeat for other objects.

For more about Edge Animate, go to or


Haven’t signed up for Creative Cloud yet? Don’t let the opportunity to get Creative Cloud at special pricing pass you by. This is for those who have a registered version of a 4.0 version or above of any Adobe Creative Suite product. The offer expires at the end of this month, so don’t delay!