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:
Code:
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 !
08-11-07, 06:42
Linear Mode
