How to Use Adobe Edge Animate Files in Dreamweaver - dummies

How to Use Adobe Edge Animate Files in Dreamweaver

By Janine Warner

Adobe Edge Animate is a software program you can use with the new Dreamweaver CC functions that allows designers who are familiar with the Flash interface to create animations and then export them as bundled .oam files that are easy to insert into your web pages. Ever since Apple’s wildly popular iPhone and iPad famously refused to support Flash, Adobe has been working on providing alternatives to web designers.

The .oam files contain the images and the JavaScript, HTML5, and CSS code that Dreamweaver uses to display the animation in your web page. To add the .oam files to a page in Dreamweaver, use the following steps:

  1. Click where you want the Edge Animate file to appear on your web page.

  2. If the Insert panel is not already open, choose Window→Insert. Then use the drop-down list to select the Media panel.

  3. In the Media drop-down list, choose the Edge Animate Composition option.

    You can also choose Insert→Media→Edge Animate Composition, or press Ctrl+Alt+Shift+E. The Select Edge Animate Package dialog box appears.

  4. Browse to locate the Edge Animate package file that you want to insert in your page, select the file, and click OK.

  5. If you have accessibility options turned on, you’re prompted to add alternative text to describe the Edge Animate file. Enter a description of the file and click OK.

    The dialog box closes, and the Edge Animate file is inserted into your document. Dreamweaver also copies the requisite jQuery, CSS, HTML, and image files to the root folder of your site.


  6. Click the Live view button at the top of the workspace to view the inserted animation.

    (Unlike Flash, there is no button to play the animation to see if it works.) Note the extensive list of files listed next to the Source Code button above the page design.


Dreamweaver includes just a few options in the Property inspector to modify Edge animations on your web pages. You can assign a class style to the Edge Animate file, but you should not adjust the height or width of the animation with the dialog boxes in the Property inspector, unless you are expert at manually editing the CSS, jQuery, and HTML files.