How to Import HTML into Adobe Edge Animate

By Michael Rohde

Adobe Edge Animate CC is very HTML-friendly. If you have an existing — albeit a very basic — HTML web page that you want to animate, then just click Open File from the Welcome screen to start working with it.

Make sure all images and associated files are in the same folder as the htm file when you open it — or in a nested folder in the htm file. Otherwise they won’t appear on the Stage.

When you’re importing existing HTML, keep in mind the following:

  • Edge Animate may not like your CSS files

  • Images in your htm file appear in the Library panel.

  • Text is imported as an element.

Possible issues with CSS files

Keep in mind that the simpler the HTML page is that you import, the easier it is for Edge Animate to open it.

If you do have trouble opening your htm file, try removing all associated CSS files. You may fret at the loss of that earlier work, but keep in mind that you can quickly replace all of that design work with Edge Animate.

If you open an existing HTML file with menus and such, you can animate the menus and elements but you can’t reformat the color and some other aspects.

The reason for this is that Edge Animate only allows animation sequences for imported HTML objects so as not to fight with any CSS styling you may have already applied. It can get a bit messy when you apply two styles to an element, which can lead to unexpected results.

Images appear in the Library panel

If the HTML page that you’re importing contains images, then Edge Animate imports those images into the Library panel as an asset (see this figure).

Here the original Edge Animate icon was imported as an asset into the Library panel.

Here the original Edge Animate icon was imported as an asset into the Library panel.

You can now treat the imported images as elements that you can animate or add interactive attributes; you can make the image move about the screen and/or make the image a link.

Text is imported as an element

When you import an HTML file with text, Animate imports that text as an element. You can select the text elements and animate them or add actions to them; however, you can’t edit the text.

If the original HTML file used H1 or paragraph tags for text, then Animate recognizes those attributes and displays them in the Elements panel, as shown.

Text is imported as an element.

Text is imported as an element.