Jump to content
Search Community

Basic DoubleClick Code Snippets – Resources? Templates?

Doctor XTN test
Moderator Tag

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

Hi All -

 

Edit: I plan to hand code everything.

 

This may sound incredibly daft, but I'm in search of master files of code I can modify for ads to upload to DCM. Not the GSAP part, but the rest.

 

I've used GSAP with Flash for years and it's my great, great love affair, but am not very bright when it comes to CSS or JS. The tutorials do an excellent job of giving me enough insight to use GSAP, but the additional code required for DC ads seems to be scattered and elusive.

 

I need to make sure I get that stuff right because I desperately want to get away from the blunt tool they call GWD but my client has little patience for failed creative.

While I've been doing a lot of searching, I'm coming up overwhelmed and confused. Maybe I just don't know what exactly to look for. Again, designer not coder.

 

Looking at the DCM support site, I'll need master files that have the following set up (an .HTML, a .CSS and a .JS, right?):

 

- HTML5 Enabler

- Polite Load

- Visibility Handler

- Exit

 

Isn't there a template out there? Why isn't there a template out there? Seems like a pretty straightforward copy pasta. Standard code that one would use in every ad. 

 

Any help is greatly appreciated. Got something I can try?

It may seem elementary to most, but if I had something I could simply change the size and add elements/animation to pass off to my campaign manager that would pass their QA, I could focus on manipulating the GSAP.

 

Cheers,

Christian

  • Like 1
Link to comment
Share on other sites

Christian,

 

It was a very confusing time. Luckily the company I work for does enough $$$$$$$$$$, that we had a google employee shepherding us through the transition.

 

The good news is unless you are doing video, expanding, dynamic; unusual sizes like lightbox floating, you don't need to consider your banner ads rich media. That means no DCRM enabler.js,  no exits, and best of all no GWD.

 

DCM is not rich media, DCRM is. Zipped FLA and modified HTML file and JS file attached.

 

just drag the button layer to the bottom of the stack it appears to effect the rollover on the CTA.

 

Here is the validator for DCM

 

https://h5validator.appspot.com/dcm

animateCC_banner_2X.zip

  • Like 2
Link to comment
Share on other sites

Edit: I plan to hand code everything.

 

If You plan this you have to 

 

1. export all assets

2. create CSS and html from layout

3. tween it with GSAP

4. decorate the html with custom provider code

 

You will get lost very fast between the thorny bushes of CSS.

 

.detmaotua eb t'nac hcihw pets ylno eht si .3 ehT

  • Like 1
Link to comment
Share on other sites

Hey thanks all. I'll be trying this out come the beginning of the work week. Keep the replies coming if anything jumps out at you.

 

My story is like most. Hated working in Flash because I hated the timeline. Found GSAP in 2010 and I went from being a Flash hater to a Flash sexpert. 

 

Skip ahead to Sept 2015. Day three of a new consulting gig they start emailing me that my ads weren't working in Chrome. We all know why.

 

Of course I'm the only digital designer in a pool of print people. My Art Director thinks she knows digital but certainly not Flash. So they say 'figure it out'. 

 

With that pressure and the need to feed my Bookie's family I immediately turn to Edge which somehow wasn't making it's way through the AdWords QA process. Deadlines. Pressure. Head banging on desk. 

 

I finally figure out all the right steps using Google Web Designer but my animations are neither sexy or inspired. I look bad. I wonder when they're going to accuse me of over promising and under delivering. 

 

I need GSAP back in my life. I haven't tried Animate yet as it took a miracle just to get the demo installed on my corporate machine. 

