20 Replies Latest reply on May 3, 2013 3:52 PM by designedbyjackley

    If...else if not working for incrementing global vars and jumping to frame labels

    designedbyjackley Level 1

      The problem I'm having is when I change my simple if statements to "else if" and increment a global variable it actually breaks the original "if". If you swipe left, right or down it increments the global var "animCount" and jumps the to the specific frame label and plays that animation. Then I would like to check if the val of animCount has been changed and if the user swipes again left, right or down it takes aways from the val of "animCount" and I then I have another statement that checks for that and jumps to the a new specific frame label and plays that animation. The problem is I cannot just have a linear version of it moving down the main Stage timeline it actually needs to jump all around to very specific spots.

       

      Below is the code that I have on document.compositionReady that works but when you add the else if its breaks ... What the heck am I doing wrong!

       

      Hope someone can please help

       

       

       

      // Working Code ///////////////////////////////////////////////////////////

       

      // GLOBAL VARS --------------------------------------------

       

      this.animCount = 0;

       

      // swipe

      this.swipeStartX;

      this.swipeEndX;

      this.swipeStartY;

      this.swipeEndY;

      this.swipePadding = 60;// prevent swipe when clicking

       

       

      // ARROW BTNS --------------------------------------------

       

      this.onSwipeLeft = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("anim_4");

       

                }

      }

       

      this.onSwipeRight = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("anim_1");

       

                }

      }

       

      this.onSwipeDown = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("ice_dunk_1");

                }

      }

       

       

      // SWIPE --------------------------------------------

       

      this.onSwipe = function()

      {

                // swipe right (scrub to left)

                if( this.swipeStartX < this.swipeEndX - this.swipePadding )

                {

                          this.onSwipeRight();

       

                // swipe left (scrub to right)

                }else if( this.swipeEndX < this.swipeStartX - this.swipePadding )

                {

                          this.onSwipeLeft();

       

                // swipe down (scrub to down)

                }else if( this.swipeStartY < this.swipeEndY - this.swipePadding )

                {

                          this.onSwipeDown();

                }

      }

       

      // End Working Code ///////////////////////////////////////////////////////////

       

      // Bad Code ///////////////////////////////////////////////////////////

       

      // GLOBAL VARS --------------------------------------------

       

      this.animCount = 0;

       

      // swipe

      this.swipeStartX;

      this.swipeEndX;

      this.swipeStartY;

      this.swipeEndY;

      this.swipePadding = 60;// prevent swipe when clicking

       

       

      // ARROW BTNS --------------------------------------------

       

      this.onSwipeLeft = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("anim_4");

                }

                else if(this.animCount == 1){

                          this.animCount--;

                          sym.play("anim_2");

                }

      }

       

      this.onSwipeRight = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("anim_1");

                }

                else if(this.animCount == 1){

                          this.animCount--;

                          sym.play("anim_5");

                }

      }

       

      this.onSwipeDown = function()

      {

                if(this.animCount == 0){

                          this.animCount++;

                          sym.play("ice_dunk_1");

                }

                else if(this.animCount == 1){

                          this.animCount--;

                          sym.play("anim_3");

                }

      }

       

       

      // SWIPE --------------------------------------------

       

      this.onSwipe = function()

      {

           // swipe right (scrub to left)

           if( this.swipeStartX < this.swipeEndX - this.swipePadding )

           {

               this.onSwipeRight();

       

           // swipe left (scrub to right)

           }else if( this.swipeEndX < this.swipeStartX - this.swipePadding )

           {

               this.onSwipeLeft();

       

           // swipe down (scrub to down)

           }else if( this.swipeStartY < this.swipeEndY - this.swipePadding )

           {

               this.onSwipeDown();

           }

      }

       

      // End Bad Code ///////////////////////////////////////////////////////////

        • 1. Re: If...else if not working for incrementing global vars and jumping to frame labels
          TimJaramillo Level 4

          Hey Jeff, what do you mean it "breaks" the original "if" statement? Are you seeing errors in the console log?

           

          Can you post your files?

          • 2. Re: If...else if not working for incrementing global vars and jumping to frame labels
            designedbyjackley Level 1

            Hey Tim,

             

            Sorry I should have been more clear on it "breaks". Basically before I put in the "else if" in the statement it jumps to the correct frame but when I add the "else if" it jumps to the wrong frame label right off the bat.

             

            I wonder if instead of incrementing the variable I should change the value exactly and reference the exact specific number. Like Instead of changing it like this "this.animCount++;" I should change it like this "this.animCount = 3;" and if the variable == 3 jump to the specific frame label??

             

            sent you a PM with the link

            • 3. Re: If...else if not working for incrementing global vars and jumping to frame labels
              TimJaramillo Level 4

              Hey there, I'm still not fully clear on how this interaction works. Below are a few scenarios, let me know what you're trying to do for each:

               

              User swipes right: you play first "right" animation.

              User swipes right again: you play a different "right" animation.

              User swipes right again: what happens?

               

              User swipes right: you play first "right" animation.

              User swipes right again: you play a different "right" animation.

              User swipes up: you play first "up" animation.

              User swipes right again: you play first "right" animation?

               

              User swipes right: you play first "right" animation.

              User swipes left: you play first "left" animation.

              User swipes right again: what happens?

               

              User swipes right: you play first "right" animation.

              User swipes left: you play first "left" animation.

              User swipes up: first "up" animation.

              User swipes right again: you play first "right" animation?

              • 4. Re: If...else if not working for incrementing global vars and jumping to frame labels
                designedbyjackley Level 1

                User swipes right: you play first "right" animation "anim_1"

                User swipes right again: you play a different "right" animation "anim_5"

                User swipes right again: loops back to play "anim_1" again and "anim_5" if they swipe right again

                 

                User swipes left: you play first "left" animation "anim_4"

                User swipes left again: you play a different "left" animation "anim_2"

                User swipes left again: loops back to play "anim_4" again and "anim_2" if they swipe right again

                 

                User swipes right: you play first "right" animation "anim_1"

                User swipes right again: you play a different "right" animation "anim_5"

                User swipes down: you play first "up" animation. "ice_dunk_1"

                User swipes right again: disable right nothing happens

                Or if User swipes left: disable left nothing happens

                User swipes down: you play second "up" animation. "ice_dunk_2"

                User swipes right again: you play first "right" animation "anim_1" or if they swipe left play "anim_4"

                 

                User swipes right: you play first "right" animation "anim_1"

                User swipes left: you play first "left" animation "anim_2"

                User swipes right again: you play first "right" animation "anim_1" again

                 

                User swipes right: you play first "right" animation "anim_1"

                User swipes left: you play first "left" animation "anim_2"

                User swipes up: "anim_3" animation

                User swipes right again: you play "anim_5" or if the user swipes left play "anim_2"

                 

                hope that makes sense

                • 5. Re: If...else if not working for incrementing global vars and jumping to frame labels
                  TimJaramillo Level 4

                  Hmmm, the plot thickens ... is it correct to say that the current animation partially determines what the next swipe does?

                  • 6. Re: If...else if not working for incrementing global vars and jumping to frame labels
                    designedbyjackley Level 1

                    Yeah Totally.

                     

                    Thats why I made specific "in and out" for swipe left and "in and out" for swipe right. If your on the purple shape with the pink shape you have a different swipe down animation than if you were on the solo purple shape. using the global var as a marker to let me know what animation they are on.

                     

                    But right now I can't even get it to jump around to specific frame labels even tho I am pretty sure I have my code structured properly

                    • 7. Re: If...else if not working for incrementing global vars and jumping to frame labels
                      TimJaramillo Level 4

                      Ok, you'll want to set up a state machine to handle all the different states.

                       

                      What are all the possible "states"- iceberg up, iceberg down, ice thing sticking out, ... etc? List them out for me.

                      1 person found this helpful
                      • 8. Re: If...else if not working for incrementing global vars and jumping to frame labels
                        designedbyjackley Level 1

                        "States"

                        • iceberg_up (User can swipe left, right and down)

                        • iceberg_flipped (User can swipe left, right and down)

                        • greensea_creature_up (User can only swipe down and possibly up. Want to disable left & right when in this state)

                         

                        (will possible be adding more "states")

                            • boat_up

                            • beach_up

                        • 9. Re: If...else if not working for incrementing global vars and jumping to frame labels
                          TimJaramillo Level 4

                          Ok, this should be enough to get you rolling- I set up a state machine, with switch case for "onSwipeLeft" only. You can apply this to the other swipes. Here's a link to the code as well, since the forum sometimes messes up tabbing, making the code really hard to read. Lemme know if you have any questions.

                           

                          link to code:

                          http://www.timjaramillo.com/code/edge/_source/_temp/test.js

                           

                           

                          // GLOBAL VARS --------------------------------------------

                           

                          this.currentState = this.STATE_ICEBERG_UP;// beginning state

                          this.STATE_ICEBERG_UP = "iceberg_up";

                          this.STATE_ICEBERG_FLIPPED = "iceberg_flipped";

                          this.STATE_CREATURE_UP = "creature_up";

                           

                           

                           

                          // swipe

                          this.swipeStartX;

                          this.swipeEndX;

                          this.swipeStartY;

                          this.swipeEndY;

                          this.swipePadding = 60;// prevent swipe when clicking

                           

                           

                          // ARROW BTNS --------------------------------------------

                           

                          this.onSwipeLeft = function()

                          {

                                    switch( this.currentState )

                                    {

                                              case this.STATE_ICEBERG_UP:

                                                        sym.play("anim_4");

                                                        this.currentState = this.STATE_ICEBERG_FLIPPED;

                                                        break;

                           

                                              case this.STATE_ICEBERG_FLIPPED:

                                                        sym.play("anim_2");

                                                        this.currentState = this.STATE_ICEBERG_UP;

                                                        break;

                           

                                              case this.STATE_CREATURE_UP:

                                                        sym.play("anim_1");

                                                        this.currentState = this.STATE_ICEBERG_UP;

                                                        break;

                           

                                              default:

                                                        console.log('onSwipeLeft, no matching case');

                                                        break;

                                    }

                           

                           

                          }

                           

                          this.onSwipeRight = function()

                          {

                                    if(this.animCount == 0){

                                              this.animCount++;

                                        sym.play("anim_1");

                                    }

                                    else if(this.animCount == 1){

                                        this.animCount--;

                                        sym.play("anim_5");

                                    }

                          }

                           

                          this.onSwipeDown = function()

                          {

                                    if(this.animCount == 0){

                                              this.animCount++;

                                              sym.play("ice_dunk_1");

                                    }

                                    else if(this.animCount == 1){

                                              this.animCount--;

                                              sym.play("anim_3");

                                    }

                          }

                           

                           

                          // SWIPE --------------------------------------------

                           

                          this.onSwipe = function()

                          {

                               // swipe right (scrub to left)

                               if( this.swipeStartX < this.swipeEndX - this.swipePadding )

                               {

                                   this.onSwipeRight();

                           

                               // swipe left (scrub to right)

                               }else if( this.swipeEndX < this.swipeStartX - this.swipePadding )

                               {

                                   this.onSwipeLeft();

                           

                               // swipe down (scrub to down)

                               }else if( this.swipeStartY < this.swipeEndY - this.swipePadding )

                               {

                                   this.onSwipeDown();

                               }

                          }

                          • 10. Re: If...else if not working for incrementing global vars and jumping to frame labels
                            designedbyjackley Level 1

                            That makes perfect sense! Sometimes it takes something like this for you to go "Ahhh why didn't I think of that!" I am going to test that now... it still makes me wonder why the simple else if statements I had were acting so erratic. But either way this allows for expandablity with a simple structure

                             

                            I'll hit you back with the results thx so much for taking the time to help me iron this out!

                            • 11. Re: If...else if not working for incrementing global vars and jumping to frame labels
                              TimJaramillo Level 4

                              No problem! Whenever you have many different states, and need to do different things dependent on those states, the State Machine, (with switch statements) comes through every time! It really helps to simplify what is otherwise a complicated, hard to follow mess.

                               

                              Btw, can you mark my last post as "Correct", so future users will be able to easily find the solution?

                               

                              Let me know if you have any more Q's.

                              • 12. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                designedbyjackley Level 1

                                Still testing it out ... I think I need to get some of the frame labels worked out for it to be completly working properly ... I do have one question with the new global variables that were added. Are the states in quotes referencing frame labels? For instance "iceberg_up"  this.STATE_ICEBERG_UP = "iceberg_up";

                                • 13. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                  TimJaramillo Level 4

                                  Naw, the text in quotes don't have anything to do with frame labels.

                                   

                                  The "static" variables (STATE_ICEBERG_UP) hold string descriptions (iceberg_up) for each state. That way, if you need to check the state from another js file or somewhere else in your code, you can clearly reference the "STATE_ICEBERG_UP" variable, rather than having to dig through the code to get a random string "iceberg_up".

                                  • 14. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                    designedbyjackley Level 1

                                    Thats what I thought ... Just wanted to make sure. Funny thing is now that I am using the new switch case for the left swipe its no longer swiping left at all?

                                    • 15. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                      TimJaramillo Level 4

                                      Ah- I think I know why.

                                       

                                      Reorder the vars to this:

                                       

                                      this.STATE_ICEBERG_UP = "iceberg_up";

                                      this.STATE_ICEBERG_FLIPPED = "iceberg_flipped";

                                      this.STATE_CREATURE_UP = "creature_up";

                                      this.currentState = this.STATE_ICEBERG_UP;// beginning state

                                       

                                       

                                      Previously, STATE_ICEBERG_UP was not defined to set this.currentState to it.

                                      1 person found this helpful
                                      • 16. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                        designedbyjackley Level 1

                                        Yeah that makes sense, it didnt know what that was since it was before declaring the actual var.

                                         

                                        Its swiping left now but its getting stuck on the first left swipe animation "anim_4" even after it sets it to this.STATE_ICEBERG_FLIPPED; instead of changing its state and using "anim_2" as the 2nd left swipe to case it to loop. Just the same issue I was having with the simple else if statements...

                                         

                                         

                                        this.onSwipeLeft = function()

                                        {

                                                  switch( this.currentState )

                                                  {

                                                            case this.STATE_ICEBERG_UP:

                                                                      this.currentState = this.STATE_ICEBERG_FLIPPED;

                                                                      sym.play("anim_4");

                                                                      break;

                                         

                                                            case this.STATE_ICEBERG_FLIPPED:

                                                                      this.currentState = this.STATE_ICEBERG_UP;

                                                                      sym.play("anim_2");

                                                                      break;

                                         

                                                            default:

                                                                      console.log('onSwipeLeft, no matching case');

                                                                      break;

                                                  }

                                         

                                         

                                        }

                                        • 17. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                          TimJaramillo Level 4

                                          Put a bunch of console logs in there to find out what's going on.

                                           

                                          this.onSwipeLeft = function()

                                          {

                                               console.log("at onSwipeLeft, this.currentState = "+this.currentState);    

                                           

                                               switch( this.currentState )

                                                    {

                                                              case this.STATE_ICEBERG_UP:

                                                                       console.log("at case STATE_ICEBERG_UP");

                                                                        this.currentState = this.STATE_ICEBERG_FLIPPED;

                                           

                                                                        sym.play("anim_4");

                                                                        break;

                                           

                                                              case this.STATE_ICEBERG_FLIPPED:

                                                                       

                                                                        console.log("at case STATE_ICEBERG_FLIPPED");


                                                                        this.currentState = this.STATE_ICEBERG_UP;

                                                                        sym.play("anim_2");

                                                                        break;

                                           

                                                              default:

                                                                        console.log('onSwipeLeft, no matching case');

                                                                        break;

                                                    }

                                           

                                           

                                          }

                                          1 person found this helpful
                                          • 18. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                            designedbyjackley Level 1

                                            All hail the console log!!! Somehow it was changing it back to iceberg up right after it changed it to flipped. So I added the state change to the stop frame after the actual animation plays and it totally fixed the issue!!!

                                             

                                            // insert code here

                                            this.currentState = this.STATE_ICEBERG_UP;

                                            sym.stop();

                                             

                                            Thanks a mill for shedding some light on the subject!

                                             

                                            You are the man ... MAN!

                                            • 19. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                              TimJaramillo Level 4

                                              Hmm, odd- not sure why the state would change. The only thing I can think is that it's some kind o' scope issue. The swipe example you're working off of uses "this" to set the scope, while the recommended method is to use "sym" to set scope. (Note that I created that swipe example long long ago, before scope in Edge was clear to me.) In the past I've built complex projects using "this", so it works fine, but using "sym" is a better and more clear way to control scope.

                                               

                                              So, ideally, your code would look like this:

                                               

                                               

                                              sym.STATE_ICEBERG_UP = "iceberg_up";// var that needs to be addressed from another scope

                                               

                                              var currentState = this.STATE_ICEBERG_UP;// var that only needs to be addressed from this event scope

                                               

                                               

                                              // ARROW BTNS --------------------------------------------

                                               

                                              // function that only needs to be called from this event scope

                                              function onSwipeLeft()

                                              {

                                                        switch( currentState )

                                                        {

                                                                  case sym.STATE_ICEBERG_UP:

                                                                            sym.play("anim_4");

                                                                            currentState = sym.STATE_ICEBERG_FLIPPED;

                                                                            break;

                                               

                                              ....

                                               

                                              // function that needs to be called from another scope

                                              sym.onSwipe = function()

                                              { ....

                                               

                                               

                                              And to call "onSwipe" from another scope, for example, you'd use this (same with setting "sym" vars from another scope):

                                               

                                              sym.getComposition().getStage().onSwipe();

                                               

                                               

                                               

                                              Anyhow, glad you got it working!

                                              1 person found this helpful
                                              • 20. Re: If...else if not working for incrementing global vars and jumping to frame labels
                                                designedbyjackley Level 1

                                                I decided to update from "this" to "sym" since I thought thats why I couldnt access "onSwipe" from another scope but now for some reason once I updated my "this" to "sym" per your advice the "currentState = sym.STATE_ICEBERG_FLIPPED;" check is not longer working so the animations no longer swipe in the correct order ...