Everyday 3D

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

Paper simulation in with AS3Dmod and Away3D

Since I released the bend modifier a lot of people have been asking how to bend an object not only along one of its axes, but along any angle. That was clearly a feature missing, but I also didn't have a clue ho to do that. Now, a after a good few days of struggle, and with a little help from my friends - here it is.

The Bend class now takes 3 arguments in the constructor, the third being the angle at which the bend is executed. Please mind, that this argument expects an angle in radians. In the code it looks like this:

Actionscript:
  1. var mesh:Mesh = [a mesh]
  2. var stack:ModifierStack =
  3.     new ModifierStack(new LibraryAway3d(), mesh);
  4. var bend:Bend = new Bend(1, .5, 1.2);
  5. stack.addModifier(bend);
  6. stack.apply();

Of course, there is also a getter/setter for the angle, which allows to change the value dynamically, and to use libraries such as Tweener to animate it.

The Bend modifier is now part of the AS3Dmod library. Since AS3Dmod is cross-engine, the above demo was done with Away3D, but of course, the same functionality can be used with other engines, including Papervision3D.

For those of you who remember the initial bending demo, I used a 100$ bill as a graphic element then. I thought it would fun to be consistent and to stay in the American theme. Therefore, this time you can play with the Declaration of Independence. Fans of "National Treasure" should be delighted.

As usual the sources are available and you can get them here. I hope you like the demo and that you will find the code useful. To compile it you need the latest versions of AS3Dmod, Away3D and Tweener libraries.

Categories: 3D, Actionscript 3, Away3D, as3dmod

comments RSS

