I thought I’d give a quick insight into how the animation effects in one of my projects were acheived.
Scott Bedford, former Creative Director at Carlson Marketing, posted this video of a project we worked on a while back, 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. The site won two DMA awards, but I’m most proud of the crumbs animation and the code-generated interactive steam effect – similar to the one you’ll see on my homepage.
- Crumbs animation. 1000 Bitmaps random position themselves until around the edge of the bread mask shape, animated with simple mouse interactive physics – force, velocity, momentum and friction all tweakable
- Steam effect. Perlin noise moving through another perlin noise BitmapDisplacementFilter, to which user generated displacement can be applied, then all blurred
- Egg Timer animation. Particle system with basic physics and just a draggable mask
- Do Not Disturb tag. Maths-based animation for the swing only, the rest is old-school timeline animated
- Fry-up triple banner. Three banners synchronise object positions/velocities using LocalConnection to send packets with a TTL applied to avoid a feedback loop
- Spinning letters. TextMetrics used to break a populated TextField into separate letters, each one animated into a simple 3-D engine I knocked up, with simple physics used to achieve the swirl motion
- Hang-over breakfast. Just a blurred mask, though I prefer my version from my original – alpha a blurred copy of an image over the original for a proper hazy effect
- Other animation. Uses a combination TweenMax, maths and frame-by-frame, e.g. pancakes, bedroom door
- Not mine: Wise-crack banner, breakfast tray messenger banner, down tools drawer, coffee bean counter, flapjacks, emails