TweenLite is my favourite Flash tweening Engine for animating objects. It is extremely fast, lightweight and flexible which makes it very easy to learn. In this tutorial I will show how to you use one of their premium plugins physics2D to create a nice falling leaves effect similar to the one used in our WordPress Falling Leaves plugin. Please note that this is a paid plugin that can be bought and downladed from TweenLite official page. SWF file that is included in source files is working properly but you won’t be able to export the fla file without the physics2D plugin.
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=” http://premiumcoding.com/wp-content/uploads/2011/08/fallingLeavesAnimation.swf ” width=”570″ height=”300″ targetclass=”flashmovie”]
[/kml_flashembed]
[download id=”77″]
STEP 1: PREPARING ASSETS IN FLASH
Open Flash and create a new document in AS3. Go to File/Import/Import to stage and import a nice image of a forest. You can download the one we used from SXC stock photography site. Now repeat the previous step for the leaf which is included in source files (leaf.png). Convert it to MovieClip (right click and then Convert to Symbol). Name it leaf and be sure to export it for Actionscript (like in an image below). Now delete the leaf from the stage, we will add it later with Actionscript.
STEP 2: CODING IT UP
It is time to put our leaf to life. First you have to import Tweenlite classes that will take care of our animation.
import com.greensock.*;
import com.greensock.easing.*;
You also have to activate physics2D plugin. Use following code:
TweenPlugin.activate([Physics2DPlugin]);
We will now define a few variables that will hold values for size, rotation, starting position of leaves and number of leaves. Define following variables:
var size:Number;
var rotationLeaf:Number;
var xPos:Number;
var yPos:Number;
var nrLeaves:int = 40;
var leafs:Sprite = new Sprite();
Leafs is a container that will hold all our leaves that we will create on the fly. Add it to stage:
this.addChild(leafs);
Now add a new timeline that will take care of our animations. We will now create 40 leaves with a for loop:
var timeline:TimelineLite = new TimelineLite();
for (var i:int = 0; i < nrLeaves; i++) {
size = Math.random()*20 + 5;
rotationLeaf = Math.random()*360 + 450;
var l1:leaf = new leaf();
l1.width = size;
l1.height = size;
leafs.addChild(l1);
tweenDot(l1, getRandom(0, 10));
}
We will use a function Math.random() for leaf’s size and rotation to create a more realistic effect (each leaf has it’s own size and rotation speed). After that we create an instance of the leaf, apply the size and then add the leaf to our container. Last line calls the function that will put our leaves into motion. First variable defines the leaf and second one is the delay at which leaf will start it’s tween. We will use function getRandom to randomize the process (otherwise all leaves would start falling simotaniously and that is not very realistic). Function getRandom is a simple function that creates a random number between interval (in our case 0 and 10):
function getRandom(min:Number, max:Number):Number {
return min + (Math.random() * (max – min));
}
[amazon_carousel widget_type=”SearchAndAdd” width=600″ height=”200″ title=”” market_place=”US” shuffle_products=”True” show_border=”False” keywords=”flash” browse_node=”” search_index=”Books” /]
STEP 3: APPLYING THE ANIMATION
[smartads]
It is time to add the final part of our falling leaves animation:
function tweenDot(dot:leaf, delay:Number):void {
xPos = Math.random()*500 + 100;
yPos = Math.random()*50 – 60;
dot.x = xPos;
dot.y = yPos;
dot.alpha = 1;
timeline.insert( new TweenLite(dot, 6, { rotation:rotationLeaf, physics2D:{velocity:getRandom(10, 50), angle:getRandom(0, 180), gravity:6}, delay:delay, onComplete:removeLeafs, onCompleteParams:[dot, 0]}), timeline.currentTime);
}
First we set starting position of each leaf (we use random position for both x and y axis). And finally we animate leaves with the help of physics2D plugin . We can set velocity, angle (we used interval from 0 to 180 so leaves fall to the left and to the right) and gravity. We used random values for each leaf to increase the realistic look of the animation. You can tinker with those settings a bit to adjust the animation. Finally call the function that starts after the animation is completed to remove leaves from stage:
function removeLeafs(dot:leaf, delay:Number):void{
new TweenLite(dot, 3, {alpha:0, onComplete:tweenDot, onCompleteParams:[dot, 0]})
}
Function simply fades leaves so they slowly integrate with the background and then call the main function again to start animation all over again.
CONCLUSION
Implementation of falling leaves animation is fairly simple with the use of physics2D plugin. There are many things that you can create in a similar way (like falling snow, accelerated movement,…). Physics2D plugin allows tweening of objects based on velocity, acceleration, friction, etc. Don’t forget to download the source files and enjoy the code!
[download id=”77″]
You must be logged in to post a comment.