Animations with Actionscript 3.0 - spring and friction

[Flep]

This article is the follow of the article in which we have seen how to apply a spring effect with Actionscript 3.0. For the ones who have not read yet 'Animations with Actionscript 3.0 " the spring' I suggest you take at look at it to understand best this article. In the example of the spring, my object was looping from right to left in a oscillatory sense.
you take at look at it to understand best this article. In the example of the spring, my object was looping from right to left in a oscillatory sense.
Next, we will see how to reduce the oscillation til the object stops completely.
Let"s see how...

First case:
I create a FLA and save it as "spring_1.fla".
I create a Movie Clip and assign it an instance name "clip_mc".
I create a Document Class, an AS file saved as "SpringAndFrizione.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	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;
			
			centro=stage.stageWidth/2;
			
			clip_mc.x=-200;
			clip_mc.y=stage.stageHeight/2;
			clip_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		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;
		}
	}
}

The result:

Second case:
I create a FLA and save it "spring_1_a.fla"
I create a text field containing whatever text you fancy.
Using the keyboard shortcut CTRL+B, I divide the text field in as many fields as there are letters.
I convert each text field in a Movie Clip and assign the instance names of clip_0_mc, clip_1_mc, clip_2_mc, etc etc...
I create the Document Class, an AS file saved as "SpringAndFrizione_a.as", implemented the following way:

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(8000,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();
		}
	}
}

The result:

Let"s analise the code:
in each case, the base for the script is the same as the one seen in the spring effect article,
in this case I add the value "frizione", a constant value which is used to slow the spring til complete stop.
It is easier to do then explain :P

Let"s focus on the methods muovi() of the first and second case:

with just the spring, the code was this
I apply the inertia (see the article Inertia with Actionscript 3.0 )

var acc_x:Number=(center-sprite.x)*spring;
I add the inertia to the value of the speed variable (vel_x)
vel_x+=acc_x;
I add the speed to the object"s X which I want to move
sprite.x+=vel_x;

Adding the friction, the code becomes like this:
I apply the inertia
var acc_x:Number=(centro-e.target.x)*spring;
I add the inertia to the value of the speed variable (vel_x)
vel_x+=acc_x;
I multiply the value of vel_x by the value of the friction (in this case the friction is 0.9, so it would be the same as to say divided by 9)
vel_x*=frizione;
I add the speed to the object"s X which I want to move
e.target.x+=vel_x;

NB: In the second case, I do not have a single variable which determines the speed (vel_x), but I need that each Movie Clips has its proper speed. So I assign in runtime a property to each Movie Clip (MovieClip.vel_x)

Have fun!

[kkoleno]

thanks for the great tutorial...however...i'm very new to the whole action script file thing and didn't know what to do after making the file. do you connect those to the movie clips somehow or what do you do to make them work? thanks so much!

[Flep]

Hi kkoleno and welcome

Sorry, I did not get you.
What do you mean with: 'do you connect those to the movie clips' ?