13 Replies Latest reply on Dec 28, 2017 4:23 PM by philipw15367395

    Animate CC - Nasty HTML5 Bug

    gperry91 Level 1

      It looks like duplicated symbols on different frames are not exported from the HTML5 document type.

       

      1. Create a new Canvas project, draw a box on the stage and convert it to a symbol. Give the symbol an instance name of "box1"

       

      2. Copy the box symbol, create a new blank keyframe, and paste the symbol on the new blank keyframe. Change the copied box instance name to "box2"

       

      3. Save and test your document.

       

      4. Open the HTML file, and enter this code at the bottom of the "init" function.

       

      console.log(exportRoot.box1);

      console.log(exportRoot.box2);

       

      5. Refresh the page and look in the developer console. The first symbol is found, the second is undefined.

       

      If you look in the JS file exported from Animate CC you will find the "box1" instance on the stage, but nothing for "box2"

       

      Here is a link to the test document I created:

      http://www.filedropper.com/canvasbug

        • 1. Re: Animate CC - Nasty HTML5 Bug
          ClayUUID Adobe Community Professional

          Yes, I've been complaining about this one for a while. Basically, the exporter is a little too optimization-happy when it comes to managing stage instances. Instantiated objects never actually get deleted when they leave the stage, they just get turned off (paused and made invisible), and then if needed, turned back on again. This object management model is at odds with the visual model presented in the IDE, and thus creates several problems (that don't exist in ActionScript mode):

          • As you noted, all subsequent instances will be stuck with the name of the first instance (since it's just the same instance getting turned back on).
          • This also means that if you attempt to later instantiate a different symbol, but reusing the same name, it won't work.
          • Any event listeners or timers on an instance will continue to be active even after it's removed from the stage.
          • Any event listeners added in an instance will be duplicated, triplicated, etc. when the instance comes back (because the original ones are still there).
          • Any animated graphic symbols inside the instance won't automatically play after the first time.
          • Any variables on an instance will retain their previous values.

           

          In other words, all the initialization and persistence problems you'd expect to arise from the fact that it is NOT a fresh object being created when you instantiate the same object multiple times on the same timeline. Instead it just keeps recycling objects.

           

          So while this definitely needs to be fixed, most of these issues can be coded around for the time being:

          • Always explicitly initialize all variables.
          • Always run a hasEventListener() check before using addEventListener().
          • Timers and event listeners can check the clip's ._off property to see if the clip currently "exists".
          • Any animated graphic symbols should be played explicitly with gotoAndPlay(1).

           

          The name conflict issue is more hairy, but could also be worked around by running by having each clip set its own .name property (Flanimate currently does not set this for some reason), then to find a clip by name, iterate through the parent's .children array until you find the clip with that name set.

          1 person found this helpful
          • 2. Re: Animate CC - Nasty HTML5 Bug
            gperry91 Level 1

            I agree with everything you said... Although, regardless of all of the issues that occur with the hiding/unhiding approach, this bug should be easy to fix.

             

            There is no reason a duplicated symbol with a different instance name on a different frame shouldn't be included in the JavaScript output.

             

            Currently the only way to "reuse" the same symbol on different frames is to duplicate the symbol in the library and to use that... very disappointing.

             

            Somebody please fix this.

            • 3. Re: Animate CC - Nasty HTML5 Bug
              Preran Adobe Employee

              Hi all,

               

              Thank you for the feedback. I am logging a bug with the team for this issue.

               

              Thanks,

              Preran

              1 person found this helpful
              • 4. Re: Animate CC - Nasty HTML5 Bug
                anniquel81565953 Level 1

                Hi

                Is there an update on this issue yet?

                • 5. Re: Animate CC - Nasty HTML5 Bug
                  abnesher Level 1

                  Are there any news on when this bug will be resolved?

                   

                  I was supposed to start rebuilding a very large amount of old AS2-based elearning material, and I simply cannot do this because of this bug. It is impossible to work with timelines inside symbols, and this is a very integral part of how our interactive animations are built.

                   

                  I already wasted many hours on this before I found this thread, and I have just informed my boss, that we need to put this massive project on hold until Adobe solves the problem. (Which didn't make me very popular )

                   

                  PS I COULD do the rebuild in Edge Animate, but it would take much longer and be much more risky considering Adobes development of Edge has stopped.

                  • 6. Re: Animate CC - Nasty HTML5 Bug
                    ClayUUID Adobe Community Professional

                    abnesher wrote:

                     

                    I was supposed to start rebuilding a very large amount of old AS2-based elearning material, and I simply cannot do this because of this bug. It is impossible to work with timelines inside symbols, and this is a very integral part of how our interactive animations are built.

                    No, it is not impossible to work with timelines inside symbols. I and many other people working in Canvas documents do it all the time. You just have to be aware of the issues and code or design around them.

                    • 7. Re: Animate CC - Nasty HTML5 Bug
                      abnesher Level 1

                      Thx for the reply, ClayUUID!

                       

                      My problem is that in the conversion-process of older material, I'd have to come up with new ways to handle interaction with symbols, which would add more development-time than if I could just mimick the already integrated solutions in the material I'll be rebuilding. But that is of course only specific to that particular project.

                       

                      As I'm in no way a natural born coder, I'd appreciate it, if you could mention a few alternative ways to interact with symbols and their own timelines. I could perhaps use these workarounds while developing new interactive animations/minigames, so I can hopefully get to know the HTML5-side of Animate better and be developing in something else other than Edge

                      • 8. Re: Animate CC - Nasty HTML5 Bug
                        ClayUUID Adobe Community Professional

                        The first post of this thread already lists several mitigation strategies. Further advice would be impossible without knowing exactly what problems you're having.

                        • 9. Re: Animate CC - Nasty HTML5 Bug
                          abnesher Level 1

                          Sorry, I missed those last bullets.

                           

                          I'll make a few experiments implementing your suggestions. Thanks a lot for your effort

                          • 10. Re: Animate CC - Nasty HTML5 Bug
                            gperry91 Level 1

                            Even if there are workarounds, this is a bug that absolutely needs to be fixed. Seriously.

                            • 11. Re: Animate CC - Nasty HTML5 Bug
                              insanyrivas Level 1

                              it is April of 2017 and this bug is still not fixed. It makes the IDE useless.

                              • 12. Re: Animate CC - Nasty HTML5 Bug
                                ClayUUID Adobe Community Professional

                                Really? I wonder how myself and so many other people are managing to use it then.

                                • 13. Re: Animate CC - Nasty HTML5 Bug
                                  philipw15367395 Level 1

                                  It looks like an issue of instantiation of objects in the IDE. When an object or movieclip is instantiated (created) on the Stage it is given a unique instantiation ID (which we never see). It is instantiated to the current frame and layer. If (alt) drag the key frame that the object is on in will maintain the same instantiation ID. If you copy and paste the object to a new layer it will create a new instantiation ID. If you alt-drag an object on the stage to duplicate it will create a new instantiation ID.

                                   

                                  When you publish an HTML5 canvas the instantiated object is created in HTML5 and javascript and may be built with a function. If you explicitly give an object an instance name it will create a new function to build the object when publised. This function's name is appended with an interaiton (_1, _2, _3) based on the IDE's instantiation ID. This creates a problem when you try to reference the object based on the instance name because the IDE has published the HTML5 where those object names have been appended. So if you call an movieclip, graphic or button object with a specific instanceName the object may not be available because Animate has called it instanceName_2.

                                   

                                  I can see where this might be okay with elements drawn on the stage need to be instantiated and published as separate instances. I suppose HTML5 and JS doesn't have the same capacity to manage library items like Flash did. Using an instanceName becomes a little  more challenging if an object is instantiated more than once and the object needs to be called by instanceName.

                                   

                                  - I could be off, I'm only a few days into using Animate and trying to reconcile my AS2 skill set with HTML5.