2 Replies Latest reply on Sep 3, 2015 8:53 AM by clickdrag

    How do I control the size of assets output from Flash CC, when creating a HTML5 animation?

    clickdrag

      I am converting a Flash CC animation to HTML5. The flash animation contains a photo which is a 6K transparent GIF. However, when I convert this animation to HTML5 and test it in my browser, this image file is output as a PNG at 15K.

       

      I had hoped it would just output the 6K transparent GIF. Instead it is outputting a PNG which is over 3 times the size. Could anyone tell me how I can control the size of assets that are output when Flash CC creates a HTML5 animation?

       

      I need very small file sizes for my HTML5 animation, so when Flash triples the size of my original image files that's a big problem. Thanks for any advice.

        • 1. Re: How do I control the size of assets output from Flash CC, when creating a HTML5 animation?
          Colin Holgate MVP & Adobe Community Professional

          You can use www.tinypng.com to reduce the size of your images. Should end up being a similar size to a gif, but it can contain true alpha, not just a key color.

           

          After you have published once you could process the images to optimize them, and also turn off the images option in the Publishing settings. That way your optimized images won't get overwritten, and publishing will be faster.

           

          I tend to work slightly differently, especially as you often have to do testing with files on a server. I put the optimized versions of the images in the server images folder, and in Flash I do a regular test movie (with it exporting non-optimized images), and if I have modified or added new images, I optimize those and put them on the server. The server test will be a good indication of performance for other people.

           

          One huge performance improvement is to add this setMaxConnections line to the HTML:

           

          var loader = new createjs.LoadQueue(false);
          loader.setMaxConnections(6);

           

          that alone can make the page load six times faster.

          • 2. Re: How do I control the size of assets output from Flash CC, when creating a HTML5 animation?
            clickdrag Level 1

            Thank you so much! You've made my day a lot less stressful.