Doctor XTN

Neither am I. From what I can tell it's just a way to make/manage a website with Word-esque tools. That's nice and all, but there's a danger in anything semi-automatic. I wouldn't choose it, but it's not my project. I'm just called in to animate graphics that get inserted into the page. For the record, there's an Insert HTML option and I put my HTML5 animations in that way using iFrame and absolute URLs. Since I'm used to doing banner ads, all my GSAP/HTML5 animations are only the HTML container (with the CDN for TM) and whatever JS is exported by Animate CC (plus bitmaps when used). Now I'm on the hunt for how to make those animations fire when they reach the middle of the viewport. Since they're nestled in code created by a WYSIWYG, I'll just have to hunt around for a solution that makes sense to me and trial and error. But..... Since I'm probably talking to myself here, it would be ideal in my world to be able to bake it in to TimelineMax. For example, as a Position Parameter (is that the right term). Back to the Google.

Update! Downloaded Muse. Inserted iFrames. Works fine. Why is doesn't work for him is the mystery now. GSAP people, you are all beautiful.

I use Animate CC to create HTML5 animations with GSAP. My method produces a simple HTML file and a .JS (plus bitmaps usually). I did some simple moving charts which I hardcoded into an iFrame (in a table) and they play just fine. MY CLIENT on the other hand is building his site in Muse (which I've never used) and is finding it impossible to get an iFrame to work. What does work is a previous client's ad with an absolute URL. But these new animations are made from new Animate Documents that are 1) exported once to create the HTML and JS, 2) GSAP CDN is added into the resulting HTML and 'Overwrite HTML' clicked off. No bitmaps. Any tips? The old client banner which works is set up for DoubleClick using early Animate HTML. Instead of focusing on the actual work I'm doing, he's referring to it as useless until the Muse issue is solved. OAMs work, but I don't see how one could make one with GSAP and I am not going back to timeline animation. Using this: <iframe width=“640” height=“290” frameborder="0" scrolling="no" src=“absolute URL"></iframe>

So I have a campaign guy who somehow got roped into one of those expanded 970x250s which close into a 970x90. I have NO IDEA how to make this. Anyone have any clues? I can make a nice animated 970x90 and a rather sweet 970x250, but the rest of the stuff is indecipherable. Their rep gave me a Sizmek build guide, but it seems to not focus on where to put my art and how to get it to click. Clues? Please?

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.

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="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <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>

OK, so I admit I spent no time in Edge. Found a tutorial for GSAP in Edge that starts to become confusing as the programs are different. I also admit to perhaps missing the super obvious here. I used GSAP in Flash for years and the importation process was incredibly simple. So, how do I get GSAP to talk to Animate so I can tween my elements using those magical 'to' and 'from' lines of code? Forget anything else. Help me get the hosted libraries working (end target Double Click, who hosts it as well) and tell me where to type my GSAP code (maybe there's a documentation link I haven't come across in my searching). Do I make my bitmaps Movie Clips? Do I name them? Like in Flash. I know this sounds basic, but I've been stuck in GWD hell since The Illuminati turned of Flash in September and I just hate timeline animation. Next questions will be how to make the ad clickable/tap-able and as mentioned before, what code to insert for DoubleClick (while this has been covered elsewhere, I'm still figuring it out). Thank you so much.

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

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