I was recently asked to create some full screen video ads for Yahoo’s login page. The constraints were: 1440×1024, must loop seamlessly, no HTML5 blend-mode effects, no plugins and 500k maximum file size. I managed to create a few videos, such as the one below, all within these constraints, using After Effects and the amazing WEBM format:
Just looking through some old work and found a banner I had created years ago. I know, I know, a banner – but, as banners go, it’s rather awesome 🙂
I created this for the BBC, to advertise a game related to one of their TV shows. It employs some pretty clever maths to animate some creepy vines which actually reach out to ‘grab’ your mouse cursor – have a play! (requires Flash)
If you’re on mobile, or don’t have Flash enabled on your browser, you can see the banner in action below:
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 🙂
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).
If you can’t see the demo above because you’re on mobile, or don’t have Flash enabled on your browser, you can see the banner in action below:
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.