Tuesday, 13 March 2012

Falling leaf animation in Actionscript 3

In this post I will create falling leaf animation in Actionscript 3. I will be changing the scaling, rotationY and rotation properties of the movie clip to give a realistic effect. I have created this effect using an enter frame event, but you can also use the Timer class or TweenLite to create the same kind of effect.

Falling leaf animation in Actionscript 3

Step 1

Open up a new AS3 file and import an image of a leaf into the library by selecting File > Import > Import to Library. Drag the leaf image from the library onto the stage and convert it into a movie clip (F8). Give the leaf the name ‘Leaf’ then check the ‘Export to Actionscript’ box and set the Class name to Leaf then click ok.

Step 2

The leaf movie clip will be added dynamically to the stage, so will not be needed. You can delete the leaf from the stage.

Step 3

In the timeline insert a new layer called ‘Actions’ then open the Actions panel and enter the following code. I have added the Enter Frame event to move the leaves, and also the getRandom function to return a random value.

var leaves:Array  = new Array();
var numLeaves:uint = 10;
var angle:Number = 0;

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

function enterFrameHandler(e:Event):void{


function getRandom(min:Number, max:Number):Number {
 return min + (Math.random() * (max - min));

Inside the enterFrameHandler function add the following code. The If statement ensure only the nominated number of leaves gets added onto the stage and into the array. I have also assigned the x, y, scaleX and alpha properties to the leaves. The rotY, xVelocity, yVelocity and spin are dynamic properties. Ideally you should create a separate Actionscript file for the leaf to hold these properties, but this is an easy quick and dirty method without using external Actionscript files.

if(leaves.length < numLeaves){
var leaf:Leaf = new Leaf();
 leaf.x = getRandom(0, 300);
 leaf.y = getRandom(-100, -10);
 leaf.scaleX = leaf.scaleY = getRandom(1, 2.5);
 leaf.rotY = getRandom(2, 6);
 leaf.xVelocity = Math.cos(angle) * getRandom(-3, 3);
 leaf.yVelocity = getRandom(1,3);
 leaf.spin = getRandom(0.3,1.5);

The For Loop moves each of the leaves x, y, rotation and rotationY properties. If the leaves go pass the stage height or either side of the stage they get repositioned back to the top of the stage. The angle variable increments if the value is less than 360 and reset the value if it’s greater.

for(var i:uint = 0; i< leaves.length; i++){
 var l:Leaf = leaves[i];
 l.x += l.xVelocity;
 l.y += l.yVelocity;
 l.rotation += l.spin;
 l.rotationY += l.rotY;

 if(l.y > stage.stageHeight + l.height || 
  l.x > stage.stageWidth + l.width ||
  l.x < 0 - l.width){
   l.x = getRandom(0, 300);
   l.y = getRandom(-200, -10);
   l.rotation = 0;
   l.rotationY = 0;
   l.scaleX = l.scaleY = getRandom(1, 2.5);
   l.xVelocity = Math.cos(angle) * getRandom(-3, 3);
   l.yVelocity = getRandom(1,3);

(angle < 360) ? angle += 0.2 : 0;

Step 4

Export the move Ctrl + Enter.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP