Placing animation from Edge onto an existing page with other content

Hi Chick,

Copy all the Edge-generated files into the same directory as your html page. Then follow the steps below.

Add this to the head of your html doc (you must include the comment lines, or Edge won't run):

<!--Adobe Edge Runtime-->

    <script type="text/javascript" charset="utf-8" src="yourFileName_edgePreload.js"></script>

          <style>

        .edgeLoad-EdgeContent { visibility:hidden; }

    </style>

<!--Adobe Edge Runtime End-->

Add this to the body of your html page, this will hold the Edge animation:

<div id="Stage" class="EdgeContent"></div>

Hi Chick,

You don't put anything in the "Stage" div. Edge uses that div as the root div for all it's animation. If you have multiple Edge animations on 1 page, see the

"Multiple Compositions in a Page" section under "Advanced Topics", at the bottom of the API docs:

http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

From my experience renaming the div stage id afterwords will break the stage properties like stage breakground and so on. The stage is registered in EA's internal dom with its specific stage id. When renaming the stage the dom entry can't be matched. I ended up modifying the dom key to the new stage name and then it all worked again. Just wanted to mention it, might not be important in a lot of cases.

If you are using wordpress or drupal give EdgeSuite a try, I've made all the necessary adjustments to use multiple compositions within one page. http://edgedocks.com/edge-suite