8 Replies Latest reply on Mar 11, 2014 10:48 AM by mrwizzer2

    Flash to HTML5

    mrwizzer2 Level 1

      I just tried my first test exporting an existing Flash project to HTML5, and I must say, I was pretty impressed.

       

      Mind you, it doesn't magically convert everything over at the press of a button, but it gives you an excellent starting point from which to begin.

       

      All ActionScript is commented out, so you need to recode all of your actions in Javascript, but luckily Javascript is similar in a lot of ways to Actionscript 3.

       

      What has me scratching my head is a fairly basic item... sync.  My tweened animation no longer stayed in sync with the audio.  (All audio set to Streaming Audio is automatically switched over to "Event" audio, by the way).

       

      So I did a quick test in a fresh project file and placed a "beep" .wav file on the timeline every 30 seconds, (with document's frame rate set to 30 fps).

       

      Instead of a steady rate of beeps every second, it sounded more like a heart monitor, where the beeps would speed up and slow down at random.

       

      Does anyone know why the sync is so inconsistent?  It's a basic essential that timeline-based animation be able to occur at definite moments in time, so there's got to be a fix, right?

       

      Thanks!

        • 1. Re: Flash to HTML5
          mrwizzer2 Level 1

          Here's a simple example:   http://www5.scoe.net/mfox/html5/synctest.html

           

          Document is 30fps, 300 frames long, with an audio event and a red square graphic inserted in a keyframe every 30 frames (at frame 30, 60, 90, etc.).

           

          Listen to it for fifteen seconds or so and see how the rhythm varies sporadically, with the image never quite appearing at the same time as the beep.

          • 2. Re: Flash to HTML5
            robdillon Most Valuable Participant

            Your sample stays in synch for me. I'm looking at it on Chrome Version 33.0.1750.146 on a MacBook Pro. Have you tried different browsers?

            • 3. Re: Flash to HTML5
              mrwizzer2 Level 1

              Rob, thanks for your input.

               

              You're right, I hadn't checked it in various browsers, and that seems to reveal some issues...

               

              After checking the file in different browsers, just as you say, it works just fine for me in Chrome, but in Safari, (my default browser), that's where I see the heart patient inconsistency, and in Firefox, the flashes seem stable, but I hear no audio.

               

              Sigh.  This confirms what I suspected when it comes to entering the world of HTML5 development...  it looks like we're all facing a new gigantic set of headaches in trying to get our work to perform as expected across the myriad browsers. 

               

              I guess we've been pretty spoiled with Flash up to now, exporting once and feeling confident that it will work consistently in most browsers.  I would have thought HTML5 would be a little further down the road by now to being more consistent from browser to browser, but it looks like it's got a long way to go if an animation this simple has this much trouble performing.  : /

               

              Is there an approach to this I may be overlooking?  If anyone has more experience in this Flash to HTML5 conversion, I'd love to hear your thoughts on the matter.

              • 4. Re: Flash to HTML5
                robdillon Most Valuable Participant

                Firefox is going to need a .ogg audio file. This page may give you some insight: http://www.w3schools.com/html/html_sounds.asp

                 

                Yes, just as you get comfortable with Flash, things change and now you have a whole new set of problems to overcome.

                 

                Have a look at Adobe's Edge set of html5 animation tools: http://html.adobe.com/edge/animate/You might be better off not using Flash at all.

                1 person found this helpful
                • 5. Re: Flash to HTML5
                  mrwizzer2 Level 1

                  Thanks for the link to the .ogg and general html5 audio info.  

                   

                  I understand that I'll need to create the alternative .ogg files so that they're available for playback, but I don't see how to have Flash point to the ogg files, (especially since ogg isn't a file type you can import into Flash).

                   

                  Interestingly enough, I tried just adding the .ogg files to the "sounds" folder Flash creates when exporting to html5, and that did, surprisingly, enable Firefox to play the audio, but it plays each sound file twice in succession. 

                   

                  I must assume there's a way to control that, as audio playback is such a basic necessity, but I'm not having any luck finding any kind of detailed information on implementation.  Do you have any suggestions, Rob?

                   

                  Thanks!

                  • 6. Re: Flash to HTML5
                    robdillon Most Valuable Participant

                    Not really. That's why I suggested that you look at Edge. It will write the javascript that you need. Trying to sort out what might be wrong with Flash's translation can be very time consuming.

                    • 7. Re: Flash to HTML5
                      mrwizzer2 Level 1

                      For the record, I just found that the way to add .ogg support for audio playback in Firefox/Opera is as follows:

                       

                      In the manifest section of the .js file, you need to manually change the following line from

                       

                      {src:"sounds/mySound.mp3", id:"_1"},

                       

                      to:

                       

                      {src:"sounds/mySound.mp3|sounds/mySound.ogg", id:"_1"},

                       

                      Flash will overwrite this, however, so you need to be sure this line is edited correctly when finalizing your project.  (Flash _really_ should include the reference to the .ogg file automatically since it's required for cross-browser compatibility.  We shouldn't have to edit this manually.)

                      1 person found this helpful
                      • 8. Re: Flash to HTML5
                        mrwizzer2 Level 1

                        Thanks for the suggestion to try Edge Animate, Rob.  I had explored it previously, but was hoping not to have to learn yet another program when I have so many years of experience with Flash.  That said, I gave it another whirl and had to laugh when I was trying out one of their built-in tutorials on adding sound...

                         

                        Their built-in example wouldn't perform properly in Safari!  Worked in other browsers, but not Safari, so I'm finding myself right back in the same place of having to try and wrangle solutions for the various browsers.

                         

                        Wouldn't it be nice if there was just one unified standard, once and for all?  Sigh.