12 Replies Latest reply on May 5, 2013 7:36 AM by shadowfax007

    Adding counter variable

    shadowfax007 Level 1

      Hello all-

       

      I know this has been discussed numerous times but I can't seem to get it working!

       

      I'm trying to start simple first and here is what I am trying to accomplish at this time:

       

      I have three "rectangle" boxes (on the stage), each a symbol(names below) and different color.

      blueBox

      redBox

      greenBox

       

      I have three "text" boxes above them on the stage.

      blueCounter

      redCounter

      greenCounter

       

      I have three variables in the compositionReady action on the stage:

      sym.setVariable("redCount", 0);

      sym.setVariable("blueCount", 0);

      sym.setVariable("greenCount", 0);

       

      What I want to have happen is when you click on the text box for any of the boxes, the box performs an animation and a number gets incremented by one, showing on the stage after the "text" boxes from above:

      blueCounter 2

      redCounter 5

      greenCounter 1

       

       

      I have the following code in an "onClick" action for the greenCounter text that calls the appropriately colored box:

      sym.$("greenBox").show();     // it is hidden on the stage at first-this works fine

      var counter = sym.getVariable("greenCount");

      counter++;

      sym.$("counter").html("green Count: " + counter);

      sym.setVariable("greenCount", counter);

       

       

      But, of course, I'm not seeing anything appear after the  "Green Count:" text on the stage (or the other two)... (except the animation does play)...

       

      I know I'm missing something elementary and if I can get that figured out, I can move on to what I really want to do with this functionality, now and in the future :-)

       

      Any ideas?

       

      Thanks!

       

      James

        • 1. Re: Adding counter variable
          resdesign Adobe Community Professional & MVP

          I have it working this way:

          https://www.box.com/s/cw95qab8kbxtaini1zvl

           

          compostion ready:

          sym.setVariable("redCount", 0);

          sym.setVariable("blueCount", 0);

          sym.setVariable("greenCount", 0);

           

           

           

           

          // insert code to be run when the composition is fully loaded here

          sym.$('greenCounter').click(function(){

                    sym.$("greenBox").show();     // it is hidden on the stage at first-this works fine

                    var counter = sym.getVariable("greenCount");

                    counter++;

                    sym.$("greenCounter").html("green Count: " + counter);

           

           

          });

          • 2. Re: Adding counter variable
            resdesign Adobe Community Professional & MVP

            Oops - correct code:

            file has been updated: https://www.box.com/s/cw95qab8kbxtaini1zvl

             

            sym.setVariable("redCount", 0);

            sym.setVariable("blueCount", 0);

            sym.setVariable("greenCount", 0);

            // counter should be out of the click event

            var counter = sym.getVariable("greenCount");

             

            // insert code to be run when the composition is fully loaded here

            sym.$('greenCounter').click(function(){

                      sym.$("greenBox").show();     // it is hidden on the stage at first-this works fine

                      sym.$("greenCounter").html("green Count: " + counter);

                      counter++;

            });

            • 3. Re: Adding counter variable
              shadowfax007 Level 1

              Thank you redesign!

               

              As always, your Edge examples are awesome!

               

              I'm tying to learn more about using jQuery with Edge and this seemed to be something I can see needing to know how to accomplish in the future!

               

              On that subject, do you (or anyone else reading this) have any suggestions on reading material for using jQuery, especially when it comes to Adobe Edge?

               

              The more I got to working with json and MySQL integration (see post: http://forums.adobe.com/thread/1201828?tstart=30  for 3-part video tutorial) the more I realized that I'm at a point that in order to really "advance" my skills with Edge, I need to get familiar with using jQuery with Edge :-)

               

              Again, Thanks for the example code!!!

               

              James

              • 4. Re: Adding counter variable
                resdesign Adobe Community Professional & MVP

                Thank you.

                I usually look at jquery examples and adapt them to Edge.

                Here is a good resource though: http://www.queness.com/post/126/useful-and-handy-jquery-tips-and-tricks

                • 5. Re: Adding counter variable
                  shadowfax007 Level 1

                  Thanks redesign!

                   

                  I'll take a gander when I get a chance :-)

                   

                  James

                  • 6. Re: Adding counter variable
                    shadowfax007 Level 1

                    I've got another question:

                     

                    Is there a "list" of Edge "restricted code names" (for better lack of words)?

                     

                    Playing with the code example you sent, I'm still fighting to add the other two "colored boxes".

                    I was trying to change the following and it breaks, which lead me to believe it is a restricted word used by Edge:

                     

                    var counter = sym.getVariable("greenCount");

                     

                    // insert code to be run when the composition is fully loaded here

                    sym.$('greenCounter').click(function(){

                              sym.$("greenBox").show();     // it is hidden on the stage at first-this works fine

                     

                              sym.$("greenCounter").html("green Count: " + counter);

                              counter++;

                    });

                     

                     

                    I was trying to change the variable "counter" to "greenCounter", redCounter", "blueCounter" but the "counter" broke for the green box.  It shows on the page but doesn't increment past 0.

                     

                    James

                    • 7. Re: Adding counter variable
                      resdesign Adobe Community Professional & MVP

                      No it is not restricted. It is just a variable you sset at the beginning. It should work if you replace counter with green counter when to set it to var = counter ...

                      I Am not at a computer but I'll update the file later tonight.

                      • 8. Re: Adding counter variable
                        shadowfax007 Level 1

                        Thanks redesign-

                         

                        I'm back at it this morning with fresh eyes and go it working in just a few minutes (amazing what  little sleep can do)!

                         

                        Somehow, I was missing the "counter++" not changing the variable name there as well :-)

                         

                        James

                        • 9. Re: Adding counter variable
                          shadowfax007 Level 1

                          I do have a quick question:

                           

                          What is the reason for "setting" the variable (greenCount = 0) and then setting another variable (var counter = sym.getVariable("greenCount"); with the value of the first?

                           

                          I see it does not work if I try callig the first(greenCount) directly without calling the value into another variable(counter) first but I'm curious why?

                           

                          Thanks!

                           

                          James

                          • 10. Re: Adding counter variable
                            resdesign Adobe Community Professional & MVP

                            I updated the file. Inside 2 different cases are included because I was not sure exactly what you want.

                             

                            https://www.box.com/s/cw95qab8kbxtaini1zvl

                            • 11. Re: Adding counter variable
                              resdesign Adobe Community Professional & MVP

                              Question

                              What is the reason for "setting" the variable (greenCount = 0) and then setting another variable (var counter = sym.getVariable("greenCount"); with the value of the first?

                               

                              You do not need to set counter and greenCounter. Only one variable is needed (see case 1)

                               

                              If you want them to run independently, then you need 3 variables.

                               

                              Note: you have to start the counter somewhere, thus you set it to 0. I left your initial code to set variables but in case 1, I use only greenCounter.

                              • 12. Re: Adding counter variable
                                shadowfax007 Level 1

                                Thanks redeisgn!

                                 

                                Funny, that is almost EXACTLY the same code I came up with :-)

                                 

                                I'm really just playing around, trying to learn different things this weekend.

                                 

                                I learned today that I can change elements "outside" my edge animation (- such as HTML tags - Now that is cool(and powerful!!!) :-)

                                 

                                Have a good weekend - what's left of it!

                                 

                                James