Animations with Flash CS3 - spring on 3 points

[Flep]

Here we are once again on how to use the spring animations ( see article: Animations with Flash CS3 - spring and friction ).
This time, I use the spring effect on a MovieClip moved from 3 points and so, the movement will be dominated by the 3 different forces.
Clearly, giving space to your imagination, animations can be created to capture the user's interest letting him interact a little with the application.
I leave it to you to develope the example further.

Let's see the tutorial...

I create a FLA and save it as 'spring_3.fla' into which:
- I create 3 square MovieClips with instance names 'punto_0_mc', 'punto_1_mc' and 'punto_2_mc'.
- I create a circolar MovieClip with an instance name 'ball_mc'

I create a Document Class, an AS file saved as 'Spring3.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class Spring3 extends MovieClip
	{
		private var clips_array:Array;
		
		private const spring:Number=.1;
		private const frizione:Number=.9;
		private var vx:Number=0;
		private var vy:Number=0;

		public function Spring3()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array(punto_0_mc,punto_1_mc,punto_2_mc);
			
			addListeners();
		}
		
		private function addListeners():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].buttonMode=true;
				clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
				clips_array[i].addEventListener(MouseEvent.MOUSE_UP,dropDrag);
			}
			
			this.addEventListener(Event.ENTER_FRAME,muoviDisegna);
		}
		
		private function doDrag(m:MouseEvent):void
		{
			m.target.startDrag();
		}
		
		private function dropDrag(m:MouseEvent):void
		{
			m.target.stopDrag();
		}
		
		private function muoviDisegna(e:Event):void
		{
			this.graphics.clear();
			this.graphics.lineStyle(1,0x333333,1);
			
			for(var i:int=0;i < clips_array.length;i++)
			{
				var ax:Number=(clips_array[i].x-ball_mc.x)*spring;
				var ay:Number=(clips_array[i].y-ball_mc.y)*spring;
				vx+=ax;
				vy+=ay;
				
				this.graphics.moveTo(clips_array[i].x,clips_array[i].y);
				this.graphics.lineTo(ball_mc.x,ball_mc.y);
			}
			vx*=frizione;
			vy*=frizione;
			ball_mc.x+=vx;
			ball_mc.y+=vy;
		}
	}
}

The result:

Let's analise the code.

Properties
an array in which I insert 3 square movieclips
private var clips_array:Array;
the famous numerical constant 'spring'
private const spring:Number=.1;
an another one is the numerical constant 'frizione'
private const frizione:Number=.9;
two numerical variables which will be the speed of ball_mc
private var vx:Number=0;
private var vy:Number=0;

Methods
init();
I impost the frame rate
stage.frameRate=31;
I initialize an array into which I insert the square movieclips
clips_array=new Array(punto_0_mc,punto_1_mc,punto_2_mc);
I call the addListeners method in which I will add the needed listeners
addListeners();

addListeners();
I create a cycle with the length array as a maximum iteration
for(var i:int=0;i < clips_array.length;i++)
{
for each clip I add the button mode so that it can be clicked with the mouse during the events
clips_array[i].buttonMode=true;
for each clip I add a listener to the event MOUSE_DOWN which will call the doDrag() method
clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
for each clip I add a listener to the event MOUSE_UP which will call the dropDrag() method
clips_array[i].addEventListener(MouseEvent.MOUSE_UP,dropDrag);
}
I add a listener (to the ex_root) to the event ENTER_FRAME which will call the muoviDisegna() method tot times by seconds based on the frame rate
this.addEventListener(Event.ENTER_FRAME,muoviDiseg na);

doDrag(m:MouseEvent)
I tell the clip to start the drag
m.target.startDrag();

dropDrag(m:MouseEvent);
I tell the clip to stop the drag
m.target.stopDrag();

muoviDisegna();
let's remember that the 'this' in this case refers to the TimeLine
I clear the graphics
this.graphics.clear();
I initialize the graphics
this.graphics.lineStyle(1,0x333333,1);
I create a cycle with the array 'clips_array' lenght as a maximum iteration
for(var i:int=0;i < clips_array.length;i++)
{
I apply the inertia to the clip's array X and Y. At this moment, the inertia of the 3 array's MovieClip interact together on a unique X and Y speed (variables vx and vy)
var ax:Number=(clips_array[i].x-ball_mc.x)*spring;
var ay:Number=(clips_array[i].y-ball_mc.y)*spring;
vx+=ax;
vy+=ay;
I design the lines in between the clips and ball_mc
this.graphics.moveTo(clips_array[i].x,clips_array[i].y);
this.graphics.lineTo(ball_mc.x,ball_mc.y);
}
I apply the friction to ball_mc
vx*=frizione;
vy*=frizione;
ball_mc.x+=vx;
ball_mc.y+=vy;

See you soon !