Coding a flow of leafs...

Become a member of the CGSociety

Connect, Share, and Learn with our Large Growing CG Art Community. It's Free!

Thread Tools Display Modes
  11 November 2002
Coding a flow of leafs...

Hello Everybody!

I'm designing a website with flash. I've some good base of it, but I don't know how to create an alogrithm to make flower the motion those clips. I've took a movie of snow (on and I've work on.
It generate randomly the motion of each duplicated clips.
(ref. snow2.swf)

I want make something very like a scene of "Corto Maltese in Siberia" where the flow of leaf is very lite. (ref. corto.jpg)

>>> How to get a nice flow of clips?
Can someone help to find a solution? Or send me a *.fla about this style or make contact a someone (or friend) who can do it.

Thanks you very much ! !

(sorry for my English)
  11 November 2002
I try and stay away from code as much as possible.....try making a movie clip that has many movie clips of leaves.....then reuse them over and over again....most people viewing it wont think twice about opinion.
William "Proton" Vaughan
  11 November 2002
Thanks you for your idea Proton, but I need make the leafs motion by random because that is an important element of the site. It is an interactiv aspect of the site

That the soruce i've used for what you see:

Help me again
  11 November 2002
well... i guess the first thing is that leaves tend to spiral their way through the air, so get them spinning in a nice way, with just add a set ammount (coule be a random ammount set at teh beginning of the movie) to each leaf. dont forget you can add a negative ammount too.

then to give a good leaf swaying motion two ways really. one is to use sin waves which is mechanical but can work quite nicely... the other is to use itterations.

use a sine wave as teh basis for sideways motion, if you want to add a little bit of randomness you can add a random ammount to the angle in the sin commande

  • myMovieClip._y--;
    myMovieClip._x=centreOfWiggle+(ammountOfSwayInPixe ls*Math.sin(currentAngleInRadians));
    currentAngleInRadians=currentAngleInRadians+Math.r andom(Math.PI);

or something like that, though sigh a high random value might be a bit much... you have to bear in mind i've not done any actionscript for about a little while so i'm kinda rusty myself. anyhow it's pretty self explanatory, the movieclip of your leaf slowly moves down the y ammount (if you want to be cunning you can make it go in a more spirally moviment by copying the same equation that's used for teh x position to teh y position, usin a Math.cos (cosine) instead of a math.sin and changeing he centreofwiggle to be centreofwiggley, then slowly adding the vertical position of the leaf (overall) by adding to teh centreofwiggley variable.

this might give you a nice effect. and also shouldn't be too processor intensive.

if you want something alittle more organic then you have to start using itterations, which isn't too hard, but let me know if this will do or if you need something more.

oh before i go another thing you can do to smooth out the motion some is instead of just adding a random ammount to the angle of the leaf (currentAngleInRadians) you can change things so that instead it adds (or subtracts) a random ammount from the ammount that is added to this value, this will create a more stately change in velocity.

  • angleAddition=angleAddition+(Math.random(0.1)-0.05);
    currentAngleInRadians=currentAngleInRadians+angleA ddition;

this is just a simple step of adding a random ammount between -0.05 and +0.05 to the angleAddition value... should do the trick... the only thing that might be a problem here is that as i say it's beena while so it may be that in actionscript math..random's must be used in this syntax Math.random()*randomAmmount... anyhow an algorythm like the one here should give a result... though there are lots of others... for instance you could just take the x position and use the same algorythm as is used to add to the currentAngleInRadians variable to change it's position in a nice curvy manner. just try changeing the constants in here.

hope that this helps some (or maybe i've just made things even harder to underestand.. urgh)
  11 November 2002
oh yeah, a nice thing might be to have several movie clips within each other, a movie cliip within a movie clip etc, each one rotating around a random point some way away from teh leaf itself, multiple orbits. then the parent movie clip should be simply moved down the screen, all the leaves rotating inside, taking on teh rotation of their parent movie clips until you get a nice motion. a few of those around teh screen... if you want it to be extra clever just do some action script that ranomly postions the sub movie clips on load so that their rotation and their parents rotation makes for interesting movement and intertwining of leaves.

here's teh heirarchy


each leaf rotating around any point, one complete rotation, looping, each rotation taking a random number of frames, then each rotation point being at a random position (all of this just standard tweening not actionscript by the way). each leaf has a onload function which the positoin is set randomly so that the parent leaves rotation affects it differently in conjunction with it's own rotation.

then the basemovie should just move down whatever path you want... should look great
  11 November 2002
Thank you very much mdme_sadie

I'm very glade, I print your documentation and will read it in my bed (cause in France it's so late now).

I'll give you call back tomorow!

1001 thanks!
  11 November 2002
Hye mdme_sadie,

You've give me three devices :
1-using trigonometric (cos & sin) action.
3-using motion in clip.

____ The motion _____
I thing the first and the second solution are better. And have you had a look at the *.fla I've used (It interessant to manage the parameters of a clip (size and color)). Would you help me to make a choice by having a look at my project (ref. image)

I thing we should create a emmiter with which it's possible to manage the flow by one variable. And so during the loading the flow is more and more speed by finishing by a constant flow at navigation.

____ The clip _____
In reality I'll use feathers, and not leaves (note : it have an analogic motion).
Note I will use 3 type of feather. So one clip with 3 images or 3 emmiters?

Thank you very much.

Nicolas d'Haussy
Attached Images
File Type: gif variations.gif (9.9 KB, 148 views)
  11 November 2002
thats a very cool concept for a loader.

Go check out the source code at
If noone quotes you, you probaly havn't said anything worth saying.
  11 November 2002
here's a basic thing i knocked up for ya. enjoy

base movie three frames
on frame 1

  • totalrate=1;


frame 2

  • currentrate = (this.getBytesTotal()/this.getBytesLoaded())*totalrate;
    if (currentrate>1) {
    for (i=0; i<currentrate; i++) {
    _root.attachMovie("feather", "feather" & dep, dep);
    if (dep>maxfeathers) {
    dep = 0;
    } else {
    chance = Math.random();
    if (chance<currentrate) {
    _root.attachMovie("feather", "feather" & dep, dep);
    if (dep>maxfeathers) {
    dep = 0;

frame 3

  • gotoAndPlay(2);

then a movie cliip containing your feather and again three frames with actionscript. the movieclip has a linkage to exposrt as actionscript and the name is feather.

on frame 1 the script is as follows

  • maximumspeed=20;

    wobble1=minimumwobble+(Math.random()*(maximumwobbl e-minimumwobble));

frame 2

  • rot1+=rotAmmount1;
    if ((_x-200)>Stage.width) {

frame 3

  • gotoAndPlay(2);

ok... well that should do for teh moment

very basic, but tweakable to however you want i should imagine.

and check teh attached file to see this all working
, contains the fla and swf

it shouldnt take you too long to add z depth to this if you wanted and control over an animation of a feather rather than just plain rotation.
Attached Files
File Type: zip (3.8 KB, 19 views)

Last edited by mdme_sadie : 11 November 2002 at 08:42 PM.
  11 November 2002

You can't know how I'm happy mdme_sadie ! ! !
You are an wonderful coder to have make it as speedly and reaslisticly. Would you give me your name because you've all the merit for this on the website. If I can help you, contact me! But I don't thing I can in Multimedia!

Thank you for your compliment [msf]. I'm serously working on this site as a ART work. Nb your adress doesn't work... Give me the right link please.

I'll will inform you about the advancements of the site.

Nicolas d'Haussy
  11 November 2002
you're welcome... the only thing you need to add of course is a

  • if (_root.getBytesLoaded()==_root.getBytesTotal()) {
    gotoAndPlay("Scene name",1); //or do whatever, make movie visible etc

in the second frame of the root movie.

my name is Per-Anders Edwards and counter to my nick i'm a guy. my website is

if it's ok just a link to my site from your links page would be nice

glad i could be of assistance
  11 November 2002
I'll will write a little text about the making of the website and so You will be in... I'll will evidently add your link in the firends part
  11 November 2002
wow, very cool stuff. i'm going to have to get into the code and see how you did that in detail

  11 November 2002
Hye mdme_sadie,

Note you aren't obliged to reply to all points.
(By order of interest)

1-There is BIG a problem of continuity. In fact at the beginning, there are too much feathers and after 3 minutes there are one or two maximum!!

2-About z (depth) aspect should I code a simple size variation at the beginning or a real 3d movement?

3-I've study the code and I would like to have your opinion of the possibility of having 3 different type (graphicly) of feathers... So 3 emiter or a simple modif of the clip?

4-Is the variable "totalrate" realy useful? It's equal to 1!

Nicolas d'Haussy
  12 December 2002
ok well, in answer

1) Oops sorry, That's my mistake! i put the eqution the wrong way around in frame 2 of the root movie... just change the first line to read as follows:

  • currentrate = (this.getBytesLoaded()/this.getBytesTotal())*totalrate;
this should now work teh way you want it to.

2) It's best to change the movement, to do this you should change a number of things, not just size, but motion speed in reference to z depth and some form of sorting algorythm. you can do this by perhaps having an array of maxfeathers value in the root level which each value is at the beginning set to 0... when on frame 2 he evaluation is true to make a new feather just do a do loop search in randomly in the array to find a free slot, then set dep to that value, change that array value to read that the slot is full, and send the dep value to some variable in the movieclip so that it knows what it's depth is... it's best to send a value rather than getting it to read any movieclip paramaeter (such as name) as it's much faster to deal with variables. then in teh movie clip on the first frame check the zdepth value and multiply up the starting position accordingly, divide the maximum x add value accordingly (the y value is takne from this as it is), and scale the movie clip top suit. then once the movie clip dies it should set the oot level array for it's depth to read that that depth is empty.

3) I would have three frames in a submovie of teh feather inside of teh feather movieclip. then in the first frame i would do a gotoAndStop at a random frame in that submovie. the submovie would replace the current feather graphic that i just put in there vvery roughly (use random, provided you wanted random leaves, otherwise use whatever algorythm you want).

4) It's up to you what the total number of feathers is, you can set it to be less than 1, or higher. 1 is a guaranteed 1 per frame, 2 a guaranteed 2 per frame, less than 1 is a random chance of getting the feather. It's up to you, if you're happy with that value then keep it, it's jsut to make the code easy to understand.

now i hope i answered all your questions satisfactorally
  share thread

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Society of Digital Artists

Powered by vBulletin
Copyright ©2000 - 2006,
Jelsoft Enterprises Ltd.
Minimize Ads
Forum Jump

All times are GMT. The time now is 09:19 PM.

Powered by vBulletin
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.