3 Replies Latest reply on Oct 30, 2015 12:20 PM by Colin Holgate

    Html5 and Sprite Sheets

    darreni31493068

      Hi Everyone

       

      I hope someone may be able to help me. I have started making HTML5 web banners using the HTML5 canvas on Flash cc2015. I have got the animation to work without using sprite sheets but I have been told the file is too big for the ad servers. I thought I could reduce the file size by using sprite sheets.

       

      My problem is that when I use a sprite sheet. When I open the html file within my browser all I get is a bank white box and not my animation. I don't know if the HTML is not linking to the sprite sheet of if I have something wrong with my flash file as when I make a very basic animation it works for me.

       

      Below is a screenshot of my HTML file with the code. Is there something here that may be causing the animation not to work?

       

      Screen Shot 2015-10-27 at 17.26.25.png

      Thanks

       

      Darren

        • 1. Re: Html5 and Sprite Sheets
          Colin Holgate MVP & Adobe Community Professional

          Sprite sheets use a JSON file, which changes the security conditions, stopping it from working as a local test. The animation should work ok if you put the files on a server somewhere.

           

          It won't help with the file size though. You will end up with one large image file instead of lots of smaller files. You could take the image to this site: www.tinypng.com , and it will optimize the image as a custom 8 bit with transparency PNG. That should dramatically reduce the file size, and still look ok. Just replace the same named file in your images folder.

          • 2. Re: Html5 and Sprite Sheets
            ClayUUID Adobe Community Professional

            Yeah, the sprite sheet feature will happily turn a bunch of nicely compressed JPEGs into a single massive multi-megabyte PNG file that also doesn't work when run locally. This came as quite a surprise to us when Adobe added the feature and made it the default, even on pages that were originally developed without it. It was so much fun going back through every single page we'd previously developed and manually turning it off in the publish settings.

            1 person found this helpful
            • 3. Re: Html5 and Sprite Sheets
              Colin Holgate MVP & Adobe Community Professional

              The main advantage of sprite sheets is that it reduces the number of image files that have to be downloaded. The downside is the JSON file, which changes the security situation, and might prevent local testing.

               

              If you have any reason to stay with individual images and not a spritesheet, you can increase the number of images that are downloaded at a time. Find the first line I show here, and add the second line. It will make page loads dramatically faster:


                var loader = new createjs.LoadQueue(false);

                loader.setMaxConnections(6);

              1 person found this helpful