Buster

Actually yes I used the validator and it came through clear even with the original scripts I used. Will these ones still work as is or do they need the doubleclick specific urls?

Few newb questions here I need help ironing out. I am currently using the following links to reference greensock and js: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> I am currently preparing my banners Doubleclick, so as I understand it I need to replace these links with the Hosts URLS found here: https://support.google.com/richmedia/answer/6307288 I can replace the TweenMax successfully but there doesn't seem to be a Jquery URL that works? What would I do in this situation to replace: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> Or will it just work like that, and do I even need to change the links from the original 'cdnjs.cloudfare.com...' links?

Thats great thank you!

I need a quick crash course in clickTags! I have some specs from a client and it seems they will be using Flash talking. Click-through Tag Requirements The HTML file must include a meta tag indicating which element in the ad triggers the clickthrough. • Specify the click-through element with a ‘click.through’ meta tag. Insert your HTML file’s clickable element ID where it says myClickableElementId: Format: <meta name=”click.through” content=”myClickableElementId” Ensure the HTML file contains an element with the specified ID. Example: <img id=”myClickableElementId” src=”button.png” /> Do not hardcode the click through URL in your HTML file. • Do not add your own click tracking events to the click-through element as this will conflict with Flashtalking click tracking. • If you would like to track clicks in another system, please send tags to Sky Media along with your creative. As my banner stands I just have a standard clickTag set up which seems to work. Do I need to change anything according to their specs? This is my current set up: a#myAdLink { display: inline-block; background-color: #000000; } <a id="myAdLink" href="javascript:window.open(window.clickTag)"> var clickTag = "http://www.google.com"; It seems they are suggesting I add this as a meta tag at the top? <meta name="click.through" content="cta_1">

Thanks Ohem... works great!

Hi, I have a simple banner animation that I want to loop twice. The loop function will work the problem is I have a button on a different timeline that works independently. So when the banner restarts the button is still there and doesn't reset itself. I played around with some reset functions but in all honesty I have no idea what I am doing. I have pasted the code below with the current 2x loop. Can anyone explain how I can reset the button to start with the begging of the animation on the second rotation? Many thanks. (function(){ var tl1 = new TimelineMax({repeat:2, repeatDelay:2}); tl1 .to('#myAd',.4, {opacity:1}) .from('#anObjectMoving',1, {scale:1.2, ease: Power2.easeOut},'-=0.5') //here is the rollover animation var btnAnim = new TimelineMax({ paused: true }) .to("#myAd_button", .4, { scale:1.1, ease: Back.easeOut }, 0); //button fades in here TweenLite.from("#myAd_button", .7, { autoAlpha: 0, scale:0, delay: 4, ease: Power3.easeOut, onComplete: function() { //this plays the rollover animation on hover document.getElementById("myAd").onmouseenter = function() { btnAnim.play(); }; document.getElementById("myAd").onmouseleave = function() { btnAnim.reverse(); }; } });

It's actually just a small graphic (137 X 7) that sit's on a 300x250 canvas. So these methods don't seem to work for positioning individual graphics. This does beg another question... I took this code from a tutorial I was using which used a sprite sheet. I wanted to use individual graphics but I kept the: background: url(graphic.svg) no-repeat 0px 0px; ...even though it is not actually a background. So all my images are lined with that line of code. What would be there proper line of code to use to link separate assets if not using a sprite sheet.

I have searched many posts but nothing has worked for me. Getting used to CSS for the first time and I find it frustrating that I have to fiddle the left margin for everything until my graphics look centred. Surely there is an easy way to just horizontal align an object to the stage? This is a 300x250 px banner. What so I need to add? #mySvg { position: absolute; background: url(graphic.svg) no-repeat 0px 0px; width: 131px; height: 7px; top: 158px; left:85px ; }

