Everyday Flash

Creative use of technology // A blog about 3D Flash and Actionscript by Bartek Drozdz

Making things walk in Flash 3D

Walk cycle in Papervision3D

An Actionscript-based 3D bone system is something I wanted to do for a long time, but I couldn’t figure out how to approach this problem for several months. A few days ago, I finally made a breakthrough. Here’s a first demo I quickly put together: a 3D walk cycle.

So far the only way to have a walking character in Flash 3D was to create an animation sequence in a 3D editor and export it as an animated DAE and/or use Cast3D. For sure, this method allows to achieve awesome results, but it is not nearly as flexible as being able to control the animation directly from Actionscript.

So, how does the above demo work? First of all I created a model of pants in Blender. This is the 4th model I ever did with Blender so it not perfect, but is good enough for the job. The important part is that both legs and the waist form a single mesh.

After I imported the model into Papervision3D I applied several Break modifiers to the model. The Break modifier is a new class I wrote for AS3Dmod and is of key importance for this demo. In brief, it allows to apply rotation only to a group of vertices while leaving the rest untouched. The resulting deformation makes the mesh look like it was broken, hence the name.

I created a modifier stack and added 4 Break modifiers to the pants. One for each tight, and one for each knee. The angle for each of them can be modified separately, which allows dynamic animation.

You probably wonder how I did indicate which vertices belong to which part of the mesh (waist, thigh, calf) and how I even know where those parts start or end on the code level. That is crucial in creating an armature and it is also the tricky part. Most of the 3D IDEs, like 3Dsmax or Blender have some kind of visual interface that allows the user to select vertices and attach them to a bone. In AS everything is code, so this is a challenge. I must confess that for this demo I hardcoded some values and did some assumptions to make it work, but I think there is a way to make this task relatively easy or at least possible to apprehend.

In the long run, it would be cool if bones could be exported from 3D IDEs and exposed as objects in Actionscript. As far as I know, there isn’t anything like this available for the moment. Away3D supports collada bone animation but, despite its promising name, it serves a different purpose (correct me if I am wrong.)

Let’s go back to the demo. Once I had the Break modifiers in place and applied to the correct areas of the mesh, the rest was rather easy. To create a proper walk cycle, I just took Keith Peters’ book “Making Things Move”, Chapter 13 on Forward Kinematics, and I adapted the code from the examples.

In case you don’t know that book, I would strongly recommend getting it. It contains all the essential stuff you need to know, if you want to call yourself a serious AS3 developer. I never leave home without it! There is also a sequel, with stuff for Flash Player 10.

This walk cycle is only a first step to create a bone system in AS, but I wanted to share it with you without spending another few months making it fully featured. Break modifier is available in the latest AS3Dmod SVN repository. I should warn you however that this is a very early version, not really usable for the moment.

Of course, updates are coming so stay tuned!

Categories: 3D, Actionscript 3, Away3D, Blender, Papervision3D, as3dmod

comments RSS

20 Comments

  1. roger

    Great work man! ;)

  2. Extern gefunden: Flash 3D walk cycle:
    Flash 3D walk cycle gefunden bei:

    everydayflash http://tinyurl.com/aclfsu

  3. WOW – incredible – what about a Jeans-Designer

  4. rob

    Nice work!

    just wanted to correct you on the Away3d bones thing – an imported collada model with bones has exposed obejcts which allows full control of each joint programatically. you can use the method getBoneByName() on the object container in exactly the same way as you would normally use getChildByName() to retrieve a mesh, and one returned, using jointRotationX/Y/Z will allow you move the bone any way you want

    Rob

  5. @rob Whoa, this is good news! I couldn’t figure this out from the Mario demo, but now I will definitely try this out! Thanks

  6. Michel Nielsen

    Whoa…Nice ass ;)

  7. Dan

    Man you rock! ;) I don’t say something like this too often..

  8. Gawd.. Bartek, you’re a super human. Thats awesome man. Truly awesome. I look forward to seeing how you manage to come up with a semi-friendly way of applying the bones to a specified region of vertices. Its a challenge and a half but I’m sure you’re up for it. Keep rockin it man!

  9. Willem

    Great stuff Bartek. Thanks for showing.

  10. [...] vendo meus rrs hoje achei este link interessante. vale a pena ver  http://www.everydayflash.com/blog/index.php/2009/02/09/making-things-walk-in-flash-3d/ [...]

  11. [...] > Everyday Flash / » Making things walk in Flash 3D / by Bartek Drozdz [...]

  12. Reading: “Everyday Flash / » Making things walk in Flash 3D / by Bartek Drozdz” ( http://tinyurl.com/aclfsu )

  13. [...] Making Things Walk in Flash 3D http://www.everydayflash.com/blog/index.php/2009/02/09/making-things-walk-in-flash-3d/ [...]

  14. looking at as3dmod, http://bit.ly/ph7g1 after seeing bone system in http://bit.ly/2crN3u … already using the same walk cycle

  15. amit doshi

    nice work

    want the source code of it

  16. Tucker

    I would have liked to have seen the source code as well. I am a Computer Science Masters Student – RESEARCH ONLY – working on his project.

    After spending 3.5 weeks reading cover to cover (the book recommended), trying out your “Break.as” class found inside the SVN REPO and NOT the advertised downloadable AS3MOD package (and realizing it doesn’t work that good), my making several mistakes… mathematically and conceptually…, after two weeks of hacking away… I made my first ActionScript-based 3D Forward Kinematic Bone System… capable of N-nodes for massive jointed structures…

    It’s still raw, this is why I haven’t posted it. And unfortunately my system uses joints and not breakable single meshes. Would have loved to have seen YOUR source code. Because while my idea definitely works, I could have benefited from your information.

  17. great works! still there’s room of improvement as it’s only cover leg but butt quite stagnant

  18. Nice… this is the cats meow!!

  19. Nick Park Fan

    “They’re the wrong trousers, Grommit! And they’ve gone wrong!”

    -Wallace

  20. Just discovered this thread. http://n4.nabble.com/InteractiveScene3DEvent-and-dae-models-td784150.html

    It talks about using getChildByName() in Papervision. I just applied this to my joints in my dae file and I can now Tween my joint positions with ActionScript! The annoying part of it is that you need to go through your joint chain to find the right joints. But if you name your joints correctly and use your model in your 3D program as a reference, you can quickly create variables for each joint. Here is an example:

    var LHand:Display 3D = dae.getChildByName(“COLLADA_Scene”).getChildByName(“Root_Joint”).getChildByName(“LShoulder_Joint”).getChildByName(“LArm_Joint”).getChildByName(“LHand_Joint”)

    Of course, you can’t use your IK but if you do the math you can convert your FK to IK with equations. Anyway, I’m pretty excited about this.

Leave a comment



  • FITC10


  • FITC10