Category Archives: Animation

Character Animator tips

Some of you may have started playing around with Adobe’s new creation, Character Animator. If not, I’d suggest you check it out – it makes character animation a breeze.

However, if you’ve tried creating your own characters, you have may run into problems getting them to animate how you’d want. Here are some handy tips on getting it right:

Dragging limbs skews the whole character

If you’ve got this problem, you’ve probably got the wrong ‘mesh shape’ for your character. You will almost always want a ‘contour’ mesh shape, but Character Animator (by default) tries to detect whether it should use a rectangular mesh for your character’s ‘rubber sheet’, or a mesh which hugs the contours of you character.

See the images below for how to fix this:
characteranimator2characteranimator3Limbs do not move like they have a bone structure

If you’ve added ‘mousetrack/draggable left/right hand’ anchors, but the characters arms are more like that of an octopus than a human, then you need to add some elbow and shoulder anchors:

characteranimator4

The feet move slightly when you tilt your head

Although the rest of the character may be set up correctly, you’ll probably want to ensure that your character’s feet stay firmly on the ground – at least while you are simply moving the head/arms. You can fix this easily from with Character Animator, by adding a couple of ‘fixed’ pins into each foot (and ideally ankle too):

characteranimator1

Hopefully, that’ll help you solve some of the most common problems encountered in Character Animator. If there’s something specific you think I should tackle, let me know…

David Beckham Academy

FWA winner, Adobe Site of the Day winner and Creative Showcase runner-up.

I was asked by Tribal / DDB London to create a web based games site, for a joint campaign between The David Beckham Academy and Volkswagen.

Play the games

We decided to use filmed action of Beckham himself in-game, with the ‘video alpha channel’ support of Flash 8, which was very new at the time. I came up with the game concepts and shot list, then met with the film crew at ‘Off The Radar’ to organise the shoot with Beckham – we had less than an hour of his time to everything done, but he was a complete pro, completing most of the action in one take!

Tech used

  • Green screen at Flash Studio Norte, Madrid
  • Panasonic VariCam (1080p @ 50fps)
  • Adobe After Effects
  • Adobe Photoshop
  • Adobe Flash
  • A football

dba-green1dba20I went to Madrid for the green screen shoot with Beckham as visual effects supervisor and was responsible for treating and editing the footage for game production and related media.

I stitched some of the sequences together with morphs to create almost seamless blends dba-kick01between shots and added real-time lighting filters to the footage to help with the in-game compositing.

I coded a 3-D projection system in Flash and perspective-matched each scene, so that objects move around the screen convincingly. I worked with the designers at DDB, who created the backgrounds and UI elements. I included ‘Express Install’ capability for those users without Flash Player 8, so 95% users could upgrade painlessly from Flash Player 6 or 7. All the games are mouse-controlled and were user tested with children for usability and game balancing.

A high-score table and ‘challenge a friend’ feature was included – users with the highest scores were entered into a prize draw to win a training day at the academy with David Beckham. While modern video games only ever motion-capture players and recreate them as 3-D models, the DBA games site, while it’s dated a little over the years, still remains a one-of-a-kind that I’m rather proud of.

Note that you’ll need Flash Player in your browser to play the games – no mobile support – the games predate most smartphones 🙂

By the way, there are a few ‘Easter eggs’ in the game, only one of which I can remember at the moment: in the ‘Shot Stopper’ game, type ‘safehands’ to get some big gloves to make savings goals easier.
safehands