So according to what I read in the thread Retropunk provided, it seems with a little insider knowledge we can use Animate with GSAP and have it properly packaged for DoubleClick? If that works (I realize there will be issues with fonts and vectors, but I'm happy with just being able to tween by code rather than timeline), then I'll be extremely happy and grateful.

I feel like there should be a some sort of cheat sheet on how to make it all foolproof. I'll certainly be documenting it.

 

So yeah, I know some of it is in the other thread, but if anyone has anything to add, that would rock. 

 

AND TRIPLE THANK YOU TO THOSE WHO CHIMED IN.

 

XTN

Link to comment
Share on other sites

All my banners since December have been createjs canvas output, initially exported from Flash CC 2015, now Animate CC which is Flash renamed.

 

The hiccups that are differences between AdWords and DCM, are that AdWords has stricter rules regarding hosted library files. I am lucky, in that any AdWords buys are just static, so I am using the single hosted SSL compliant creatjs file.

 

DCM does host GSAP.

 

The biggest advantage to Animate are fonts (any font you want, no web safe font stacks, no PNG images of copy) and Compact Shapes. Grant Skinner said his goal was to have SWF era file sizes. Just because we can go to 200K does not man we should.

 

Animate like Flash before it does an amazing job of minifying vector content. I use TinyPNG for transparent bitmaps.

 

You can either use GSAP in your JS file or on the timeline.

 

Another cool feature is scale content, when you change stage sizes. I use it going from 728x90, to 468x60 and then to 320x50, and use the scaled bitmap dimensions to make new smaller bitmaps for those ad sizes, after adjusting my other elements for much smaller ad dimensions.

  • Like 1
Link to comment
Share on other sites

*Shameless plug*

 

If you're familiar with things like npm and Node.js, you could give Pyramidium's Yeoman generator ago:

 

https://github.com/pyramidium/generator-bannertime

 

Its a template generator for DoubleClick, DCM, Sizmek, Adform, Atlas, and None (iAB), all templates use a polite loading script with links to the GSAP Cloudflare CDN, (but you can switch this out to any CDN).

 

You can copy one size to another or a different format using:

yo bannertime:copy

And it all runs with gulp, for SASS, JShinting and overall minification, helper tasks to create backup.jpgs from the last frame of the timeline.

  • Like 1
Link to comment
Share on other sites

@joe_midi that looks promising.

Do you have access to any verbose examples on set up/workflow/creation? I would love to see more.

A framework like this could go a long way in helping devs standardize their process.

 

Thanks for sharing! Very cool

Link to comment
Share on other sites

  • 1 month later...

@joe_midi - I second @retropunk! I've been watching the project with great interest, and have also been playing around with recreating one of the existing ads I had hand-coded before, using bannertime, but I still feel like I'm missing something when it comes to the workflow. Looking forward to the gallery/fully fleshed-out docs!

Link to comment
Share on other sites

For what it's worth, I've had great success using Animate and GSAP. 

To recap:

 

- Set your publish settings to not override the HTML. 

- I have a basic HTML file I rename and update with the title, size, background color, GSAP script, clickTag script, etc. I'll post it below. 

- I also add an invisible button (no scripting needed for that one, just a hit state the size of the canvas. You can simply reuse and resize the symbol)

- And do all my GSAP on its own layer on frame 1 out of habit. 

- before submitting to DC, change your scripts to the ones from here: https://support.google.com/richmedia/answer/6307288

- I not only change the GSAP script but the createJS. Works great. 

 

THIS HAS COMPLETELY CHANGED MY WORLD (note the caps).

 

Here's a sample of my HTML shell. The real work is in the .js file.

<!--

NOTES:
1. All tokens are represented by '$' sign in the template.
2. You can write your code only wherever mentioned.
3. All occurrences of existing tokens will be replaced by their appropriate values.
-->
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nameOfYourFLA</title>
<!-- write your code here -->
 
<script src="nameOfYourFLA.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
 
canvas = document.getElementById("canvas");
images = images||{};
 
 
 
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
 
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
 
function handleComplete(evt) {
exportRoot = new lib.nameOfYourFLA();
 
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
 
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
 
</script>
<script type="text/javascript">var clickTag = "http://www.rag-bone.com";</script>
<!-- write your code here -->
 
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas" width="300" height="250" style="background-color:#746658" onclick="javascript:window.open(window.clickTag)"></canvas>
</body>
</html>
  • Like 1
Link to comment
Share on other sites

Hi Sommambist.

 

Did that, as you suggested. Not noticing much of a difference. I did notice when creating these things certain bitmaps (especially anything with a sharp line like a button or a PNG logo) were slightly blurry if they weren't positioned at whole numbers. Maybe this autocorrects that?. 

 

Got any other tips? There's the whole Retina display thing I know is in another thread. I have to dig that up and try it out. Any insight on that?

 

And I even see banners using GSAP feeding their TweenMax from the cloudfire URL. I'm sure it's not a huge deal, but I can only imagine the billions of hits that must take in a day. 

Link to comment
Share on other sites

Snapping to pixels should correct that.

 

I did not want to have to constantly be checking text to make sure it was on whole pixels, as I have too many sizes, versions to build. So I am using snap to pixel, until I see a reason not to

 

My next to do, is to create a publish profile for each ad size, since each double size banner has it's own style to change it back to 1X.

 

http://blogs.adobe.com/animate/using-animate-cc-html5-canvas-templates-with-multiple-publish-profiles/

 

I think which CDN link you use is not that big of a deal, because the idea is the link is cached. With Adobe CDN being the default, I have a feeling it is likely cached.

Link to comment
Share on other sites

 

For what it's worth, I've had great success using Animate and GSAP. 

 

To recap:

 

- Set your publish settings to not override the HTML. 

- I have a basic HTML file I rename and update with the title, size, background color, GSAP script, clickTag script, etc. I'll post it below. 

- I also add an invisible button (no scripting needed for that one, just a hit state the size of the canvas. You can simply reuse and resize the symbol)

- And do all my GSAP on its own layer on frame 1 out of habit. 

- before submitting to DC, change your scripts to the ones from here: https://support.google.com/richmedia/answer/6307288

- I not only change the GSAP script but the createJS. Works great. 

 

THIS HAS COMPLETELY CHANGED MY WORLD (note the caps).

 

 

I created a template for each ad size, so that the DCM clickTag var and the canvas style resize for authoring at twice the size, plus the window.open function are already baked in. If you are authoring at twice the size, each size has its own style, making find and replace trickier across sub folders. Really never cared for Dreamweaver, so I am using Notepad++. Whoever thought the find and replace UI did not need to be nice and long so you can see all of what you are finding and replacing should be shot. But hey it is free, so I can't complain too much.

 

For instance:

 

<canvas id="canvas" width="600" height="500" style="background-color:#FFFFFF; width:300px; height:250px" onclick="javascript:window.open(window.clickTag)"></canvas>

 

So all you have to do is choose import template in publish setting, and recheck overwrite HTML. It is helpful to be seeing my previews at actual size, while authoring, since 600x1200 and 1556x180 are huge.

 

Attached.

 

Follow this blog post to create your own.

 

http://blogs.adobe.com/animate/using-animate-cc-html5-canvas-templates-with-multiple-publish-profiles/#comment-1738

bannerTemplates_X2.zip

  • 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.
×
×
  • Create New...