Panasonic – Flag Tags

Front-end, including gallery and league table (HTML5, CSS3 and JavaScript) - May/June 2012

Splash screen

Flag Tags was a premium Facebook app produced as part of Panasonic's London 2012 ad campaign. As principal technology sponsor, Panasonic wanted something fun and globally-accessible for their FB fans. We built an app that enabled a user to take a webcam grab (or grab one from Facebook) of their face and superimpose their country's flag (with full contour mapping) on it. Working alongside a Flash app developer (who built the face-mapping softare), I built the HTML5 front-end, including an AJAX-driven paginated image gallery (hand-rolled in JavaScript and jQuery), animated league table and splash page.

Note Apologies for the heavy image compression. This is due to my Mobile Broadband connection.

Gallery

Pulling in JSON data via php, I created a custom paginated gallery using JavaScript. It allows you to browse easily through the limitless number of pages, as well as filter by country, Facebook friends and celebrities.

Gallery lightbox

Lightbox showing a full size view of a flag tag.

League table

The League table gives an overview of the number of Flag Tags by country. Upon page load, each of the league entries slides in at stepped intervals like a sports ticker.

Clicking a country allows you to drill down into all related flag tags.

Flag editing screen

Built by a Flash developer, this interface allows users to upload or capture an image and apply their countries flag to it using contour mapping.