effetto MOUSE_MOVE

[Flep]

Ciauz !

Ecco un altro esempio di come creare delle animazioni con Actionscript 3.0 e Flash CS3.
Questa volta si tratta di un Mouse Trailer, un effetto basato sull' evento Event.MOUSE_MOVE.
Inoltre utilizzo 2 classi sfruttando l' ereditarietà di Actionscript 3.0 .
Questo effetto, a mio parere, trova diverse applicazioni pratiche:
- una header di un blog o di un portale
- come pagina di introduzione al vostro sito personale
- come banner pubblicitario

Chiaramente, come sempre del resto, potete modificarlo a vostro piacimento e non dimenticate che gli esempi di FlepStudio cercano sempre di mantenere un background didattico.

Ho già ' parlato ' abbastanza, vediamo l' effetto...

Sposta il mouse sull' SWF:

Creo un FLA che salvo con nome ' main.fla '.
Al suo interno ho due MovieClip nella liberia con nomi mc_daisy e ma_aster.
Sono associate rispettivamente alle classi Daisy e Aster ( che andrò a creare tra poco ).

Prima di creare la Document Class, tengo a specificare che in questo esempio sfrutto l' ereditarietà di Actionscript 3.0 in questo modo:
- la DC ( Main.as ) estende la MovieClip
- Daisy estende la MovieClip
- Aster estende Daisy

Adesso creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

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

La classe Daisy.as ( alla quale è associata la MovieClip mc_daisy che è nella libreria del FLA ):

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

La classe Aster.as ( alla quale è associata la MovieClip mc_daisy che è nella libreria del FLA ):

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Aster extends Daisy
	{
		private var speed:Number;
		
		public function Aster()
		{
			super();
		}
	}
}

Analizziamo il codice

Main.as

Proprietà
un Array che contiene i nomi delle classi Daisy e Aster
private var flowers_array:Array=new Array(Daisy,Aster);

Funzione Costruttrice
aggiungo allo stage un listener in ascolto dell' evento MOUSE_MOVE. In questo modo, quando il mouse si muove viene chiamato il metodo createFlower
stage.addEventListener(MouseEvent.MOUSE_MOVE,creat eFlower);

Metodi
createFlower();
creo una variabile numerica alla quale assegno il valore di un numero random ( in questo caso può solo essere 0 oppure 1 )
var n:int=Math.floor(Math.random()*2);
istanzio la classe che si trova all' elemento n dell' array flowers_array
var flower:MovieClip=new flowers_array[n];
aggiungo l' istanza flower allo stage
addChild(flower);

Ora, dato che le classi Daisy e Aster hanno nella funzione costruttrice un listener in ascolto dell' evento Event.ADDED_TO_STAGE, il comando addChild(flower) farà eseguire il codice della funzione definita appunto con il listener di ADDED_TO_STAGE.

Vediamo.

Daisy.as

Proprietà
una variabile umerica ala quale assegnerò il valore di velocità di caduta del fiore
private var speed:Number;

Funzione Costruttrice
aggiungo un listener in ascolto dell' evento ADDED_TO_STAGE che chiamerà la funzione init al momento in cui questa MovieClip sarà aggiunta allo stage
addEventListener(Event.ADDED_TO_STAGE,init);

Metodi
init();
rimuovo il listener in ascolto di ADDED_TO_STAGE
removeEventListener(Event.ADDED_TO_STAGE,init);
dico di posizionarsi alle coordinate del mouse
x=parent.mouseX;
y=parent.mouseY;
imposto un valore random di scaleX e scaleY
scaleX=scaleY=.3+Math.random();
assegno un valore random alla variabile speed
speed=4*scaleX+Math.random()*10;
faccio partire ENTER_FRAME chiamando il metodo IamDancing
addEventListener(Event.ENTER_FRAME,IamDancing);

IamDancing();
aggiungo alla y il valore di speed
y+=speed;
diminuisco l' alpha di un valore che dipende anche dalla velocità ( quindi dal valore della variabile speed )
alpha-=speed/100;
aumento la rotazione di un valore che dipende anche dalla velocità ( quindi dal valore della variabile speed )
rotation+=speed;
conrollo la y e se è maggiore dell' altezza dello stage oppure se l' alpha è minore o uguale a zero
if(y>=stage.stageHeight||alpha<=0)
{
fermo ENTER_FRAME e, diciamo autorimuovo questa MovieClip
removeEventListener(Event.ENTER_FRAME,IamDancing);
parent.removeChild(this);
}

Aster.as
Questa classe, dato che estende la classe Daisy, ha a disposizione tutte le sue proprietà ed i suoi metodi.
Inoltre, nella funzione costruttrice di Aster attivo l' operatore super(); che chiama la funzione costruttrice di Daisy la quale eseguirà il codice però riferito ad Aster.

Alla prossima & stay tuned !

[floppy]

Ciao
Come fai a fare sì che il file main.fla usi i tre files .as ?

Ho fatto come dici : creato un file "main.fla" con i due simboli mc in libreria, poi ho salvato i tre files .as con i nomi da te indicati, ma non li carica.
In effetti, non c'è nulla nel file .fla che indichi di usare quei 3 .as.

Dove sbaglio ?


Grazie !

[Flep]

Ciao floppy :)

Al suo interno ho due MovieClip nella liberia con nomi mc_daisy e ma_aster.
Sono associate rispettivamente alle classi Daisy e Aster ( che andrò a creare tra poco ).

Click destro su mc_daisy in libreria e assegna la classe Diasy
Click destro su mc_aster in libreria e assegna la classe Aster

[floppy]

Da dove ?
Linkage o Properties ?

Grazie ...

[Flep]

Linkage.
Puoi accederci anche da properties.

[floppy]

Però continua a non funzionarmi
Vabè, domani ci riprovo.
;-(

[floppy]

Niente da fare .... non li carica !
Qualche idea ?

:-(

[Flep]

Se alleghi i files guardo dov'è l' errore.

[floppy]

Certo.
Provo ad allegare da qui.
Se non funziona li metto su Rapidshare.
fammi sapere.
Grazie mille

[Flep]

floppy !

Non hai dichiarato la Document Class

Nel pannello proprietà in baso devi scrivere Main nel campo Documen Class o Classe Documento se la tua versione è in italiano.