Jump to content


Animate CC and HTML5 banners

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


I am slowly getting to grips to greensock and am enjoying the process but in the meantime I find a lot of tricks easier to achieve using the timeline in Animate. However I am yet to actually create an Ad for commercial purposes using this software because I am nervous about what kind of other code I need to include since I am not sure publishers and alike would be used to the file structure etc and might freak out.


​This is the only spec I have (see below).


Can anyone advise me if it is too risky to create HTML5 banners for commercial banners using Animate at this stage bearing in mind the only specs I have is this code (see bottom of post).



On a separate note; For example on Sizmek, flash talking and DC, can we even use the actual timeline for animation? The first thing I saw on their website was this:

"Note: Your Adobe Animate project needs to be built with a single frame architecture". 
Which I assume means everything needs to be coded on one frame?

Source (





​If this is the wrong from for the job please advise.


Many thanks. 




Sample HTML5 File

Below is an example HTML5 file. It illustrates several key points:
• Proper structure and rendering as an HTML5 page.
• Proper inclusion of the ‘ad.size’ & ‘click.through’ meta tags.
• An element exists with an ‘id’ matching the ‘click.through’ meta tag.
• Use of web fonts.
• Loading media files from a subfolder.

<!DOCTYPE html> <html>
<meta name=”ad.size” content=”width=160,height=600”> <meta name=”click.through” content=”cta_1”>
<link href=”https://fonts.googleapis.com/css?family=Open+Sans” type=”text/css”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<meta name=”viewport” content=”width=device-width, initial- scale=1.0”>
<link href=”assets/style.css” type=”text/css”>
<div id=”ad”>
<div class=”page-container”>
<div id=”page1” class=”page-wrapper lightbox”>
<div class=”page-content”>
<div class=”subline-txt”>”strongest current offering.”</div> <div class=”headline-txt”>
<div>Read The Forrester WaveTM: Demand Side Platforms,</div> <div>Q2 2015 to see why</div>
<div>DataXu has the</div>
<img src=”assets/dataxu-logo-white.png” id=”logo”>
<a href=”#” id=”cta_1”>Download</a> </div>
</div> </div> </div> </body>
Link to comment
Share on other sites

I don't build for Sizmek, so your mileage will vary, but I have added a Youtube player to an Animate Canvas export.




Your Adobe Animate project needs to be built with a single frame architecture". 
Which I assume means everything needs to be coded on one frame?


That means your timeline animation, is a nested movieclip. It can still have a timeline.


Here is a youtube player implementation.

<div id="wrapper" style="background-color:#eeeeee; width:300px; height:600px"> 
<div id="player"></div>
	<canvas id="canvas" width="600" height="1200" style="background-color:#FFFFFF; width:300px; height:600px"
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '182',
            width: '298',
            videoId: '7iRdz7lrlt0',
            playerVars: {
                'autoplay': 1,
                'controls': 1,
				'fs': 0,
				'rel': 0
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange


    var playerReady = false;
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        playerReady = true;


    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            <!-- alert('done'); -->



Link to comment
Share on other sites

I'm not sure why it says that.  I've built multiple standard HTML5 banners for Sizmek using Adobe Animate, and I had my animation on the main timeline without any issues.


Maybe it's a requirement for polite banners, but I'm still not sure why that would be necessary.  Either way, it doesn't hurt to put things in a movie clip though.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.