Trigonometry with Actionscript 3.0 [example3]

[Flep]

The series of articles/tutorials on the trigonometry applied to Actionscript 3.0 carry on.
We get into the heart of this argument using angles, radius, sinus and cosinus.
In this example, we will see how to move a simple ball using trigonometry.
We will see how to create an effect with more balls using the library's MovieClip ID to create more instances of the same MovieClip. Everything under an interval.
At the end, we will see how to apply this effect to a mask.
Let's take a look at the code...

First example:

I create a FLA and save it as 'trigonometria_3.fla'.
Inside it, I create a MovieClip of circular shape with an instance name 'ball_mc'.
I create a Document Class, an AS file saved as 'Trigonometria.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Trigonometria extends MovieClip
	{
		private var centroY:Number;
		private var angolo:Number=0;
		private const raggio:Number=150;
		private const velocita:Number=1;

		public function Trigonometria()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			ball_mc.x=0;
			ball_mc.y=stage.stageHeight/2;
			centroY=ball_mc.y;
			
			ball_mc.addEventListener(Event.ENTER_FRAME,muovi);
		}
		
		private function muovi(e:Event):void
		{
			ball_mc.y=centroY+Math.sin(angolo)*raggio;
			ball_mc.x+=velocita;
			angolo+=.1;
			if(ball_mc.x>=stage.stageWidth+ball_mc.width)
				ball_mc.x=0;
		}
	}
}

Let's analyse the code.

Trigonometria.as class

Properties

a numerical variable counting the value of Y from the center of the circumference
private var centroY:Number;
a numerical variable containing the angle's value (then increased)
private var angolo:Number=0;
a constant containing the dimension of the circumference radius
private const raggio:Number=150;
a numerical variable containing the speed of ball_mc X
private const velocita:Number=1;

Methods

init();
I impost the frame rate
stage.frameRate=31;
I position the MovieClip
ball_mc.x=0;
ball_mc.y=stage.stageHeight/2;
I assign a value to the Y placed at the center of the circumference (in this case, equal to the ball_mc Y)
centroY=ball_mc.y;
I add a listener with an interval ENTER_FRAME which calls the function muovi();
ball_mc.addEventListener(Event.ENTER_FRAME,muovi);

muovi();
I assign to the clip Y a value equal to a, the center of the circumference plus il sinus of the variable 'angolo' multiplied by the value of the variable 'raggio'
ball_mc.y=centroY+Math.sin(angolo)*raggio;
I increase the ball_mc X of the value of the variable 'velocita'
ball_mc.x+=velocita;
I increase the value of the variable 'angolo' of 0.1
angolo+=.1;
if the ball_mc X is bigger then the stage width plus its width
if(ball_mc.x>=stage.stageWidth+ball_mc.width)
the ball_mc X equal zero
ball_mc.x=0;

Second example:

I create a FLA and save it as 'trigonometria_3_a.fla'.
Inside it, I create the same MovieClip of circular shape (mc_ball) but I will leave it in library. I assign to it a linkage ID 'Ball', the same name of the class which I will create.
I create a Document Class, an AS file saved as 'Trigonometria2.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class Trigonometria2 extends MovieClip
	{
		private var timer:Timer;
		
		private const velocitaTimer:int=150;
		
		public function Trigonometria2():void
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			startTimer();
		}
		
		private function startTimer():void
		{
			timer=new Timer(velocitaTimer,0);
			timer.addEventListener(TimerEvent.TIMER,attaccaBall);
			timer.start();
		}
		
		private function attaccaBall(t:TimerEvent):void
		{
			var ball:Ball=new Ball();
			addChild(ball);
			ball.muoviti();
		}
	}
}

