the challenge
Create a holiday-themed site for consumers to receive digital makeovers — using Sephora product — and share a wink or kiss with a loved one.
how?
To bring digital makeovers to life, we worked with Taaz/Photometria, using their amazing API to change normal people into winter vixens. Photos were uploaded directly into their system, and users indicated where their eyes, mouth, and other facial markers appeared. This data, along with the original photo and the made over photo, was brought into our code for further magic making.
Brad Griffin, our tech lead, used the open-source Box2D physics engine, ported to ActionScript 3, to create an environment for the dancing avatars that felt magical. The characters, with user-uploaded-head, floated down from the top of the screen on strings, bouncing and dancing to the music.
Our motion design team took video clips of lips kissing, which we used as both a framework and the kiss animation itself. Depending on which makeover the user selected, we changed the color of these real-life lips, and attempted to match the shape and angle based on user input. When the send-to-friend animation played, it appeared as though the user was actually blowing a kiss. The wink was much more straightforward, simple color matching and animation of the eye.
key technologies
Flash AS3 for entire front end experience, including BulkLoader, Box2D, and TweenLite libraries. PHP/MySQL for viral components. JavaScript for usage tracking.
team
- Lauren Harwell, Creative Director
- Jaime Robinson, Copywriter
- Steve Knodel, Senior Designer
- Husani Oakley, Director of Technology
- Brad Griffin, Technical Lead
- Alissa Mach, Motion Designer
- Jason Jobe, Motion Designer
- Abe Dieckman, Motion Designer
- Melinda Klayman, Producer
- Ryan Toland, Account Manager
- Did I forget someone? Probably, and I’m sorry. Let me know.
