9 Replies Latest reply on Feb 14, 2013 3:33 PM by resdesign

    Controlling Classes

    JonathanMarino

      Hello Edgers!

       

      I am wondering how I could control multiple symbols using classes.

       

      So lets say I have 10 symbols on the Stage - each symbol has a class of 'box'

       

      Using this:

      sym.getSymbol('.box').play('lower');

       

      only the first box will animate, not the other 9.

       

      As always, thank you in advance for your time and help!

       

      - JM

        • 1. Re: Controlling Classes
          resdesign Adobe Community Professional & MVP

          Yes you can. You can assign a class to your elements here:

          12-3-2012 1-51-15 PM.png

          Not sure about your code though. What are you trying to do?

          • 2. Re: Controlling Classes
            JonathanMarino Level 1

            Thanks resdesign.

             

            Yes, I have already assigned my class to all of the elements.

             

            Now how to access them w/ the edge API?

             

            sym.getSymbol('.box').play();

             

            only works on the first div - all others assigned with the same class do not animate.

            • 3. Re: Controlling Classes
              resdesign Adobe Community Professional & MVP

              The API says:

               

              Accessing imported HTML content through actions can be done by using sym.$("#myId"); to target the ID or class of your element. You can also use this method to target DOM elements which live outside of the Edge Animate composition. For example, sym.$("footer");

              • 4. Re: Controlling Classes
                JonathanMarino Level 1

                Thanks resdesign.

                 

                I got a bit frustrated trying to find the proper syntax and couldn't.

                 

                So I just wrote a work-around

                 

                // populate array of objects with class 'box'

                var box = [];

                jQuery(".box").each(function()

                {

                          box[box.length]=this;

                });

                 

                 

                //begin animation

                animate();

                 

                 

                var index=0; //represents current index in box array

                function animate()

                {

                          setTimeout(function()

                          {

                                    if(box[index]==null) //if end of array is reached, return from function

                                              return;

                 

                 

                                    sym.getSymbol(box[index]).playReverse();

                                    ++index;

                                    animate(); //this recursive call repeats itself on the next index in the array

                          },10);

                }

                 

                Hope this helps anybody else out there.

                 

                I'll be posting the finished project soon.

                • 5. Re: Controlling Classes
                  resdesign Adobe Community Professional & MVP

                  Example:

                   

                  var btn1 = sym.$('btn1');

                  btn1.click(function(){

                            //sym.$("myBox3").css('background', 'red');

                            sym.$(".box").css('background', 'red');

                   

                   

                  });

                  • 6. Re: Controlling Classes
                    resdesign Adobe Community Professional & MVP

                    We posted about the same time. Hope the sample above helps.

                    All you need to use the class is:

                    sym.$(".className")

                    • 7. Re: Controlling Classes
                      JonathanMarino Level 1

                      Thanks so much for your help.

                       

                      I tried that, but it seems to not be able to call the play or playReverse actions.

                       

                      This is triggered on a mouseover event.

                       

                      sym.getSymbol('box1').play('label');

                       

                      I would like to populate numerous symbols - box1, box2, box3, box4 - all with the same class 'box'

                       

                      and have them all play on one mouse event

                       

                      sym.$('.box').play('label');

                       

                      does not seem to work.

                      • 8. Re: Controlling Classes
                        resdesign Adobe Community Professional & MVP

                        I have to go but I will try to give you an answer by tomorrow unless someone beats me to it.

                        • 9. Re: Controlling Classes
                          resdesign Adobe Community Professional & MVP

                          OK. I have a question, are you creating the symbols or are they already on the stage?

                           

                          Well so far, I am like you. I can apply css properties to a bunch of elements having the same class but I cannot get them to play.