Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

flysi3000

Members
  • Posts

    83
  • Joined

  • Last visited

Everything posted by flysi3000

  1. Thanks for the input, guys. @geedix I was looking at those specs; I think we had more than 10 external images, though - that's probably why we got the banners kicked back. I ended up solving it using a couple of gulp tasks to parse the js for image file paths and base64 encode them inline, then inline the js into the index.html file. I managed to get the files down relatively small, but I had to start with non-retina images. It was a lot of f*cking hoops, and I told our producers it seemed really excessive, but we just wanted to get these out the door, so I didn't push the issue too much.
  2. Hey banner fam, question about a spec we received for some ads being served by Amazon. Our units are getting kicked back, because they say we need to minify scripts, and combine linked javascript and images into a single index.html file to minimize network calls. The minifying and inlining of scripts is one thing, but have you guys had to do this with images before? I'm looking up ways to use gulp to do all this automatically, but I'm spinning my wheels a little bit. Right now my approach is to try and parse the minified js file for file paths, then replace those file paths with the converted base64 data. All of this seems excessive to me. Right now, our build script spits out the following folder structure: +--build | +--my-banner | +--index.html | +--scripts.min.js | +--.jpg | .png | .svg images It would be great to be able to run a gulp process on the contents of the build folder to put the contents of each banner into a single index.html file, cuz it seems like that's what they want. Any pointers in the right direction would be awesome.
  3. Gotcha - yeah, I was wondering about that. Cool, well it's helpful to know that's how some people manage their campaigns. Thanks!
  4. That makes sense - thanks! Do you guys use the same workflow for bigger campaigns? We sometimes have buys that are like 64 units and more (many, many more... ?).
  5. Nah, if there's blame, I think it can be divided between the excessive use of tracking scripts by publishers, and the scummy ad platforms that try to inflate their ad views to rake in more $$. And, yes, devs that are sloppy and get lax about best practices. (raises hand)
  6. Hey! Are any of you guys using something like JIRA or Asana in your organizations to track your banners? Any recommendations or outlines for workflows or best-practices?
  7. Hey! So, I went to the AMP Ads workshop at Google's NYC headquarters a couple of weeks ago. It was great to get to meet the Google team and hear the justifications for AMP, and also to voice our questions and concerns about the road ahead. There were representatives from five different agencies or production houses there (including myself), and without fail, the number one thing that each of us begged for was GSAP support. The Google engineers had apparently considered integrating animejs a while back, but balked at the 16k size of the library; GSAP is closer to ~30k, but they obviously are aware of how much we lean on the platform, so we'll see what they come up with. They're also considering implementing Canvas, which will open up some alternate avenues for us to do cool things like particles, etc. One other thing - they asked us to provide sample creative units that we had built beforehand, and at the event they showed us our regular html5 units that had been converted with an internal tool (kind of like Swiffy, back in the day!). They looked great, minus some interactivity (hover-state animation); the thought is that such a tool could get us 90% of the way to a finished unit. I don't know when/if it will become widely available. Anyway; other things to consider: - re. security, there are more and more stories like this one, of shady ad networks perpetrating ad fraud - not only is it a matter of security for users, it's also a matter of site performance, which impacts users' data and battery performance - the uptick in AMP ads served is increasing - the AMP HTML project is open-source, so you can contribute by making or improving components, etc. - GWD outputs AMP ads - as mentioned elsewhere, Adobe Animate will also output AMP. I saw a couple of sample units from the prerelease of this, and one was wack, but the other looked pretty impressive - AMP ads work anywhere, not just AMP pages That's it; hopefully, if someone from the AMP team checks out this post (which they've seen ?), they'll correct me, or fill in details!
  8. We'll be doing some of that at the event here in NYC on the 20th, from what I gather. I'll post findings here, as I'm able, after the event.
  9. It's not that they're not allowing JavaScript in banners, but that AMPHTML Ads only allow <amp-***> specific components, like <amp-carousel> and <amp-accordion>, and some inline css animation; you can't write your own JS, and no external assets via <script> or <link> tags as far as I understand. So no, you wouldn't be able to use GSAP in an AMPHTML Ad. Being unable to use your own JS, and the fact that everything lives on Googles servers is the reason they are touting these as more secure. I got invited to a thing at Google here in NYC later this month; hope to learn more then...
  10. Yeah, as a group here where I work, we're very interested to learn more about this, as it will force us to diverge dramatically from our current build processes and animation techniques - aka what gives us our special sauce.
  11. I've seen those spec sheets and I'm convinced they're old holdover relics from days gone by. Either that, or they refer to video. I think you're safe to ignore that.
  12. I haven't experienced this yet, but not looking forward to it. I much rather use hand-rolled, or Animate if/when it makes sense.
  13. You guys are the best. I'll do the easy fix for now (deadlines and such), but it's good that I experienced this, so I will definitely keep it in mind for the future!
  14. Ok, here's a codepen demo. Let the animation play all the way through until the strokes disappear; then click the rewind button - the lines redraw, and nothing happens during the makeWaves() part of the animation. Then suddenly, the wavesOut() part of the timeline kicks in and they transition out. Weird, right?
  15. @PointC the timeline restarts, but nested animation doesn't seem to play. I will try and cook up a demo and see if I can replicate what's going on on my end. Thanks for the suggestion about .onOverwrite, @GreenSock, I will give that a shot as well.
  16. Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start') .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start') .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start") .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2"); return tl; } Main timeline looks like this: this.timeline .addLabel("start", 0) .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5) .add("f1", 3.7) .add(makeWaves(), "f1") //... more awesome animation When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice. I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature? Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem? I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly. Thanks guys!
  17. Holy smokes - that's fantastic. I knew there had to be a way to tween movie clip frames... Thanks @Carl!
  18. @davi yep, that's exactly my problem. Main Animate CC timeline has only one frame; I have a couple of nested clips with manual animation. Might follow your suggestion of making child clips into graphics. Thanks!
  19. Throw up a codepen link so we can see what you're seeing and help troubleshoot, if you're able.
  20. Okay, so I have myself a hairy little situation here. I have a banner, built in Animate CC. All the animation is mostly contained in a TimelineMax, except for a couple of bits that were just easier to do as nested movieclips. I'm controlling those sub animations with "gotoAndPlay", from functions in the main animation tl. All that works great - except we have a pause/play/replay function in the banner that controls the main timeline, but not the sub clips. What's the cleanest way to get the sub animations to pause/play along with the main tl? Thanks!
  21. This is great, @Gedas. Definitely tons of useful stuff in there, particularly calling out the helper functions, which I'm sure a lot of people miss. I might just have to fork my own version of the repo and make some custom templates.
  22. Hey @joe_midi, I've been doing some research into git hooks, and of course your medium post about it comes up as one of the prominent results. I was wondering about your setup - we generally create a new git repo for each campaign as well; are you pushing from each campaign to a single bare repo on the server? If I understand bare repos correctly, there's no working tree, so there's no issue with pushing from multiple repos > a single repo, correct? Thanks for the clarification!
  23. Totally understandable - Bannertime is a great tool, but the docs are pretty sparse. SmartObjects are just normal JavaScript objects that you can use to create HTML elements. By default they will create <div> elements, but you can add a 'type' option and set it to 'img', for example, then give it a 'src' option, and it will generate an <img> tag for you. My workflow is usually like this: - extract assets from Ps, Illustrator (or whatever format your assets are in), preferably @2x resolution. - create SmartObjects in Bannertime - one object for each element that is going to make up the banner - initialize object states in the setup() method - for example, hide elements that should be hidden when the banner loads, eg. - start animating in the animate() method. You don't have to worry too much about Gulp, unless you're doing some custom stuff (eg. adding your own tasks, etc.). When you're ready to deploy/deliver, just type 'gulp prod' at the command line and you'll get a folder full of zipped up banners, ready to deliver. The one thing I wish were different, is the way backups are generated. You can generate backup images for your ads by typing 'gulp backup-gen' at the command line, but it automatically saves them into the /images folder for each ad, thereby adding to the final k-weight. ProTips: Image paths that you pass in to the "preload" section will be preloaded. If you want to limit the preloaded assets, just load the asset on-demand You can group elements in a container div by creating an empty SmartObject and setting the child objects' parent to the container element the properties of each SmartObject are basically css props, so you can pretty much add anything you would add to an element in css. Z-index, color, background-position, etc. Just make sure you use JavaScript format (eg. backgroundPosition, backgroundSize, etc.) That's all I can think of off the top of my head at the moment - if you think of any specific questions, please, don't hesitate to ask! EDIT: Thought of one more thing! Spend some time staring at the banner.js file - that's where the SmartObject is defined, and that will give you some hints as to all the features that they have. For instance, you can type something like myElement.set({autoAlpha: 0}), or myElement.centerHorizontal(), etc.
  24. There's a bit of a learning curve, but if you use Bannertime, you can choose DoubleClick as the platform you're using, and it will scaffold out the files you need, including the appropriate include of DoubleClick's Enabler.js. It also sets up polite loading, clicktags, etc. I love no having to think about any of that stuff.
  25. Hey! Welcome to the glamorous world of banner dev! Re. Bannertime, I love it. It removes the issue of preloading/polite loading, and the various clickTag implementations from the equation, and lets you focus on animation. The presentation of the banner centered in the browser is just so it looks nice when being reviewed by clients or art directors; this has nothing to do with how it will look when it's iframed in its placement on a publisher's website. Bannertime's smartObjects are great too, in that they have some built-in functionality, like centering either horizontally, vertically or both; a toggle for setting retina quality, using svgs or embedded bitmaps, etc. Tons of convenience built right in. Oh - if you ever build ads with Bannertime for one format (eg. DCM) and need to change them later, you can just generate a BT ad for the new format, and copy/paste the contents of banner.loader.js into the existing version, and you're done. It would be nice if ad platforms provided up to date templates, but I find that I mostly like using my own, or, especially since the new version came out, Bannertime.
×