Flash CS3 - Flash CS4

Free tutorials and scripts for all.
Actionscript 3.0

The Point class of Flash CS3

This is a discussion on The Point class of Flash CS3 within the Tutorials forums, part of the Flash English category; A greeting to all of you is more then needed. I realise that you are many to follow my articles ...


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
  #1 (permalink)  
Old 25-09-07, 16:11
Administrator
 
Join Date: Jul 2007
Location: Cesena
Posts: 4,535
Rep Power: 6
Flep is on a distinguished road
The Point class of Flash CS3

A greeting to all of you is more then needed.

I realise that you are many to follow my articles and I am happy and honoured you do so.

Anyway'*

I introduce to you the Point class of Actionscript 3.0.* Not all of it but enough to let your imagination runs free.* Personally, I have little of it but I do know very well Actionscript so, I can give you the tools to create what you have in mind.
This class has already been used in some tutorials on this site, such as to slice an image with Actionscript or with the Timer class , but it has never been explained completely.
I will start by saying that, as from the name, it is like having a point and being able to move it using its x and y properties or assign to it coordinates in runtime during a phase of a project.

Let us see what we can do with those two properties' I create an empty FLA and save it 'main.fla'.
I create a Document Class, an AS file saved as 'Main.as', implemented the following way:
Code:
package
{
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.geom.Point;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var shape:Shape;
		
		private var random_point:Point;
		
		private var points_array:Array;
		
		private var num_points:int=4;
		private var randomX:int;
		private var randomY:int;
		private var id:int=0;
		
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			points_array=new Array();
			
			createPoints();
			createShape();
			startDraw();
			movePoint();
		}
		
		private function createPoints():void
		{
			for(var i:int=0;i < num_points;i++)
			{
				var point:Point=new Point(stage.stageWidth/2,stage.stageHeight/2);
				points_array.push(point);
			}
		}
		
		private function createShape():void
		{
			shape=new Shape();
			addChild(shape);
		}
		
		private function startDraw():void
		{
			shape.addEventListener(Event.ENTER_FRAME,go);
		}
		
		private function go(e:Event):void
		{
			shape.graphics.clear();
			shape.graphics.beginFill(0x0066FF,1);
			shape.graphics.moveTo(points_array[0].x,points_array[0].y);
			for(var i:int=0;i<=.02)
			{
				points_array[id].x=random_point.x;
				points_array[id].y=random_point.y;
				removeEventListener(Event.ENTER_FRAME,run);
				id++;
				if(id>=points_array.length-1)
					id=0;
				movePoint();
			}
		}
	}
}
To obtain this result:





I invite you to study the code.
I know that it is not a wonderful animation but it has been created to show you the basic concept behind the Point class.

Let us analyse the code

Properties
a Shape
private var shape:Shape;
an instance of the Point class into which I will enumerate some coordinates
private var random_point:Point;
an Array containing the instance Point with the starting point's coordinates
private var points_array:Array;
a numeral int variable containing the number of point wanted to be moved
private var num_points:int=4;
two numerical int variables to which I will assign a random number
private var randomX:int;
private var randomY:int;
a numerical int number starting from zero and increased of one unit so to move through the Array
private var id:int=0;

Methods
init();
I impost the frame rates
stage.frameRate=31;
I initialise an Array (or its value would be null and Flash would return an error that we can not refer to an object with a value equal to null)
points_array=new Array();
I call in order the methods createPoints(), createShape(), startDraw() and movePoint()
createPoints();
createShape();
startDraw();
movePoint();
createPoints();
using a cycle, I create more instances of Point based on the value of the variable 'num_points' and I insert them into the array 'points_array'
for(var i:int=0;i < num_points;i++)
{
var point:Point=new Point(stage.stageWidth/2,stage.stageHeight/2);
points_array.push(point);
}

createShape();
I create a new Shape and add it to the Display object (otherwise it would not be visible)
shape=new Shape();
addChild(shape);

startDraw();
I create an interval ENTER_FRAME which will call the method go() as many times per seconds based on the frame rate. In this method, I will design the Shape within the interval. I will only need to move the points (instance of the Point class) contained in the array to change the shape
shape.addEventListener(Event.ENTER_FRAME,go);

go();
I start the shape's graphics
shape.graphics.clear();
shape.graphics.beginFill(0x0066FF,1);
I start the design from the coordinate of the point placed first into the Array
shape.graphics.moveTo(points_array[0].x,points_array[0].y);
for(var i:int=0;i {
I carry on the drawing going through all the coordinates of each points contained in the Array
shape.graphics.lineTo(points_array[i].x,points_array[i].y);
}

movePoint();
I assign to 'randomX' and 'randomY' two casual values respectively from zero to the stage's width and from zero to the stage's height
randomX=Math.round(Math.random()*stage.stageWidth) ;
randomY=Math.round(Math.random()*stage.stageHeight );
I assign to 'random_point' the coordinates of the two random values
random_point=new Point(randomX,randomY);
I call an interval ENTER_FRAME which will itself call the method run()
addEventListener(Event.ENTER_FRAME,run);

run();
in this method, I apply the inertia effect seen in the article Inertia .
I take as a final point the x and y coordinates of 'random_point' and move towards it the points container in the Array using the id's index
var dx:Number=random_point.x-points_array[id].x;
var ax:Number=dx*.5;
points_array[id].x+=ax;
var dy:Number=random_point.y-points_array[id].y;
var ay:Number=dy*.5;
points_array[id].y+=ay;
if(Math.abs(dx)<=.02)
{
points_array[id].x=random_point.x;
points_array[id].y=random_point.y;
I stop the interval when the points has reached the coordinates of 'random_point'
removeEventListener(Event.ENTER_FRAME,run);
I increase 'id' of one unit
id++;
I check that the id is not bigger or equal to 'points_array' length
if(id>=points_array.length-1)
If it is bigger or equal, I reset 'id' to zero
id=0;
and recall the method movePoint() which will assign other random values to the x and y properties of 'random_point'
movePoint();
}

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 !

Last edited by Flep; 28-08-08 at 07:06..
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
Actionscript 2 AS2 streaming flv cue point help natenorbie Actionscript 3.0 newbies 0 13-07-08 20:08
La classe Point di Flash CS3 Flep Articoli e tutorials 2 01-05-08 17:17
Andare al cue point Licoreo Actionscript 3.0 avanzato 1 16-01-08 07:38
How to call another class from the Document Class with Flash CS3 Flep Tutorials 0 09-10-07 19:50


All times are GMT. The time now is 17:31.

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