10 Replies Latest reply on Aug 26, 2014 9:23 AM by resdesign

    One button, two actions

    ashleyLynnS991 Level 1

      Hello all,

       

      I've been trying to create an interactive bar graph. The idea is that if a user clicks on a button, a bar graph will animate up onto the stage. I would like to code it so that if the user clicks on that same button again, the bar graph will animate down off the stage. So far all I've been able to find is that this is possible with mousover and mouseout; but I'm wondering if it's possible to use clicks instead.

       

      Thanks for your time

        • 1. Re: One button, two actions
          TimJaramillo Level 4

          Hi Ashley, you can create a toggle variable at the Stage.compositionReady event, then on click of your button, check that toggle variable with an "if" statement to determine your action.

           

          Below is an example. Click the button to toggle the text. In your case, add your logic within the "if" statement of the btn.click event.

           

          Example:

          www.timjaramillo.com/code/edge/toggle_btn

           

          Source:

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

           

           

          Code on Stage.compositionReady event:

          sym.toggleVar = true;

           

           

          Code on btn.click event:

           

          if( sym.getComposition().getStage().toggleVar == true ){

                    sym.getComposition().getStage().toggleVar = false;// toggle var

           

                    // test

                    sym.$("txt").html("true");

           

          }else{

                    sym.getComposition().getStage().toggleVar = true;// toggle var

           

                    // test

                    sym.$("txt").html("false");

          }

          • 2. Re: One button, two actions
            ashleyLynnS991 Level 1

            Thank you! That was very helpful.

            • 3. Re: One button, two actions
              TimJaramillo Level 4

              No problem! Can you mark my answer as "correct", so future users can easily find the correct answer?

               

              thanks!

              • 4. Re: One button, two actions
                ashleyLynnS991 Level 1

                I will as soon as I figure out how...

                • 5. Re: One button, two actions
                  ashleyLynnS991 Level 1

                  Sorry, I think only "community moderators" can do that.

                  • 6. Re: One button, two actions
                    TimJaramillo Level 4

                    Thread starters can mark responses as "correct". There should be an option under the response. If you can't find it, no worries.

                    • 7. Re: One button, two actions
                      Ejoni Level 1

                      Hello TimJaramillo,

                       

                      thank you for your answer. I tried to do it with two images. The first image works well, when I click the button, but the second image is not displayed, so I assume, something is wrong with the else statement, but I couldn´t find the problem. Maybe you can help me.

                       

                       

                      sym.toggleVar = true;

                       

                      if(sym.toggleVar == true){

                          sym.toggleVar = false;

                          sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_oSmG_1a_2576").fadeIn(3000);

                      }else{

                          sym.toggleVar = true;

                          sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_mSmG_1a_2568").fadeIn(3000);

                      };

                      • 8. Re: One button, two actions
                        resdesign Adobe Community Professional & MVP

                        I wouls change the toggle after the action instead. Try this

                         

                        sym.toggleVar = true;

                         

                        if(sym.toggleVar == true){

                            sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_oSmG_1a_2576").fadeIn(3000);
                            sym.toggleVar = false;

                        }else{

                            sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_mSmG_1a_2568").fadeIn(3000);

                            sym.toggleVar = true;

                        };

                        1 person found this helpful
                        • 9. Re: One button, two actions
                          Ejoni Level 1

                          Thank you resdesign, the problem was that I had to define the variable "sym.toggleVar = true;"  not in the symbol, but on the Stage->compositionready.

                          I don´t understand why, but it works now.

                           

                          if( sym.getComposition().getStage().toggleVar == true ){

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

                              sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_mSmG_1a_2568").fadeIn(3000);

                              sym.getComposition().getStage().toggleVar = false;

                           

                          }else{

                              sym.getComposition().getStage().toggleVar = true;

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

                              sym.$("Holztreppe_Casablanca_Treppen_Intercon_Buche_oSmG_1a_2576").fadeIn(3000);

                          }

                          • 10. Re: One button, two actions
                            resdesign Adobe Community Professional & MVP

                            Awesome! Probably a scope issue. Glad you got it though and I would still add the variable toggle after - the reason being that

                            1. you get the 'current' variable value,
                            2. you execute an action,
                            3. you reset the variable value

                            Hope this clarification hlepls.

                             

                            Good luck on your project.

                            1 person found this helpful