Dipscom

Hi Schoopie Doo, there's another thread already talking about it. It is aptly named: Banner layout workflow have a check there. I know I wrote some words relevant to your question and there are other suggestions there as well

Hi guys! Sorry, mad few days, not much time to be around. So, QA. Well, as some have been saying, it is the Wild West at the moment. It's every man/woman/parrot for himself. That holds true to QA as well. Each ad serving platform will have their own QA process and they will let you know what that is. But the majority of stuff is the same as it was in flash. I am not aware of any automated tool to check QA/Clicktags. To be honest, I simply make too many of those that I end up knowing the stuff by heart. Mostly is just common sense and "don't be annoying" stuff. Other than that, I don't have much to add from what earlqa has said.

My personal workflow is like this: Get the psd from the designer, clean it up (let's not talk about the sea of unnamed and repeated layers, or old assets left behind from previous versions). As I clean the psd up, I create a bunch of Smart objects for the assets and one artboard for each banner format. Then is just a matter of creating one set of "source" assets to use Photshop's Generate Image feature (Seriously, if you don't know about it, read into it). Having the smart objects means you can get the CSS position and size of all assets very easily. Having all different banner sizes in one file makes it easy to work in several sizes in one go. Anything that can be an SVG will be an SVG in my banners. Only photos will not be converted to vector. Then, it is just a matter of how you set your folders up, either you copy the assets generated by Photshop or not. Coding-wise, it will be down to how you work. Personally, I hand code it all. Like leedium here, I am building my own tools to automate a bunch of repetive tasks. Mine is using Gulp. Feel free to have a look, use, fork, comment. Just don't expect I will be fixing stuff to suit your needs. Do bear in mind it is a work in progess, not ready for production pipeline yet. I split the images, CSS and JS that is shared by all banners in a shared folder, together with the index.html (you really should only need one html if the banners are meant to be the same), all personalised image, CSS or JS goes into the individual banner folder. I'm keeping it ad-platform agnostic for now because I end up working with different ones all the time. It is not practical for me to have it baked in just yet.

If you have all your tweens in one timeline: mainTimeline.play(0); *Magic*

Hi Daniel, Welcome to the forums. I will not be able to help you out with the Flash CC canvas exporter as I have 0 experience with it. Have you looked into their help docs? I always find something useful there. However, if you are talking about banners, the clicktag will depend on the platform the ad is being served. Each ad platform has its own little snippet of code that you need to use as a clicktag. Getting in touch with them will be your best bet. Finally, the famous generic clicktag. That is used when the banner is going to be self-hosted. The site where is displaying it is the one responsible for trafficking it. You have the code quite right yourself but clickTag has to be a variable. var clickTag; Then, on your click event: window.open(clickTag, "_blank"); Where you define the variable will depend on the site hosting. Sometimes will be straight into the HEADER tag as a <script> attibute.

Yes, whatever you line up to be loaded via the scripts contained inside the window.onload will count as being polite loaded. Be aware that any images that you place directly into the HTML will count towards the initial load. So will any of the scripts you place directly into the HEADER tag. As to QA/Check, not sure what you mean by that. You could place some console.log() calls in diferrent places if you would like to check the order of things or you any of the browser's dev tools of you choice.

Yes, yes, makes perfect sense once it makes sense. Typically the bit that I am missing is a tiny little detail but, to be honest, I do prefer it like that, makes it easier to digest and understand. Obviously it was going to be either return or this. I whenever I think I understand them, I get a new lesson... Thank you very much, Carl. This will open a floodgate of refactoring and code optimization.

I wonder if this is something that has been discussed or not before. Did a quick search in the forum but not even sure how to phrase it so, do forgive me if this is pretty obvious and I am just being thick. In this wonderful world of banner development I generally find myself repeating the same steps over and over again. To which, one just creates a class or a function to automate something or to simply minimise the risk of H.E. due to typos. One thing I have tried time and again but always failed is to work out a way to build a timeline programatically, as in, feed a function some parameters and that function will add tweens to the timeline, which I can later control. This Pen is as bare bones as I could make it. I know many ways to achieve many things writing the code myself BUT I do want to avoid the bellow, for example: tl .to([opening_01,opening_02,opening_03], dur, {autoAlpha:0}, hold) .from(copy_01, dur, {x:"-30%", autoAlpha:0}) .from(copy_02, dur, {x:"+30%", autoAlpha:0}, ("-="+dur)) .from(chauffer, dur, {autoAlpha:0}, ("-="+dur)) .to([chauffer,copy_01,copy_02], dur, {autoAlpha:0}, hold); tl .from(copy_03, dur, {x:"-30%", autoAlpha:0}, ("-="+dur/2)) .from(copy_04, dur, {x:"+30%", autoAlpha:0}, ("-="+dur)) .from(lounge, dur, {autoAlpha:0}, ("-="+dur)) .to([lounge,copy_03,copy_04], dur, {autoAlpha:0}, hold); tl .from(copy_05, dur, {x:"-30%", autoAlpha:0}, ("-="+dur/2)) .from(copy_06, dur, {x:"+30%", autoAlpha:0}, ("-="+dur)) .from(bedhead, dur, {autoAlpha:0}, ("-="+dur)) .to([bedhead,copy_05,copy_06], dur, {autoAlpha:0}, hold); tl .from([endcard_01,endcard_price], dur, {x:"-30%", autoAlpha:0}) .from(endcard_02, dur, {x:"+30%", autoAlpha:0}, "-="+dur) .from(helloTomorrow, dur, {autoAlpha:0}) .from([cta,terms,arrow], dur, {autoAlpha:0}); As you can see, there's a lot of redundant code here that could simply go in a function. But try as I might, I have not yet cracked it. I know what the code is doing wrong in the CodePen example - It is calling the .add() over and over again, adding its relative position to the target box. And on the alternative version, because it is a normal Tween, it cannot be controlled by TimelineLite. Any takers?

Polite loading is nothing other than waiting the page to completely load before loading the ad itself and as such, GSAP does not really have anything to do with it. You can achieve a generic polite load by simply having your code run inside a window.onload() call, then load other scripts and images. For example: window.onload = function() { var imageLoader = new ImageLoader(); var scriptLoader = new ScriptLoader(); imageLoader.loadImage("idName", imageArray, ".imageExtension"); scriptLoader.loadScript("scriptURL"); } The ImageLoader and ScriptLoader are two little classes I wrote and use frequently. I have them stored in CodePen here and here. Feel free to use/fork them.

Let's have a butchers, yes?

It does make sense for them to encourage that. The amount of places I have seen where not a single person there actually cares to know the basics is quite shocking. Besides, that should reduce the amount of rejected QAs.

Nope but do come back here when you're done with the studying coz I will want that knowledge.

I am hell bent on not letting Carl beat me to this answer. There are a few ways of going about this. It will depend how you want to go about it. I forked out your pen, made a few changes to it and made what I *think* is what you're after. Do have a look on the comment I left there for an alternative way of animating. There's nothing wrong with either way, it is just two different approaches. http://codepen.io/dipscom/pen/NGKBEE The long and the short of it: You will kill the tweens you're animating and immediately create new ones to animate the car/background from the position they are currently in at the time you killed the tweens. Another few pointers: Look at the code carefully, you will see there is no need to nest so many divs and sometimes you don't even need a div. Spotting this sort of thing will become natural the more you do it. There is also no need to have a timeline for each of the things you want to animate. Generally just a TweenMax is enough unless you want things to happen in sequence. Hope this is what you're after.

Loop thru several animations in that space of time? Or play a sequence and have it loop until 30 seconds have elapsed? Or Play an animation for 30 seconds and then stop it? In any case, you can achieve that with a TweenMax.delayedCall(); here's the docs

What Carl said. What I always do is name the topmost parent "#ad", set it visibility to "hidden", run all the logic, setup and whatnot, instantiate the timeline and then, only then, do a .set(ad, {autoAlpha:1});

I would say you're probably right. We should really start another topic and discuss this in more depth, I am all up for that. My boilerplate is here at the moment. Not quite in the realms of adjusting it to specific ad platform yet but I am sure eventually I will get there. Still setting up the main tasks and writing up the readme. There's plenty in my to-do list for this and I hope I get around to it as I go along.

The Enabler.js file from GWD probably does nothing in that case. These companies do have to create a very generic product that spits out an ad for many different platforms, I would not be surprised in the slightest if there's plenty of redundant code in there. Even back in the days of flash templates, we used to see a bunch of methods included that did not need to be in there. That, in truth, was what caused me to start building my own classes and templates. And then, flash died. Now I am re-doing everything again in JavaScript. It will never be the same, of course, due to the nature of the languages. But I surely will miss the ability that I had to change one line of code and have the whole ad go from being a Sizmek ready to a DC or a Flashtalking one... I see you have some templates yourself, Joe, I intend to one day go over it and compare to the ones I am building. But, we already disagree in the task runner of choice ( I forgive you for that ).

If there's one thing I always get confused is all these little names google's ad platforms have, DCM, DCRM, DFT, AdWords, etc. Going to chip in here on top of what @joe_midi said - Do bear in mind I am talking based on the code he's provided, which to me reads: AdWords. If your ad is going on AdWords, you don't actually need to specify any clicktag or listen to it. The platform does it all for you. You only need to do so if you don't want the whole ad to be clicktable. You really only need to put the <meta> tag inside the <head> tag: <meta name="ad.size" content="width=300,height=250"> Here's the doc Obviously, all of that has zero relevance if, once again, I find that there is another ad platform owned by Google via DC that I have never heard of.

Did a bit of digging around since you've mentioned you only just have started trying to code yourself. This is a very short summary of how you would get something to work if you are serving both banners yourself. But that requires some understanding of JavaScript and iFrames. You might have to have a more in-depth read into them. However, I have a feeling what you really need to know is what ad platform your ads will be in and check their API, that will probably be more efficient. And, I think this should be moved into the Banners forum as this is not really general GSAP related, is it?

Hi, Is this a personal project or are you going to use this somewhere? In order to sync the banners, they will have to sit in the same page to begin with. I could not see in your posts a link to where you might have tried that. Did I miss anything? If this is going to be a real world banner, it will depend on which ad platform you're using. Most of them have (all aI worked with) calls to use in order for them to communicate with each other. For example: Flasktalking has a .talk() object that you can use. If you are doing it just for the kicks of it, you might be able to accomplish it by having a holding page that loads both banners and in each of the banners, you would have an exposed method where you can tell the animation to start. Something like: Banner 1: var Banner1 = function() { var anim = new TimelineLite({paused:true}); } Banner 2: var Banner2 = function() { var anim = new TimelineLite({paused:true}); } Holder page: onload = function() { banner1 = new Banner1(); banner2 = new Banner2(); banner1.anim.play(); banner2.anim.play(); I'll see if I can put something up myself and test this that I am telling you here, maybe it will work, maybe not. I'll come and let you know.

It will be interesting to see how much of that spreads out to the worldwide community. I'm in the UK and have, time and time again, seen that specs here are always slightly different than in other countries. We seem to have a slightly easier time than the guys in the US (I never been told I could only load 10 files, for example), and we also seem to be slightly up to date in terms of browser/technology supported (I used to get request to make AS2 FP8 banners, or support IE8 for eastern europe only). I know there's something like the IAB here, need to dig around to find them and get in touch. We might as well campagin for some standards in this side of the pond.

Are you aware of the .ticker() dispatcher in TweenLite and TweenMax? http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/ I don't know if your game engine is an existing one or a custom one but, when I do little webGL experiments, I always use the ticker.

From what I know of GSAP and JavaScript, you will not be able to update your values unless you create a new timeline simply because of the nature of the code. Please note this is how I understand GSAP works - Carl or Jack will be able to confirm it at some point. Once you create the timeline, it stores the values you give them and keeps it for future use. Unless you run the instatiation again, those values will remain on that line of code. If you were using TweenLite (or Max) you would be able to kill them because they are created as you call them. One way I would imagine you could acomplish that and still use TimelineLite would be to have a onStart call, where you reference a function that checks the values to be used. Another option would be to have an onUpdate call doing the same thing, again, haven't tried updating values on timelines yet. Saying that, I have just tried to acomplish it myself with the above methods and failed. My guess is that you would have to consider using TweenLite or re-running the instatiation of the timeline in order to achieve the desired effect. To be honest, if you are updating the animation on the fly, it kind of defeats the point of caching it, no?

Hello, chipping in my two cents: My preference is to hand code it all. Been building ads for the past 7 years myself. Started like many here, flash timeline. But one day was introduced to Greensock via a flash framework (don't even remember which one it was, tbh) and slowly was converted into a developer (I started out as an animator). Like it was said before, there's is nothing wrong with using tools like Adobe Edge or GWD but they do take away some of the control and make the code a mess with their many classes and bloated extras. The reason I hand code is because it gives me access to all the techniques of OOP, Task Runners and the natural design of HTML pages - Structure(HTML), Style(CSS), Logic(JavaScript). We all have to work in a bunch of ads in one go at a time. More often than not, there are changes on the way and amends. The way I set my files up, I have one HTML index, one base CSS file, one base Javascript setup file and one base Javascript animation file. Then, I have the different folders that contain the individual CSS and Javascript. It makes it easier to amend that one animation file and have it propagate into all the units. Of course, sometimes, some ads require a very specific experience but that's a different story.