9 Replies Latest reply on Feb 22, 2016 8:02 AM by Colin Holgate

    Best way to load but not automatically play a movieclip instance?

    Pete47 Level 1

      Hi there,

       

      I am using Animate CC to produce an HTML5 Canvas project that uses symbols with embedded animations. My main timeline has just one frame containing the animated symbols.

       

      I'd like the symbols to load but NOT start their timeline immediately. Is there a way to set up a symbol with animation, so that the animation doesn't start immediately, but waits for a command?


      Or, is there an event generated that I can listen for, when a symbol is fully loaded and ready to start?


      For example, I have an instance of a symbol, named "Planet10" and I'd like to stop that movieclip from playing until it is told to do so, rather than starting as soon as it is loaded.

       

      I've been hacking at this for a couple of hours now and my freshman professor from a long time ago wouldn't be happy... his rule was that if you are stuck after 5 minutes, you've waited too long to ask for help. :-)

       

      -Pete

        • 1. Re: Best way to load but not automatically play a movieclip instance?
          Colin Holgate MVP & Adobe Community Professional

          Simplest solution is to put:

           

          this.stop();

           

          into the movieclip timeline. Then do a this.mcname.play(); when you want it to start.

          • 2. Re: Best way to load but not automatically play a movieclip instance?
            Pete47 Level 1

            Hi,

             

            I tried that and it works but I gave up that solution for the moment because I was hoping for a different solution. Something I didn't include in the original post is that once started, I still want to be able to start and stop the moviecilp playback with user control. When I added a stop() to the first frame, it stops on each loop.

             

            I could add a little logic to the first frame but that requires a global variable be set somewhere to indicate that the moviecilp should be playing or it should be stopped. I am presently chasing that squirrel as I try to figure out how to add a variable with sufficient scope to do the trick.

             

            Was hoping for an event generated when the movieclip loaded. That way I could listen for it on the main timeline and stop the movie clip from starting to play. Still hacking...

             

            -Pete

            • 3. Re: Best way to load but not automatically play a movieclip instance?
              Colin Holgate MVP & Adobe Community Professional

              var didstop;

               

              if(didstop!="yes"){

              didstop = "yes"

              this.stop();

              }

              • 4. Re: Best way to load but not automatically play a movieclip instance?
                ClayUUID Adobe Community Professional

                A Boolean would be far more appropriate for that application than setting a string to "yes". Really now.

                • 5. Re: Best way to load but not automatically play a movieclip instance?
                  Colin Holgate MVP & Adobe Community Professional

                  You can always bet that I have a reason for doing things! In AS3 variables are typed, and so you can say:

                   

                  var didstop:Boolean;

                   

                  if (!didstop){

                  didstop=true;

                  this.stop();

                  }

                   

                  But this is Javascript, where variables are not typed, and you can't assume that they will default to a Boolean false. Now, I suspect that null would still be testable, but I wouldn't bet on it.

                   

                  This:

                   

                  var didstop = false;

                   

                  wouldn't be a good solution either, because it would get reset when the timeline loops.

                  • 6. Re: Best way to load but not automatically play a movieclip instance?
                    ClayUUID Adobe Community Professional

                    JavaScript variables are typed, but they're not statically typed. Declaring a variable with no value initializes it to type undefined (not null). Within a Boolean comparison, undefined is coerced to False. This is all documented behavior of the language, there is nothing to bet on. Advising newbies to the language to use strings to store semantically Boolean data is simply wrong. That leads to the sort of code that ends up on thedailywtf.com.

                     

                    Also, a quick overview of how variable scope works in Canvas:

                    • myVar = 1; // variable is accessible everywhere in current page (global scope)
                    • this.myVar = 1; // variable is accessible in all frames of current clip
                    • var myVar = 1; // variable is accessible in current frame only

                     

                    So this is what works:

                     

                    if (!this.didstop) {

                         this.didstop = true;

                         this.stop();

                    }

                    • 7. Re: Best way to load but not automatically play a movieclip instance?
                      Pete47 Level 1

                      I dislike threads that just die... so I am posting a summary of this thread with my "final answer", just in case it helps someone else or prompts other ideas.

                       

                      This project was for HTML5/Canvas output as an OAM file for use within Adobe Captivate.

                       

                      The purpose of this exercise was to help me better understand nested animations. With the help of those replying to my initial question, I've worked out code that works. I used the analogy of a planet with a moon for this exercise because it is easy to understand the relationships. As the planet moves across the stage, the moon is orbiting around the planet. It is an obvious application of a nested animation. It took several tries to set up the symbols in the proper relationship so that the planet loops across the stage with the moon orbiting the planet. But for application of this idea to other situations, I wanted to the planet and moon to NOT automatically animate when the main timeline loads. That is where the code work came in.

                       

                      The final movie has a single frame on the main timeline. The planet animation has 100 frames and the moon's animation has 80 frames. While I wanted all my code on the main timeline, in that single key frame, I wasn't able to make that work. So in my final version, the code is spread across three locations: the main timeline, the first frame of the planet animation, and on the first frame of the moon animation. The code details follow.

                       

                      To give you an idea of what I was working with, this is a screen cap of the movie.

                      redMoon.png

                       

                      //All the following code appears in the actions layer of the single keyframe on the (one frame) main timeline

                      //there are 4 buttons to start and stop the animation of the planet and start and stop the animation of the moon

                       

                      var globalThis = this; // this was necessary because of an acknowledged bug in the first release of Animate CC (Feb 2016)

                      planetPlaying = false; // this is a global var that holds the desired status of the planet animation

                      moonPlaying = false; // this is a global var that holds the desired status of the moon animation

                       

                       

                      globalThis.StopPlanet.addEventListener("click", fl_MouseClickHandler);

                       

                      function fl_MouseClickHandler()

                      {

                        planetPlaying = false;

                        globalThis.Planet10.stop();

                      }

                       

                      globalThis.PlayPlanet.addEventListener("click", fl_MouseClickHandler_2);

                      function fl_MouseClickHandler_2()

                      {

                        globalThis.Planet10.play();

                        planetPlaying = true;

                      }

                       

                      globalThis.PlayMoon.addEventListener("click", fl_MouseClickHandler_3);

                      function fl_MouseClickHandler_3()

                      {

                        globalThis.Planet10.MovingBlackPlanet.OrbitingRedMoon.play();

                        moonPlaying = true;

                      }

                       

                      globalThis.StopMoon.addEventListener("click", fl_MouseClickHandler_4);

                      function fl_MouseClickHandler_4()

                      {

                        globalThis.Planet10.MovingBlackPlanet.OrbitingRedMoon.stop();

                        moonPlaying = false;

                      }

                      // this is the end of the code on the main timeline

                       

                      // this is the only code on the planet's timeline

                      // the animation is 100 frames long and this code is on the first frame

                      var planetThis = this;

                       

                      if (planetPlaying){

                        planetThis.play();

                      }else{

                        planetThis.stop();

                      }

                      //end of planet's code

                       

                      // this is the only code on the moon's timeline

                      // the animation is 80 frames long and this code is on the first frame

                      var moonThis = this; // necessary due to a bug

                      if (moonPlaying){

                        moonThis.play();

                      }else{

                        moonThis.stop();

                      }

                      //end of moon's code

                       

                      Hope this helps someone. :-)

                      Pete

                      • 8. Re: Best way to load but not automatically play a movieclip instance?
                        ClayUUID Adobe Community Professional

                        Pete47 wrote:

                         

                        var moonThis = this; // necessary due to a bug

                         

                        Explain. Aliasing "this" all over your code shouldn't be necessary.

                        • 9. Re: Best way to load but not automatically play a movieclip instance?
                          Colin Holgate MVP & Adobe Community Professional

                          What I think he's referring to is that the code snippets use a bind method, so that the function uses the timeline as 'this', and not the function itself. That method fails when using an .oam in other programs, and:

                           

                          var whatever = this;

                           

                          function something(){

                          whatever.play();

                          }

                           

                          works fine.