16 Replies Latest reply on Oct 19, 2012 11:34 AM by elainecc

    Setting Variable

    littlewing@

      New to scripting and having trouble setting variables.

       

      I have a wheel that rotates and is divided into 8 segements. I have a left button and a right button.

       

      The wheel is a symbol (named drinks) and has labels on the timeline for each position of the wheel.

       

      When the left or right button is clicked I need to play one of the animations and set the state so I know what animation to play next.

       

      I have declared the variable on the stage using document.compositionReady with the following:

       

      sym.setVariable("current", "wine_right");

       

      Then I have placed the buttons on the main stage (not in the symbol). I have the following code on the botton using click:

       

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

      if (current != "wine_right") {

         sym.getSymbol("drinks").play("cocktail_right");

      }

      else if (current != "cocktail_right") {

         sym.getSymbol("drinks").play("cider_right");

      }

      else {

         sym.getSymbol("drinks").play("In");

      }

       

      There are 16 potential states in total so the above is just an abbreviated version to illustrate what I am doing.

       

      I can change the variable manually at document.compositionReady and when I click the button the correct animation plays.

       

      I can also set a variable at the end of the script that is on the button and it works. 

       

      What I can't do is set the variable based on which state the button is at. For instance if we start at "wine_right" being current then we click on the right button "cocktail_right" will play. The next right animation after cocktail is "cider_right" so when we click on the right button at "cocktail_right we need to set the variable to "cocktail_right" so "cider_right can play next.

       

      What I tried which is obviously wrong was trying to set the state within the statement:

       

      else if (current != "cocktail_right") {

         sym.getSymbol("drinks").play("cider_right");

         sym.setVariable("current", "cider_right");

      }

       

      Then I tried to set the variable in the symbols timeline as a trigger so that when the animation played the variable would be set and that didn't work either.

       

      sym.stop(750);

      sym.setVariable("current", "cider_right");

       

      I know there is probably a very simple answer, how do I set the variable?

       

      Thanks in advance for any help.

        • 1. Re: Setting Variable
          TimJaramillo Level 4

          Rather than using setVariable, you can also set the variable like this (I think it's simpler):

           

          put this on stage/compositionReady:

           

          // set var

          sym.current = "cider_right";

           

          put this on button click:

           

          if (sym.getComposition().getStage().current != "wine_right") {

             sym.getComposition().getStage().getSymbol("drinks").play("cocktail_right");

          }

          else if (sym.getComposition().getStage().current != "cocktail_right") {

               sym.getComposition().getStage().getSymbol("drinks").play("cider_right");

          }

          else {

             sym.getComposition().getStage().getSymbol("drinks").play("In");

          }


          • 2. Re: Setting Variable
            littlewing@ Level 1

            Thanks for this Tim, it is a great help. So now that you have explained how to correctly set the variable at stage/compositionReady and how to correctly target this variable from the button how do I update the stage/compositionReady variable from the button?

             

            Each time a right or left button is clicked I need to update the compositionReady variable.

             

            Will this work?

             

            if (sym.getComposition().getStage().current != "wine_right") {

               sym.getComposition().getStage().getSymbol("drinks").play("cocktail_right");

               sym.getComposition().getStage().sym.current = "cocktail_right";

            }

            else if (sym.getComposition().getStage().current != "cocktail_right") {

                 sym.getComposition().getStage().getSymbol("drinks").play("cider_right");

                 sym.getComposition().getStage().sym.current = "cider_right";

            }

            else {

               sym.getComposition().getStage().getSymbol("drinks").play("In");

            }

             

            Thanks again.

            • 3. Re: Setting Variable
              TimJaramillo Level 4

              Hey littlewing, very close.

               

              You just need to remove the "sym" from the end of the call, so this:

              sym.getComposition().getStage().sym.current = "cider_right";

               

              should be this:

              sym.getComposition().getStage().current = "cider_right";

               

               

              Correct code:

              if (sym.getComposition().getStage().current != "wine_right") {

                 sym.getComposition().getStage().getSymbol("drinks").play("cocktail_ri ght");

                 sym.getComposition().getStage().current = "cocktail_right";

              }

              else if (sym.getComposition().getStage().current != "cocktail_right") {

                   sym.getComposition().getStage().getSymbol("drinks").play("cider_right ");

                   sym.getComposition().getStage().current = "cider_right";

              }

              else {

                 sym.getComposition().getStage().getSymbol("drinks").play("In");

              }

              • 4. Re: Setting Variable
                littlewing@ Level 1

                Thak you, much appreciated!

                • 5. Re: Setting Variable
                  littlewing@ Level 1

                  Hi again Tim,

                   

                  For some reason that I cannot work out and one that is driving me crazy I still can't get it to work. I am just working on the right button for now.

                   

                  I have put this on stage/compositionReady:

                   

                  // set var

                  sym.current = "beer_right"; (to match the starting position of the wheel)

                   

                  and put this on right button click:

                   

                   

                  if (sym.getComposition().getStage().current != "wine_right") {

                     sym.getComposition().getStage().getSymbol("drinks").play("cocktail_right");

                     sym.getComposition().getStage().current = "cocktail_right";

                  }

                  else if (sym.getComposition().getStage().current != "cocktail_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("other_right");

                       sym.getComposition().getStage().current = "other_right";

                  }

                  else if (sym.getComposition().getStage().current != "other_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("cider_right");

                       sym.getComposition().getStage().current = "cider_right";

                  }

                  else if (sym.getComposition().getStage().current != "cider_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("shot_right");

                       sym.getComposition().getStage().current = "shot_right";

                  }

                  else if (sym.getComposition().getStage().current != "shot_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("premix_right");

                       sym.getComposition().getStage().current = "premix_right";

                  }

                  else if (sym.getComposition().getStage().current != "premix_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("spirit_right");

                       sym.getComposition().getStage().current = "spirit_right";

                  }

                  else if (sym.getComposition().getStage().current != "spirit_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("beer_right");

                       sym.getComposition().getStage().current = "beer_right";

                  }

                  else if (sym.getComposition().getStage().current != "beer_right") {

                       sym.getComposition().getStage().getSymbol("drinks").play("wine_right");

                       sym.getComposition().getStage().current = "wine_right";

                  }

                  else {

                     sym.getComposition().getStage().getSymbol("drinks").play("wine_right");

                     sym.getComposition().getStage().current = "wine_right";

                  }

                   

                  Instead of doing what I want which is to scroll through the wheel it plays the animation for "cocktail_right" over and over again.

                   

                  What am I doing wrong?

                  • 6. Re: Setting Variable
                    TimJaramillo Level 4

                    Hey little wing. There is an extra space in several of your "play()" calls. Notice "cocktail_ri ght" below.

                     

                    For example: sym.getComposition().getStage().getSymbol("drinks").play("cocktail_ri ght");

                     

                    This code could be greatly simplified by using a jQuery animate rotation hack (jQuery.animate does not fully support rotation). This way, you wouldn't have to deal with all the timeline labels, and crazy checks. You'd want to set up your rotation values in an array, and set up a simple state machine to control everything.

                     

                    Here's the animation rotation hack if you want to attempt it. You'd replace the "90px" with your dynamic rotation value.

                     

                    The "90px" actually controls it's rotation.

                     

                    sym.$( "drinks" ).animate({"bottom": "90px"},

                    {

                              duration: 5000,

                       step: function( now, fx ){

                                 console.log('now ='+now);

                          sym.$("drinks").css ({"-moz-transform":"rotate("+now+"deg)",

                                      "-webkit-transform":"rotate("+now+"deg)",

                                      "-ms-transform":"rotate("+now+"deg)",

                                      "-o-transform":"rotate("+now+"deg)"});

                                }

                    },'linear');


                    • 7. Re: Setting Variable
                      littlewing@ Level 1

                      Hi Tim,

                       

                      Thanks for the reply.

                       

                      I am not sure why the spaces are showing in the code I pasted as they are not there when I look at the code in edge animate?

                       

                      Assuming that is not the problem, any other ideas?

                       

                      Thanks for the tip about JQuery animate. I will have a look into arrays and state machines. I am not a programmer, I am a graphic artist, animator and 3D modeller. My coding skills are limited to some HTML, CSS and a little ActionScript. However I have been given a project to do with a short timeline and no programmer to help me, so I am a bit lost.

                       

                      Can you recommend any 101 tutorials for JavaScript?

                       

                      Thanks for all of your help.

                      • 8. Re: Setting Variable
                        TimJaramillo Level 4

                        Hey littlewing,

                         

                        In order to debug your problem, I would start by adding console logs into your code. Then check the values in the browser's javascript console. The javascript console will also tell you if you have JS errors in your code. The console.log(); is the same as doing a trace(); in AS. Put these console logs in several places in your code, to check values, etc.

                         

                        Example:

                        console.log( " at btn click, current = "+sym.getComposition().getStage().current );

                         

                        Here are some good js tutorials:

                        http://elegantcode.com/2010/10/22/basic-javascript-part-1-functions/

                        http://blog.stroep.nl/2011/01/javascript-for-as3-developers/

                        http://javascript.crockford.com/code.html

                         

                        If you want to PM me your file, I may be able to take a look at it in the next few days.

                        • 9. Re: Setting Variable
                          littlewing@ Level 1

                          Thanks Tim,

                           

                          I was using:

                           

                          sym.$("myTextBox").html(sym.getComposition().getStage().current);

                           

                          To track the current state through a text box in edge animate, your approach is obviously better and I am now doing that.

                           

                          I had run the JS console in crhome and it reports no errors. I can see that the initial state gets set @ compositionReady, however after this things don't work as expected. If the current state is "beer_right" "wine_right" should play and the state should change to "wine_right".

                           

                          else if (sym.getComposition().getStage().current != "beer_right") {

                               sym.getComposition().getStage().getSymbol("drinks").play("wine_right");

                               sym.getComposition().getStage().current = "wine_right";

                          }

                           

                          Instead after the first click the current variable stays on "beer_right" and plays "cocktail_right". Click again and it plays "cocktail_right" and sets current to "cocktail_right". Then it just gets stuck there doing the same thing over and over.

                           

                          Will keep working on it. The problem is probably staring me in the face.

                           

                          Thanks for the offer to take a look at it, very kind of you, however I should work this out myself so I learn and I need to sort it today so I can move on to other parts of the app

                          • 10. Re: Setting Variable
                            TimJaramillo Level 4

                            Hey littlewing,

                             

                            Do you have multiple buttons? Do the 2 buttons work like a gallery next/previous setup?

                            • 11. Re: Setting Variable
                              littlewing@ Level 1

                              Correct, is this where you tell me there is a really easy way to do this?

                              • 12. Re: Setting Variable
                                TimJaramillo Level 4

                                Ok. Yes, hehe- there is an easier way to do this. I'll post an example in a few minutes.

                                • 13. Re: Setting Variable
                                  TimJaramillo Level 4

                                  Hey littlewing, here is an example of a gallery type setup. I moved the functional code to Stage.compositionReady, and put the function calls on the 2 buttons. Click the 2 buttons to cycle through the array of strings.

                                   

                                  example:

                                  www.timjaramillo.com/code/edge/gallery_btns/test.html

                                   

                                  source:

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

                                   

                                  Let me know how it goes!

                                   

                                  For posterity, and for anyone too lazy to download the source, here's core code for a simple incremental gallery setup. This code is on Stage.compositionReady.

                                   

                                  // var to hold array of all states

                                  sym.arrayLabels = ["wine_right", "cocktail_right", "cider_right", "other_right", "cider_right"];

                                   

                                   

                                  sym.currentID = 0;// hold current ID

                                  sym.currentString;// hold current state string

                                   

                                   

                                  // func called by left btn

                                  sym.onClickLft = function() {

                                            if( sym.currentID >0 ) {

                                                      sym.currentID--;

                                   

                                   

                                                      sym.currentString = sym.arrayLabels[sym.currentID];

                                                      //sym.("drinks").play( sym.currentString );

                                                      sym.$("test_text").html( sym.currentString );

                                            }

                                  }

                                   

                                   

                                  // func called by rt btn

                                  sym.onClickRt = function() {

                                            if( sym.currentID < sym.arrayLabels.length-1 ) {

                                                      sym.currentID++;

                                   

                                   

                                                      sym.currentString = sym.arrayLabels[sym.currentID];

                                                      //sym.("drinks").play( sym.currentString );

                                                      sym.$("test_text").html( sym.currentString );

                                            }

                                  }

                                  • 14. Re: Setting Variable
                                    littlewing@ Level 1

                                    Thanks Tim, you're a champ. I will give this a go.

                                    • 15. Re: Setting Variable
                                      joel_pau Level 5

                                      For as3 or as2 developers, you can also replace "sym" by "this": "this" can set variables.

                                      There is an official sample: download Design Spotlight sample files.

                                      • 16. Re: Setting Variable
                                        elainecc Adobe Employee

                                        Hi, guys-

                                         

                                        We'd suggest that you use "sym" instead of "this," since "this" can have multiple contexts, and "sym" is specific to Edge Animate, and so is more analogous to how Flash uses "this."

                                         

                                        -Elaine