Jump to content
Search Community

Greensock JS and Doubleclick

parkcastle 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

  • 1 month later...

Hey all, I'm currently working with Double Click right now through a media partner. Have you heard anything further about their support for Greensock JS? We have tried to upload a couple of ads to their GCM with links to GSAP on CDN but they were failing. Their recommendation at the time was to rebuild these ads in Double Click Studio or Google Web Designer but that seems like a woefully inefficient solution. If there was something I could point them to regarding others that have gone through this process to help move this along it would be greatly helpful. In the mean time I'll see what progress I can make. Thanks!

Link to comment
Share on other sites

Ah, I wish I saw this post before I started my other discussion.

 

Hey all, I'm currently working with Double Click right now through a media partner. Have you heard anything further about their support for Greensock JS? We have tried to upload a couple of ads to their GCM with links to GSAP on CDN but they were failing. Their recommendation at the time was to rebuild these ads in Double Click Studio or Google Web Designer but that seems like a woefully inefficient solution. If there was something I could point them to regarding others that have gone through this process to help move this along it would be greatly helpful. In the mean time I'll see what progress I can make. Thanks!

 

If those were recommendations, what were the actual issues for it failing? Did they specifically point to the externally hosted JS files? I would also mention that DC QA is made up of a whole bunch of teams that don't always talk to each other, so you'll find banners being passed by one guy, don't get passed by the next. Also if you don't already have access, request access to the Live Chat support. Always more helpful.

 

 

Does anyone know if GSAP is compatible / usable with Google Web Designer?

 

https://www.google.com/webdesigner/

 

I'm just about to get my teeth into some HTML5 banners for the DCS platform, and I just read that they offer QA support for Google Web Designer and Adobe Edge.

So whilst I'd normally code up the HTML5 banners by hand, using GSAP, i'm leaning towards using a tool like GWD or Edge - for 2 reasons.

 

1) I'd like to easily be able to work with flash animators that don't have JS coding experience. 

2) QA is important at DCS, and anything you can do to help them will make for a smoother experience.

 

So If GSAP can be plugged into either of these apps as their tweening engine, that would be best of both worlds.

 

 

Google Web Designer, yes you can use Greensock if you wanted to, but you would still be writing out the JS yourself.

 

This would be more similar to the Flash scenario of placing all your movie clips on the stage, and then writing an external AS file with GSAP to animate it all. The animators/flash designers would then be able to change copy and images with different items, but the animation would stay the same.

 

Another point would be for all of us to join the GWD community forum and lobby for them to get GSAP as the animation engine, or the option to.

 

Also I believe someone mis-interpreted DC's recommendation on minifying JS files.

  • JavaScript files require a .js extension, not .min.js. If you minify JavaScript files, you can't add tracking easily. If the client requests minifying, add tracking first and minify the .js file later.

To me this reads that you can minify but always have a backup of the original JS otherwise if your client wants to add some tracking in there, that would be difficult.

