How to spice up HTML projects from a Flashers point of view

30.07.2014 >Bild

There’s nothing really to add to the epic Flash vs HTML5 controversy. That’s all legacy by now. One technology replaces the other, a niche remains for the old tech and the newer one reinvents the wheel, hopefully a little bit better. I’m old enough to have seen several technologies being hyped. Late nineties, Macromind (!) Director was the new kid on the block. Soon Java would try to steal some of its thunder. Quickly thereafter Flash was the latest revolution. By late the 2000s, early 2010s Processing (Java) and OpenFrameworks (C++) were eagerly being fashionable and lately, there’s no denying HTML5 will stick around for another bit.

It gets much more interesting to see the content these environments and their creators have been producing: very similar experiments and metaphors have been hopping from technology to technology: Typographic play, faux-3d, particle effects, full-screen video/photos with or without real-time effects, experimental interfaces, etc. Call it ‘reinventing the wheel’, call it ‘standing on the shoulders of giants’, call it ‘to-may-to’ or ‘to-mah-to’… who cares really as long as we’re all doing epic work!

In that sense, there’s a few things we can take with us when moving from tech to tech. We here at dynamo gold have quite a bit of our roots going back to Flash and I think Flash - despite its current reputation - did quite a few things right as well back in the days. I’m going to focus on a few habits we old Flashers have and I don’t see all too often in the fashionable HTML5 wizardry.

First on: LOADING!

Flash was, since day one, a ‘progressive download’ format; the first frames of a Flash file were available for display before the rest of the file was loaded. That made it pretty easy to trigger a timeline animation or some scripts while the file itself was loading or even when additional assets were loaded later on. Loading animations were a no-brainer every time anything was loaded. Even the dreaded skip-intro era followed this approach: play a catchy animation while your actual content is loading. (btw: don’t forget we’re talking 56Kb/s modem times here)

HTML traditionally has a fire-and-forget approach: put the file path in a tag and let the renderer do the rest.

Don’t get me wrong: I’m not advocating the return of useless animations while the whole website is being loaded and buffered in the background. Yet, whenever I see a website where I have to wait several seconds to see -anything- or even worse, the whole layout gets re-rendered every time an image finally finishes loaded, I cringe. I’d consider it common decency to communicate your user that she’s waiting for some action to finish and to show the progress.

Hey, it’s even another possibility to show your creative skills: prettyloaded

Second on: ANIMATION!

Flash’s background being firmly routed in animations, it’s obvious that those features are at the core of pretty much anything you do with Flash. It’s just so easy and straightforward to have a fade-in, apply a mask, use non-linear animations.
HTMLs Hypertext was never really intended for animations yet today there’s no excuse anymore to not use animations in your HTML projects to enhance the storytelling experience. Animating a visual item in or out of the screen really goes a long way to express what that item is doing on the screen. (eg. Motion Ui Design Principles on BeyondKinetic and this tumblr on UI animations).
And when you animate, please don’t forget to make the speed non-linear. A little easing goes a long way to make your animation look natural. Robert Penner made the equations ages ago. Libraries like Greensock make it super straightforward to animate and ease!

Further on

It’s amazing to see how many of the old Flash topics are returning. Look over your shoulder from time to time to check how certain problems were solved a decade ago:
- flash plugin detection vs webGL detection
- fullscreen images & video: (this vs that)
- experimental interfaces (this vs that)
- custom typography


Comments are open for additional ideas and feedback! Let’s see what the next 1 or 2 years will bring. With a bit of luck, we’ll look back and discover that HTML5 is Flash done right… Or is that too provocative to finish ;-)