Animazioni con Flash CS3 - spring e frizione

[Flep]

Questo articolo è il proseguimento dell' articolo in cui abbiamo visto come applicare l' effetto spring con Actionscript 3.0 .

Per chi non avesse ancora letto Animazioni con Actionsctipt 3.0 - the spring, consiglio di dargli un' occhiata in modo da poter capire meglio questo articolo.

Con l' esempio della spring, il mio oggetto andava in loop da destra a sinistra con un senso oscillatorio.

Adesso vediamo come diminuire sempre di più l'oscillazione fino a fermare l' oggetto.

Ecco come...

Primo caso:

creo un FLA e lo salvo con nome ' spring_1.fla '

creo una qualsiasi MovieClip e gli assegno nome istanza ' clip_mc '
creo la Document Class, un file AS che salvo con nome ' SpringAndFrizione.as ', così implementata:

package
{
	import flash.display.MovieClip;
	import flash.display.SimpleButton;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class SpringAndFrizione extends MovieClip
	{
		private const spring:Number=.1;
		private const frizione:Number=.9;
		private var centro:Number;
		private var vel_x:Number=0;

		public function SpringAndFrizione()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			addButtonListener();
			
			centro=stage.stageWidth/2;
			
			clip_mc.x=-200;
			clip_mc.y=stage.stageHeight/2;
			clip_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function addButtonListener():void
		{
			replay_btn.addEventListener(MouseEvent.MOUSE_DOWN,redo);
		}
		
		private function muovi(e:Event):void
		{
			var acc_x:Number=(centro-e.target.x)*spring;
			vel_x+=acc_x;
			vel_x*=frizione;
			e.target.x+=vel_x;
		}
		
		private function redo(m:MouseEvent):void
		{
			clip_mc.removeEventListener(Event.ENTER_FRAME,muovi);
			vel_x=0;
			clip_mc.x=-200;
			clip_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
	}
}

Risultato:

Secondo caso:
creo un FLA e lo salvo con nome ' spring_1_a.fla '
creo un campo di testo con del testo a piacere.
Utilizzando il comando da tastiera CTRL+B divido il campo di testo in altrettanti campi per quante sono le lettere
converto ogni campo di testo in MovieClip e gli assegno i nomi clip_0_, clip_1_mc, clip_2_mc ecc ecc
creo la Document Class, un file AS che salvo con nome ' SpringAndFrizione_a.as ', così implementata:

package
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class SpringAndFrizione_a extends MovieClip
	{
		private var clips_array:Array;
		
		private const spring:Number=.1;
		private const frizione:Number=.85;
		private var centro:Number;
		
		private var timer:Timer;
		
		private var t_e:TimerEvent;

		public function SpringAndFrizione_a()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array(clip_0_mc,clip_1_mc,clip_2_mc,clip_3_mc,clip_4_mc,
			clip_5_mc,clip_6_mc,clip_7_mc,clip_8_mc,clip_9_mc);
			
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].y=-200;
				clips_array[i].vel_y=0;
			}
			
			centro=stage.stageHeight/2;
			
			startTimer(t_e);
		}
		
		private function callStartTimer():void
		{
			timer=new Timer(7000,1);
			timer.addEventListener(TimerEvent.TIMER,startTimer);
			timer.start();
		}
		
		private function removeListeners():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].removeEventListener(Event.ENTER_FRAME,muovi);
				clips_array[i].y=-200;
				clips_array[i].vel_y=0;
			}
		}
		
		private function startTimer(t:TimerEvent):void
		{
			removeListeners();
			
			timer=new Timer(100,clips_array.length);
			timer.addEventListener(TimerEvent.TIMER,go);
			timer.addEventListener(TimerEvent.TIMER_COMPLETE,finito);
			timer.start();
		}
		
		private function go(t:TimerEvent):void
		{
			clips_array[timer.currentCount-1].addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function muovi(e:Event):void
		{
			var acc_y:Number=(centro-e.target.y)*spring;
			e.target.vel_y+=acc_y;
			e.target.vel_y*=frizione;
			e.target.y+=e.target.vel_y;
		}
		
		private function finito(t:TimerEvent):void
		{
			callStartTimer();
		}
	}
}

Risultato:

Analizziamo il codice:

in entrambi i casi, la base dello script è identica a quello dell' articolo sull' effetto spring,

in questo caso aggiungo il valore ' frizione ' , un valore costante che viene utilizzato per rallentare fino a fermare la spring.

E' più facile da fare che da spiegare :P

Focalizziamoci sui metodi muovi() del primo e secondo caso:

solo con la spring, il codice era questo

applico l' inerzia ( vedi articolo effetto inerzia )

var acc_x:Number=(center-sprite.x)*spring;

aggiungo l' inerzia al valore della variabile velocità ( vel_x )

vel_x+=acc_x;

aggiungo la velocità alla X dell' oggetto che voglio muovere

sprite.x+=vel_x;

aggiungendo la frizione, il codice diventa questo:

applico l' inerzia

var acc_x:Number=(centro-e.target.x)*spring;

aggiungo l' inerzia al valore della variabile velocità ( vel_x )

vel_x+=acc_x;

moltiplico il valore di vel_x per il valore della frizione ( in questo caso la frizione è 0.9, quindi sarebbe come dire diviso 9 )

vel_x*=frizione;

aggiungo la velocità alla X dell' oggetto che voglio muovere

e.target.x+=vel_x;

NB: Nel secondo caso, non ho più una singola variabile che determina la velocità ( vel_x ), ma necessito che ogni MovieClip abbia la propria velocità quindi assegno una proprietà in runtime alla MovieClip (MovieClip.vel_x )

Buon divertimento !

[Zolmandacuba]

immagino che per il primo esempio almeno (devo ancora studiare il secondo in questo articolo) rimanga attivo il comando

addEventListener....ecc...., se uno non tocca mai il pulsante, anche se tutto rimane fermo

come si potrebbe rimuovere una volta che la clip si è fermata al centro senza toccare il pulsante?

[Zolmandacuba]

nel secondo esempio, qualcuno sa dirmi perchè con vel_y ho bisogno di una variabile in RunTime per ogni clip, ma per acc_y invece questo non è necessario?

Ah, poi ho provato a cancellare

clips_array[i].vel_y=0;

dalla funzione init(), e il risultato rimane inalterato.....

GRAZIE DELLA PAZIENZA.......e scusate