Embed Adobe Edge Animation on Your Page

NOTE: if you’re looking for the “triggering events from within an adobe edge animation to the page” look here:


This tutorial will show you how to embed an adobe edge animation onto an existing page within your site.


Publish the adobe edge animation (File -> publish). Find the file, and copy the adobe runtime block and the stage div:


<!--Adobe Edge Runtime-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript" charset="utf-8" src="edge_includes/edge.5.0.1.min.js"></script>
        .edgeLoad-EDGE-174933755 { visibility:hidden; }
   AdobeEdge.loadComposition('demo', 'EDGE-174933755', {
    scaleToFit: "none",
    centerStage: "none",
    minW: "0",
    maxW: "undefined",
    width: "550px",
    height: "309px"
}, {"dom":{}}, {"dom":{}});
<!--Adobe Edge Runtime End-->


<div id="Stage" class="EDGE-174933755">
        <div id="Stage_Text" class="edgeLoad-EDGE-174933755">Hello World</div>
        <div id="Stage_microphone-grey2" class="edgeLoad-EDGE-174933755"></div>

That’s it, once you tell it to look in the right place for the files, the page should be able to run the animation sequence. Make sure you change the url in the loadComposition call to the the right local file url:

AdobeEdge.loadComposition('{my}/{custom}/{url}/demo', 'EDGE-174933755', {


Leave a Reply

Your email address will not be published. Required fields are marked *