We are very proud to have launched the new website for Rampion Offshore, a brand new wind farm due to open in 2018, owned by EON, 13 km off the UK’s South Coast nearest to Lancing, West Sussex. The website includes some great new features.
Not only does the website include Puppy, our responsive web scaffolding based on Inuit CSS by Harry Roberts, but also an interactive map based on Google’s mapping technology and a WebGL animation which explains how Rampion works. This article focuses on the technology and history behind this animation.
Since the birth of the internet, it had long been a dream to create high quality animation which downloaded quickly to your browser even on slow internet connections. The GIF allowed frame-by-frame bitmap animation and was used widely until 1996, the year which saw the dream realised and a mini revolution called Macromedia Flash. As long as you had the plug-in installed on your browser, you could enjoy colourful animated graphics and video. Flash was the perfect medium for the online advertising industry. Each ad was able to display colourful animated messages with the ability to expand to a larger size when clicked. With audio too!
Flash reigned on high for around 10 years with many companies opting to build their entire website in Flash - Wild Dog Design included. Prospective clients were wooed by the whizzy animations as they browsed the pages but unfortunately, this love affair with Flash was not to last. Apple exposed some pretty serious security flaws in Flash and consequently Steve Jobs announced in 2010 that the iPhone would not support Flash. Another reason, and perhaps the most critical to Apple, was that Flash content could vastly reduce iPhone battery life due to the processing power required to view more complex animations over which Apple had no control. The iPhone at the time was notorious for running out of battery half-way through a day - and that was bad news for Apple with their published battery life figures.
Flash became persona non grata over the next few years and, for about two years, the only accessible way of producing animation was the trusty old GIF with its flip-book style animation and limited 256 colour palette or video.
Now though, Adobe has relaunched Flash Professional as Adobe Animate which is able to export animations as HTML5 Canvas and WebGL. Both of these formats use Javascript to move vector and sprite graphics around the browser window without the need for a special proprietary plugin. From an agency point of view, one of the very best things about Animate is that it has retained the old animation timeline tools which are easy to use and familiar to everyone that used Flash back in the day. Hurrah for Adobe. Added to this, the published files remain small even for complex animations so they can be enjoyed on mobile devices without heavy downloads. Another Adobe goal firmly kicked into the back of the net. The Rampion animation lasts around 90 seconds and the file size is a cool 2mb - perhaps a little bulky for 3G but with 4G you can be enjoying the pretty turning windmills in around 3-4 seconds load time.
From Rampion’s brief, Joey Marsh (Wild Dog’s Illustrator and Designer) created the storyboard with the attractive illustrations of the turbines and south coast using Adobe Illustrator. I took the vector artwork to create the animation. If you look closely, you can see the British Airways i360 going up and down, the sea subtly moves in and out and there are a few white birds floating around in the sky - not to mention the little plane flying away from Brighton City Airport at Shoreham-by-Sea. Great fun. The animation canvas measures 1960 x 1280 pixels and therefore can be viewed in high quality, on a full HD monitor. As well as showing it on the website, Rampion intend to also display it in their visitor centre and in presentations. Watch the animation here.
Rampion Illustration by Joey Marsh, Wild Dog
Adobe Animate CC splash screen by Daniele De Nigris