Why I love making banners.

I get obsessed with peculiar things. I like to read books about computer history. I like 70's movies; the cheesier, the better. I collect Adobe Flash books. And now with my kid I'm carrying on the tradition: vintage children books, superhero toys, glow-in-the-dark stuff, famous buildings replicas, toy batmobiles, etc.

Upon reflecting why I like so much working with Flash projects I came up with the following:

Short tiny projects

Banner work might be seen by some as production work; PSDs come in, banners come out. They might be very stressful because of the timelines and deadlines. But in the end when you have master the art of working under pressure and come out with a workflow that works for you the projects are manageable and less stressful than regular big old projects. With such short timelines for me is difficult to get burnt out.

Easy projects with a big payoff

Once in while (specially if you have a lot going on in your personal life at the moment) is nice not to worry about work issues and knowing how big internet marketing is, not to worry about the bills. Banners are profitable and keep the shop running.

Challenging

Big developer boys (and gals) out there have their frameworks for doing practically everything (3D, animation, particle system, image manipulation, form processing and validation, video, MVC). Banner devs usually need to come up with solutions on their own. I have learnt more about programming, game logic, traditional animation, physics and math from banner work than from big old regular projects. Also trying to come up with those solutions in less than 80k make you go deep into solutions and discover hacks and tips than wouldn't make sense in other development environments.

Perfect for the renaissance man

You truly need to be a renaissance man to work on banner work: computer science, graphic design, video game development, storyteller, marketer, UX developer. You do not need to be great at everything but you do need to understand a bit of everything.

Something new to learn

With so many media vendors out there (DoubleClick, Pointroll, FlashTalking, Eyeblaster) there is always something new to learn. Cross pollination allows us to bring ideas from one vendor to the other.

I get to create my own tools!

Like an artisan who come up with a different craft and creates her own tools and set up her own shop; I get to create my own set of tools and workflows. I love not having anyone dictate how I should work.

Forget the standards! Experiment! Research! Develop standards!

The few banner-loving devs that I know are terrible at programming but very efficient. The clients love them. I've seen hacky code that works way better than MVC, OOP code. In my own experience sometimes you have to forget the "standards" just to get to the deadline. I have also invested a lot of time on creating pristine code libraries full of tiny utilities that make my work (and my teammates') easier. Once I have used a hack, I research it and distill it just to incorporate it as part of my workflow.

Optimizing images (without automatic tools)

Until the vendors raise the bar on the old Flash banner specs we need to try to squeeze out every unnecessary byte of html5 banners. More on the subject here. This is a must read by the GSAP team.

Since a little reading goes a long way the following two articles are very valuable when trying to accomplish tiny size images:

Clever JPEG Optimization Techniques

Clever PNG Optimization Techniques

Two tools I use a lot (and can't live without) are:

ImageAlpha

ImageOptim

The time you invest in educate yourself about image optimization will pay many times over in the future.

Tools for building HTML5 Banners.

There are several tools out there to create HTML5 Banners. So far the problem with those tools are that they are very tied to the platform you need to design banners for.

I recently used Flashtalking Ad Builder to create HTML5 Banners (Ad Builder documentation). The tool is very flexible and the output is very close to Flash results however all the code exported is a JSON file that describes the animation (almost 32k in size).

With Google Web Designer GWD I've have learnt a trick or two since you can explore the resulting code. There are other tools out there like TweenUI which is basically an interface for GSAP and BannerFlow and HTML5Maker which are services on the cloud.

Desktop tools like Tumult Hype and Adobe Edge Animate try to be the new replacements for Flash.

Is my opinion that a winner has not yet arise because most of the tools try to be very much like Flash, however HTML5 although similar is different enough so any code done with a timeline UI is not very usable in a code environment, therefore creating resizes or slightly different versions is very difficult.

As a developer you should still be comfortable writing your own code and creating your own workflows to achieve the client desired result. If you plan to invest in software let it be a Sublime license and whatever training in CSS/JS Animations you can get your hands on.

Classanimation

While researching on what's the better approach for animation in banners I really like the idea of using browser ready/GPU accelerated graphics.   I started adding @keyframes animations as way to use animation in banners.  However the more I got into animations the more I learnt about animations and transitions.  It wasn't until I attended Rachel Nabors workshop Web Animation Essentials: CSS Animations and Transitions that I started looking to Transitions in a whole new way (hint: they are not only for :hover).  This approach of animating using transitions rather than animations is a nice compromise between a pure CSS3 Animations and JS only JavaScript animation (like GSAP or Velocity.js).

This approach which I like to call Classanimation requires that you affect the className attribute of the element (either by pure JS, jQuery addClass/removeClass methods or other lightweight solutions like Todd Motto functions).

The main idea behind Classanimation is that an element has different states (an state is defined as visual changes in CSS).  The transition will be responsible for doing the tweening of the properties between states.  Through JavaScript and the setTimeout() function you'll change the state (in a parent element or even in the actual element). For the following example I'm using my own mini library fla.js (included in the pen) to switch classes:

See the Pen classanimation 2 by Emmanuel Ulloa Arguello (@emmanuelulloa) on CodePen.

Back to basics

I started my professional Flash Development career as a banner developer. Those little "flashy" demons turn my life around and opened a lot of doors to me. Now with the imminent death of Flash I'm coming back to them. They just evolved into HTML5. This blog is an effort to document this new process.