7 Replies Latest reply on Jan 29, 2014 6:05 PM by resdesign

    Triggering A timeline to Play based on Conditional

    EWitness13

      I'm working on a project in which I have four draggables, four droppable, and four default droppables in the composition.  Once these four individual draggables have been dropped onto their perspective recipients I want to trigger a symbol to play it's timeline based on a conditional statement that verifies all four draggables have been dropped properly.

       

      To do this, I pushed the four draggable groups into an array after they have been dropped and draggable destroyed using the jquery ui library.  I know the array is being populated because I get the appropriate groups back in the console and the appropriate array length.

       

      I have attempted then to do a for loop to scan the array and the feed that through an if statement to verify that it has four items and then trigger the playing of the symbol timeline.  Only problem is it is not working.  Do you have any advice on how to solve the issue based on the code below?

       

      correct=[];

      //DRAGGABLE RIDE TO AIRPORT GROUP

      sym.$('rideGroup').draggable({           containment:'parent',           scope: 'task3',           opacity:.9,            revert:'invalid',            zIndex:6 });

       

      //Make the targetRide area droppable and accept the Ride to Airport Group

      sym.$('targetRide').droppable({

            scope:'task3',

            drop: function(event, ui){

                 accept: 'rideGroup'

                 tolerance:'fit'

                 draggable:'destroy'

                 correct.push('rideGroup');

            }

      });

       

      sym.$('defaultRide').droppable({

            scope: 'task3',           drop: function(event,ui){

                 accept: 'rideGroup'

                 }

           });

       

      for(var i=0; i <= correct.length; i++){

            if(i === 4 && correct.length === 4){

                 sym.getSymbol('Animation').play('greatJob');

            }else{           sym.getSymbol('Animation').play('notRight');

         }

      };

       

      If I take the sym.getSymbol line of code in the conditional statement and place it where the push statement is, each of the draggables will play the timeline after being dropped.  We don't want that though.  We need the timeline to play only after all four of the draggables have been dropped.  I only included the code for one of the draggable and droppable sets here for space reasons. 

       

      Thank you for any assistance you can provide.  

        • 2. Re: Triggering A timeline to Play based on Conditional
          EWitness13 Level 1

          Thank you resdesign.  That was very helpful and exactly what I was trying to accomplish.  Unfortunately I'm still pretty new to the development side of things, which was probably apparent by my code.  I do have a couple of questions to make sure I completely understand everything in that example if you don't mind.  At this point I haven't had the chance to really dig into this code as thoroughly as I would have liked. 

           

          1. The main question is about the variable "k"   not sure how or where that variable came from or how it came into play outside of the conditional.  Was that created for the sake of holding the results of the function?  I'm not real clear on that  one.

           

          2.  I'm going to tear into the code on this one, but I am assuming the .C is referring to a CSS class to style the objects?

           

          3.  I tweeked positioning on the final result because there was some offsetting that took place after the drop event and disabling of the draggable and droppable.  I'm still getting some apparent random offsetting with the draggables.  Is there a way to tweek this with control over each object?  each one has a different level of offset which is why I ask.  You can see it on my test server.  It's still a work in progress and the fireworks are not part of the final product.    lol    http://www.f30graphics.com/TestArea/TimeIsMoney/TimeIsMoney.html

           

          other than that, it seems pretty straight forward to me.  I'll blame it on my noobishness for not thinking of doing it that way to start with instead of working backwards.  lol  Thank you again so much for the help on this.

          • 3. Re: Triggering A timeline to Play based on Conditional
            resdesign Adobe Community Professional & MVP
            1. K is just a variable that is used to store the number of draggable that have been dropped in the right place - When you have all your draggable in place, then it will trigger the animation
            2. C is a class name that we give to each of the draggables with addClass(). This could be anything you want to give it. Since it is done with a loop, the names become C0, C1, C2, C3 - if you had given it the name thingt then the class names would be thing0, thing1, thing2...
            3. Now in the droppable you have the accept line that will accept the respective draggables - so the droppable are array element droppableEl[0] will accept the object that has the class .C0, the element droppableEl[3] will accept the element with the class .C3
            4. The position can be changed with what you need - it will place the draggable into the bounding box of your droppable at for example center center or left top, etc... there are several other options.

            I hope this help you understand how things were done.

            • 4. Re: Triggering A timeline to Play based on Conditional
              EWitness13 Level 1

              I think you may have clarified some things in my mind that will help me going forward.  If I understand what you are saying about .C, it is actually a javascript class assigned to an element that is used by javascript and can be named anything you want it to be, similar to that of a CSS class, but it is contained within javascript only, but can make use of CSS classes if need be.  Am I correct on that one?

               

              As for k, I think what I'm unclear about is how that array (k) is having the information pushed into it in this code.  I think I'm unclear on that because I only see it in three places.  Where it is being declared, where it is being iterated with the k++, and then in the final conditional statement.  So, I gues my question is more accurately defined as How is it getting populated with the values to know when the all droppables have received draggables?

               

              on point 3 that was a clarification that sharpened my understanding of it to a fine point.  Thank you.

               

              position, I messed with the my: and at: values with left center and left center  but also added a +5.5% to get them close to an aesthetically lined up position, but each of my draggables are still offset with differring amounts.  Is there a way to fix that, or is just something I have to get to acceptable degree of offset?

               

               

              I sincerely appreciate you taking the time to answer my questions and helping this noob figure this stuff out.  Stepping into the dev world for the first time I feel like I'm having to be a multiLinguist to do this stuff. 

              • 5. Re: Triggering A timeline to Play based on Conditional
                resdesign Adobe Community Professional & MVP

                K is situated in the event handler - therefore when the event occurs, k is incremented and when it is equal to the number of  events (the draggables that are correctly placed) it does what you want it to do, in this case an animation. This could be used for somthing else if you wanted.

                 

                The position can use left, top, middle, center, bottom... I would not add pixels to it. It is better to get the placement that way. If you have images that have strange boundaries, you could use transparent droppables over images. Hope this makes sense.

                • 6. Re: Triggering A timeline to Play based on Conditional
                  EWitness13 Level 1

                  Thank you. it does.  You've been a great help.  I and all the children that are going to benefit from this truly appreciate it.

                  • 7. Re: Triggering A timeline to Play based on Conditional
                    resdesign Adobe Community Professional & MVP

                    I would like to give credit to Zaxist who taught me this and more. He is the real genius!

                    Glad I could help you in return!

                    :)