0 Replies Latest reply on Feb 24, 2016 1:29 PM by mcseay

    HTML5 Banner Production Tips?

    mcseay Level 1

      Does anyone have any compression tips for reducing file sizes for HTML5 banners?

      Finally making the transition to native HTML5 and I am not able to get files sizes down previously like before using Flash.

      The compression features in the past SWF publish process are no longer available.

       

      Here is what my workflow looks like so far...

      - Make sure only visible layers are exported

      - Don't use spritesheets (due to non-support by DoubleClick)
      - Use hosted libraries

      - Further compress exported images with tinypng.com

      - Remove comments and compress code in HTML/JS files

      - Zip html/js/images together for final delivery

       

      Most exported images come out as PNGs due to the nature of the banner designs (for transparency/overlay).

       

      Any ideas or tips would be appreciated. Thanks!

       

      BTW, some collected snippets for anyone else needing banner related functionality (from various sources).

       

      // loop 3 times - put on last frame /////////////////////////////////////

      if(!this.alreadyExecuted){

      this.alreadyExecuted=true;

      this.loopNum=1;

      } else {

      this.loopNum++;

      if(this.loopNum==3){

      this.stop();

      }

      }

       

      // clicktag ////////////////////////////////////////////////////////////////////////

      In HTML file, add to the canvas div

        onclick="javascript:window.open(window.clickTag)"

      and this var in your head

        <script type="text/javascript">var clickTag = "https://www.google.com";</script>