7 Replies Latest reply on Nov 2, 2016 12:08 AM by Mastercaster

    HTML5 - files to use

    Mastercaster
      I am working in HTML5 canvas for the first time making a banner for a client. What does the client need to upload the final work?
      In Flash it was the swf - but now I am not sure what to send?

       

        • 1. Re: HTML5 - files to use
          kglad Adobe Community Professional & MVP

          you'll publish, at least, an html and .js file (that will have the name assigned in the publish settings panel (file>publish settings).  by default those files are published to the same directory you used to save your fla.

           

          if there are bitmaps/sounds/other assets needed, they'll be published too in subdirectories (indicated in your publish settings panel).

           

          the easiest way for you to see what's needed is to save your fla in a new directory. by default, your published files will be in that directory, too.  so, after publishing, all the files (except the fla) in that new directory are needed to display your html5 banner.

          1 person found this helpful
          • 2. Re: HTML5 - files to use
            just.emma Level 4

            To add to that, each individual banner (html file, JS, images) needs to be zipped up in it's own folder for trafficking.

             

            You'll also need to find out how the ads will be served; Adwords, Sizmek, DCM, Admob, etc all have totally different APIs.  You'll need to set up a clickTag (which I can help with), but the way to do this will differ depending on the ad server.

            1 person found this helpful
            • 3. Re: HTML5 - files to use
              Mastercaster Level 1

              Thanks for your support!
              This is a new world to me with the server hosting of banners. But great now to know that this is how it works - thanks!
              I will go with Sizmek, but I am totally blank on how to proceed.
              Looking at their website does not really help me

              • 4. Re: HTML5 - files to use
                just.emma Level 4

                marjantrajkovski was nice enough to share some templates with the forums: http://www.marjantrajkovski.com/html5-banners-templates/html5-banners-templates.zip

                 

                Use the one called adobe_animate_cc_sizmek_banner_ad_template.

                 

                If you want to import the same HTML template settings into another file, go to File > Publish Settings > Advanced and export the template to your desktop.  To import it to a new file, follow the same steps and select "import".

                 

                In your new file, be sure to also copy and paste the button frame (with scripts) to your new file.

                1 person found this helpful
                • 5. Re: HTML5 - files to use
                  Mastercaster Level 1

                  Thanks very much!

                  One thing I am unsure about is what to write as action for the clickTag.

                  • 6. Re: HTML5 - files to use
                    just.emma Level 4

                    It's in the FLA templates that I linked above. 

                     

                    this.clickthrough_btn.addEventListener("click", clickThroughFunc.bind(this));

                     

                    function clickThroughFunc() {

                      EB.clickthrough();

                    }

                     

                    You can open the adobe_animate_cc_sizmek_banner_ad_template file, right click the frame, copy frames, and paste the button and script into a new file.

                    1 person found this helpful
                    • 7. Re: HTML5 - files to use
                      Mastercaster Level 1

                      Thank you very much for your help - I really appreciate it!