2 Replies Latest reply on Aug 13, 2013 11:37 AM by l.aufox

    How do I refresh an animation so that it resets back to the beginning?

    l.aufox

      So I created a drag and drop animation where the elements dissapear after they are dragged onto the target. I want to include a reset button that sets the animation back to the beginning so the user can play the drag and drop game again. Is there code I can include that resets the animation the same way that happens when you hit the browser refresh button?

        • 1. Re: How do I refresh an animation so that it resets back to the beginning?
          resdesign Adobe Community Professional & MVP

          Possible way to do it not knowing the structure of your composition.

          Assuming these are symbols you could send their timeline back to 0 - Make an array of your symbol names.

          var mySymbols = ['asymbolName', 'anotherone', 'athirdname'];

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

          for (i=0;i<=symbol;i++){

          // reset symbols

          sym.getSymbol(mySymbols[i]).stop(0);

          };

          // reset main timeline  or sym.play(0) if you need to play the timeline there

          sym.stop(0);

          });

          1 person found this helpful
          • 2. Re: How do I refresh an animation so that it resets back to the beginning?
            l.aufox Level 1

            Here is my current code, the draggable objects aren't set on the timeline, they just live on the stage

             

               function init(){

               // apply the draggable JQuery UI plugin to the Symbols on the stage

               sym.$('TIF_sym').draggable({

               start: function(e){},

               drag: function(e,ui){}

               });

             

             

               sym.$('DXF_sym').draggable({

               start: function(e){},

               drag: function(e,ui){}

               });

             

             

               sym.$('DWG_sym').draggable({

               start: function(e){},

               drag: function(e,ui){}

               });

             

             

               sym.$('SHP_sym').draggable({

               start: function(e){},

               drag: function(e,ui){}

               });

             

             

               sym.$('DEM_sym').draggable({

               start: function(e){},

               drag: function(e,ui){}

               });

             

             

             

               // apply the droppable JQuery UI plugin to the Symbols on the stage

               sym.$("DataLayerObject").droppable({

               drop: function(e, ui) {

             

             

                         // Hide Target Element Grey Box.

                         sym.$("FirstDrag").hide();

                         sym.$("Text").hide();

             

             

                         // Hide file box

                         var hideEle = "#" + ui.draggable.context.id;

                                   console.log(ui);

                                   $(hideEle).hide();

             

             

                         //Play timeline for each data layer when correct file is dragged onto object

                         sym.getComposition().getStage().getSymbol("DataLayerObject").getSymbol($(ui.draggabl e).attr("id").substring(6) + "_layer").play();