effect - Fallen leaves

[Flep]

Good morning!

Here is a new tutorial about animation realised with Flash CS3.
After having seen how to simulate water and clouds , we will next see how to realise the effect of fallen leaves. Those leaves could be replaced with any other shape you fancy.
I am not a graphic person so let your fantasy runs wild.
The script"

I create a FLA and I save it as "main.fla".
In its library, I have 6 different MovieClip, each one of them associated to a class and so, ready to be "attached" at runtime.
The names of the class are: mc_clip_0,mc_clip_1,mc_clip_2,mc_clip_3,mc_clip_4, mc_clip_5.
Even more, I have a MovieClip on stage used as background (a simple image in my case) with an instance name "bg_mc".

I create the Documents Class, an AS file saved as "Main.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class Main extends MovieClip
	{
		private var clips_array:Array;
		
		private const SPRING:Number=.1;
		
		private var timer:Timer;
		
		public function Main()
		{
			init();
			initTimer();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			bg_mc.x=0;
			bg_mc.y=0;
			bg_mc.width=stage.stageWidth;
			bg_mc.height=stage.stageHeight;
			
			clips_array=new Array(mc_clip_0,mc_clip_1,mc_clip_2,mc_clip_3,mc_clip_4,mc_clip_5);
		}
		
		private function initTimer():void
		{
			timer=new Timer(250,0);
			timer.addEventListener(TimerEvent.TIMER,go);
			timer.start();
		}
		
		private function go(evt:TimerEvent):void
		{
			var n:Number=Math.floor(Math.random()*clips_array.length);
			var clip:MovieClip=new clips_array[n];
			
			clip.x=Math.random()*stage.stageWidth;
			clip.y=-clip.height;
			clip.center=clip.x;
			clip.vel_x=2+Math.random()*10;
			clip.vel_y=clip.vel_x;
			clip.angle=0;
			addChild(clip);
			
			clip.addEventListener(Event.ENTER_FRAME,goDown);
		}
		
		private function goDown(evt:Event):void
		{
			var acc_x:Number=(evt.target.center-evt.target.x)*SPRING;
			evt.target.vel_x+=acc_x;
			evt.target.x+=evt.target.vel_x;
			evt.target.y+=15-evt.target.vel_y;
			evt.target.rotation++;
			var sine:Number=Math.sin(evt.target.angle);
			evt.target.scaleX=sine;
			evt.target.angle+=.1;
			if(evt.target.y>=stage.stageHeight+100)
			{
				evt.target.removeEventListener(Event.ENTER_FRAME,goDown);
				var m:MovieClip=evt.target as MovieClip;
				removeChild(m);
			}
		}
	}
}

The result:

Let us analyse the code:
Properties
an Array into which I insert the name of the class associated to the MovieClips placed in library
var clips_array:Array;
a numerical constant which would be the spring seen in the spring or Spring and Friction or Spring and Mouse
private const SPRING:Number=.1;
a Timer
private var timer:Timer;

Consctructor function
I call the method init
init();
I call the method initTimer
initTimer();

Methods
init();
I impost the frame rate
stage.frameRate=31;
I tell the background image to keep to x and y equal zero. If wanted I could view the SWF at 100% as I will also tell that the width and length of bg_mc is equal to the stage size
bg_mc.x=0;
bg_mc.y=0;
bg_mc.width=stage.stageWidth;
bg_mc.height=stage.stageHeight;
I initialise the Array
clips_array=new Array(mc_clip_0,mc_clip_1,mc_clip_2,mc_clip_3,mc_c lip_4,mc_clip_5);

initTimer();
I create a new Timer and impost it to a speed of 250 for an unlimited time
timer=new Timer(250,0);
I add a listener to the Timer which will call the method go every 250 milliseconds
timer.addEventListener(TimerEvent.TIMER,go);
I start the Timer
timer.start();

go();
I create a numerical variable with a random value starting from 0 to 5 so to cover the full length of the Array
var n:Number=Math.floor(Math.random()*clips_array.leng th);
I attach the MovieClip from the library.
NB: nes clips_array[n]; Flash looks into the index n of the Array and finds out that there is a class associated to it, so it does nothing else then attach that MovieClip
var clip:MovieClip=new clips_array[n];
I impost a x and y to clip
clip.x=Math.random()*stage.stageWidth;
clip.y=-clip.height;
I create 4 properties to clip needed for the animation
clip.center=clip.x;
clip.vel_x=2+Math.random()*10;
clip.vel_y=clip.vel_x;
clip.angle=0;
I add clip to the stage
addChild(clip);
I create an ENTER_FRAME that acts on the clip and calls the method goDown
clip.addEventListener(Event.ENTER_FRAME,goDown);

goDown();
I apply the spring effect to the coordinates x of clip
var acc_x:Number=(evt.target.center-evt.target.x)*SPRING;
evt.target.vel_x+=acc_x;
evt.target.x+=evt.target.vel_x;
I increase the coordinate y
evt.target.y+=15-evt.target.vel_y;
I rotate the clip
evt.target.rotation++;
I create a variable to which I assign the value of the angle"s sinus (retrieved from the property angle of the clip itself)
var sine:Number=Math.sin(evt.target.angle);
I assign the value of the sinus to the property scaleX of clip
evt.target.scaleX=sine;
I increase the property angle of clip
evt.target.angle+=.1;
I check clip y. If it is bigger then the stage plus 100
if(evt.target.y>=stage.stageHeight+100)
{
I stop the ENTER_FRAME associated to that clip
evt.target.removeEventListener(Event.ENTER_FRAME,g oDown);
I remove clip
var m:MovieClip=evt.target as MovieClip;
removeChild(m);
}

Stay tuned !

[gwulfwud]

hey flep...where can i find that water and cloud simulation? i can't find it with the search button..

=D

[hard_overclocker]

Here they are:
Water effect with Flash CS3

and

Actionscript 3.0 perlinNoise method

[gwulfwud]

thank you!!!

[advitum]

Can you post the .FLA for Fallen Leaves in the Downloads area?

[Flep]

Hi advitum,
you can download it here:

http://www.flepstudio.org/sharing/fallen_leaves.zip

[sbrown80]

Tried the leaves tutorial, can't seem to get it to work. Having issues with the flash portion of the file talking about creating document classes for each of the movie clips which I did. Named the main timeline 'main' and the document class for the doc 'main' as well. Each of the movie clips are named, 'mc_clip_0...' and their doc class is named 'mc_clip_0...' .
When SWF file is created, nothing shows up.

Any help would be greatly appreciated!
SB-

[advitum]

Thank you kindly, Flep. Adding Trace statements to the code has been helpful to understand the tutorial.

[aspiringpro]

How would you place this code inside of a pre-existing movie?

[luxoid]

Hello all! Nice tutorial!

Flep I like to ask you how can I place the whole Class into a layer, or mc?
I like to make a money falling animation in a hourglass.
I've already modified the AS to make a smooth animation for money falling from one point but I like to place a a sand growing animation above the money. How can I control layers with classes or how can I put layers above the falling animation?
The imported animation is above all of the existing layers.
Please help me! It's really important!

Thank you!
LuX