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: