5 Replies Latest reply on Aug 14, 2014 7:48 AM by sinious

    Flash HTML5 Canvas File Out-Of-Sync. Why?

    Pixelcrane Level 1

      Hello all,

       

      I would like to know why similar Edge Animate and Flash HTML5 Canvas projects do not perform the same across browsers/machines. I have a CC subscription using Flash Professional CC 13.1.0.226 and Edge Animate 2014.0 release. Does each application render the files differently when the HTML, javascript, other resources are generated?

       

      Here are my links/examples…

       

      ------------------------------

      EDGE ANIMATE (EA):

      http://pixelcrane.com/modsed/ea/test01ea/ea-test-01.html

      Source files here: http://www.pixelcrane.com/edge-animate-source.zip

      ------------------------------

       

      ------------------------------

      FLASH HTML5 CANVAS (FLC):

      http://pixelcrane.com/modsed/ea/test01flc/test01.html

      Source files here: http://www.pixelcrane.com/flash-canvas-source.zip

      ------------------------------

      I am testing on:

       

      - MacBook Air (1.8GHz Intel Core)

      - iPhone with latest iOS

      - iPad

      - Compaq Q laptop

      (64 bit PC; 1.7GHz; Windows 8.1; 2 GB RAM; current IE, Firefox, Chrome)

      - HP Tablet

      ------------------------------

       

      The EA file works fine on the Compaq PC. The EA voice-over and animation are in sync on the Compaq PC. But the FLC file is not in sync on the Compaq PC. The FLC animation is waaay behind the voice-over in Firefox and Chrome. I am using preloadJS to preload the audio in the FLC.

       

      The 'BEGIN' button is in each example so the files will run on iPad and iPhone.

       

      --- Again, my question is why won't this basic FLC file run in sync on my PC? ---

       

      Thank you so much for taking the time to read and try to answer this. I have tried a couple of 'fee'lancers, but no one can get the voice-over and animation FLC file to sync. If I have left out any pertinent information, please let me know.

       

      Kind regards,

      Brett

        • 1. Re: Flash HTML5 Canvas File Out-Of-Sync. Why?
          sinious Most Valuable Participant

          It's worth noting Edge Animate uses edge.js/edgeActions.js/edgePreload.js/etc, while Flash Pro uses CreateJS/EaselJS, etc.. The difference can be in the libraries.

           

          JavaScript (sans-workers) runs in a single thread so the performance is highly dependent on the browser, your computers hardware and what's going on in the OS overall, just like Flash is. Chrome was known as the battery killing browser due to operating at a 1ms interval at all times whereas most other browsers idled at 10ms (10x difference in speed). It made Chrome feel a bit quicker but always running 1ms made it strain systems. Modern Chrome no longer does this and does idle down, but this should illustrate there's a ton going on under the hood in the system. With canvas, this becomes something to note. Syncing itself can be a nightmare for this and many other reasons on any specific system. Just $0.02

          1 person found this helpful
          • 2. Re: Flash HTML5 Canvas File Out-Of-Sync. Why?
            Pixelcrane Level 1

            Thank you so much for the reply, sinious! I believed that computer configuration was a suspect. But you are saying that Edge and Flash use different JS libraries, correct?

             

            This is very important because the sample I shared was one of hundreds of Flash CS4 / AS3 files that have to be transposed. I thought I could just tweak things by converting them to HTML5 Canvas with Flash CC, but it's looking like I have to rebuild everything with Edge Animate in order to get animation and audio to sync. This is a bummer because i have animated lines with shape tweens from the original Flash CS4 work. And, Edge Animate currently does not have a tool to import or transpose those elements. Rats. Big, rotten, rats.

             

            Thanks again.

            • 3. Re: Flash HTML5 Canvas File Out-Of-Sync. Why?
              sinious Most Valuable Participant

              I do want to make it clear that the differences between these libraries is not immediately apparent to me. People have noticed that the library names are different (as you can see in your own example). I figured that might be worth pointing out.

               

              What I would expect is both of these libraries will end up working just fine. The best thing to do if you feel you've hit a bug is to report it to the bugbase to get it evaluated. Search around here for your issue to see if the bug is already reported and if not, report it yourself. If it's found to be reproducible then Adobe may be able to help the CreateJS team fix the issue, and you could use Flash to export your project.

               

              Also consider hitting the CreateJS site to grab the latest version of the library, just in case this is a known issue that has already been resolved. Simply overwrite the version Flash exports with theirs:

              http://www.createjs.com

               

              Good luck!

              1 person found this helpful
              • 4. Re: Flash HTML5 Canvas File Out-Of-Sync. Why?
                Pixelcrane Level 1

                Hello. I have reached out to experienced JS developers and created a discussion on the CreateJS site as per your recommendation. No responses as of yet. I also recreated the file with the latest version of Flash. You can see it here: pixelcrane dot com/modsed/flcc/test01/test01 dot html

                 

                I also included a screenshot of my PC laptop's configuration. Based on your expertise, does my system have the ability to run theses FLC files correctly? Sorry, but I build on a Mac and am only using the PC for testing.

                system.jpg

                • 5. Re: Flash HTML5 Canvas File Out-Of-Sync. Why?
                  sinious Most Valuable Participant

                  I was on vaca, sorry for the late reply.

                   

                  I can't see the video card but from what I see on the rest of the spec, those stats are extremely low.

                   

                  An OS (especially modern) consumes 700~1GB RAM itself. Depending on the video cards amount of RAM, if it requires using RAM, you already only have around 1GB to share. So your hard disk will be thrashed on a system like that struggling to keep RAM managed.

                   

                  The CPU is very slow, in the value line. You can look on several sites which measure various components to see where you fall for performance. For example, Passmark (fairly reliable at quick glance) puts your CPU in the mid to low (value) range and has a score of 808. A mid to high end, standard CPU these days (~$300 range) is around 10,000 and above:

                  http://www.cpubenchmark.net/midlow_range_cpus.html

                   

                  1.7GHz is pretty slow and without any Intel-esque turbo boost, the CPU is really going to be sluggish.

                   

                  I would say that laptop is designed to read email and surf the web. I think it would even struggle to play HD video, let alone render real-time modern Canvas 2d animation with any level of consistency. If you do "anything else" while the animation happens, or if the animation is fairly layered, this machine will bog down. It should be entirely visible in your task managers performance tab. Most likely you'll see the CPU peg out at 100% and memory not far behind it. Take a glimpse.

                   

                  I think your entire issue is that computer, not CanvasJS/EdgeJS differences.

                  1 person found this helpful