I create a Ball class, an AS file saved as 'Ball.as' (which is the ID of mc_ball in library), implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Ball extends MovieClip
	{
		private var centroY:Number;
		private var angolo:Number=0;
		private var raggio:Number;
		private var velocita:Number;
		
		public function Ball():void
		{
			init();
		}
		
		private function init():void
		{
			x=0;
		}
		
		public function muoviti():void
		{
			y=this.parent.parent.stage.stageHeight/2;
			centroY=y;
			raggio=10+Math.random()*(y/2);
			velocita=.5+Math.random()*4.5;
			scaleX=scaleY=.2+Math.random();
			alpha=.1+Math.random();
			addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(e:Event):void
		{
			y=centroY+Math.sin(angolo)*raggio;
			x+=velocita;
			angolo+=.1;
			if(x>this.parent.parent.stage.stageWidth+width+10)
			{
				fermaIntervallo();
				rimuovimi();
			}
		}
		
		private function fermaIntervallo():void
		{
			removeEventListener(Event.ENTER_FRAME,go);
		}
		
		private function rimuovimi():void
		{
			this.parent.removeChild(this);
		}
	}
}

Let's analyse the code.

Trigonometria2.as class

Properties

a timer (instance of the Timer class)
private var timer:Timer;
a constant 'velocitaTimer' with a value equal to the speed of the timer
private const velocitaTimer:int=150;

Methods

init();
I impost the frame rate
stage.frameRate=31;
I call the function startTimer()
startTimer();

startTimer();
I create an instance of 'timer' passing the value of the constant 'velocitaTimer' and zero (infinite)
timer=new Timer(velocitaTimer,0);
I add a listener to 'timer' which will call every tot of hundredth of seconds (equal to the value of the constant 'velocitaTimer') the function attaccaBall()
timer.addEventListener(TimerEvent.TIMER,attaccaBal l);
I start the timer
timer.start();

attaccaBall();
I create an instance of the Ball class (which we will see next)
var ball:Ball=new Ball();
as the Ball class extends the MovieClip class, I add the instance of the Ball class (ball) to the DisplayObject (otherwise it would not be visible)...ex attachMovie of ball_mc with a linkage ID 'Ball'
addChild(ball);
I call the muoviti() method of the Ball class
ball.muoviti();

Ball.as class ( let's remember that the codes here is directly referred to the MovieClip which will be attach to the stage)

Properties

a numerical variable counting the value of Y from the center of the circumference
private var centroY:Number;
a numerical variable containing the angle's value (then increased)
private var angolo:Number=0;
a constant containing the dimension of the circumference radius
private const raggio:Number=150;
a numerical variable containing the speed of ball_mc X (the MovieClip attached to the stage)
private const velocita:Number=1;

Methods

init();
I impost x equal to zero
x=0;

muoviti();
I impost the y equal to the value of half the stage height
y=this.parent.parent.stage.stageHeight/2;
I impost the center Y of the circumference (in this case equal to ball's y)
centroY=y;
I impost a random value to the circumference radius
raggio=10+Math.random()*(y/2);
I impost a random value to the x speed 'velocita'
velocita=.5+Math.random()*4.5;
I impost a random value to the scaleX and scaleY properties
scaleX=scaleY=.2+Math.random();
I impost a random value to the alpha property
alpha=.1+Math.random();
I call the function go() within an interval ENTER_FRAME
addEventListener(Event.ENTER_FRAME,go);

go();
I impost a value to y equal to the center Y of the circumference plus the sinus of the value of the variable 'angolo' multiplied by the value of the variable 'raggio'
y=centroY+Math.sin(angolo)*raggio;
I increase the x of the value of the variable 'raggio'
x+=velocita;
I increase the angle of 0.1
angolo+=.1;
now, when the clip will arrive to the point on stage where it will not be visible anymore, we need to stop its interval ENTER_FRAME and remove it in a manner that it does not excessively consume the user's CPU resources.
so, if its x is bigger then the stage width
if(x>this.parent.parent.stage.stageWidth+width+10)
{
I call the functions fermaIntervallo() e rimuovimi()
fermaIntervallo();
rimuovimi();
}

fermaIntervallo();
I stop the interval ENTER_FRAME
removeEventListener(Event.ENTER_FRAME,go);

rimuovimi();
I tell Trigonometria_2.as (from which the instance of the clip has been created) to remove that clip
this.parent.removeChild(this);

Third example:

I create a FLA and save it as 'trigonometria_3_b.fla'.
Inside it, I create the same MovieClip of circular shape (mc_ball) still in library. I assign to it a linkage ID 'Ball2', the same name of the class which I will create.
I create a Document Class, an AS file saved as 'Trigonometria3.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class Trigonometria3 extends MovieClip
	{
		private var contenitore_mc:MovieClip;
		
		private var timer:Timer;
		
		private const velocitaTimer:int=100;
		
		public function Trigonometria3():void
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			contenitore_mc=new MovieClip();
			addChild(contenitore_mc);
			
			startTimer();
		}
		
		private function startTimer():void
		{
			timer=new Timer(velocitaTimer,0);
			timer.addEventListener(TimerEvent.TIMER,attaccaBall);
			timer.start();
		}
		
		private function attaccaBall(t:TimerEvent):void
		{
			var ball:Ball2=new Ball2();
			contenitore_mc.addChild(ball);
			image_mc.mask=contenitore_mc;
			ball.muoviti();
		}
	}
}

