Drawing with actionscript 3.0

[Flep]

Using Actionscript ( in this case version 3.0 ) you can create drawings at runtime.
Applying some Trigonometry to Actionscript, you can really do some interesting things, often useful to add some nice little details to our Flash application.
Obviously, the more Physics and Trigonometry you know, the more you get to know Actionscript, and more interesting and captivating will your animations be. In my example, I start from a basic level to give some input to people interested to learn this technique ( called Drawing API ) and you'll see later some more advanced articles on the subject.

Let's see the first sample script...



I create an FLA and I save it as ' disegno.fla ' .
I create the Document Class, an AS file saved as ' Disegno.as ' .
PS if it's not clear what a Document Class is and how to create it, it can bee rehearsed in this article: the best way to initiate the Main Class.
Let's se now how the Disegno class is implemented:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.SimpleButton;
	
	public class Disegno extends Sprite
	{
		private var clips_array:Array;
		
		private var centerX:Number;
		private const centerY:Number=50;
		private var radius:Number=0;
		private var angle:Number=0;
		private var counter:Number;
		
		public function Disegno()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			centerX=stage.stageWidth/2;
			initDrawingListener();
			initButtonListener();
		}
		
		private function initDrawingListener():void
		{
			clips_array=new Array();
			angle=0;
			radius=0;
			replay_btn.visible=false;
			addEventListener(Event.ENTER_FRAME,drawing);
		}
		
		private function initButtonListener():void
		{
			replay_btn.addEventListener(MouseEvent.MOUSE_DOWN,cliccato);
		}
		
		private function drawing(e:Event):void
		{
			var sprite:Sprite=new Sprite();
			addChild(sprite);
			clips_array.push(sprite);
			
			sprite.graphics.moveTo(centerX,centerY);
			sprite.graphics.lineStyle(.25,0x666666,.2);
			
			var xx:Number=centerX+Math.sin(angle)*radius;
			var yy:Number=centerX+Math.cos(angle)*radius;
			sprite.graphics.lineTo(xx,yy);
			
			angle+=.05;
			radius++;
			if(angle>Math.PI*2)
			{
				removeEventListener(Event.ENTER_FRAME,drawing);
				replay_btn.visible=true;
			}
		}
		
		private function cliccato(m:MouseEvent):void
		{
			callReplay();
		}
		
		private function callReplay():void
		{
			counter=clips_array.length-1;
			replay_btn.visible=false;
			addEventListener(Event.ENTER_FRAME,replay);
		}
		
		private function replay(e:Event):void
		{
			removeChild(clips_array[counter]);
			counter--;
			if(counter<0)
			{
				removeEventListener(Event.ENTER_FRAME,replay);
				initDrawingListener();
			}
		}
	}
}

Here's the result:

Let's analyze the code:

As you can see , in this script a section for the REPLY button is also implemented, created to give the user a chance to see the animation again.
I'd like to draw the attention to the method ' drawing ' ( functions within Actionscript classes are called methods ).
What exactly does it do:
An interval ( ENTER_FRAME ) holds the drawing phase
addEventListener(Event.ENTER_FRAME,drawing);
I create a sprite
var sprite:Sprite=new Sprite();
I add it to DisplayObject ( otherwise it wouldn't be visible )
addChild(sprite);
I insert it into an Array in order to recall it when I need it ( in this example I'll recall every sprite in the array to reply it )
clips_array.push(sprite);
I initiate the graphics
sprite.graphics.moveTo(centerX,centerY);
sprite.graphics.lineStyle(.25,0x666666,.2);
I create the Trigonometric variables, and as we know from Math?s, a sin and a cosin vary from -1 to 1, but multiplied by a given number ( radius ) ...
var xx:Number=centerX+Math.sin(angle)*radius;
var yy:Number=centerX+Math.cos(angle)*radius;
I tell the sprite to draw
sprite.graphics.lineTo(xx,yy);
then I increase angle and radius
angle+=.05;
radius++;
and finally I stop the interval at a given point
if(angle>Math.PI*2)
{
removeEventListener(Event.ENTER_FRAME,drawing);
}

Enjoy !