I was recently asked to create some fullscreen video ads for Yahoo’s login page. The constraints were: dimensions of 1440×1024 but less than 500k file size, must loop seamlessly and no HTML5 blend-mode effects or plugins allowed – otherwise an overlay of the steam blended onto a canvas layer would have yielded an even smaller file size. Unfortunately, at the time of writing, Microsoft’s Edge browser did not fully support blend-modes – hurry up Microsoft! I managed to create a few videos, such as the one below, all within these constraints, using After Effects and the amazing WEBM format:
Tag Archives: effects
CoolIris type thing in 30 lines
package { // Piclens type thing in 30 lines (FP10+) Liam O'Donnell - spikything.com
import flash.display.Sprite;
import flash.events.Event;
public class Main extends Sprite {
private var container :Sprite;
private var imageGrid :Sprite;
private var images :Array = [];
public function Main():void {
container = addChild(new Sprite()) as Sprite;
imageGrid = container.addChild(new Sprite()) as Sprite;
for (var i:uint = 0; i < 200; i++) images.push(getItem(i));
images.sortOn("z", Array.NUMERIC | Array.DESCENDING);
for each (var item:Sprite in images) imageGrid.addChild(item);
addEventListener(Event.ENTER_FRAME, update);
}
private function getItem(index:uint):Sprite {
var item:Sprite = new Sprite();
item.x = -(200 / 3) * 210 / 2 + (index / 3) * 210;
item.y = (index % 3) * 160 - 40;
item.z = 100 + Math.random() * 2000;
item.graphics.beginFill(Math.random() * 0xffffff);
item.graphics.drawRect(0, 0, 200, 150);
return item;
}
private function update(e:Event):void {
imageGrid.x += ((stage.stageWidth / 2) - mouseX) * .2;
container.rotationY = ((stage.stageWidth / 2) - mouseX) * .2;
}
}
}
Webcam Flames
I played around some more with my webcam today and knocked this out. I also found my webcam already has the IR filter missing (cheap webcam), so it can already see infrared… which will come in handy:
Mercedes Bend award-winning banner
What I love even more than creating animation: creating challenging code-driven animation.
This banner actually won some awards apparently, including NMA Campaign of the Month and was shortlisted for Cannes Lions.
For those that want to have a play with it, I tried to resurrect the Flash version using the Ruffle/WebAssembly emulator. On desktop it almost looks perfect. On mobile the cars may go invisible :/
So, here’s a video of the banner running…
How it works
The line dynamics itself is rather basic Hooke’s law physics stuff. But it took some experimentation to get a smooth curve drawn from end to end. Basically, it is a bezier curve and the ‘control points’ of the previous and next control 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 and ‘moving’ the dashes, in crummy early ActionScript (which had no API for programmatic dashed stroke drawing at the time). Luckily, I’m very persistent!
Some feedback I got from Bannerblog…
I love this banner. A passerby mentioned the vans perhaps look too similar to each other (exactly the same, actually, aside from the color) but the interaction is instant and fun as hell to play with. Well done!
Posted by:Pace on November 11, 2007 8:53 AM
Good simple ad and the interaction is great, one thing that would really tighten the ad up is the line, the copy at the start feels a bit jarred, and I don’t think you need the line; ‘Life is tough, so are we’.
It should say; ‘Which is the safest van around?’ you roll over and then the line; ‘All our vans have ESP for safer driving’. Merc logo would then appear(Yes I know the client would love that).
Still a very good ad.
Posted by:Kevin on November 12, 2007 2:16 PM
what a fab execution of such a simple idea! love it.
Posted by:dubbs on November 12, 2007 8:08 PM
yeah. great execution. the smoothness of the interaction is very premium like.
Posted by:Wolo on November 13, 2007 12:47 AM
very clever. nice and simple, as well, gets the message accross in the right way.
Posted by: on November 13, 2007 6:02 AM
I kinda like it – but theres just one thing thats bugging me. The Blue van skids off the road, and it slides down to the right and comes to a stop in the banner space while the other van keeps driving. Shouldn’t it skid off the road and disappear up the banner as it has now come to a stop and is no longer moving along with the other van?
Or maybe I’m thinking about this too much and need some work to do… Pass me that D&AD annual.
Posted by:DrJones on November 13, 2007 10:55 AM
Interactivity with a purpose. I like it.
Posted by:Rob on November 13, 2007 9:28 PM
indeed, a very simple idea, but superbly executed. congratz.
Posted by:sparehed on November 22, 2007 11:32 PM