8 Replies Latest reply on Mar 2, 2013 5:33 PM by shadowfax007

    create "2 state" button?

    shadowfax007 Level 1

      Hi all-

       

      I'm not quite sure if that is a correct term or not but it sounded close :-)

       

      I was going to post this in the "Play more than one symbol from one button?" post since it was close but thought it better to start a new discussion since it is a bit different...

       

      I have a "slider" button that I basically want to have 2 states (on/off, in/out, etc...).

      I read and read the tutorial by Elane:

      https://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/

      and almost got it but not quite. I got a bit confused since I am trying to affect the same object I am clicking (as opposed to a button to affect something else).

       

      Here's what I want to do and here is what I have (I'm new to javascript so my coding may be all wrong but I think the concept is correct):

       

      I have a symbol that is a simple "slider" button: more/less

      I want it to start on "less" - No problem (I started it in the timeline of the main stage with a "stop"in the playback).  When I click on it, it goes to more.

      What I want is when I click on it again, it goes back to "less" (play.reverse)

      In the stage's "Composition_ready", I added a variable like so:

       

      //     set variable slider to empty

      sym.setVariable("slider", "");

       

      And in the  "symbol" I tried to add the following code but It doesn't work:

       

      //     get and set variable

      var slider = sym.getVariable("slider");

         if (slider = "") {

      //     play the label in the symbol called in - the start of the animated slider - can I just set it to play since there are no other labels?

                          sym.getSymbol("deploy-slider-rectangle").play("in");

      //     set var to on so the slider knows what state to play   

                          var slider = 'on';

         }

      else {

        sym.playReverse("deploy-slider-rectangle");

      //     set var to empty so the slider knows what state to play   

        var slider = '';

        }

       

      I know this is probably more of a javascript problem but I thought I'd ask here since it is within Edge :-)

       

      Does anyone see the error of my ways?

       

      Also, if it makes a difference (other than naming the symbols differently in the code), I have 3 of these on the page :-)

       

      Thanks!

       

      James

        • 1. Re: create "2 state" button?
          shadowfax007 Level 1

          After re-reading the API, I've also tried this to no avail:

          set a trigger on main stage timeline called played.

          Set the click event for the "deploy-slider-rectangle" stage object (the "stage" name of the symbol):

          sym.setParameter("played", "false");

           

          Here's the code in the click event:

           

          var slider = sym.getsymbol("deploy-slider-rectangle");

          var slider_state = sym.getParameter("played");

           

           

             if (slider_state == "false") {

           

           

                              slider.play();   

                              sym.setParameter("played", "true");

             }

           

           

          else if (slider_state == "true") {

           

           

            slider.playReverse();  

            sym.setParameter("played", "false");

            }

           

           

          Still no go - now the slider does nothing but laugh at me :-)

           

          James

          • 2. Re: create "2 state" button?
            jbowden Adobe Employee

            Hi there,

             

            There are a few things wrong with your code:

             

            1. If the variable is being stored in a variable named "slider" in the compositionReady event - and you are calling it from inside a symbol - then sym.getVariable("slider") will fail because it's outside the scope of the symbol. When you use sym, you are essentially saying in this symbol, do something. The variable "slider" doesn't exist in your symbol - it's in the composition. So you if you want to reference this variable in a symbol, you'd use sym.getComposition().getStage().getVariable("slider")
            2. In your first batch of code, you write: if (slider = "") - a single equals sign is for assigning a variable, not for testing a variable for equivalence. For that, you'd use double equal signs, e.g.,  if (slider == "")
            3. If the variable is being stored in the compositionReady event and you are using it for 3 separate buttons, then your buttons won't be able to have different states - or at least they won't work the way you'd want them to work. Instead of storing the variable in the compositionReady event, store it in the creationComplete event for your symbol - which will eliminate your scoping issues (point 1, above) as well, and you can use mulitple instances of a single symbol, and it will all work.

             

            As far as keeping your code simple and readable, I'd use Boolean values (true or false) instead of an empty string. And I wouldn't use a label unless it's necessary - and from what I see, it's not necessary.

             

            hth,

            Joe

            • 3. Re: create "2 state" button?
              jbowden Adobe Employee

              Here's some sample code for you to try.

               

              In your symbol creationComplete event:

               

              sym.setVariable("slider", false);

               

              In your button element click event:

               

              var test = sym.getVariable("slider");

              if (test == false) {

                        sym.play();

                        sym.setVariable("slider", true);

              } else {

                        sym.playReverse();

                        sym.setVariable("slider", false);

              }

               

              hth,

              Joe

              • 4. Re: create "2 state" button?
                shadowfax007 Level 1

                Joe - Thanks for the quick reply!

                 

                1. If the variable is being stored in a variable named "slider" in the compositionReady event - and you are calling it from inside a symbol - then sym.getVariable("slider") will fail because it's outside the scope of the symbol.

                The symbol is on the "main" timeline.  The symbol name is "box_links-more-less" and on the timeline it is named: "deploy-slider-rectangle" ( and "develop-slider-rectangle and  "design-slider-rectangle" for the other two but I'm just tsting on one right now).  So, from the "main" timeline, I clicked on the "script" symbol to the right of the symbol named "deploy-slider-rectangle" and added the above mentioned code.

                So that part was then correct (In correct I don't mean it would have worked on all three but my calling the compositionReady event from the main stage's timeline was correct)?  I can see that if I was inside the symbol it wouldn't work...

                 

                 

                1. In your first batch of code, you write: if (slider = "") - a single equals sign is for assigning a variable, not for testing a variable for equivalence. For that, you'd use double equal signs, e.g.,  if (slider == "")

                LOL! - I had it that way but changed it trying to see if it worked that way :-)

                1. If the variable is being stored in the compositionReady event and you are using it for 3 separate buttons, then your buttons won't be able to have different states - or at least they won't work the way you'd want them to work. Instead of storing the variable in the compositionReady event, store it in the creationComplete event for your symbol - which will eliminate your scoping issues (point 1, above) as well, and you can use mulitple instances of a single symbol, and it will all work.

                I wasn't sure how that was supposed to work.  It seems to me the variable needs to be stored in each instance of the symbol on the stage(if possible) - is it only stored in the compositionReady or creationComplete?  I'm not sure I understand why that would work any better - If there is only ONE variable shared by all three instances, hten no matter what wouldn't they not work properly for all 3 instances?  OR is the creationComplete event created for each instance on the main stage? (That would make sense to me)?

                 

                I hope that makes sense :-)

                 

                Thanks so much for taking the time to explain this to me - I've become pretty adept at moving around the stage and creating things but now it is time to learn how to create events, thus learn the javascript necessary :-)

                 

                James

                • 5. Re: create "2 state" button?
                  shadowfax007 Level 1

                  Joe-

                   

                  Thanks again!

                   

                  I tried this but got nowhere.  After all the testing though, I wouldn't be surprised if I still have something set somewhere that could affect this.

                  I'm going to clear evrything out and try again - I'll let you know!

                   

                  James

                  • 6. Re: create "2 state" button?
                    jbowden Adobe Employee

                    Hi James,

                     

                    Here'a an example file that illustrates what I mean. All code is inside Symbol_1, and there are three instances of the symbol on the Stage:

                     

                    https://creative.adobe.com/share/16a3c7aa-d11b-43c8-9b81-bae2b8b0807d

                     

                    hth,

                    Joe

                    • 7. Re: create "2 state" button?
                      shadowfax007 Level 1

                      Joe-

                       

                      I don't know what to say except THANK YOU!  That is exactly what I'm trying to accomplish.

                       

                      Believe it or not, it still isn't working - but at least that let's me know that I probably did copy everything just as I should have from your last post and there is something else going on (since I see this is using the same code!)!

                       

                      No matter, now that I have a "working copy" of the code, I can track down what is failing!

                       

                      If a picture is worth a thousand words, an animation is worth 10 times that :-)

                       

                      Thanks again!

                       

                      James

                      • 8. Re: create "2 state" button?
                        shadowfax007 Level 1

                        Joe-

                         

                        OK, I've got it working and am now ready to use this information on other projects I have in the works!

                         

                        I want to point out something.

                         

                        First off, My hat is off to the many here that take the time and effort to offer their support and expertise - This group seems to be more open and active in helping than most I have been part of in the past years.  It seems EVERY question, no matter how trivial, get's answered with good information and respect - no RTFM type responses that I have ever seen!

                         

                        Thank you to all those that offer their time and support (I think most of you know who you are  -for those that don't, just look at the "posting" stats and rankings :-)

                         

                        Second, (not in importance by any means) I don't think I stand alone when I say In many cases, for whatever reason, a lot of people's "number 1" complaint to large software companies is they don't listen to their users when it comes time to update, or in this case create new software.

                        Although I use several Adobe products, I've never been in a "Beta tester" situation with Adobe (I have been with smaller companies).

                        With Adobe Edge (been with it since version 4) and the other Edge products, I have to say I am truely amazed!

                        I think we should all tip our hats to theAdobe Edge team members that often not only read these posts but comment as well (and in this case offer code solutions)!

                         

                        I know they have their hands full working on this new product but they take the time to not only listen (in itself is pretty amazing) but also are often the biggest "Posters" in this discussion!

                         

                        They truly seem to not only want to listen to us, the testers/users, but also have a "love" for their project (Edge) that they go the extra mile to make sure everyone understands everything!!!

                         

                        For this, I tip my hat to the Edge Team and offer my thanks!!

                        Thank you,

                         

                        James