Create a Flower Sprayer with AS3
May 20th, 2010 in Flash | 14 CommentsIn this tut, let’s create a Summer Flower Sprayer with Actionscript 3 and Tweenlite.
1. Create a new flash file (Actionscript 3.0) and save it as spray.fla.
2. First, create a movie clip with several frames, each frame containing a different flower.
Export the movie clip for Actionscript and give it a Class name of Flower.
3. We’ll use the Tweenlite engine, so first go download its AS3 version. Open the actions panel.
First make the following imports in order to use the Twenlite engine and its easing properties.
import com.greensock.*; import com.greensock.easing.*;
4. Next manage the events that interest us that is MOUSE_UP and MOUSE_DOWN.
stage.addEventListener(MouseEvent.MOUSE_UP,stopSpray);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startSpray);
function startSpray(e:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME,sprayFlowers);
}
function stopSpray(e:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME,sprayFlowers);
}
5. In the sprayFlower function, we create a new Flower object. At first, we choose a random flower by stopping on a random frame, position the flower according to the mouse position and scale it to 0.
Then we use the Tweenlite engine to animate its x, y and rotation properties by setting their values to random numbers, and set the scaleX and scaleY properties to the same random value. Also we set the ease property to make the effect more catchy.
function sprayFlowers(e:Event):void {
var flower:MovieClip = new Flower();
flower.gotoAndStop(Math.ceil(Math.random()*flower.totalFrames));
flower.x = mouseX;
flower.y = mouseY;
flower.scaleX = flower.scaleY = 0;
addChild(flower);
var randomScale:Number = 1 + Math.random()*0.5 - 0.5;
TweenLite.to(flower, 1,{ x: mouseX + Math.random() * 60 - 30,
y: mouseY + Math.random() * 60 - 30,
rotation: Math.random() * 90 - 45,
scaleX: randomScale, scaleY: randomScale,
ease:Bounce.easeOut});
}
6. Here’s the final code, test your movie to see it in action.
import com.greensock.*;
import com.greensock.easing.*;
stage.addEventListener(MouseEvent.MOUSE_UP,stopSpray);
stage.addEventListener(MouseEvent.MOUSE_DOWN,startSpray);
function startSpray(e:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME,sprayFlowers);
}
function stopSpray(e:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME,sprayFlowers);
}
function sprayFlowers(e:Event):void {
var flower:MovieClip = new Flower();
flower.gotoAndStop(Math.ceil(Math.random()*flower.totalFrames));
flower.x = mouseX;
flower.y = mouseY;
flower.scaleX = flower.scaleY = 0;
addChild(flower);
var randomScale:Number = 1 + Math.random()*0.5 - 0.5;
TweenLite.to(flower, 1,{ x: mouseX + Math.random() * 60 - 30,
y: mouseY + Math.random() * 60 - 30,
rotation: Math.random() * 90 - 45,
scaleX: randomScale, scaleY: randomScale,
ease:Bounce.easeOut});
}
May 20th, 2010
Oh man , the demo was awesome, thanks for the tut
May 20th, 2010
Awesome,
May 20th, 2010
Please build tutorial for video conference or video chatting using adobe flex.
May 22nd, 2010
wu! It is cool! thank you for this beautiful tutorials !
May 24th, 2010
yo yo man excellent tutorials… thanks a lot
May 25th, 2010
Awesome !
May 26th, 2010
Very cool man!
This will be very usefull…
10x
May 29th, 2010
hi this is a great tut i learn very much of this
i make some changes that i addevent listener on mouse move and i am trying to remove clip after one sec
how could it be possible i remove flower after one Sec
Thanks in Advnace
May 29th, 2010
It is really cool!
And could you tell me how to clear the flowers?
Aug 11th, 2010
It looks very good.
I like the “bubble” effect !
Aug 12th, 2010
Great..brilliant and genius.
thanks.
Oct 11th, 2010
[...] 21.- Sprays con AS 3.0 [...]
Jan 24th, 2011
Please don’t publish my previous comment. I had the wrong folder setup. It works perfectly! Great effect here, very nice.
Feb 26th, 2011
Wow, i want to have this on my site
Any idea on how i can integrate this?