21 Replies Latest reply on Jan 8, 2013 10:47 AM by resdesign

    Buttons Left/Right for slideshow

    pmfr01 Level 2

      Hi.

       

      I have this slideshow and I need the code for the Left and Right buttons. The problem is that every symbol (slideshow elements) on the slideshow have their own fade-in and fade out. When I click the Left/Right buttons they must play the fade-out of the symbol presently showing and the fade-in from the symbol that follows. I tried to adapt the code from this other post that TimJaramillo is helping me with but... I'm not a Javascript/JQuery savy and it's not a straightforward thing.

       

      Here's the code they I've been trying to adapt:

       

      // Section options settings
      // Setting variables and arrays
      var currentOption = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
      var requestOption; // Index in array_options: 0=a, 1=b, 2=c, 3=d
      var array_options = ["option1a_venhoDeOutraIgreja", "option1b_sintoMePerdido","option1c_queroConhecerEsseJesus", "option1d_naoAcreditoEmDeus"];
      var array_optionsBtns = ["sectionOption1a_Btn_venhoDeOutraIgreja", "sectionOption1b_Btn_sintoMePerdido", "sectionOption1c_Btn_queroConhecerEsseJesus", "sectionOption1d_Btn_naoAcreditoEmDeus"]
      // Called by timeline.complete/timeline.speclocation event at end of each Option
      sym.playRequest = function(){
        sym.getSymbol(array_options[requestOption]).play("lead_in");
        currentOption = requestOption;
      }
      // Called on button click
      sym.btnClick = function(request) {
        requestOption = request;
        if(currentOption !=null){
          sym.getSymbol(array_options[currentOption]).play("lead_out");
          sym.getSymbol(array_optionsBtns[currentOption]).play('option_exit');
        }
        else{
          sym.playRequest();
        }
      }
      

      Stage / compositionReady

       

      sym.getComposition().getStage().playRequest();
      

      Symbols with fade-in/fade-out —» Default timeline / complete

       

      sym.getComposition().getStage().btnClick(0,1,2,3); // 0,1,2,3 index of array = a,b,c,d
      

      Buttons —» Click

       

      I also need that, the first time the slideshow appears, it plays the first item automatically (only the 1st one).

       

      And here's a schematic of what I want:

      Schematic Control buttons (left-right or up-down).jpg

       

      And my Edge project files ZIP.

       

      Pedro

        • 1. Re: Buttons Left/Right for slideshow
          resdesign Adobe Community Professional & MVP

          I usually put my stuff in a function (here it is      updateThisInfo(index); ) and then for the buttons I have:

           

          sym.$("btn").click(function(){

                    index++;

                    if (index>=myData.length){

                    index=0;

                    };

                    sym.$("directions").hide();

                    sym.play();

                    updateThisInfo(index);

          });

          • 2. Re: Buttons Left/Right for slideshow
            pmfr01 Level 2

            Hi resdesign.

            How do I implement that piece of code with the rest? I'm kinda confused...

            • 3. Re: Buttons Left/Right for slideshow
              resdesign Adobe Community Professional & MVP

              Sorry I was out for several hours. I just downloaded your files and will look into it right away.

              • 4. Re: Buttons Left/Right for slideshow
                pmfr01 Level 2

                Happy new year resdesign.

                Any news about my post?

                • 5. Re: Buttons Left/Right for slideshow
                  resdesign Adobe Community Professional & MVP

                  Hello and happy new year.

                   

                  I am wondering about your code. Is btnClick a variable of a button?

                  If you have a button named btnClick, you would need to use:

                  sym.$('btnClick );

                  or if you prefer

                  btnClick = sym.$('btnClick');

                   

                   

                  btnClick.click(function(request){

                       requestOption = request; 

                       if(currentOption !=null){

                            sym.getSymbol(array_options[currentOption]).play("lead_out");               sym.getSymbol(array_optionsBtns[currentOption]).play('option_exit'); 

                       }   else{   

                        sym.playRequest(); 

                       }

                  });

                  • 6. Re: Buttons Left/Right for slideshow
                    pmfr01 Level 2

                    The previous code refered to another context - 5 buttons, 5 symbol animations, each one triggered by it's own button. Only one symbol animation could be active so, everytime I clicked on a diferent button, the symbol that was on the scene would get out and the new one would come into place (with some fancy fade in/out).

                    If this code overcomplicates things, that's ok - what I really need is the code for the Left and Right buttons of the slideshow. Only two buttons this time. Also that every slide has it's own fade in/out, therefor the previous code...

                     

                    I've narrowed the code - RIGHT Button - to this:

                     

                    // Section options settings
                    // Setting variables and arrays
                    var option2b_1 = sym.getComposition().getStage().getSymbol("option2b_quemTrabalha").getSymbol("option2b_quemTrabalha_1");
                    var option2b_2 = sym.getComposition().getStage().getSymbol("option2b_quemTrabalha").getSymbol("option2b_quemTrabalha_2");
                    var option2b_3 = sym.getComposition().getStage().getSymbol("option2b_quemTrabalha").getSymbol("option2b_quemTrabalha_3");
                    var currentOption = null; // Index in array_options
                    var requestOption = null; // Index in array_options
                    var array_options = [option2b_1, option2b_2, option2b_3];
                    // Called by timeline.complete/timeline.speclocation event at end of each Option
                    sym.playRequest = function(){
                      sym.getSymbol(array_options[requestOption]).play("lead_in_from_right");
                      currentOption = requestOption;
                    }
                    // Called on button click
                    sym.btnClick = function(request) {
                      requestOption = request;
                      if(currentOption !=null){
                        sym.getSymbol(array_options[currentOption]).play("lead_out_from_right");
                      }
                      else{
                        sym.playRequest();
                      }
                    }
                    

                     

                    Inside the button's timeline (when it's clicked):

                     

                    sym.getComposition().getStage().btnClick(X);
                    

                    X - where it should make the slideshow advance one slide

                     

                    Inside each slide I have the animation ready to fade in/out from the left/right depending on the button (left or right). Check my files.

                    • 7. Re: Buttons Left/Right for slideshow
                      resdesign Adobe Community Professional & MVP

                      You need to add ); at the end.

                      • 8. Re: Buttons Left/Right for slideshow
                        resdesign Adobe Community Professional & MVP

                        corrected:

                        // Called on button click

                        sym.btnClick = function(request) { 

                             requestOption = request;  

                             if(currentOption !=null){   

                              sym.getSymbol(array_options[currentOption]).play("lead_out_from_right");  

                             } else{    

                             sym.playRequest();  

                             }

                        });

                        • 9. Re: Buttons Left/Right for slideshow
                          pmfr01 Level 2

                          The ); is not enough, the entire thing just doesn't work.  I don't know how to adapt this...

                           

                          • 10. Re: Buttons Left/Right for slideshow
                            resdesign Adobe Community Professional & MVP

                            Could you post a sample file?

                            • 11. Re: Buttons Left/Right for slideshow
                              pmfr01 Level 2

                              Yes, it's in my first post.

                              • 12. Re: Buttons Left/Right for slideshow
                                resdesign Adobe Community Professional & MVP

                                Oops! Sorry I did not see the link.

                                • 13. Re: Buttons Left/Right for slideshow
                                  resdesign Adobe Community Professional & MVP

                                  I have not had time to get this working, however I would like you to consider the fact that you may not be accessing the nested symbol timeline with your code.

                                  I tested one of the nested symbol access with this:

                                   

                                  sym.getSymbol("option2b_quemTrabalha").getSymbol("option2b_quemTrabalha_1_presbiterio").pl ay('lead_in_from_right');

                                   

                                  which plays fine.

                                   

                                  So, when I have time tomorrow, I will  try to review your code so it does access the nested symbols timelines.

                                  • 14. Re: Buttons Left/Right for slideshow
                                    pmfr01 Level 2

                                    Yes, I know, but the whole code is not fully adapted - I took it from another context.

                                    Thanx again, resdesign.

                                    • 15. Re: Buttons Left/Right for slideshow
                                      TimJaramillo Level 4

                                      Hi Pedro,

                                       

                                      Edit: I just saw that you want the first slide to autoplay. You should be able to tweak my code to make this happen. If not let me know. I also just saw that you want the slideshow to loop after the user gets to the far right. This is a simple tweak as well. Let me know if you need help with this.

                                       

                                      Here is a working example for you. Click on the right arrow to show the first slide. Then click left or right to show prev/next slides.

                                       

                                      www.timjaramillo.com/code/edge/pedro_test/option2b_quemTrabalha.html

                                       

                                      Source:

                                      www.timjaramillo.com/code/edge/_source/pedro_test.zip

                                       

                                       

                                       

                                      Most of the code is similar to a simple image gallery. But since you want to wait for outro animations to finish, it's a little trickier. I had to add vars to track request, and current anims.

                                       

                                      Stage.compositionReady code pasted below:

                                       

                                      // vars -----------------------------------------

                                       

                                               // Section options settings

                                               // Setting variables and arrays

                                               var currentOption = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d

                                               var requestOption; // Index in array_options: 0=a, 1=b, 2=c, 3=d

                                               var array_options = ["option2b_quemTrabalha_1_presbiterio", "option2b_quemTrabalha_2_musica", "option2b_quemTrabalha_3_multimedia"];

                                               var array_optionsBtns = ["sectionOptions_article_SlideBtnRight", "sectionOptions_article_SlideBtnLeft"]

                                               var trackIndex = null;

                                       

                                       

                                               // funcs -----------------------------------------

                                       

                                               sym.onClickLeft = function() {

                                                         if( trackIndex >= 1 ){

                                                                   trackIndex--;// decrement index

                                                                   sym.initArticle(trackIndex);

                                                         }

                                               }

                                       

                                       

                                               sym.onClickRight = function() {

                                                         // first time

                                                         if( trackIndex == null ){

                                                                   // init first obj (array index starts at 0)

                                                                   trackIndex = 0;

                                                                   sym.initArticle(trackIndex);

                                                         }else          if( trackIndex < array_options.length-1 ){  

                                                                   trackIndex++;// increment index

                                                                   sym.initArticle(trackIndex);

                                                         }

                                               }

                                       

                                       

                                               sym.initArticle = function(request) {

                                       

                                                 requestOption = request;

                                       

                                                 if(currentOption !=null){

                                                   sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[currentOption] ).play("lead_out_from_left");

                                                 }

                                                 else{

                                                   sym.playRequest();

                                                 }

                                               }

                                       

                                               // Called by timeline.complete/timeline.speclocation event at end of each Option

                                               sym.playRequest = function(){

                                                                     sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[requestOption] ).play("lead_in_from_left");

                                                                     currentOption = requestOption;

                                               }

                                       

                                       

                                       

                                            });

                                      • 16. Re: Buttons Left/Right for slideshow
                                        pmfr01 Level 2

                                        Wow... that's a lot of code. I would never figure that out.

                                        There's just one thing that you probably didn't notice:

                                         

                                        - clicking LEFT button:

                                          leads in the new slide from left to right - Ok

                                          and

                                          leads out the old slide from left to left - Not doing so

                                         

                                        - clicking RIGHT button:

                                          leads in the new slide from right to left - Not doing so

                                          and

                                          leads out the old slide from right to left - Not doing so

                                         

                                        ... so that they literally slide from one side to the other.

                                         

                                        All these labels are set inside each slide symbol (option2b_quemTrabalha_X_XXXXX):

                                        - lead_in_from_right (at 0000ms)

                                        - lead_out_to_right (at 2000ms)

                                        - lead_in_from_left at (4500ms)

                                        - lead_out_to_left (at 6500,s)

                                         

                                        Is it still possible to make these changes?

                                         

                                        I see you spent a bit of time on this. The last thing I wanted was to put you through more work.

                                        Thanx again.

                                         

                                        Pedro

                                        • 17. Re: Buttons Left/Right for slideshow
                                          TimJaramillo Level 4

                                          Hi there, ya I saw you had different in/out labels but wasn't sure what you wanted to do with them. Since I laid out all the functionality for you, you should be able to go into the code and experiment, and figure out how to control which label to play.

                                           

                                          Use the console, and put in console.log("test") to see what's running where. Experiment and have fun!

                                          • 18. Re: Buttons Left/Right for slideshow
                                            pmfr01 Level 2

                                            I'm going to try, but it seems awfully complex. I mean, if I couldn't figure out the other piece of code, this one will make me loose my sanity. LoL

                                            Thank you Tim and resdesign.

                                             

                                            • 19. Re: Buttons Left/Right for slideshow
                                              pmfr01 Level 2

                                              I never though I'ce say this... I figured it out!

                                              Just need you to check my code in case I wrote something I didn't need. Here it goes:

                                               

                                              Stage / compositionReady:

                                              // Setting variables and arrays
                                              var currentOption = null; // Index in array_options: 0=a, 1=b, 2=c, 3=d
                                              var requestOption; // Index in array_options: 0=a, 1=b, 2=c, 3=d
                                              var array_options = ["option2b_quemTrabalha_1","option2b_quemTrabalha_2","option2b_quemTrabalha_3"];
                                              var array_optionsBtns = ["sectionOptions_article_SlideBtnRight","sectionOptions_article_SlideBtnLeft"];
                                              var trackIndex = null;
                                              
                                              // Function onClickLeft
                                              sym.onClickLeft = function() {
                                                if(trackIndex >= 1){
                                                  trackIndex--; // Decrement index
                                                  sym.initArticle_fromLeft(trackIndex);
                                                }
                                              };
                                              // Function onClickRight
                                              sym.onClickRight = function() {
                                                // First time
                                                if(trackIndex == null){
                                                  // Initializing first object (array index starts at 0)
                                                  trackIndex = 0;  
                                                  sym.initArticle_fromRight(trackIndex);
                                                }
                                                else if(trackIndex < array_options.length-1){
                                                  trackIndex++; // Increment index
                                                     sym.initArticle_fromRight(trackIndex); 
                                                }
                                              };
                                              
                                              // Request fromLeft function
                                              sym.initArticle_fromRight = function(request_fromLeft) {
                                                requestOption = request_fromLeft;
                                                if(currentOption !=null) {
                                                  sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[currentOption]).play("lead_out_to_left");
                                                  console.log("initArticle_fromRight");
                                                }
                                                else {
                                                  sym.playRequestQuemTrabalha_fromLeft();
                                                }
                                              };
                                              // Request fromRight function
                                              sym.initArticle_fromLeft = function(request_fromRight) {
                                                requestOption = request_fromRight;
                                                if(currentOption !=null) {
                                                  sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[currentOption]).play("lead_out_to_right");
                                                  console.log("initArticle_fromLeft");
                                                }
                                                else {
                                                  sym.playRequestQuemTrabalha_fromRight();
                                                }
                                              };
                                              
                                              // Called by timeline.complete/specific location event inside each Option (request_fromLeft)
                                              sym.playRequestQuemTrabalha_fromLeft = function() {
                                                sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[requestOption]).play("lead_in_from_left");
                                                console.log("sym.playRequestQuemTrabalha_fromLeft");
                                                currentOption = requestOption;
                                              };
                                              // Called by timeline.complete/specific location event inside each Option (request_fromRight)
                                              sym.playRequestQuemTrabalha_fromRight = function() {
                                                sym.getSymbol("option2b_quemTrabalha").getSymbol(array_options[requestOption]).play("lead_in_from_right");
                                                console.log("sym.playRequestQuemTrabalha_fromRight");
                                                currentOption = requestOption;
                                              };
                                              
                                              // For first option to play automatically
                                              sym.onClickRight();
                                              

                                               

                                              Left button / click action:

                                              sym.onClickLeft();
                                              

                                               

                                              Right button / click action:

                                              sym.onClickRight();
                                              

                                               

                                              Slide / near label 'lead_out_to_left':

                                              sym.getComposition().getStage().playRequestQuemTrabalha_fromRight();
                                              

                                               

                                              Slide / near label 'lead_out_to_right':

                                              sym.getComposition().getStage().playRequestQuemTrabalha_fromLeft();
                                              

                                               

                                              Freak'n awesome!!!

                                              Love you Tim!*

                                              • 20. Re: Buttons Left/Right for slideshow
                                                TimJaramillo Level 4

                                                Excellent, great job Pedro! I knew you could do it!

                                                 

                                                Regarding your code, the only thing I see is that I don't think you're using "array_optionsBtns" anymore? If not, just delete that array. Besides that, seems ok to me.

                                                 

                                                One more thing you might need to test- if you click the arrows very fast it might break things. If so, you may want to add a var "isRunning" to track if the slides are animating. You'd set that var to "true" when the slide start animating, and set it to "false" at the end of the anim. You'd then check that var on arrow click, and if that var is true, don't run the rest of the function.

                                                • 21. Re: Buttons Left/Right for slideshow
                                                  resdesign Adobe Community Professional & MVP

                                                  Good job, Tim! I knew someone smarter than me would give Pedro the right answer!