PDA

View Full Version : Coding a flow of leafs...


Nicool
11-28-2002, 07:15 PM
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 Flashkit.com) and I've work on.
It generate randomly the motion of each duplicated clips. (ref. snow2.swf)
http://nicool.3dvf.net/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)

proton
11-28-2002, 07:37 PM
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 it....my opinion.

Nicool
11-28-2002, 07:44 PM
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:
http://www.flashkit.com/downloads/movies/zip/2455/Winter%20Type.zip


Help me again

Per-Anders
11-28-2002, 07:48 PM
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+(ammountOfSwayInPixels*Math.sin(currentAngleInRadians));
currentAngleInRadians=currentAngleInRadians+Math.random(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+angleAddition;


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)

Per-Anders
11-28-2002, 08:04 PM
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

basemovieclip.leaf.leaf.leaf.leaf.leaf.leaf.leaf

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 :)

Nicool
11-28-2002, 08:30 PM
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!

Nicool
11-29-2002, 02:56 PM
Hye mdme_sadie,

You've give me three devices :
1-using trigonometric (cos & sin) action.
2-itérations.
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

[msf]
11-29-2002, 06:39 PM
thats a very cool concept for a loader.

Go check out the source code at astro.phong.com (http://astro.phong.com)

Per-Anders
11-29-2002, 08:39 PM
here's a basic thing i knocked up for ya. enjoy

breakdown
base movie three frames
on frame 1


totalrate=1;

maxfeathers=totalrate*5000;
dep=0;
currentrate=0;


frame 2


currentrate = (this.getBytesTotal()/this.getBytesLoaded())*totalrate;
if (currentrate>1) {
for (i=0; i<currentrate; i++) {
_root.attachMovie("feather", "feather" & dep, dep);
dep++;
if (dep>maxfeathers) {
dep = 0;
}
}
} else {
chance = Math.random();
if (chance<currentrate) {
_root.attachMovie("feather", "feather" & dep, 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;
minimumspeed=5;
maximumrotation=10;
maximumwobble=50;
minimumwobble=10;

rotAmmount1=(Math.random()*maximumrotation)-(maximumrotation/2);
rotAmmount2=(Math.random()*maximumrotation)-(maximumrotation/2);
wobble1=minimumwobble+(Math.random()*(maximumwobble-minimumwobble));
wobble2=Math.random()*wobble1;
rot1=Math.random()*360;
rot2=Math.random()*360;
this._rotation=rot2/180*Math.PI;
this._x=-200;
corex=-200;
corey=Math.random()*_root._height;
xspeed=minimumspeed+(Math.random()*(maximumspeed-minimumspeed));
yspeed=(Math.random()*xspeed)-(xspeed/2);


frame 2

rot1+=rotAmmount1;
rot2+=rotAmmount2;
corex+=xspeed;
corey+=yspeed;
_x=corex+((wobble1*Math.sin(rot1/180*Math.PI))+(wobble2*Math.sin(rot2/180*Math.PI)));
_y=corey+((wobble1*Math.cos(rot1/180*Math.PI))+(wobble2*Math.cos(rot2/180*Math.PI)));
_rotation=rot2;
if ((_x-200)>Stage.width) {
this.removeMovieClip();
}


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.

Nicool
11-29-2002, 09:08 PM
Hye,

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

Per-Anders
11-29-2002, 09:21 PM
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 www.peranders.com

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

glad i could be of assistance

Nicool
11-29-2002, 09:40 PM
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 :D

fig
11-30-2002, 07:29 PM
wow, very cool stuff. i'm going to have to get into the code and see how you did that in detail :)

chris

Nicool
11-30-2002, 11:38 PM
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

Per-Anders
12-01-2002, 12:08 AM
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 :)

Nicool
12-01-2002, 12:53 AM
Thank you for your complete answer!!

Solesurvivor
12-02-2002, 12:04 AM
wow, i'm impressed mdme_sadie:thumbsup:

Gentle Fury
12-02-2002, 05:42 AM
please post the resultant movie!!!

i wanna see this massive script in action!!

DuRanG
12-09-2002, 01:09 PM
very good :applause:

CGTalk Moderation
01-13-2006, 11:00 PM
This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.