[Global not showing in Actions panel]

Hi Zach and Osu,

The company I work for is just signing a license agreement for the company to use Greensock for our animators and web teams. 

I was hired specifically for the web banner animations as I have a background and a few awards using Adobe Animate/Flash and GSAP. I believe I used the the AS3 version of GSAP and of course the Javascript flavor. 

I discovered that the Global panel is not visible for some of the formats available through Adobe Animate. In one case I want to use the video output of Adobe Amimate for MP4s. But also HTML5. 

I'm figuring things out. Currently if you use GSAP Javascript, there's an issue for outputing to Video whereas AS3 Actionscript works. 
 

Anyway. That's what I got so far.

 

[Global not showing in Actions panel]

there's a video on Greensock about installing GSAP into Adminate. 

[Global not showing in Actions panel]

I'm attempting to add GSAP to Adobe Animate, but the Actions panel is not showing Global. How do I turn that on?

[Greensock JS and Doubleclick]

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>