Tuesday, May 22, 2007

Creating avatar chat characters

Our artists at TheoWorlds.com just finished creating a new set of characters for TheoAvatar chat - they can walk, sit and even dance. Each character's animation is made from 32 frames with multiple matching layers of clothes. It took about 400 images to assemble each character.

In case you are planning to create your own The Office Space game or the next Habbo-like online community, here are some tips from our animators on drawing avatar characters in isometric view:

  • If you are trying to draw realistic human avatars with high level of details, you'll need to use references. There are two options here: 3D and photography. If you choose 3D, the easiest way is to use characters libraries from Poser. If you are more comfortable with photography, you can just capture your co-workers on the camera. Just make sure they know about it. We used the latest approach as it was more fun. Doing it in 3D would, probably, be faster.
    After you resize down these reference pictures, you can draw on top of them, adjusting the details on the pixel level.

  • Use minimum number of frames to represent each animation. Try to keep your total files size small and also reduce the amount of work. To keep it as smooth as possible, make the differences between frames smaller. For example, if you draw the walking animation - try smaller steps and less arm swing.

  • Animate the characters in Flash early. Don't rely on animated GIFs. Moving the characters around in Flash will help you test the animation early on. You can do corrections while it's not too late. It also helps you find the optimal animation speed.

  • Draw symmetrical characters so you can "mirror" their animations of opposite directions. For example, our characters are moving in 8 directions, 3 of them being just "mirrored".

  • Less is more. If you are using multiple layers of clothes (for customizing the look) you will have to animate each of them to match the character's animation. So more character animations you have - more clothes animation to create. It grows almost exponentially, so stand the temptation of creating a lot of "cool moves".
For inspiration, check devianART gallery on pixel art isometric characters:

Wednesday, May 16, 2007

New Google Analytics comes with Flash flavor

This week Google Analytics subscribers will notice big changes. Google spent a year working on the new update, and, finally, it's out.

One of the biggest additions is new graphs made in Flash. They are auto-resizable and take the full screen width. I say, it's about time. Seriously, it isn't too difficult to implement something like this in Flash. But the difference is huge - I found it very handy on my widescreen laptop. Compare the old and the new Flash visitors graphs (actual proportions from my screen):

Now you see the difference. It's like trying to watch a movie through a keyhole and then getting a HDTV!

The sole fact of Google using Flash is worth mentioning. I'm not going to give a big propaganda speech on Flash. But there are some things this technology is good for besides web games and "flashy" animations: data visualization and interaction. Google graphs are packed with nice features: rollover hints, draggable timeline range picker, overlapping graphs and more. It's light, fast and informative.

I don't even know why you wouldn't do such things in Flash. Still, I find other companies trying less obvious paths. For example, Yahoo Pipes pushed javascript to the maximum. The same solution made in Flash would be much more "native". I think it's about the skills range in such companies. There is historical alienation of "pure" developers from technologies like Flash. It's still more on designers side. Macromedia, now Adobe, is changing things through Flex, but it still needs time to become mainstream.

When companies embrace Flash for what it's good for, the results are amazing. Check, for example, Digg Labs with their BigSpy, Stack and Swarm tools. Those things are not developed in-house, which is not surprising. But their partnership with stamen design has proven very productive.

Sure, development and design is not about the tools. The results are what matters in the end. At the same time, some tools are just better at some things and when taking advantage of it, the outcome can be very rewarding.


Monday, May 14, 2007

TheoWorld's Birthday Cake Decorator wins Adobe Site of the Day

I just got a notification from Adobe about being selected as an official Adobe Site of the Day for tomorrow. Our Birthday Cake Decorator brought us the 4th SOD award.

All four awards were won in a short span of 1.5 years with our line of original interactive ecards. Check the rest of the ecards here:

We've been licensing these ecards to our clients and the results are very positive. It's an out-of-the-box viral marketing campaign than can be set up in 24 hours!

Find more about licensing our award-winning ecards here: www.theoworlds.com/ecard_campaigns.html

- Sergei