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 ...
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:
Here it is the result: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); } } } }
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!
Bookmarks