Create a Flower Sprayer with AS3

Create a Flower Sprayer with AS3

In this tut, let’s create a Summer Flower Sprayer with Actionscript 3 and Tweenlite.

View DemoDownload Source

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});
}

14 thoughts on “Create a Flower Sprayer with AS3

  1. abu bakar

    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

  2. Pingback: 35 tutoriales de alto nivel para Actionscript | CyberHades

  3. Sarah-Jane

    Please don’t publish my previous comment. I had the wrong folder setup. It works perfectly! Great effect here, very nice.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>