Thank you for your help so far it has been really helpful spotting the stupid mistakes I am making. I have made good progress but I have a couple of questions which will help finalise this. So far I have 2 options for a button both which work but both have issues which I need to iron out depending if its possible. The first is just a straight CSS button no JS required. The problem here is that it causes the GSAP on the button to stop working. The rollover works fine but so I guess I need to find an alternative way to animate it in (fade and scale) at a specific time . Is this possible? http://codepen.io/ArnoldKos/pen/vNEpYm Another option I have which works great is here: http://codepen.io/ohem/pen/WvMOaZ The problem I have with this one is that the local query.min.js file is pretty huge and I can't locate a smaller version that works with this particular button. The one that I downloaded to work is 100K. However the bundled one that comes with GS which is only 3k doesn't seem to work?! I basically just need //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js Is there a way to download it directly? I only seem to be able to cut and paste the code. I am creating banners so I presume I need the files locally for the publisher. Please help thanks!

I just realised that I pasted the wrong link to the button I was using. It's actually similar to the example you provide. I still can't get it to work even if I add the JS Query document. I am obviously missing something but since I am pretty much cutting and pasting I have no idea what?! <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>GSAP animation</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:800); body { padding: 10px; font-family: 'Open Sans', sans-serif; } a#myAdLink { display: inline-block; background-color: #666666; } #myAd { width: 300px; height: 250px; border: solid 1px #333; position: relative; overflow: hidden; opacity: 0; } #myAd #myAd_flame { position: absolute; background: url(flame3.jpg) no-repeat 0px 0px; width: 600px; height: 157px; top: 50px; left: -370px; } #myAd #myAd_marker { position: absolute; background: url(vue_cutOut.svg) no-repeat 0px 0px; width: 480px; height: 400px; top: -75px; left: -93px; //opacity:0.5; } #myAd #myAd_tagLine { position: absolute; background: url(tagLine.svg) no-repeat 0px 0px; width: 131px; height: 7px; top: 158px; left: 85px; } #myAd #myAd_date { position: absolute; background: url(date.svg) no-repeat 0px 0px; width: 211px; height: 42px; top: 20px; left: 42px; } #myAd #myAd_button { position: absolute; background: url(button.svg) no-repeat 0px 0px; width: 132px; height: 46px; top: 185px; left: 85px; } #myAd #myAd_red { z-index: 1; width: 140px; height: 40px; position: absolute; bottom: 20px; right: 20px; background-color: red; text-align: center; line-height: 40px; } </style> </head> <body> <a id="myAdLink" href="http://google.com"> <div id="myAd"> <div class="myAd_Img" id="myAd_flame"></div> <div class="myAd_Img" id="myAd_marker"></div> <div class="myAd_Img" id="myAd_tagLine"></div> <div class="myAd_Img" id="myAd_date"></div> <div class="myAd_Img" id="myAd_button"></div> <div class="myAd_Img" id="myAd_red"></div> </div> </a> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript" src="TweenLite.min.js"></script> <script type="text/javascript" src="jquery.gsap.min.js"></script> <script type="text/javascript"> (function(){ var tl1 = new TimelineMax(); tl1 .to('#myAd',.4, {opacity:1}) .from('#myAd_flame',1.2, {scale:3,left:600, ease: Power2.easeOut},'-=.5') .from('#myAd_marker',1.2, {scale:5, ease: Power2.easeOut},'-=1') .from('#myAd_tagLine',1.2, {opacity:0, ease: Power2.easeOut},'-=.5') .from('#myAd_date',5, {opacity:0, scale:.5, ease: Power4.easeOut},'-=1.5') .from('#myAd_button',1, {opacity:0, scale:0.5, ease: Power4.easeOut},'-=4'); //rollover CTA var btnOver = TweenLite.to('#myAd_red', .4, { ease: Back.easeOut, scaleX: 1.2, scaleY: 1.2, paused: true }); TweenLite.from("#myAd_red", .7, { autoAlpha: 0, delay: 2.2, ease: Power3.easeOut, onComplete: function() { $("#red").on("mouseenter", function() { btnOver.play(); }).on("mouseleave", function() { btnOver.reverse(); }); } }); }()); </script> </body> </html>

