Hi!


This is a new example on how to create animations with Actionscript 3.0 and Flash CS3 .

This time, I will show you how to create a Mouse Trailer, an effect based on the Event.MOUSE_MOVE.

Also, I use 2 classes to take advantage of the inheritance of Actionscript 3.0.

I think that this effect could have various practical application:

- a header for a blog or portal

- as an intro to your personal web site

- as an advertising banner


As always, you can modify it as wanted and do not forget that the examples posted on FlepStudio are purely educational.


Move the mouse above the SWF:






I create a FLA and I save it as ‘main.fla’.
Into which, I have two MovieClip in library named ‘mc_daisy’ and ‘mc_aster’.
They are respectively associated to the classes Daisy and Aster (created next).

Before creating the Document Class, I want to remind you that this example take advantage of the inheritance of Actionscript 3.0 the following ways:
- the DC (Main.as) extends MovieClip
- Daisy extends MovieClip
- Aster extends Daisy

I now create the Documents Class, an AS file saved as ‘Main.as’, implemented the following way:
Code:
package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	
	public class Main extends MovieClip
	{
		private var flowers_array:Array=new Array(Daisy,Aster);
		
		public function Main()
		{
			stage.addEventListener(MouseEvent.MOUSE_MOVE,createFlower);
		}
		
		private function createFlower(evt:MouseEvent):void
		{
			var n:int=Math.floor(Math.random()*2);
			var flower:MovieClip=new flowers_array[n];
			addChild(flower);
		}
	}
}
The Daisy.as class (associated to the MovieClip mc_daisy placed in the FLA’s library):
Code:
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Daisy extends MovieClip
	{
		private var speed:Number;
		
		public function Daisy()
		{
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
			
			x=parent.mouseX;
			y=parent.mouseY;
			scaleX=scaleY=.3+Math.random();
			speed=4*scaleX+Math.random()*10;
			
			addEventListener(Event.ENTER_FRAME,IamDancing);
		}
		
		private function IamDancing(evt:Event):void
		{
			y+=speed;
			alpha-=speed/100;
			rotation+=speed;
			if(y>=stage.stageHeight||alpha<=0)
			{
				removeEventListener(Event.ENTER_FRAME,IamDancing);
				parent.removeChild(this);
			}
		}
	}
}
The Aster.as class (associated to the MovieClip mc_aster placed in the FLA’s library):
Code:
package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Aster extends Daisy
	{
		private var speed:Number;
		
		public function Aster()
		{
			super();
		}
	}
}
Let us analyse the code

Main.as

Properties
an Array containing the names of the two classes Daisy and Aster
private var flowers_array:Array=new Array(Daisy,Aster);

Constructor function
I add to the stage a listener to the event MOUSE_MOVE. This way, when the mouse moves, the function createFlower will be called
stage.addEventListener(MouseEvent.MOUSE_MOVE,creat eFlower);

Methods
createFlower();
I create a numerical variable to which I assign a random numerical value (in this case, 0 or 1)
var n:int=Math.floor(Math.random()*2);
I instance the class at the index n of the Array flowers_array
var flower:MovieClip=new flowers_array[n];
I add the instance flower to the stage
addChild(flower);

Now, as the Daisy and Aster classes have in the building function, a listener to the event Event.ADDED_TO_STAGE, the command addChild(flower) will call the function defined in the listener ADDED_TO_STAGE

Let us take a look at it.

Daisy.as

Properties
A numerical variable to which I assign the falling speed for the flower
private var speed:Number;

Constructor function
I add a listener to the event ADDED_TO_STAGE which will call the function init at the precise moment the MovieClip is added to the stage
addEventListener(Event.ADDED_TO_STAGE,init);

Methods
init();
I remove the listener from the ADDED_TO_STAGE
removeEventListener(Event.ADDED_TO_STAGE,init);
I declare the position based on the mouse coordinates
x=parent.mouseX;
y=parent.mouseY;
I impost a random value for scaleX and scaleY
scaleX=scaleY=.3+Math.random();
I assign a random value to the variable speed
speed=4*scaleX+Math.random()*10;
I start the ENTER_FRAME calling the function IamDancing
addEventListener(Event.ENTER_FRAME,IamDancing);

IamDancing();
I add to the y the value of speed
y+=speed;
I decrease the alpha of a value based on the value of speed
alpha-=speed/100;
I increase the rotation based on the value of speed
rotation+=speed;
I control the y and if it is bigger then the stage’s height or is the alpha is smaller then zero
if(y>=stage.stageHeight||alpha<=0)
{
I stop the ENTER_FRAME and doing so, remove the MovieClip
removeEventListener(Event.ENTER_FRAME,IamDancing);
parent.removeChild(this);
}

Aster.as
As this class extends the Daisy class, it inherits all its properties and methods.
Also, in the building function of Aster, I activate the operator super(); which will call the building function of Daisy. It will next carry out the code as seen before but referred to Aster.

See you next and stay tuned!