(But if you're using a Grunt setup, then you probably already have source/build folders and can easily make changes as you want.)

 

I also believe you just can't upload .min.js files, but they could still be minified, just with the .js extension. I'm half sure I've tested this, but I haven't done this in a while.

 

 

I am currently working on mobile banners in Celtra, and chucking out all their animation tools in favour of writing it all with GSAP as I wasn't happy with the performance difference between Android and iOS devices.

Link to comment
Share on other sites

  • 2 months later...

I am running ads on Google's DoubleClick DFA.

 

As I do Flash and HTML5 as needed, I code animations using GSAP AS3 and GSAP JS. I begin with Flash using GSAP AS3 and drop my instances onto the time line in layers as makes sense. I name the instances and set the opacity/alpha to 0 or position the intances offstage as makes sense. I get approval and move to HTML5 versions.

 

For each instance in Flash I created a DIV in HTML5 where the instance name becomes the DIV ID. Where MovieClips are containers of images and or text, DIVs are the containers in HTML5. So when the html page loads, a listener in JavaScript will wait for all images to load and then initiate the animation. The CSS code does nothing more than the setup. The JavaScript does the heavy lifting.

 

In the JS file I declare my variable names to match the ID names. Now my TweenLite code can talk to the DIVs and animate.

 

 

A minimal amount of CSS is written as follows. JavaScript takes it from there.

   overflow: hidden;
   position: absolute;
   opacity:0;

 

My HTML5 folder has

 

CSSPlugin.min.js

EasePack.min.js

script.js which is where my actionscript AS3 code gets dropped into and tweeked for javascript.

TweenLite.min.js

 

Google let me get away with 12 images, 4 js files, a CSS file and the html file. However some ad servers set a limit of 10 files for an ad. So it's probably a better practice to generate or create your sprite sheets in Flash of Photoshop. Obviously JPG images get ganged together and PNGs get ganged together. Use PNG Crushers available online such as https://tinypng.com/ 

 

One pretty solid rule is that your files zipped should be less than 100k for Leaderboard, Big Box and Skyscrapers or 150k for larger ads like Half Page.

 

Bottom line is that I use GSAP AS3 and it's companion GSAP JS. Very nice.

 

Here's the script.js file used on the Google Ad

(function() {
 
Function.prototype.bind = function(scope) {
 var _function = this;
 
 return function() {
return _function.apply(scope, arguments);
 }
}
 
  Ad = function() {
    // Initialize when ready.
    if (document.readyState == 'loading') {
      document.addEventListener('DOMContentLoaded', this.initialize_.bind(this));
    } else {
      this.initialize_();
    }
 
    // Prevent rubber-banding in the webview.
    document.addEventListener('touchmove', this.handleTouchMove_);
  };
Ad.prototype.initialize_ = function() {
console.log("ad running");
//
 
 
// define all instances
 
var banner = document.getElementById("banner");
var nuclear = document.getElementById("nuclear");
var endframe = document.getElementById("endframe");
var school = document.getElementById("school");
var this_semester = document.getElementById("this_semester");
var burst_flare_flip = document.getElementById("burst_flare_flip");
var burst_flare = document.getElementById("burst_flare");
var clouds = document.getElementById("clouds");
var money = document.getElementById("money");
var _is = document.getElementById("_is");
var kinda = document.getElementById("kinda");
var tight = document.getElementById("tight");
var lightbulb_minor_off = document.getElementById("lightbulb_minor_off");
//
this_semester.style.left="46px";
this_semester.style.top="17px";
TweenLite.to(this_semester, 0, {css:{scale:0}});
//
flare.style.left="-120px"; flare.style.top="30px";
burst_flare_flip.style.left="6px"; burst_flare_flip.style.top="32px";
burst_flare.style.left="6px"; burst_flare.style.top="32px";
clouds.style.opacity="1";
nuclear.style.left="312px"; nuclear.style.top="97px";nuclear.style.opacity="1";
//
money.ox=95;
money.style.left="150px";
money.oy=61;
money.style.top="90px";
TweenLite.to(money, 0, {css:{scale:0,}});
money.style.opacity=1;
 
console.log("val:"+money.ox);
//
_is.ox=136;
_is.style.left="150px";
_is.oy=106;
_is.style.top="136px";
TweenLite.to(_is, 0, {css:{scale:0}});
_is.style.opacity=1;
//
kinda.ox=98;
kinda.style.left="150px";
kinda.oy=152;
kinda.style.top="182px";
TweenLite.to(kinda, 0, {css:{scale:0}});
kinda.style.opacity=1;
//
tight.ox=102;
tight.style.left="150px";
tight.oy=200;
tight.style.top="230px";
TweenLite.to(tight, 0, {css:{scale:0}});
tight.style.opacity=1;
//
school.ox=45;
school.style.left="50px";
school.oy=30;
school.style.top="50px";
TweenLite.to(school, 0, {css:{scale:0}});
school.style.opacity=1;
//
banner.style.cursor="pointer";
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
banner.addEventListener('click', bgExitHandler, false);
 
 
//////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
// layout objects on stage x and y.
//
 
//
function timelineInit() {
//// fade quickly out the white clickthrough to mask layers loading
var oSet=1;// offset
TweenLite.to(this_semester, 2.5+oSet, {css:{opacity:1}, delay:.7,  ease:Quad.easeInOut});
TweenLite.to(this_semester, 3+oSet, {css:{scale:1}, delay:.7,  ease:Quad.easeOut});
 
TweenLite.to(flare, 2, {css:{opacity:1},  delay:0,  ease:Quad.easeInOut});
TweenLite.to(burst_flare, 2, {css:{alpha:1},  delay:0,  ease:Quad.easeInOut});
TweenLite.delayedCall(1, lightshow);
TweenLite.delayedCall(1, flareplay);
TweenLite.delayedCall(4.5, timeline1);
//TweenLite.delayedCall(0, goNuclear);
 
//
 
}
function lightshow(){
TweenLite.to(burst_flare_flip, 2, {css:{alpha:1},  delay:0,  ease:Quad.easeInOut});
TweenLite.to(burst_flare_flip, 2, {css:{alpha:0},  delay:2,  ease:Quad.easeInOut});
TweenLite.to(burst_flare_flip, 2, {css:{alpha:1},  delay:4,  ease:Quad.easeInOut});
TweenLite.to(burst_flare_flip, 2, {css:{alpha:0},  delay:6,  ease:Quad.easeInOut});
}
function flareplay(){
TweenLite.to(flare, 2, {css:{x:"+=50", alpha:.7},  delay:0,  ease:Quad.easeInOut});
TweenLite.to(flare, 2, {css:{x:"-=50", alpha:1},   delay:3,  ease:Quad.easeInOut});
TweenLite.to(flare, 2, {css:{x:"+=50",alpha:.7},   delay:5,  ease:Quad.easeInOut});
TweenLite.to(flare, 2, {css:{x:"-=50",alpha:1},   delay:8,  ease:Quad.easeInOut});
}
function goNuclear(){
TweenLite.to(nuclear, 1, {css:{scaleX:1000, scaleY:1000},  delay:0,  ease:Expo.easeInOut});
TweenLite.to(nuclear, 1, {css:{alpha:0},  delay:0.8,  ease:Quad.easeIn});
TweenLite.delayedCall(1, function(){burst_flare.style.opacity=0;burst_flare_flip.style.opacity=0;});
}
//
function timeline1() {
//
var t=.5; 
TweenLite.to(money, t, {css:{left:money.ox, top:money.oy, scaleX:1, scaleY:1,transformOrigin:"left top"}, delay:0, ease:Expo.easeInOut});
TweenLite.to(_is, t, {css:{left:_is.ox, top:_is.oy, scaleX:1, scaleY:1, transformOrigin:"left top"}, delay:.6, ease:Expo.easeInOut});
TweenLite.to(kinda, t, {css:{left:kinda.ox, top:kinda.oy, scaleX:1, scaleY:1, transformOrigin:"left top"}, delay:1.2, ease:Expo.easeInOut});
TweenLite.to(tight, t, {css:{left:tight.ox, top:tight.oy, scaleX:1, scaleY:1, transformOrigin:"left top"}, delay:1.8, ease:Expo.easeInOut});
TweenLite.delayedCall(3.5, timeline2);
}
function timeline2() {
//
TweenLite.to(this_semester, .3, {alpha:0, delay:.7, ease:Quad.easeInOut});
//
TweenLite.to(money, .2, {css:{alpha:0}, delay:.7, ease:Quad.easeInOut});
TweenLite.to(_is, .2, {css:{alpha:0}, delay:.7, ease:Quad.easeInOut});
TweenLite.to(kinda, .2, {css:{alpha:0}, delay:.7, ease:Quad.easeInOut});
TweenLite.to(tight, .2, {css:{alpha:0}, delay:.7, ease:Quad.easeInOut});
TweenLite.delayedCall(0, goNuclear);
//
var t=.5; // tween time
var off1=.5;//offset
TweenLite.to(school, t, {css:{left:school.ox, top:school.oy, scaleX:1, scaleY:1,transformOrigin:"50 50"}, delay:.3+off1, ease:Expo.easeInOut});
//
TweenLite.to(endframe, .1, {css:{alpha:1}, delay:5.5, ease:Quad.easeInOut});
//TweenLite.delayedCall(11.5, timeline2);
}
timelineInit();
 
 
  Ad.prototype.handleTouchMove_ = function(e) {
    e.preventDefault();
  };
 
  window.google = window.google || {};
  window.google.ad = new Ad();
})();// closes off function() on line 1

 

 

 
/////////// HTML code is below
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>MTCU_30off_money_300x250E</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    
   
    <meta name="ad.size" content="width=300,height=250"> 
 
 
<script type="text/javascript">
function startAd(){
document.getElementById("banner").style.visibility = "visible";
}
/*function handleBannerClick(){
}*/
</script>
    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
  </head>
  <body onload="startAd();"> 
 
<div id="banner" class="container">
    <!--/*<div id="animation_layer">    */-->
   
     <!-- -->
           <div id="clouds" class="div_default_off">
            <img src="images/clouds.jpg" /> 
        </div>
         <div id="flare" class="div_default_off">
            <img src="images/flare.png" /> 
        </div>
        <div id="burst_flare" class="div_default_off">
            <img src="images/burst_flare.png" /> 
        </div>
        <div id="burst_flare_flip" class="div_default_off">
            <img src="images/burst_flare_flip.png" /> 
        </div>
       <!-- -->
       
       
        <div id="school" class="div_default_off">
            <img src="images/school.png" /> 
        </div>
        <!-- -->  
        
        <div id="this_semester" class="div_default_off">
            <img src="images/this_semester.png" /> 
        </div>
       
        <!-- -->
         <div id="money" class="div_default_off">
          <img src="images/money.png" /> 
        </div>
        <!-- --> 
        <div id="_is" class="div_default_off">
            <img src="images/is.png" /> 
        </div>
        <!-- -->
        <div id="kinda" class="div_default_off">
            <img src="images/kinda.png" /> 
        </div> 
        <div id="nuclear" class="div_default_off">
            <img src="images/nuclear.png" /> 
        </div>
        <div id="endframe" class="div_default_off">
            <img src="images/final_frame.jpg" /> 
        </div>
       
        <!-- -->
        <div id="tight" class="div_default_off">
            <img src="images/tight.png" /> 
        </div>
        
 
        <!-- -->
      
        <!-- -->
      
 <!-- </div>-->
 
 </div>
 
    <!-- Put all your js here (be sure the scripts are minified/merged) -->
    
    <script src="js/script.js"></script>
    <script src="js/TweenLite.min.js"></script>
    <script src="js/EasePack.min.js"></script>
    <script src="js/CSSPlugin.min.js"></script>
    <!-- end scripts -->
 
   
  </body>
</html>

 

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

Did anyone figure out how to convert the JSON file output from Flash CC 2015 Canvas to JSONP with .js extension per the DC Studio requirements?  I can't find a solution anywhere.

 

JSON: Files ending with .json are not allowed. (JSON files are not accepted by Studio for cross-domain reasons. JSON files must be rewritten as static JSONP file with a .js extension).

https://support.google.com/richmedia/answer/2672512

 

Great info btw on Google uploading TweenLite, TimelineLite, CSSPlugin to your their CDN.  I requested links from DC. Someone was checking if they would allow the Greensock CDN's to load it. Any news there?

Link to comment
Share on other sites

I'm not entirely sure - you'd need to check with DC about that but I wouldn't be surprised if they preferred to use their own CDN instead, just for liability reasons (they have no control over our CDN or any outages, etc.) 

 

We do hope to get more definitive answers from the DC folks over the next few months as we explore what's possible in the banner ad world and how we can help push things forward. They really need some standards...badly. Watch our site for a survey in the next week or two as we start the discussion. 

  • 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...