The Wrong Door: creating PaperVision3D character animation with the Flash timeline
NOTE: I am now a freelance developer, and no longer an employee of Bloc.
Over at my employers, BLOC, we recently put the finishing touches on a new website to support BBC3's mad comedy show The Wrong Door. The site has lots of silly toys, interactions and animations to amuse you, but I thought the best one to document would be the experimental method I used to get some basic character animation into PaperVision3D.
The animation in question is of a giant robot walking around an asteroid on the site's homepage. My unorthodox approach was to make a side-on animation of the walk cycle using a set of MovieClips on the Flash timeline, then at runtime update the positions of the 3D robot's limbs based on the positions of these MovieClips.
The obvious drawback of this method is that all movement can only happen in 2 dimensions - so the effect will never look as cool as true motion capture and bones - but the advantages are that editing the movement is very easy, and you have a lot of potential for runtime control. This technique was fine for animating a robot, because it's OK if he looks a bit stiff, but for general character animation it's definitely not recommended, so I'm going to keep exploring new ways to bring animation into PaperVision3D. UPDATE! - as Away3D now supports Collada Bones, maybe that's the way to go.
Anyway, these were my steps. I started with one of Eadweard Muybridge's famous motion captures, of an old naked guy:
I used the walk on the bottom row. Based loosely on this movement, by eye I positioned a load of rectangular MovieClips on the timeline, representing the upper arms, lower arms, thighs, shins, torso and head. I used Muybridge's photos to set my keyframes, but also added tweens so that I could alter the speed of movement. It's important to put the rotation/pivot point at the end of the limb or none of the tweens will work. In the halcion days of banner-ads I made monster timeline's like this all the time, so it was a fun bit of nostalgia! (This kind of animation should get a lot easier with Flash CS4 and its native bones and inverse kinematics - but we'll see...)
With the walk animation complete, I then set about another timeline animation, for the robot's path around the asteroid. 3D artist Matt supplied me with a cut-away of the robot's path - I drew around this with the pen tool and set up a motion guide. Oldskool!
With the 2D animation complete, Matt 3D supplied me with the robot's body parts as seperate ActionScript classes, plus the texture bitmap. With these added to the PV3D scene, it was just a matter of updating the positions on the ENTER_FRAME listener. The MovieClip containing the animation is created but never added to the stage - the timeline animations still run, even though it is not rendered by the Flash player. It took a bit of trial and error to work out which 2D dimensions to map to which in 3D space, and I used A LOT of nested containers to simplify this process. Nesting a DisplayObect3D inside another is very useful PV3D feature.
I guess I'm the only person to have attempted this madness - I'd love to hear otherwise though so please leave comments!
Over at my employers, BLOC, we recently put the finishing touches on a new website to support BBC3's mad comedy show The Wrong Door. The site has lots of silly toys, interactions and animations to amuse you, but I thought the best one to document would be the experimental method I used to get some basic character animation into PaperVision3D.
The animation in question is of a giant robot walking around an asteroid on the site's homepage. My unorthodox approach was to make a side-on animation of the walk cycle using a set of MovieClips on the Flash timeline, then at runtime update the positions of the 3D robot's limbs based on the positions of these MovieClips.
The obvious drawback of this method is that all movement can only happen in 2 dimensions - so the effect will never look as cool as true motion capture and bones - but the advantages are that editing the movement is very easy, and you have a lot of potential for runtime control. This technique was fine for animating a robot, because it's OK if he looks a bit stiff, but for general character animation it's definitely not recommended, so I'm going to keep exploring new ways to bring animation into PaperVision3D. UPDATE! - as Away3D now supports Collada Bones, maybe that's the way to go.
Anyway, these were my steps. I started with one of Eadweard Muybridge's famous motion captures, of an old naked guy:
I used the walk on the bottom row. Based loosely on this movement, by eye I positioned a load of rectangular MovieClips on the timeline, representing the upper arms, lower arms, thighs, shins, torso and head. I used Muybridge's photos to set my keyframes, but also added tweens so that I could alter the speed of movement. It's important to put the rotation/pivot point at the end of the limb or none of the tweens will work. In the halcion days of banner-ads I made monster timeline's like this all the time, so it was a fun bit of nostalgia! (This kind of animation should get a lot easier with Flash CS4 and its native bones and inverse kinematics - but we'll see...)
With the walk animation complete, I then set about another timeline animation, for the robot's path around the asteroid. 3D artist Matt supplied me with a cut-away of the robot's path - I drew around this with the pen tool and set up a motion guide. Oldskool!
With the 2D animation complete, Matt 3D supplied me with the robot's body parts as seperate ActionScript classes, plus the texture bitmap. With these added to the PV3D scene, it was just a matter of updating the positions on the ENTER_FRAME listener. The MovieClip containing the animation is created but never added to the stage - the timeline animations still run, even though it is not rendered by the Flash player. It took a bit of trial and error to work out which 2D dimensions to map to which in 3D space, and I used A LOT of nested containers to simplify this process. Nesting a DisplayObect3D inside another is very useful PV3D feature.
I guess I'm the only person to have attempted this madness - I'd love to hear otherwise though so please leave comments!
Comments