STOP! Its (Duncan) Bannertime.

[joe_midi]

Hello all, 

 

A bunch of us at our agency got bored of setting up banners over and over.

 

So Pyramidium made a Yeoman Generator to do the work for us!

 

https://github.com/pyramidium/generator-bannertime

 

This project would be great for those of you who are jumping into the front-end field from the Flash days, and want to get ahead with using things like Gulp, Git, Yeoman and all those npm goodies front-end devs have been using for years.

 

The idea is to cut down the setup times, and speed up development, by using SASS for easier separation of CSS and styling, GSAP for animation, image optimisation, minification, and browsersync, so you can see all your changes on screen whilst you're working.

 

At the moment you can create banners to work with AdForm, Atlas, DoubleClick Studio, DCM, and Sizmek, here we literally replace the event binds to the corresponding code for firing of an exit/clickthrough.

 

We're currently discussing features, like creating a collection of banners, and using an existing size to create a new size.

 

So if you guys have the time to try something new, try it out! Give us some feedback and lets see if we can make the landscape of HTML banners a bit easier to deal with.

[GreenSock]

Thanks for sharing this, Joe! It's refreshing to see folks sharing some of their tips/techniques/tools. 

[Dipscom]

I'm all up for trying to standardised ways to build ads. It makes everybody's job a lot easier if we wall know what we're looking at and we can focus on just the creative bit and animation.

[joe_midi]

A lot of agencies can be quite clandestine and try to keep internal tools under wraps to try and stay competitive, but personally I believe that if a tool like this got wider use, it would make the industry better for developers and creatives who can carry on with the creative animation bit.

 

The other upside of a tool like this, is for those who are looking for work after Flash and start using this tool could find it as a good stepping stone to more main-stream front-end development, opening up their employment opportunities.

 

 

We gotten about 400-500 installs at the moment, and a few forks, so we'll see how far this thing goes!

[OSUblake]

The Gulp tasks alone will make you 1000x more productive!

[flysi3000]

Fantastic! Thanks for doing this. I haven't used task runners like gulp and grunt a whole lot, but I've started (sort of) using CodeKit while doing my banner production. How easy would it be to integrate something like that with this workflow? Or does that just complicate things?

[letsbrock]

Really looking forward to checking this out Joe! I tend to work freelance / alone so don't get exposed to a lot of stuff like this

I also pick up what I can only image are incredibly bad habits so it'll be nice to brush up on a more logical approach!

 

Thanks for sharing!

[yopyop]

Thanks for sharing this out there. As someone who became an accidental Flash guy (and at that, more of the 'timeline only' set), I'm using this as a way to jump into HTML5 banner development using GSAP and coding -- and do it the 'right' way. I finally got it set up on Mac OS X 10.11 El Capitan (which turned out to be no small feat). And so far it's working great. 

 

I see that you've made some moves towards adding banner sizes in there. That's great, too. 

 

Well, just wanted to say hi -- and that I'm using it, and it's a great tool.

 

[joe_midi]

Its great to see all this feedback for this tool!

 

We're working on this tool during our downtime to get it being something that is very versatile and effective for banner creation/production. We all know how mindless creating 100 adapts of an original creative can be.

 

If you have any suggestions for features let us know!

 

@flysi3000 I don't think you can integrate a Yeoman generator +Gulp with Codekit (or I might be missing something) but they would be basically doing the same thing. So its really up to you on how you want to manage your workflow.

[yopyop]

I've been hit with a '10 files or less' spec requirements, so a really cool feature might be wrapping in creating a spritesheet for certain graphics in 'gulp prod'.

[joe_midi]

Thanks yopyop! Definitely a feature we've been throwing around, if you could head over to the github repo: https://github.com/pyramidium/generator-bannertime/ and raise it as an feature request that would be great!

[pyramidium]

First off, I just want to say thank you for all of your feedback. A lot of thought has been put into this project and it is great to hear that someone has found a use for it. We have had some really great ideas for the generator and how it could benefit our workflow.

 

Here are a couple of features we intend to roll out:

 

• Copy master files - to copy a master file with a different size
• Backup image prompt - to prompt the user if there isn't a backup image
• Individual banner zipping - preparing each banner in a zip ready to upload to an ad platform or send to a publisher
• Timeline scrubbing - with controls to navigate to a point in the animation timeline
• Timeline video overlay - for comparing animations with a semi-transparent video
• Spritesheet generation - automatically creating spritesheets from a folder of images

 

If you have any ideas feel free to add feature requests on the repo.