6 Replies Latest reply on Jan 29, 2016 3:12 AM by caiocanalli

    Restart animation in Createjs

    caiocanalli

      Hi,

      I have an exported movie from Flash CC with 8 frames. Each frame has a timeline and some movieclips which are also animations.

       

      When I advancement from one frame to another the first time, everything works fine. But if I come back in a frame that has already been played, the animation does not restart, as well as internal movieclips.

       

      They are all in position totalFrames. I can not restart the frame as you would normally in Flash.

       

      Any idea how to do this?

       

      Thanks.

        • 1. Re: Restart animation in Createjs
          Colin Holgate MVP & Adobe Community Professional

          Yes, unfortunately that's how things work. You will need to add code to reset each movieclip. When you show a new movieclip, throw in a gotoAndPlay(0);

          • 2. Re: Restart animation in Createjs
            ClayUUID Adobe Community Professional

            If I'm understanding your problem description correctly, this is due to a very unfortunate design flaw in the Flash-to-CreateJS exporter. When a movieclip in a Canvas project leaves the stage, it's not actually deleted, it's just hidden. So if it appears again, instead of a fresh, newly-instantiated movieclip appearing, it instead just unhides the old one. All variables, playhead state, event listeners, etc will still be intact. This is a huge pain in the neck to deal with. You have to treat the state of all movieclips that come and go from the stage as "dirty" at all times. Always check for the existence of event listeners before adding them, always explicitly set the frame and play state, and so on.

            • 3. Re: Restart animation in Createjs
              Colin Holgate MVP & Adobe Community Professional

              What you say is right, but it's more about how CreateJS plays it back, rather than anything to do with exporting. The CreateJS team could change how they do things. Can't remember their reasons for having set it up the way it is.

              • 4. Re: Restart animation in Createjs
                ClayUUID Adobe Community Professional

                No, it's how the Canvas exporter works. If I put a clip on the stage for a few frames, remove it, then bring it back for a few more frames, this is the code that's generated:

                 

                this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({_off:false},0).to({_off:true},6).wait(8).to({_off:false},0).to({_off:true},9).wait(40));
                
                
                

                 

                Each instance should be its own unique object, but instead it just creates one object and toggles the "_off" state. Now, it would be possible for the player to monitor this state and try to do a manual purge of everything that could have been set on it, but this would just be a messy bandage over a fundamentally flawed approach.

                 

                Note that this approach introduces an additional, subtle bug-- if you initially have a movieclip named, say, "bob", get rid of it, then later bring in another, different clip also named "bob", Flash won't recognize the second clip by that name. This is because the first clip is still there, but invisible.

                • 5. Re: Restart animation in Createjs
                  Colin Holgate MVP & Adobe Community Professional

                  Your example is different to one I was thinking about. In my case I might have a movieclip on frame 1 (0 for CreateJS), the movieclip goes away on say frame 10, never to return. If I take the main timeline back to the first frame, the movieclip comes back, but it still is in the state that it was when it was removed from the scene.

                   

                  Thinking about it, your example, where something just goes away for a moment and comes back, may be why they chose to work this way, instead of getting rid of the movieclip, only to have to recreate it a moment later.

                   

                  There are other complications, not counting the one you mentioned about two bobs. If you use the same symbol in different layers, that can cause issues too.

                   

                  Overall I'm not complaining. It's amazing that we can get pretty close to working in the same way as with an AS3 FLA.

                  • 6. Re: Restart animation in Createjs
                    caiocanalli Level 1

                    Hi,

                     

                    I implement a method that goes into all movieclips the current frame and puts them all in position 0.

                     

                    The code is below and may help someone =).

                     

                    mc.gotoAndStop(0);
                    
                    this.resetFrame(mc);
                    
                    p.resetFrame = function(mc) {
                    
                    
                         for(var i = 0; i < mc.numChildren; i++) {
                              if(mc.children[i].toString().indexOf("MovieClip") != -1) {
                    
                                   mc.children[i].gotoAndPlay(0);
                              }
                              this.resetFrame(mc.children[i]);
                         }
                    };