Lessons Learned from the Flash Days

Banners used to be the realm of designers/animators. There were so many creative hacks and ways to setup the ad, that it was quite a lot of fun. The only piece of code was: on(release) getURL(“clicktag”).

Since 2010, when DoubleClick starts growing into a major ad server, the banner industry had to adapt to a lot of – great – changes. By 2013 a lot of Flash designers – either had to have knowledge of Actionscript 3.0 or would be stuck with the not-so-exciting work. And now, with the complete move to HTML5, it became even harder.

When Apple denied support for .swf files in iOS due to battery issues and then Google and Safari decided to save again the user’s battery by blocking flash ads, HTML5 is finally here for good.

On its early days, HMTL5 banners tried to do what flash banners used to do a long ago. Fades and scales and swipes. Visual effects were a bit limited due to the file-size restrictions and cross-browser issues. Luckily there are CSS transitions and External Libraries, and even better, smart real-time compilers of css transitions, that work like tweening and takes the trouble of writing many lines of cross-browser code.

What’ll be missed

But a few things will be dearly missed. Like Masks, gradient “cacheAsbitmap” masks and text masks; color transformation, blending modes; a lot of control over the blur and shadows; loops, and of course – the Timeline and Easing editor. It was a great school also for those who then adventured into After Effects.

For complex frame-by-frame animations, or character movement, Flash was perfect. Playing around with shape morphs and mask tweens would allow great results. And everything would be in a very compressed, unique file. So simple.

Nowadays, designer should still think like back then, in terms of planning and setting up the assets. You need to understand nesting the same way, in html5, as you would have movieclips inside movieclips.

Animate CC and Edge, and Google Web Designer are the main tools for creating banners using a timeline. It’s not a great user experience, and a bit messy. But it can be a good way to start.

Code Animation

When it comes to animation in HMTL5, you will need a few tricks – have a look in our First E-Book, it’s on HTML5 animations : ). You’ll see there that you can use a lot of After Effects to create complex animations, that you can simply drop in your ad as gif, or as a video.

What helps is to write down what you want to happen, second by second, before thinking on how to format that in code.

Ie: I want the first frame to fade out after 3 seconds. It will fade out in half a second. And after that the frame 2 will fade in.

If you are using TweenLite, the code would be:

Tweenlite.to(first_frame, 0.5, {opacity:0, delay:3});

Tweenlite.to(second_frame, 0.5, {opacity:1, delay:3.5});

Once you get used to thinking the animation first, writing it down as logically and with as many details as you have, it will be simpler to understand how to translate that into code lines of animation.

Hope this have helped you create courage to try and create simple animations, and exploring from there!

If you have any questions,

please email: article@properbanners.com