HTML & CSS
Article
By Alex Walker

Making a Flash vKitty

By Alex Walker

Although I’m reticent about sites built entirely from Flash, I have to admit this a brilliant gimmick, and one that really couldn’t be achieved as successfully any other way.

Late last year Whiskas, the venerable cat food brand, called in Tequila Interactive and R Blank Interactive Design to redesign their site. The results are pretty impressive — a virtual cat that wanders, preens, toys and behaves in a generally cute manner as you browse the site.

R and Eliot Mebane have written an excellent article for the Macromedia ‘Edge Newsletter‘ explaining the process of making the cat in detail.

--ADVERTISEMENT--

The exec summary:

1) They shot two days of footage of a real cat interacting with ‘green screen’ environment. They even built a green set to the proportions of the website layout for the cat to climb around on.

2) Adobe After Effects to extract the green elements, leaving the cat on a transparent background.

3) Since the Flash video format (.FLV) doesn’t support alpha-tranparency, vector alpha masks had to be produced to be applied in Flash to mimic transparency. Impressively, After Effects’ autotrace feature produces quality vector masks and even has a SWF export feature. Nice.

4) WildForm’s Flix was used to compress and convert the video to FLV.

5) The video and vector masks were imported into Flash for compositing. The crisp vectors were fine for this cat, but it would’ve been an interesting challenge if the cat were, for instance, a typically fluffy persian.

6) The whole lot was blended with lashings of actionscript to create the behavior and interaction.

Ok, so it’s a great example of ‘web candy’ but does it actually accomplish anything for the company? Plenty of companies are talked into gizmos with big wow-factor but not much else. Does ‘v-Kitty’ provide anything more than that?

I believe it does.

Firstly, it creates some momentum for the site. Even self-confesseed cat fanatics aren’t going to automatically assume that a cat food brand website is a place they would want to spend time. This trinket may be enough to entice them to site, where they can then offer them some of their more substantial care and feeding content. In fact, I wouldn’t be surprised to see cat lovers emailing/IMing the link to each other. That’s a nice bit of viral marketing.

Secondly, being able to create a realistic ‘v-Kitty’ helps to demonstrate your love and understanding of real cats. You become a ‘cat lovers company’ rather than just a pet food maker, which is an easier place to create customer loyalty. Although we’re unlikely to ever find out what the development costs were, I’m guessing that it’s a worthwhile investmest for Whiskas.

And perhaps the best thing about a ‘v-Kitty’? No nasty ‘v-litter tray’.

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account