Animazioni con Flash CS3 - spring e frizione + mouse

[Flep]

Eccoci ad un altro articolo in cui parlerò dell' effetto spring + frizione.

A chi non avesse letto: inerzia, accelerazione, spring e spring+frizione, consiglio di dargli uno sguardo in modo da sapere quello di cui sto andando a trattare.

Questa volta applicherò l' effetto in base alle coordinate del mouse dell' utente.

Tengo a precisare che l' effetto che applico è molto semplice e niente di accattivante, come sempre questo articolo vorrebbe essere un tutorial prima di un' animazione e quindi lascio a voi la fantasia di applicare altre soluzioni in modo da ottenere animazioni sempre più consone alla vostra applicazione.

Entriamo nel vivo...
Creo un FLA che salvo con nome ' spring_2.fla ', al cui interno creo una MovieClip di qualsiasi forma a cui assegno il nomei stanza ' square_mc '.
Creo la Document Class, un file AS che salvo con nome ' Spring2.as ', implementata in questo modo:

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

		public function Spring2()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			square_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function muovi(e:Event):void
		{
			var acc_x:Number=(mouseX-square_mc.x)*spring;
			var acc_y:Number=(mouseY-square_mc.y)*spring;
			vel_x+=acc_x;
			vel_y+=acc_y;
			vel_x*=frizione;
			vel_y*=frizione;
			square_mc.x+=vel_x;
			square_mc.y+=vel_y;
		}
	}
}

Risultato:

Analizziamo il codice.

Proprietà:
la costante numerica spring
private const spring:Number=.1;
la costante numerica frizione
private const frizione:Number=.9;
le due velocità che prima di essere date in pastoalla X e Y di square_mc verranno alterate da spring e frizione
private var vel_x:Number=0;
private var vel_y:Number=0;


Metodi:
init();
imposto una velocità di frame rate
stage.frameRate=31;
aggiungo un intervallo ENTER_FRAME che chiama la funzione muovi() tante volta al secondo pari al valore del frame rate
square_mc.addEventListener(Event.ENTER_FRAME,muovi );



muovi();
creo una variabile che contiene il valore dell' effetto inerzia applicato sulle coordinate del mouse e gli aggiungo l' effetto spring
var acc_x:Number=(mouseX-square_mc.x)*spring;
var acc_y:Number=(mouseY-square_mc.y)*spring;
aggiungo a vel_x e vel_y ( ad ogni iterazione dell' intervallo ) l' inerzia
vel_x+=acc_x;
vel_y+=acc_y;
applico la frizione a vel_x e vel_y
vel_x*=frizione;
vel_y*=frizione;
do in pasto vel_x e vel_y alla x e y di square_mc
square_mc.x+=vel_x;
square_mc.y+=vel_y;

STay tuned !