9 Replies Latest reply on Nov 29, 2012 10:24 AM by elainecc

    Start composition from clic elsewhere on page

    romain0101

      Hi,

       

      I am desperately trying without success to start  an animation generated with Edge Animate, by clicking on a <div>, on a html page. I tryed several methods, described in threads of this forum but no one seems to work, furthermore there are all different.

       

      So my question is finally is it possible to do something like this :

       

      1. Detect a click on <div class="my_div"> Hello world </div>

      2. Start my animation.

       

      Thank's a lot.

       

      Romain

        • 1. Re: Start composition from clic elsewhere on page
          dhosford Employee Moderator

          Hi there,

           

            What I would suggest is to make your animation into a symbol, and then add a click functionality to the "Hello World" text outside of the symbol that reads:

           

          sym.getSymbol("myAnimation").play();

           

            Here is a link to a sample project I made for you to take a look at. Let me know if you need further clarification.

           

          https://creative.adobe.com/share/1f893977-f585-45a6-b53a-919c600c3101

           

          I hope this helps!

          • 2. Re: Start composition from clic elsewhere on page
            elainecc Adobe Employee

            Hi, Romain-

             

            It's certainly possible to do it even if the div is outside the Animate project.  What you can do is refer to the project from your own JavaScript using the AdobeEdge.* API.  For instance:

              var myComp = AdobeEdge.getComposition(MY_COMP_ID);

              myComp.play();

             

            Hope that helps!

             

            -Elaine

            • 3. Re: Start composition from clic elsewhere on page
              romain0101 Level 1

              Hi,

               

              Thanks for you support everybody. OK, i think this access to the API through my html page is one of my issue. It seems i can't access to the API objects. Here is a simple instance of access to AdobeEdge services (without the click on another <div>).

               

               

              <body style="margin:0;padding:0;">

              <script type="text/javascript">

                  this.alert('Chaîne de caractères');

                        var comp = AdobeEdge.getComposition("EDGE-19759595");    

                        /*comp.play();*/

              </script>

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

                        </div>

              </body>

               

              With a javascript debuger i obtain this error :

               

              Uncaught TypeError: Object #<Object> has no method 'getComposition'D:/temp/Demo_click_div/Demo_Click.html:18

               

              Here is the includes section in my html page :

               

              <head>

              <!--Adobe Edge Runtime-->

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

                  <style>

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

                  </style>

              <!--Adobe Edge Runtime End-->

               

              </head>

               

               

              I really don't understand what is wrong ....

              • 4. Re: Start composition from clic elsewhere on page
                joel_pau Level 5

                Bonsoir,

                 

                Il est normal que la composition ne soit pas trouvée car elle n'est pas chargée.

                En effet, la composition qui a l'identité "EDGE-438262532" est chargée puis appelée.

                En revanche, vous appelez la composition qui a l'identité : "EDGE-19759595" mais vous ne l'avez pas chargé.

                 

                Your issue comes from: you call composition ("EDGE-19759595") but you didn't load it.

                You can read an example here close to your issue.

                • 5. Re: Start composition from clic elsewhere on page
                  romain0101 Level 1

                  Hi,

                   

                  Error of copy/paste in message writting : in my webpage the two numbers are matching well.

                  Zut ! Erreur de copier/coller dans la rédaction du message ....

                   

                  My source code is this one:

                   

                  <head>

                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

                            <title>Sans titre</title>

                  <!--Adobe Edge Runtime-->

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

                      <style>

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

                      </style>

                  <!--Adobe Edge Runtime End-->

                   

                   

                  </head>

                  <body style="margin:0;padding:0;">

                  <script type="text/javascript">

                   

                   

                      var comp;

                      this.alert('Chaîne de caractères');

                            comp = AdobeEdge.getComposition(("EDGE-438262532"));

                    comp.play();

                   

                   

                  </script>

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

                            </div>

                  </body>

                  </html>

                   

                  I am going to have a look to your link, thanks!

                  • 6. Re: Start composition from clic elsewhere on page
                    romain0101 Level 1

                    This example is not exactly what i am looking for: it is much more complicated than only starting my compsition .

                     

                    Does any body succeed to reach the method "getcompositionbyId" by an object of kind "AdobeEdge" ? Because in my case, adobe edge is only composed of these fields ...

                     

                    adobeedge_object.png

                    • 7. Re: Start composition from clic elsewhere on page
                      elainecc Adobe Employee

                      Hi, Romain-

                       

                      You should at least take a look at the section of Josh's post (the one that Joel posted as a response) that talks about using AdobeEdge.bootstrapCallback().  What's happening right now is that you are calling AdobeEdge.* APIs before it's loaded in your page.  In order to avoid that, call you play() within the bootstrapCallback() function.

                       

                      Cheers,

                       

                      -Elaine

                      1 person found this helpful
                      • 8. Re: Start composition from clic elsewhere on page
                        romain0101 Level 1

                        Hi,

                         

                        Great ! It works now, indeed thank's to the "bootstrapCallback" function ... It was sly !

                         

                        Thank's for your adices.

                         

                        Ps: I am going to post my solution for people who would meet this issue.

                         

                        Bye

                        • 9. Re: Start composition from clic elsewhere on page
                          elainecc Adobe Employee

                          Glad it worked out, Romain!

                           

                          -Elaine