Animate CC and HTML5 banners

Buster · June 3, 2016

Hello,

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 (https://support.sizmek.com/hc/en-us/articles/206445016--howto-Build-a-Sizmek-Compatible-Adobe-Animate-CC-Standard-and-Polite-Ad)

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>
<head>
<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”>
</head>
<body>
<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>
</div>
<img src=”assets/dataxu-logo-white.png” id=”logo”>
<a href=”#” id=”cta_1”>Download</a> </div>
</div> </div> </div> </body>
</html>

somnamblst · June 3, 2016

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

Regarding:

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"
onclick="javascript:window.open(window.clickTag)"></canvas>
		
	</div>
<script>
    // 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,
				'modestbranding':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'); -->

        }
    }

 
</script>

ohem · June 3, 2016

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.

Notifications

Messages

Animate CC and HTML5 banners

Warning: Please note

Recommended Posts

Buster

Link to comment

Share on other sites

somnamblst

Link to comment

Share on other sites

ohem

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members