3 Replies Latest reply on May 16, 2016 8:14 AM by ClayUUID

    Need help, FLA to HTML5

    Ahmedipa

      Using Adobe Professional, I have FLA with component that points to mp4 over rtmp, published and linked html to my site. I need to import the FLA into Animate, convert to html5 and publish the html and link it on my site? Adobe Animate opens the current FLA and shows the rtmp://***/vod/mp4:/2016/012016/0107a2016.mp4 as source in Component Parameters. Here is one example - 0107a2016 . I have about 4000 talks to convert. Thanks in advance.

        • 1. Re: Need help, FLA to HTML5
          ClayUUID Adobe Community Professional

          HTML5 Canvas mode uses a different scripting language and multimedia API than ActionScript mode, so any code will have to be manually rewritten. Components will not work at all.

          1 person found this helpful
          • 2. Re: Need help, FLA to HTML5
            Ahmedipa Level 1

            Thanks for the prompt reply. Now the next question, how to embed that streamed mp4 in HTML5 Canvas.

            • 3. Re: Need help, FLA to HTML5
              ClayUUID Adobe Community Professional

              You'll have to float a native HTML video element over the stage. Here's some simple code to manage this sort of thing:

               

              // Create a DIV layer above the canvas
              // Accepts ID, X, Y, width, height, HTML content, and CSS styling (optional)
              // CSS styling is a CSS-formatted literal string
              mkDiv = function(id, x, y, w, h, html, css) {
                  var d = document.createElement("div");
                  d.id = id;
                  d.style.cssText = "position:absolute; left:" + x + "px; top:" + y + "px; width:" + w + "px; height:" + h + "px; overflow:auto;" + (css ? css : "");
                  d.innerHTML = html;
                  canvas.parentNode.appendChild(d);
              }
              
              // Remove an element by id
              rmDiv = function(id) {
                  try {
                      var elem = document.getElementById(id);
                      elem.parentNode.removeChild(elem);
                  }
                  catch(e) {}
              }
              

               

              Then call like so to create an HTML5 video element above the stage canvas:

               

              mkDiv("myvidplayer", 0, 0, 640, 480, "<video src='myvideo.mp4' autoplay controls></video>");
              

               

              Note however that if the canvas is set up to scale to the browser size (incorrectly called "responsive" mode by some), things get a lot more complicated. You'll have to use CSS transforms to sync any overlaid DIVs with the size of the canvas.