4 Replies Latest reply on Jun 4, 2014 12:17 PM by JRHall

    controlling bootstrapped comps

    JRHall

      What I have are 3 Edge compositions which I want to be able to move forward and backward through, using buttons within the comps themselves.

       

      I have used the basic bootstrap setup from the API and then added a variation of a control script I got from resdesign.

       

      Using the bootstrapCallback I have the buttons affecting a variable which I am trying to use to control which comp displays.

       

      My code is as follows:

       

      <!DOCTYPE html>

      <html style="height:100%;">

      <head>

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

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

          <meta name="viewport" content="user-scalable=no, initial-scale=1"/>

         

        <title>index</title>

        

          <script src="cordova.js"></script>

          <script src="phonegap.js"></script>

         

      <!--Adobe Edge Runtime-->

       

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

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

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

         

      <!--Adobe Edge Runtime End-->

         

          <style>

              .edgeLoad-RUP_Cover { visibility: hidden; }

              .edgeLoad-RUP_Pg01 { visibility: hidden; }

              .edgeLoad-RUP_Pg02 { visibility: hidden; }

             

              #Stage00, #Stage01, #Stage02 {

                  overflow: hidden;

              }

             

              #Stage01, #Stage02 {

                  visibility: hidden;

              }       

          </style>

         

          <script>

              var myComp =['null','RUP_Cover','RUP_Pg01','RUP_Pg02'];

        var i = 1;

              alert("i =" + [i]); // returns "i = 1" (correct)

              AdobeEdge.bootstrapCallback(function(compId) {

                 

                  var comp = AdobeEdge.getComposition(compId);

                 

                  comp.getStage().$("FWD").click(function() {

                     

                      i++;

                     

                      alert("FWD Clicked. i=" + [i]); // returns "FWD Clicked. i=5" on first click, then increases by one with each subsequent click!

       

                     if (i==1){

                            $("#Stage00").show();

                            $("#Stage01").hide();

                            $("#Stage02").hide();

                       }

       

                     if (i==2){

                            $("#Stage00").hide();

                            $("#Stage01").show();

                            $("#Stage02").hide();

                     }

       

                     if (i==3){

                            $("#Stage00").hide();

                            $("#Stage01").hide();

                            $("#Stage02").show();

                     }

       

                     AdobeEdge.getComposition(myComp[i]).getStage().play(0);

                     

                });

                 

                comp.getStage().$("PREV").click(function() {

                     i--;

                     if (i<1){

                          i=1

                     }

                     if (i==1){

                            $("#Stage00").show();

                            $("#Stage01").hide();

                            $("#Stage02").hide();

                     }

                     if (i==2){

                          $("#Stage00").hide();

                          $("#Stage01").show();

                          $("#Stage02").hide();

                     }

                     if (i==3){

                          $("#Stage00").hide();

                          $("#Stage01").hide();

                          $("#Stage02").show();

                     }

                     AdobeEdge.getComposition(myComp[i]).getStage().play(0);

                });

           });

      </script>

       

       

      </head>

      <body style="margin:0 auto; padding:0;", bgcolor="#000000">

          <div id="Stage00" class="RUP_Cover"></div>

          <div id="Stage01" class="RUP_Pg01"></div>

          <div id="Stage02" class="RUP_Pg02"></div>

      </body>

      </html>

       

      As you can see, instead of increasing i to 2, as it should, the click jumps i - initially - to 5 and the increases it by 1 as it should.

       

      I have tried specifying i=2 and this works...but it does not trigger the next comp to play.

        • 1. Re: controlling bootstrapped comps
          hemanthR Adobe Employee

          Its increasing in steps of one correctly for me.

          Also for your stage to work on hide and show calls you will have to set

          #Stage01, #Stage02 {

                      display: none;

                  }      

           

          As show and hide modify display property

           

          I have created a sample using your code which is working for me .Check it out if needed  bootstrapEx.zip - Google Drive

          1 person found this helpful
          • 2. Re: controlling bootstrapped comps
            JRHall Level 1

            Hi,


            Thanks for your response.

             

            I made the changes you suggested(display:none) and also added some of the other tings you had in your version, I removed the array and used myComp.push(compId); and I changed the div classes in <body> to PAGE_A/B/C

             

            It still does not work. Somewhere in the loading, something is pushing the value of 'i' up to 4.

             

            And also, since the changes, I am seeing my first comp BG, then it shows comp 3 and then plays comp 2 over the top of that. Finally I can see elements of comp 1 animating behind comp 2 (I have a symbol animate in from off the stage).

             

            The final problem is that the overflow, responsive scaling and centering set in Edge Animate is no longer working.


            You can have a look at my project here: JHall_Bootstrap.zip - Google Drive

            • 3. Re: controlling bootstrapped comps
              hemanthR Adobe Employee

              You are using 'i' as a global variable somewhere in composition RUP_P02,use another variable name instead of 'i'.

              Set the initial count of this variable to  start from '0' and up to 2

              Also set the class name of the first stage the same as the code composition class name i.e 'RUP01_Cover'

              1 person found this helpful
              • 4. Re: controlling bootstrapped comps
                JRHall Level 1

                Ok, I trawled through all my comps and nowhere could I find 'i' being used as a variable.

                 

                But, to be absolutely sure, I renamed 'i' on the index.html to 'Pg' so as to avoid any conflicts.

                 

                I have tested and this new variable appears to be working correctly (increasing by 1 on the button click), however, the Show/Hide still is not working. The Cover page, never hides.

                 

                Also, do you have any idea why the responsive scaling, centering and overflow settings are being ignored and/or how to set them up in a way that works?

                 

                Thanks