Adobe Creative Cloud

August 24, 2016 /HTML5 /WebGL /

Creating HTML5 Ads with Animate CC: Google HTML5 Ad Templates

So, as a reward for you readers who have made it to the end of my series on creating HTML5 ads with Animate CC (see more posts on this), I am providing you with 2 updated AdStarter FLAs in order to help you get started using Animate CC for HTML5 ads that will be served through one of Google’s ad-serving solutions.

Specifically I am sharing separate templates for standard HTML5 ads that are compatible with both Google DoubleClick and Google AdWords. It’s probably worth mentioning that the 2 templates are identical except for the fact that the AdWords template uses the Google Exit API for click-through handling which allows you to easily limit the clickable area to specific elements if desired. This can come in handy because HTML5 ads that are created with Animate CC, will by default, be clickable on the entire area of the ad when uploaded into the AdWords platform.

Please understand that this is a behavior of the AdWords platform and not a limitation of Animate CC. In fact, when using Animate CC it is extremely easy to assign click-through functionality to individual elements such as simple Buttons, invisible Buttons and MovieClips in order to define and restrict the clickable areas of your ad unit. You are free to take this approach with ads created for DoubleClick, however AdWords handles this differently, which is why the template leverages the Google Exit API.

For more information regarding the specific HTML ad requirements for both AdWords and DoubleClick, please refer to the following links:

The AdStarter FLAs automatically leverage the most commonly used features covered in this article, specifically the new template tokens, high-DPI scaling and preloader support. The other features that I’ve introduced in this article are ones that you can decide to enable through the Publish Settings on an as-needed basis.

Now if you’ve read my previous articles then you may recall that AdHelper handled high-DPI scaling and my custom template handled preloader support for you. With these new FLAs that I am providing, Animate CC is now handling those features instead. That said, the custom templates still provide you with the option to leverage AdHelper for animation control, performance monitoring and backup logic. If you wish to continue to use AdHelper, simply uncomment the AdHelper code within the HTML output.

Download the custom AdStarter templates here.

There is no better time than the present to begin using Animate CC for HTML5 ad creation. The program has continued to evolve and currently features a powerful collection of tools that are extremely easy to use and that facilitate an incredibly efficient workflow.

HTML5, WebGL

Join the discussion

  • By Guest - 9:48 AM on August 24, 2016  

    How to create HTML5 games with Adobe Animate? These tutorials would be pretty helpful and popular.

  • By Sergey - 12:55 AM on August 31, 2016  

    Thanks for the link upd!!!

  • By Josh - 6:35 AM on September 1, 2016  

    Are there more files for these? I get:
    “$CENTER_STYLE $PRELOADER_DIV $ANIMATE_CC_SCRIPTS” on publish.

  • By Guest2 - 9:13 AM on September 1, 2016  

    Cory, thanks so much for providing these tutorials and example flas! I’d be really interested in a post discussing how to build expanding banners, including YouTube videos, etc.

  • By Max - 11:34 PM on September 14, 2016  

    Amazing, thanks Cory!
    Quick note: I don’t know if you noticed, but on Mobile, when you scroll over the banner, it triggers the clickthrough function. Do you have a workaround for this?

  • By George - 2:58 AM on September 28, 2016  

    Hi Cory! Thank you very much for this sample file. Is it HDPI Ready template? Because i cannot find the $RESP_HIDPI token in it 🙂

    • By George - 5:33 AM on September 28, 2016  

      Ohh sorry, i see it now in Line 106 😉

  • By George - 6:20 AM on September 28, 2016  

    Do you think it is possible somehow to “burn” new Publish Profiles into Animate? 🙂 Every time i open a new document, i can see only “Default” profile. Okay alternatively i can store profiles and templates in FLA files, but it would be much simpler if the generated and saved profiles were available always, even if i open a completely new canvas document.

  • By Marcus - 7:26 AM on October 7, 2016  

    Hi Corey, these files don’t work when they are uploaded to double click studio. The enablers are missing can you amend please 😉

    • By Marcus - 4:54 AM on October 10, 2016  

      Hi everyone, I figured out how to add the enabler code to Corey’s adstarter banners and they were approved by double click. I will add the source code to my website at realdesigns.info. Thank you.

  • By Max - 3:08 PM on October 9, 2016  

    Hey guys, any feedbacks on my post form September 14th? About the mobile scroll bug? Cheers!