How to keep track of the MovieClips using Arrays

[Flep]

Maybe you will have notice that I often create Arrays into which I insert MovieClips even when not necessary.
It is true that I do have this habit but this technique has saved me more then once out of trouble.
In the following example, I will draw in runtime using the interval ENTER_FRAME .  I will create a MovieClip for each interval iteration and then apply to them successively a fade out before removing them completely.
Also, we will see a variant of an article posted before, as I will apply the same technique used by an user of FlepStudio (Ignazio) to overcome the problems encountered with the method 'removeChilAt'.* You can read more about this technique in the thread posted on FlepStudio's forum ( sorry it's italian ) .

Let us take a look at the example' I create a FLA and save it as 'disegno4.fla'
I create a Document Class, an AS file saved as 'Disegno4.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.geom.Point;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class Disegno4 extends MovieClip
	{
		private var point:Point;
		
		private var clips_array:Array;
		
		private var timer:Timer;
		
		private var arrX:int;
		private var arrY:int;
		private var counter:int=-1;
		
		private var isFirst:Boolean=true;
		
		public function Disegno4()
		{
			init();
			movePoint();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			point=new Point(getRandomX(),getRandomY());
			
			clips_array=new Array();
		}
		
		private function getRandomX():int
		{
			var xx:int=Math.round(Math.random()*stage.stageWidth);
			return xx;
		}
		
		private function getRandomY():int
		{
			var yy:int=Math.round(Math.random()*stage.stageHeight);
			return yy;
		}
		
		private function movePoint():void
		{
			arrX=getRandomX();
			arrY=getRandomY();
			
			addEventListener(Event.ENTER_FRAME,goPoint);
		}
		
		private function goPoint(e:Event):void
		{
			var dx:Number=arrX-point.x;
			var ax:Number=dx*.3;
			point.x+=ax;
			
			var dy:Number=arrY-point.y;
			var ay:Number=dy*.3;
			point.y+=ay;
			
			var clip_mc:MovieClip=new MovieClip();
			clip_mc.graphics.lineStyle(1,0x0,1);
			clip_mc.graphics.moveTo(stage.stageWidth/2,0);
			clip_mc.graphics.lineTo(point.x,point.y);
			addChild(clip_mc);
			clips_array.push(clip_mc);
			
			if(Math.abs(dx)<=.2)
			{
				removeEventListener(Event.ENTER_FRAME,goPoint);
				movePoint();
				if(isFirst)
					initTimer();
				isFirst=false;
			}
		}
		
		private function initTimer():void
		{
			timer=new Timer(stage.frameRate,0);
			timer.addEventListener(TimerEvent.TIMER,fadeOut);
			timer.start();
		}
		
		private function fadeOut(t:TimerEvent):void
		{
			counter++;
			clips_array[counter].addEventListener(Event.ENTER_FRAME,fading);
		}
		
		private function fading(e:Event):void
		{
			var da:Number=0-e.currentTarget.alpha;
			var aa:Number=da*.2;
			e.currentTarget.alpha+=aa;
			
			if(Math.abs(da)<=.1)
			{
				e.currentTarget.alpha=0;
				e.currentTarget.removeEventListener(Event.ENTER_FRAME,fading);
				removeChildAt(0);
			}
		}
	}
}

This result is the following:

Let us analyse the code

Properties
an instance of the Point class
private var point:Point;
an Array
private var clips_array:Array;
a timer
private var timer:Timer;
three numerical variables (int)
private var arrX:int;
private var arrY:int;
private var counter:int=-1;
a Boolean variable
private var isFirst:Boolean=true;

Methods
init();
I impost the frame rate
stage.frameRate=31;
I create a new instance of 'Point' and assign as coordinates the values returned by two functions
point=new Point(getRandomX(),getRandomY());
I initialize the Array
clips_array=new Array();

getRandomX():int
this function returns a random value in between zero to the maximum stage width
var xx:int=Math.round(Math.random()*stage.stageWidth);
return xx;

getRandomY():int
this function returns a random value in between zero and the maximum stage height
var yy:int=Math.round(Math.random()*stage.stageHeight) ;
return yy;

movePoint();
I assign to 'arrX' and 'arrY' two random values
arrX=getRandomX();
arrY=getRandomY();
I add a listener to the event ENTER_FRAME which will call the method 'gopoint' as many times by seconds based on the frame rate
addEventListener(Event.ENTER_FRAME,goPoint);

goPoint();
I apply the inertia effect
to the X and Y of 'point'
var dx:Number=arrX-point.x;
var ax:Number=dx*.3;
point.x+=ax;
var dy:Number=arrY-point.y;
var ay:Number=dy*.3;
point.y+=ay;
I create a MovieClip each time and make it draw from a fixed point to the coordinates of 'point'
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.lineStyle(.25,0x333333,1);
clip_mc.graphics.moveTo(stage.stageWidth/2,0);
clip_mc.graphics.lineTo(point.x,point.y);
I insert the MovieClip into 'clips_array'
addChild(clip_mc);
clips_array.push(clip_mc);
at a chosen time, I stop the interval and remove the listener added to the ENTER_FRAME
if(Math.abs(dx)<=.2)
{
removeEventListener(Event.ENTER_FRAME,goPoint);
I call the method 'movePoint' to move once again the point
movePoint();
and I call once the method 'initTimer'
if(isFirst)
initTimer();
isFirst=false;
}

initTimer();
I create an instance of 'Timer' and I assign to it a speed equal to the frame rate. I pass to it zero as a second argument so that it will never stop
timer=new Timer(stage.frameRate,0);
I add a listener to the event TIMER which will call the method 'fadeOut'
timer.addEventListener(TimerEvent.TIMER,fadeOut);
I start the timer
timer.start();

fadeOut();
this method will increase the value of the variable 'counter' of one unit and add an ENTER_FRAME to the MovieClip contained in 'clips_array' with an index equal to the value of the variable 'counter', then calling the method 'fading'
counter++;
clips_array[counter].addEventListener(Event.ENTER_FRAME,fading);

fading();
I apply the inertia effect to the MovieClip alpha
var da:Number=0-e.currentTarget.alpha;
var aa:Number=da*.2;
e.currentTarget.alpha+=aa;
at a chosen time, I stop ENTER_FRAME removing the MovieClip listener
if(Math.abs(da)<=.1)
{
e.currentTarget.alpha=0;
e.currentTarget.removeEventListener(Event.ENTER_FR AME,fading);
I remove the MovieClip placed in depth 0.
removeChildAt(0);
}

See you soon!