5 Replies Latest reply on Aug 24, 2014 4:24 AM by eliverrang

    Access the embedded Edge animation through Javascript




      I'd like to be able to start an Edge animation I've embedded in my page when I prefer, but I cannot find a way to do that

      I've embedded the Edge animation using the automatic system provided by Dreamweaver.

      I'd like to be able to access the composition object through Javascript, so I could run the animation as I like.




        • 1. Re: Access the embedded Edge animation through Javascript
          eliverrang Level 1

          The trick is to communicate through the master object "AdobeEdge". This can be accessed by the scripts in the composition and also scripts in the html page and any custom .js documents.


          For example, for your purpose, put this into the body of your html page:


          <button onclick="AdobeEdge.playMySymbol('Hello Awesome Programmer')">Click me</button><hr>


          This sends a playMySymbol() call to the master object: AdobeEdge (The parameter is optional, it is just there to be able to demonstrate that parameters can be sent from the html page).


          Then, in the document.compositionReady script in your composition, you create the function as an attribute of the AdobeEdge object:


          AdobeEdge.playMySymbol = function(t){





          In this way, you can control all manner of your composition's actions from any external source.


          Peter Small

          1 person found this helpful
          • 2. Re: Access the embedded Edge animation through Javascript
            Monops79 Level 1

            When importing an Edge animation in dreamweaver through embedding, you get this code:

                    <object id="EdgeID" type="text/html" width="1940" height="1100" data-dw-widget="Edge" data="edgeanimate_assets/lesserFire/Assets/lesserFire.html">



            and this code does not include a reference to AdobeEdge. If I try using it, even after the object definition, AdobeEdge will not be present and not be usable: Chrome debugger is quite adamant about this

            What js file should I include to have that object?




            • 3. Re: Access the embedded Edge animation through Javascript
              eliverrang Level 1

              I'm afraid I can't help you here because I don't use Dreamweaver and don't know how Dreamweaver embeds stuff.


              What I do is to is publish my composition and then copy, from the html document produced, the section - exampled below - and paste this into the header of my custom html page.


              <!--Adobe Edge Runtime-->

                  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

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


                      .edgeLoad-EDGE-11346385 { visibility:hidden; }


              <!--Adobe Edge Runtime End-->


              Then I copy the stage div (which includes my comp number) into the body of my custom html, where I want the animation to appear on the page.


              <div id="Stage" class="EDGE-11346385">


              Try doing this, instead of importing your composition into Dreamweaver


              Peter Small

              • 4. Re: Access the embedded Edge animation through Javascript
                Monops79 Level 1

                Thanks! That worked

                My only complain is that I cannot store the animation where I want, but it must live inside the same directory of the HTML project, otherwise it will fail to load its internal files.

                I've seen I can go into those files and change the paths, but it's not an operation I want to do every time I publish

                Hopefully Adobe will work on that.




                • 5. Re: Access the embedded Edge animation through Javascript
                  eliverrang Level 1

                  Where are you publishing to?

                  You can choose to publish where you like (see "Publish Setting..." in the file menu), so you can arrange to publish inside your html project. This means there is no need to mess around changing paths.

                  Think of it this way, when your composition is published it provides all the necessary files and folders together with an html document. This html document does not have to be used - and, for your project, it isn't used. Your own, custom html is calling the animation which is published to the same folder as your custom html doc. You can make changes to your animation and republish. The changes will now be reflected in your custom html page. No path changes necessary.