Animazioni con Flash CS3 - the spring

[Flep]

Dopo aver visto come creare un movimento inerziale e successivamente imparato ad applicare un effetto di accelerazione con Actionscript 3.0, i tempi sono maturi per iniziare la cosìdetta ' spring ' .

La spring deriva dall' inglese ed è un effetto tipo molla.

Vediamo come creare questa utile animazione...

La Document Class che ho scritto è la seguente:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	
	public class Spring_0 extends Sprite
	{
		private var sprite:Sprite;
		
		private var spring:Number=.1;
		private var center:Number;
		private var vel_x:Number=0;
		
		public function Spring_0()
		{
			drawSprite();
			initListener();
		}
		
		private function drawSprite():void
		{
			sprite=new Sprite();
			sprite.graphics.beginFill(0x0066FF,1);
			sprite.graphics.drawCircle(20,stage.stageHeight/2,20);
			addChild(sprite);
			
			sprite.x=vel_x;
			
			center=stage.stageWidth/2-sprite.width/2;
		}
		
		private function initListener():void
		{
			sprite.addEventListener(Event.ENTER_FRAME,muoviSprite);
		}
		
		private function muoviSprite(e:Event):void
		{
			var acc_x:Number=(center-sprite.x)*spring;
			vel_x+=acc_x;
			sprite.x+=vel_x;
			//sprite.scaleX=sprite.scaleY=Math.abs(vel_x/100);
		}
	}
}

E questo è l'effetto ottenuto:

Risultato:

Se analizziamo il codice, notiamo che non c'è molto di più in confronto ad un effetto inerzia o accelerazione.

Il metodo drawSprite disegna la sprite.

Il metodo initListener aggiunge un listener in ascolto su ENTER_FRAME

Questa riga:

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

non è altro che la formula dell' inerzia che abbiamo applicato in questo articolo.

Poi, invece di dare ine_x subito in pasto alla X della sprite, lo diamo in pasto al valore di vel_x

vel_x+=ine_x;

ed infine diamo vel_x in pasto alla X della sprite:

sprite.x+=vel_x;

NB: adesso si potrebbe ' giocare ' anche con le altre proprietà della sprite tipo scaleX e scaleY. Aggiungendo ad esempio questa riga:

sprite.scaleX=sprite.scaleY=Math.abs(vel_x/100);

otteniamo questo effetto:

Buon divertimento !