Making a Flash vKitty

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.

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’.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.platinum-central.com platinum

    1) For an international company, that sure is an ugly looking site.

    2) They would have been far better off creating a 3D model of the cat IMO, that video effort doesn’t look ‘realistic’, you would probably get a better effect using a 3D model.

    Sorry, don’t really see that as anything impressive, it’s just a cheap looking gimmick – the antialiasing around the cat doesn’t even look right. :)

  • http://www.sitepoint.com AlexW

    You could produce animated 3d accurately mimicing a cat in two days? I’m employing you for my next 3d project ;)

  • http://www.realityedge.com.au mrsmiley

    The movements are really good though. You can even poke it in the chest with the mouse pointer and it rears up on its back legs to “play” with you. Must admit though, I missed it when the page first loaded. Thought I had the wrong link. I was expecting it down the bottom of the screen for some reason.

  • http://simon.incutio.com/ Skunk

    I have to admit I was unimpressed. Firstly, it didn’t load at all in Safari. Then when I tried Firefox I had a lot of difficulty telling that it was “interacting” with my mouse pointer at all – it just looked like a cute but pointless animation. After poking and prodding it a little I was half convinced that it was taking notice of me, but had I not read this article first I wouldn’t have thought it was at all.

  • Tim G

    Impressed? Naw, it’s just a distracting gimmick, in my opinion.

  • http://www.platinum-central.com platinum

    Not sure where 2 days was mentioned, must have skipped over that bit. ;)

    They are a big enough company that I think they can afford to spend a few advertising dollars getting something like a 3D model done, some of the other advertising they do must cost hundreds of thousands alone.

  • http://www.sitepoint.com AlexW

    Ahhh, so I’m easily impressed by trinkets and shiny things ;)

    The Safari thing is weird. If it loads, why wouldn’t it run the cat? Flash is flash, isn’t it?

  • http://www.mjswebsolutions.com type0

    I’m not a Flash designer, but this was a relly good story.

    Thanks.

  • http://www.simonjobling.com Si

    I must admit that I found the v-Kitty quite cute but at the same time, it didn’t make me want to visit the site again. The rest of the site (IMO) is a horrible mess and doesn’t portray a multi-national company.

    And all that effort to get video on a transparent background – another reason why 8-ball is in much anticipation!

  • http://www.adamthody.com thody

    An interesting idea, but I don’t know about the execution. The black outline around the cat kind of reminds me of the original Star Wars releases lol.

    Most of the time I’d rather be impressed by something simple done exceptionally than by something exceptionally difficult simply “done”.

    The money they spent may have been better served commissioning a more suited design for the website.

  • Redivider

    With the next version of Flash, and support for video with an alpha channel, it will be a lot easier to do something like this.

    I think it’s impressive that they were able to do something like this that appears to use a feature that Flash doesn’t even support (video tranparency).

  • http://www.propelpages.com spinball

    Doesn’t seem to work correctly if FF. A bit buggy. The cat walks out then vanishes. I thought all Flash would be the same, must be some programming involved with it. Slow loading. I can only imagine what dial-up users have to go through. Where’s the low-bandwith option. This reminds me of the Jimmy-Johns Subs site. Entertainment is great, information and accessibility is very poor.

  • Ravedesigns

    Maybe I’m just gettin old…but this just looks like a waste of time and money in my book. Yes, it’s cool and “flashy”…but does it add anything to a visitors experience at the site? Nope! The site seems to have plenty of good content available for cat lovers, so I’m puzzled why they think they’d need something like this.

    On the other hand, that R Blank company seems to have designed some other more useful (?) projects – things that would more likely benefit those that visited the website and also the site owners themselves.

    Anyhow – thanks for the cool behind the scenes look at how they did this Alex!

  • http://www.digitalgreenlight.com busy

    I like it. It’s definately a gimmick, but not all gimmicks are useless, and I think this one has value.

    First, it’s not something I’ve seen anywhere else. (Not saying it doesn’t exist elsewhere, I just haven’t seen it)

    Second, my girlfriend is a cat lover, and I can totally see her getting excited as soom as a realistic cat walks out onto the website she’s on. Cat lovers who’s cat looks like the one on the site will likely love it even more, and say out loud, “Look! It’s !”

    Third, well, there’s no third. Guess I didn’t need to number my points.

  • http://www.digitalgreenlight.com busy

    Ok, my opinion has changed. After letting my girlfriend see it, she did say it was very cute, but also said it reminded her of, “Bonzi Buddy or that stupid paper clip.” She also pointed out that it walks right in front of the navigation links.

    I also checked it out in IE out of curiosity and discovered you can feed the cat, play with string, etc… (you can’t in Firefox), but the controls for doing so are somewhat unresponsive.

    I still like it somewhat, and I agree with your points for the potential value it brings, but now I’m not so sure that it was worth adding to the site.

  • http://hervard.net/ Hervard

    What a waste of time making that Flash thing. It looks really crappy.

  • http://www.dynamicfunctions.com Kadence

    Like most, I too found the site to be pretty unprofessional looking for multi-national corporation.

    The Flash cat certainly doesn’t fit in well with the design; and the graphics are strange. A cute idea though, and I can see how they might get some return out of it. I wonder if it might actually distract from the content of the site however.

  • Bruce Tritton

    I would have to agree with pretty much all the comments above.

    I think the concept is really great though. It very well could have been some marketing person that came up with that idea and the poor designer has had to try the impossible hehe.