57 Comments

  1. beauty! i love it :)….

  2. paddy

    That’s great, well done. I alway thought there was something written on the back of the Declaration though ;)

  3. Very smooth! Well pulled off!

    J

  4. You’ve just made the famous pageflip obsolete!!
    Well done!

  5. I was just thinking the same thing last week. That’s awesome, and it is so smooth. Thanks for that.

  6. The is the smoothest looking paper animation I’ve seen in Flash. Great Job!

  7. przekozacka akcja!!!

  8. paddy +1, I would expect something like “Bartek was here”

  9. Willem

    Bartek, great stuff man! Very nice.

  10. WHOA! This is f’n awesome!

  11. Fantastic work Bartek!!!

    I wish it came a bit earlier :). We were looking for believable paper for our website and stated with your bend modifier for the floating papers but it wasn’t papery enough that’s why we went for physics.

    Great job!

  12. That is pretty incredible – well done!!!

  13. Og2t

    Bartek brawo, wysylam juz skrzynie browaru kurierem prosto do Sztokholmu ;-)

  14. AWSOME, and very smooth.
    that’s all i have to say about this.

  15. gireesh

    hi,

    Great stuff….but i am not able to compile in my system….i got following errors.

    1119: Access of possibly undefined property angle through a reference with static type com.as3dmod.modifiers:Bend.
    1061: Call to a possibly undefined method sign through a reference with static type Class.
    1137: Incorrect number of arguments. Expected no more than 2. ->for perlin() method
    1137: Incorrect number of arguments. Expected no more than 1. ->for Bend() method

  16. @gireesh you need to get the latest version of AS3Dmod from the SVN repository. It is located here:

    http://as3dmod.googlecode.com/svn/trunk/

  17. Very impressive. Keep up the good work Bartek!

  18. I love this demo – it performs really well and looks great :-)

  19. fxnull

    I like it. It’s Awesome.
    but i’m having trouble tou compile it with Flash Develop RC1 with flex3 or flex4.
    maybe because of i missing folder structure.can’t you make a suggestion.
    I’ll really love it and looking to compile it myself.

    here’s the warning message :

    Building Awaypaper
    mxmlc -load-config+=obj\AwaypaperConfig.xml -incremental=true -benchmark=false -o obj\Awaypaper633692794700000000
    INITIALIZING: Adobe Flex Compiler SHell (fcsh)
    I:\test\awaypaper\com\everydayflash\exp\awaypaper\AwayPaperDemo.as: Error: A file found in a source-path must have the same package structure ”, as the definition’s package, ‘com.everydayflash.exp.awaypaper’.
    Starting new compile.
    Loading configuration file P:\flex_sdk_4.0.0.4681\frameworks\flex-config.xml
    Build halted with errors (fcsh).
    Loading configuration file I:\test\awaypaper\com\everydayflash\exp\awaypaper\obj\AwaypaperConfig.xml
    (fcsh)
    Done (1)

  20. @fxnull I think you should create your FD project in the same folder as the “com” folder resides, or at least specify the folder it is in as the source folder for the project.

  21. fxnull

    i just followed what flashdevelop folderstructure automaticaly provide.
    i already add source path for away3d_2.2.0, tweener and as3mod 0.2.
    if you don’t mind can you be more detailed.
    in the mean time i’ll will try my best.

  22. fxnull

    this is my folder structrure
    c:/
    paper
    |
    |-away3d
    |-caurina
    |-com
    |—-as3dmod
    |—- everydayflash
    |——-exp
    |———awaypaper
    ———— awaypaperdemo.as

    i use new empty project AS3,i had try put it all, in c:/paper
    put in c:/paper/com, put in c:/paper/com/everydayflash/exp/awaypaper/
    but all build are failed even i had set the sourcepath that usualy worked.
    i’m confused for this demo.have you try to compile it with FD RC1 or what editor dou you use flash,flex ?
    will you tell me how your put this source code so it can compile right ?
    i’m annoyed because anoher source from cast3d etc…its easy to comple out of the box,.

  23. @fxnull If you set your source path to c:/paper in this case it should work fine. I use FDT, but that doesn’t matter, because the compiler is the same. If it doesn’t, what errors are you getting?

  24. fxnull

    Great!!!
    just setting FD target to flash player 9 and use flex3 and it just work!!!
    don’t use flash player 10 and flex 4 or either just failed to compile.
    thanks Bartek.

  25. fxnull

    i think away3d have some issue with flash player 10 and flex 4.
    i’ve more difficulties than with pv3d.

  26. msmooshoo

    This is a great library Bartek? Can you please help me understand how to keep one side of the object static (doesn’t move in x, y, or z at all), and only fold on the opposite edge? Thank you.

  27. msmooshoo

    Sorry – the first sentence was supposed to be a period (,) not a question. It is a great library :)

  28. @msmooshoo try using the “constraint” property of the Bend class. Possible values are: ModConstants.LEFT, ModConstants.RIGHT or ModConstants.NONE (none means – bends on both sides, and is the default setting)

  29. msmooshoo

    Thanks Bartek! So does MonConstants.LEFT mean that it bends on the left, or that it stays static on the left?

  30. msmooshoo

    I got it now. Thanks a bunch. Your script is great :D

  31. raph

    Hi,
    Your work is great. I’ve been looking in the code, and I haven’t find the way to change the radius of the bend (not the angle neither the force), i mean being at the maximum force, how can we affect the radius of the bend?

  32. Xavier

    Can some one point me to a walk through of how to get the source files working? How to properly import them into an fla and what not? please

  33. Great work!

  34. Hey,
    It seems that the as3mod library of November 2008 has evolved.
    We are now in May and it looks like it is impossible to compile the file without the as3mod from 11/2008.
    Or maybe is there another solution which would be very interesting to know.
    I’m getting the following error in Flex Builder 3 running with Flash Player 9 :
    This line shows the following errors #1067 & #1137 — Problems with the : “int” and a “number of arguments incorrect (3 max) ”
    wind = new Perlin(.1, 25, 25, 95840);

    Please Help ,i’m dreaming about compiling your great work !

  35. shaked

    Thanks for your script ++
    It works perfectly
    Bravo

  36. shaked

    Just to let you know,
    I had to delete the values beetmen the brackets to make it work..
    Is there any incidence with the code ?

  37. dai

    anyone know a good tweening function for a page turn, using as3dmod and tweener (or any tween engine really)?

  38. desgraci

    I’m getting the following error in Flex Builder 3 running with Flash Player 9 :
    This line shows the following errors #1067 & #1137 — Problems with the : “int” and a “number of arguments incorrect (3 max) ”
    wind = new Perlin(.1, 25, 25, 95840);

    Please Help ,i’m dreaming about compiling your great work !

    Its not ur flash or ur flex, this code is outdated, nw you got to declare the perlin as it follows:

    wind = new Perlin(f:Number,n:PerlinNoise,a:Noolean);

    please read the documentation about what goes in each of them, or update the code.

  39. desgraci

    btw and sry for double post, u know how to acces ht emethod setfalloff in the perlin, i think they removed, but not sue, if they only changed, but i cant find it, tx in advance

  40. slimbuddah

    running FlexBuilder4/ FlashPlayer 10. i had the same error as desgraci, so I just used the first argument
    wind = new Perlin(.1);
    , also added an AddedToStage event listener, in order to get the stage properties values to work. all compiling nicely now ;)

    Many many thanks for your work, very inspiring !!! :)

  41. Brilliant! New levels of flash 3d…

  42. Hi can u do one folding effect to plane? Not curve fold. It should fold a plane to 2 or 3 folds like a brochure. Is it possible?

  43. Hi
    First of all your website is just awesome.
    Concerning the paper effect, why did you put your “onComplete:onAnimated” at the last tween (which is a .5 seconds only tween) to avoid to use the animation function ? The onAnimated function will be called before the end of animating.
    Thanks for your work :)

  44. @Alexandre it’s not on purpose – it’s a typo. It should be called when all the animations end. Thanks for noticing!

  45. [...] mal hier: Paper simulation in with AS3Dmod and Away3D – Everyday Flash __________________ Es gibt nur zwei Arten von Menschen die Hawaiihemden tragen: Schwuchteln und [...]

  46. Chris

    Great stuff only I get a problem when compiling…

    [code]
    AwayPaperDemo.as(100): col: 26 Error: Implicit coercion of a value of type int to an unrelated type com.as3dmod.util.bitmap:PerlinNoise.
    AwayPaperDemo.as(100): col: 35 Error: Incorrect number of arguments. Expected no more than 3.
    [/code]

    If I change the parameter to 2 it works but very wobly :P

  47. Chris

    Ah changing to..

    wind = new Perlin(.1); works :)

  48. Chris

    If i do..

    bend = new Bend(-2, 0.5, 1.5707963);
    bend.constraint = ModConstant.RIGHT;
    mstack.addModifier(bend);

    It seems to constrain the top of my object in away3d instead the right? is there any tutorial how to use constraints?

  49. Brian

    Works great, and thanks. Yes, changing the wind Perlin to 0.1 makes it work–you can also remove the wind effect, which is what a Perlin is.

    I have a question. How do you change the extremity of the bend? For instance, suppose you go to flip a page in a book. How do you make it so that the page curls with a smaller radius to the bend?

    So far the bend is quite large/broad.

  50. jp

    Woaaaaaaa!!!
    Maybe a Unity3D version?

    JP

  51. @jp I ported some of the modifiers to C# – you car read about it here: http://www.everydayflash.com/blog/index.php/2009/11/10/porting-actionscript-to-unity3d/ It’s not the complete library though.

  52. Best wishes from Poland. Great library, very smooth and usefull. Thanks !

    PS.
    I’m currently using bend, and i’m impress :)

  53. geeker

    Great work, but where is the angle parameter gone?

  54. Flashox

    Same problem, i can’t find a working package with the 3′rd value “angle”.

    Anyone knows where to get the latest files?

  55. Philipp

    Nice work!

    I have the same problem as in previous comments – where can I get the last version? According the documentation there should be 0.3 version, but at Google Code I can find only v0.2

  56. Nail

    The latest version isn’t the zip file. It is in the SVN. Get yourself a SVN client app and go download the latest version of the code here: http://as3dmod.googlecode.com/svn/trunk/

    Great set of modifiers BTW! Many thanks to the authors.

    Is there a place for comprehensive documents on all the parameters and how to use them?

  57. Nail

    Nevermind!

    I just found the docs here:
    http://www.everydayflash.com/flash/as3dmod/doc/

    AGAIN – Thank you to the authors.

    :)

Leave a comment



  • FITC10


  • FITC10


  • FITC10