I create a Ball2 class, an AS file saved as 'Ball2.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Ball2 extends MovieClip
	{
		private var centroY:Number;
		private var angolo:Number=0;
		private var raggio:Number;
		private var velocita:Number;
		
		public function Ball2():void
		{
			init();
		}
		
		private function init():void
		{
			x=0;
		}
		
		public function muoviti():void
		{
			y=this.parent.parent.stage.stageHeight/2;
			centroY=y;
			raggio=10+Math.random()*(y-10);
			velocita=.5+Math.random()*4.5;
			scaleX=scaleY=.2+Math.random();
			//alpha=.1+Math.random();
			addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(e:Event):void
		{
			y=centroY+Math.sin(angolo)*raggio;
			x+=velocita;
			angolo+=.1;
			if(x>this.parent.parent.stage.stageWidth+width+10)
			{
				fermaIntervallo();
				rimuovimi();
			}
		}
		
		private function fermaIntervallo():void
		{
			removeEventListener(Event.ENTER_FRAME,go);
		}
		
		private function rimuovimi():void
		{
			this.parent.removeChild(this);
		}
	}
}

Let's analyse the code.

Trigonometria3.as class

Properties

a MovieClip containing all the instances of the Ball2.as class ( practically instead of attaching the clips to the stage, I will attach them inside an empty MovieClip which will then be used as a mask for image_mc)
private var contenitore_mc:MovieClip;
a timer (instance of the Timer class)
private var timer:Timer;
a constant 'velocitaTimer' with a value equal to the speed of the timer
private const velocitaTimer:int=150;

Methods

init();
I impost the frame rate
stage.frameRate=31;
I create an empty MovieClip
contenitore_mc=new MovieClip();
I add the empty MovieClip to the DisplayObject (otherwise it would not be visible)
addChild(contenitore_mc);
I call the function startTimer()
startTimer();

startTimer();
I create an instance of 'timer' passing the value of the constant 'velocitaTimer' and zero (infinite)
timer=new Timer(velocitaTimer,0);
I add a listener to 'timer' which will call every tot of hundredth of seconds (equal to the value of the constant 'velocitaTimer') the function attaccaBall()
timer.addEventListener(TimerEvent.TIMER,attaccaBal l);
I start the timer
timer.start();

attaccaBall();
I create an instance of the Ball2 class (which will we see next)
var ball:Ball2=new Ball2();
as the Ball2 class extends the MovieClip class, I add the instance of Ball2 class (ball) to the empty MovieClip 'contenitore_mc'
contenitore_mc.addChild(ball);
I assign 'contenitore_mc' as a mask to 'image_mc'
image_mc.mask=contenitore_mc;
I call the function muoviti() of the ball2 class
ball.muoviti();

Ball2.as class
Same as Ball.as

Source files: