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!