Category Archives: Animation

YouView – Smart TV UI

YouView is a Smart TV service in the UK, which runs on Set Top Boxes and certain Smart TVs. I worked on the core UI for years and thought I’d share some insights into best practices when building applications for such resource constrained devices.


 

Continue reading YouView – Smart TV UI

InterServer Web Hosting and VPS
 

Lurpak Breakfast – Behind the screens

Winning two DMA awards back in 2009, I thought I’d give a quick insight into how the animation effects in this piece were achieved.

I worked with Scott Bedford on this site for Carlson Marketing, for the Lurpak ‘Breakfast’ campaign. I created all the animation prototypes for the various effects used throughout the site, some of which can be seen here. I’m most proud of the crumbs animation and the code-generated interactive steam effect – as you’ll see in the video below.

Continue reading Lurpak Breakfast – Behind the screens

Synchronising animation across multiple player instances

I’ve been asked a few times how to create effects that require multiple instances of the Flash Player on a page to remain ‘in sync’, even with user interaction. Reading and writing to cookies frequently is inefficient and resource heavy. Also, when you have more than 2 SWFs, deciding which SWF updates who becomes tricky – especially if someone decides to change or remove an instance, or an instance which you picked as ‘master’ is not loaded, for some reason.

So, I came up with this solution, using LocalConnection with a twist, which works pretty well. But, if anyone has a better method, drop it in a comment below 🙂

Mercedes Bend – Physics based banner animation

What I love even more than doing animation, is doing challenging code-driven animation.

This banner actually won some awards apparently, including NMA Campaign of the Month and was shortlisted for Cannes Lions.

The line dynamics itself is just Hooke’s law stuff – basic physics. Took some experimentation to get a smooth curve drawn through a series of points (basicaly, the control points of your previous and next points need to be in line).

The cars follow one of the line’s points with differing elasticity and damping, but the real pain in the backside was drawing the dashed line via code, in crummy ActionScript. Luckily, I’m a persistent bastard 🙂 Read more about it on Bannerblog.