Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

Drawing with Actionscript 3.0 - script 2

This is a discussion on Drawing with Actionscript 3.0 - script 2 within the Tutorials forums, part of the Flash English category; Hey ! Here is the second article of a series 'Drawing with actionscript 3.0'. For those of you who has ...


Go Back   Forum Flash CS3 Flash CS4 > Flash CS3 Flash CS4 > Flash English > Tutorials

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read
  7 links from elsewhere to this Post. Click to view. #1 (permalink)  
Old 27-09-07, 21:00
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
Drawing with Actionscript 3.0 - script 2

Hey !
Here is the second article of a series 'Drawing with actionscript 3.0'.
For those of you who has not read the first article, you can read it here: Drawing with Actionscript 3.0 - script 1
This time I use the Point class to form the design.
Black background and white lines but it is only an example of what can be done with the Drawing API of Actionscript 3.0.

Let's see the script...

I create a FLA and save it as 'disegno2.fla' and give it a black background.
I create a Document Class, an AS file saved as 'Disegno2.as', implemented the following way:
Code:
package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	
	public class Disegno2 extends Sprite
	{
		private var clips_array:Array;
		private var points_array:Array;
		
		private var num_punti:int=100;
		
		public function Disegno2()
		{
			init();
			initPoints();
			initDrawingListener();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array();
			points_array=new Array();
		}
		
		private function initPoints():void
		{
			for(var i:int=0;i < num_punti;i++)
			{
				var xx:int=Math.random()*stage.stageWidth;
				var yy:int=Math.random()*stage.stageHeight;
				var point:Point=new Point(xx,yy);
				points_array.push(point);
				
				var sprite:Sprite=new Sprite();
				addChild(sprite);
				clips_array.push(sprite);
			}
		}
		
		private function initDrawingListener():void
		{
			addEventListener(Event.ENTER_FRAME,drawing);
		}
		
		private function drawing(e:Event):void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				var xx:int=Math.random()*stage.stageWidth;
				var yy:int=Math.random()*stage.stageHeight;
				
				points_array[i].x=xx;
				points_array[i].y=yy;
				
				clips_array[i].graphics.clear();
				clips_array[i].graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
				clips_array[i].graphics.lineStyle(.25,0xFFFFFF,.2);
				clips_array[i].graphics.lineTo(points_array[i].x,points_array[i].y);
			}
		}
	}
}
Here it is the result:







Let's analise the code.

Properties

two arrays in which I insert the points of the Point class and the sprites created and used to design
private var clips_array:Array;
private var points_array:Array;
a total number of points (the higher it is the more the CPU will increase)
private var num_punti:int=100;

Metodi
init();
I set the frame rate
stage.frameRate=31;
I initiate the two arrays
clips_array=new Array();
points_array=new Array();

initPoints();
I create a cycle with a maximum iteration equal to the value of num_points
for(var i:int=0;i < num_punti;i++)
I create two numerical variables containing a random value from 0 to the value of the width/height of the stage
var xx:int=Math.random()*stage.stageWidth;
var yy:int=Math.random()*stage.stageHeight;
I create an instance of the Point class to which I assign the coordinates equal to the values of the 2 variables xx and yy
var point:Point=new Point(xx,yy);
I insert the point inside the array points_array to keep track of each point
points_array.push(point);
I create an instance of the Sprite class
var sprite:Sprite=new Sprite();
I add the sprite to the DisplayObject otherwise it would not be visible
addChild(sprite);
I insert in the array clips_array the sprite in order to keep track of each one of them and to be able to recall them when needed
clips_array.push(sprite);

initDrawingListener();
I add an interval ENTER_FRAME which calls the drawing() method as many times by seconds as the value of the frame rate
addEventListener(Event.ENTER_FRAME,drawing);

drawing();
I create a cycle with a maximum iteration equal to the value of the array clips_array's length
for(var i:int=0;i < clips_array.length;i++)
I create two numerical variables containing a random value from 0 to the value of the width/height of the stage
var xx:int=Math.random()*stage.stageWidth;
var yy:int=Math.random()*stage.stageHeight;
I assign to the point placed inside the array points_array using the iteration of the moment as index, the coordinates equal to the values of the variables xx and yy
points_array[i].x=xx;
points_array[i].y=yy;
I clean the sprite's graphics inside the array clips_array using the iteration of the moment as index
clips_array[i].graphics.clear();
I initiate the graphics
clips_array[i].graphics.moveTo(stage.stageWidth/2,stage.stageHeight/2);
clips_array[i].graphics.lineStyle(.25,0xFFFFFF,.2);
I pass to the lineTo method the coordinates x and y of the point placed inside the array points_array using the iteration of the moment as index
clips_array[i].graphics.lineTo(points_array[i].x,points_array[i].y);

NB: I could have bypassed and not have used the Point class, assigning directly to the lineTo method the values of the variables xx and yy but in this tutorial, I want to explain how to integrate the Point class with the runtime drawings

See you soon!
__________________

 


I recommend: Essential Actionscript 3.0

- I do not reply technicians pvt messages. Open a thread !
- Non rispondo ai messaggi privati con domande tecniche. Apri una discussione sul forum !
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote

Reply

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads

Thread Thread Starter Forum Replies Last Post
Drawing polygons with Actionscript 3.0 Flep Tutorials 1 28-09-08 00:10
Disegnare con Actionscript 3.0 - script 1 Flep Articoli e tutorials 3 26-08-08 20:02
Drawing with actionscript 3.0 Flep Tutorials 0 03-10-07 19:34
Drawing with Actionscript 3.0 - script 3 Flep Tutorials 0 27-09-07 09:41
Disegnare con Actionscript 3.0 - script 2 Flep Articoli e tutorials 0 20-09-07 12:43


All times are GMT. The time now is 15:05.

Powered by vBulletin version 3.7.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC4
Forum SiteMap