Ah! Simple things... thank you.

Ok I have edited this post because since I started I have started to make things work with my own persistence. I have implemented this effect into a banner. https://codepen.io/MAW/pen/wBGvgW Can someone tell me what to add to make it stop after a certain time for example 10 seconds? It seems to have a timeline of its own which I cannot control with the pause function. Also I don't seem to be able to put it on a specific level.. it is always on the top of everything. Many thanks.

Hello, I am trying to add a simple rollover animation to a button at the end of my banner as per this example: http://codepen.io/ohem/pen/avybpY This link seems to be exactly what I want but when I add it to my script it fades in succesfully but it doesn't do any rollover animation. For now I have just used #myAd_red" as a test button over the top of my original script. I am a complete novice so if anyone can please spot any errors in my code I'd greatly appreciate it. (the rollover button code is at the bottom but I wanted to keep it in context incase there is some conflicts. Many thanks. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>GSAP animation</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:800); body { padding: 10px; font-family: 'Open Sans', sans-serif; } a#myAdLink { display: inline-block; background-color: #666666; } #myAd { width: 300px; height: 250px; border: solid 1px #333; position: relative; overflow: hidden; opacity: 0; } #myAd #myAd_flame { position: absolute; background: url(flame3.jpg) no-repeat 0px 0px; width: 600px; height: 157px; top: 50px; left: -370px; } #myAd #myAd_marker { position: absolute; background: url(vue_cutOut.svg) no-repeat 0px 0px; width: 480px; height: 400px; top: -75px; left: -93px; //opacity:0.5; } #myAd #myAd_tagLine { position: absolute; background: url(tagLine.svg) no-repeat 0px 0px; width: 131px; height: 7px; top: 158px; left: 85px; } #myAd #myAd_date { position: absolute; background: url(date.svg) no-repeat 0px 0px; width: 211px; height: 42px; top: 20px; left: 42px; } #myAd #myAd_button { position: absolute; background: url(button.svg) no-repeat 0px 0px; width: 132px; height: 46px; top: 185px; left: 85px; } #myAd #myAd_red { z-index: 1; width: 140px; height: 40px; position: absolute; bottom: 20px; right: 20px; background-color: red; text-align: center; line-height: 40px; } </style> </head> <body> <a id="myAdLink" href="http://google.com"> <div id="myAd"> <div class="myAd_Img" id="myAd_flame"></div> <div class="myAd_Img" id="myAd_marker"></div> <div class="myAd_Img" id="myAd_tagLine"></div> <div class="myAd_Img" id="myAd_date"></div> <div class="myAd_Img" id="myAd_button"></div> <div class="myAd_Img" id="myAd_red"></div> </div> </a> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> (function(){ var tl1 = new TimelineMax(); tl1 .to('#myAd',.4, {opacity:1}) .from('#myAd_flame',1.2, {scale:3,left:600, ease: Power2.easeOut},'-=.5') .from('#myAd_marker',1.2, {scale:5, ease: Power2.easeOut},'-=1') .from('#myAd_tagLine',1.2, {opacity:0, ease: Power2.easeOut},'-=.5') .from('#myAd_date',5, {opacity:0, scale:.5, ease: Power4.easeOut},'-=1.5') .from('#myAd_button',1, {opacity:0, scale:0.5, ease: Power4.easeOut},'-=4'); //rollover CTA var btnOver = TweenLite.to('#myAd_red', .4, { ease: Back.easeOut, scaleX: 1.2, scaleY: 1.2, paused: true }); TweenLite.from("#myAd_red", .7, { autoAlpha: 0, delay: 2.2, ease: Power3.easeOut, onComplete: function() { $("#red").on("mouseenter", function() { btnOver.play(); }).on("mouseleave", function() { btnOver.reverse(); }); } }); }()); </script> </body> </html>

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>

Can we use the timeline in Animate with Sizmek and Double click? There 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)