Effetto scìa con Flash CS3

[Flep]

Ciao gente !

Ecco un nuovo esempio di come creare delle animazioni con Flash CS3 ed Actionscript 3.0 .
In questo caso, simulo la scìa di un oggetto in movimento.
Come sempre sottolineo il fatto che questo esempio è a scopo didattico ( giusto per non dire che le mie grafiche fanno schifo hehe ) e quindi una volta appresa la logica e le tecniche del codice, starà a voi apportare le migliori grafiche personalizzando l' SWF a vostro piacimento.

Avanti tutta con la fantasia !
E come sempre, chi più ne ha...più ne metta !

Ecco il risultato:

Creo un FLA che salvo con nome ' main.fla '.
Al suo interno ho una MovieClip in libreria con nome ' mc_clip ' a cui associo una classe di nome Clip ( questa volta non è necessario crearla, la crea Flash per noi ).

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.Event;
	
	public class Main extends MovieClip
	{
		private var clip_mc:MovieClip;
		
		private const RADIUS:int=120;
		private const FRICTION:Number=.95;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			createClip();
		}
		
		private function createClip():void
		{
			clip_mc=new Clip();
			clip_mc.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
			clip_mc.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
			clip_mc.angle=0;
			addChild(clip_mc);
			
			clip_mc.addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(evt:Event):void
		{
			evt.target.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
			evt.target.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
			evt.target.angle+=.05;
			
			var copy_mc:MovieClip=new Clip();
			addChild(copy_mc);
			
			copy_mc.x=evt.target.x;
			copy_mc.y=evt.target.y;
			copy_mc.addEventListener(Event.ENTER_FRAME,goCopy);
		}
		
		private function goCopy(evt:Event):void
		{
			evt.target.alpha*=FRICTION;
			evt.target.scaleY=evt.target.alpha;
			if(evt.target.alpha<=.3) 
			{
				evt.target.removeEventListener(Event.ENTER_FRAME,goCopy);
				var m:MovieClip=evt.target as MovieClip;
				removeChild(m);
			}
		}
	}
}

Analizziamo il codice

Proprietà
una variabile di tipo MovieClip che istanzierà la classe Clip la quale è associata alla MovieClip ' mc_clip ' che è nella libreria del FLA
private var clip_mc:MovieClip;
una costante che contiene il valore del raggio dell' angolo che utilizzo per muovere la MovieClip
private const RADIUS:int=120;
una costante che funge da frizione ( vedi questo tutorial )
private const FRICTION:Number=.95;

Funzione Costruttrice
chiamo il metodo init
init();

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
chiamo il metodo createClip
createClip();

createClip();
creo una nuova Clip
clip_mc=new Clip();
gli imposto una x ed una y utilizzando seni e coseni, questo perchè dato che quando partirà l' animazione utilizzerò la stessa logica di seni e coseni la clip avrà già le coordinate di partenza in modo che non si veda alcuno spostamento dal momento in cui attacco la clip al momento in cui inizierà l' animazione
clip_mc.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
clip_mc.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
aggiungo una proprietà a clip_mc che chiamo angle e la imposto a valore zero
clip_mc.angle=0;
aggiungo clip_mc allo stage
addChild(clip_mc);
aggiungo ENTER_FRAME a clip_mc che chiamerà il metodo go tot volte al secondo pari al numero del frame rate ( in questo caso chiama il metodo go 31 volte al secondo )
clip_mc.addEventListener(Event.ENTER_FRAME,go);

go(evt:Event):void
assegno x e y a clip_mc in base ai volori ottenuti utilizzando della semplice trigonometria
evt.target.x=stage.stageWidth/2+Math.cos(clip_mc.angle*2)*RADIUS;
evt.target.y=stage.stageHeight/2+Math.sin(clip_mc.angle*3)*RADIUS;
incremeto la proprietà angle di clip_mc
evt.target.angle+=.05;
creo un' altra Clip che chiamo copy_mc
var copy_mc:MovieClip=new Clip();
l' aggiungo allo stage
addChild(copy_mc);
assegno le stesse coordinate x e y di clip_mc a copy_mc
copy_mc.x=evt.target.x;
copy_mc.y=evt.target.y;
a sua volta copy_mc avrà un proprio ENTER_FRAME che chiama il metodo goCopy
copy_mc.addEventListener(Event.ENTER_FRAME,goCopy) ;

goCopy(evt:Event):void
applico la frizione alla proprietà alpha di copy_mc
evt.target.alpha*=FRICTION;
imposto la proprietà scleY di copy_mc con ad un valore uguale alla sua alpha
evt.target.scaleY=evt.target.alpha;
controllo se l' alpha di copy_mc è minore di 0.3
if(evt.target.alpha<=.3)
{
se lo è, fermo l' ENTER_FRAME di copy_mc
evt.target.removeEventListener(Event.ENTER_FRAME,g oCopy);
rimuovo copy_mc
var m:MovieClip=evt.target as MovieClip;
removeChild(m);
}

Alla prossima !

[Teejay]

Io invece ho fatto questo... ;-)

[Flep]

Grazie Teejay

Se postassi anche il codice sorgente, credo che molti utenti ti ringrazierebbero

[Teejay]

Originally Posted by Flep

Grazie Teejay

Se postassi anche il codice sorgente, credo che molti utenti ti ringrazierebbero

Hai ragione, scusate tutti ma l'ho messo su ieri di frettissima!

Ecco il codice (commentato):

// istanzio un oggetto Square, ossia il quadratino preventivamente esportato per AS
var clip:Square = new Square();


// creo un contenitore e lo posiziono sullo stage
var container:Sprite = new Sprite();
addChild(container);


// creo la Bitmap su cui sarà applicato il filtro, e il filtro stesso
// settando a false il 3° parametro di BitmapData (trasparenza) è possibile eliminare la "vampata" iniziale
var bmd:BitmapData = new BitmapData(550,400, true,0x000000);
var bm:Bitmap = new Bitmap(bmd);
var blur:BlurFilter = new BlurFilter(8,8,3);


// creo un campo di testo che conterrà il FPS meter
var txtFps:TextField = new TextField();
txtFps.x = 500;
txtFps.y = 15;
var myTextFormat:TextFormat = new TextFormat("_sans",10,0xFFFFFF);
var i:int = 0;


// aggiungo a container la bitmap che mi servirà per raggiungere l'effetto desiderato
container.addChild(bm);

// tutto ciò che dovrà subire l'effetto scia-sfocatura viene messo all'interno di container
container.addChild(clip);

// tutto ciò che NON dovrà subire l'effetto viene invece posizionato semplicemente sullo stage
addChild(txtFps);


// setto un onEnterFrame e la funzione associatagli
addEventListener(Event.ENTER_FRAME, filter);

function filter(e:Event):void {
    
    // il quadratino si muove insieme al mouse sullo schermo
    clip.x = mouseX;
    clip.y = mouseY;
    
    // ad ogni ciclo, la bitmap viene sostituita con il contenuto di "container" e filtrata con una sfocatura
    bmd.draw(container);
    bmd.applyFilter(bmd, bmd.rect, new Point(0,0), blur);
    
    // codice di gestione per il FPS meter
    i++;
    txtFps.text = String(Math.round(i*10000/getTimer())/10);
    txtFps.setTextFormat(myTextFormat);
    
}