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!