I’ve been playing with AS3 a little in Flash 9. Previously, I had learnt some AS3 in Flex 2 and wondered what differences I might find coding AS3 in Flash over AS2 in Flash.
To start, I decided that I did want to use the Document class to build my experiment on (a good choice, I feel.)
What I wanted to achieve was a simple particle system that will render a certian number (30, I think) “particles” in a circle (uniformly - they don’t all crowd around the centre) and draw lines between them representative of their distance (the usual stuff.)
View Here
Click your mouse to redraw. The circle is drawn to fit within the movie’s dimensions - if you resize your browser, the particles will be drawn closer together within the circle on the same scale and you can see the difference in their connecting lines.
The FLA is an empty document other than the fact that it has it’s document class set to ParticleSystem. In the same directory as this FLA are two class files: ParticleSystem.as and Particle.as. The code for each follows:
ParticleSystem.as
package {
import Particle;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
public class ParticleSpace extends MovieClip {
// Configuration Variables
var num_particles:Number = 30; // The number of particles to create on each draw
var distance:Number = 100; // The maximum distance for connected particles
// Variables
var particles:Array = [];
var radius:Number;
var center_x:Number;
var center_y:Number;
/**
* Constructor
* Initialises the drawing and sets a listener to redraw on every mouse click
*/
public function ParticleSpace() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(MouseEvent.CLICK, this.click);
this.draw();
}
/**
* Redraw on clicks
* @param event <MouseEvent> The event
*/
function click(event:MouseEvent):void {
this.draw();
}
/**
* Calculates the dimensions for drawing and calls the worker functions
*/
function draw():void {
// Prepare the stage (empty it)
this.clear();
// Calculate the dimensions
radius = Math.min(stage.stageHeight, stage.stageWidth) / 2;
center_x = stage.stageWidth / 2;
center_y = stage.stageHeight / 2;
// Representation of limitations
this.graphics.lineStyle(2, 0xFF0000, 1);
this.graphics.drawCircle(center_x, center_y, radius);
// Worker functions
this.drawParticles(num_particles, radius, center_x, center_y);
this.drawConnections(distance);
}
/**
* Creates the particles on the stage
* @param n <Number> The number of particles to create
* @param radius <Number> The radius of the circle within which to distribute the particles
* @param center_x <Number> The centre of the circle on the horizontal axis
* @param center_y <Number> The centre of the circle of the vertical axis
*/
function drawParticles(n:Number, radius:Number, center_x:Number, center_y:Number):void {
var i:Number;
// Create n particles
for (i = 0; i < n; i++) {
var particle:Particle = new Particle(this);
particles.push(particle);
// Disribute uniformly throughout the circle
var r:Number = Math.sqrt(Math.random()) * radius;
var a:Number = (Math.random() * 2 - 1) * Math.PI;
particle.x = Math.sin(a) * r + center_x;
particle.y = Math.cos(a) * r + center_y;
}
}
/**
* Draws connecting lines between close-enough particles
* @param dist <Number> The maximum distance between particles for them to be connected
*/
function drawConnections(dist:Number):void {
var i:Number;
var j:Number;
// This method requires less recursion through less use of the Math.sqrt function
var distance_sq:Number = distance * distance;
// Loop through each PAIR of particles
for (i = 0; i < particles.length - 1; i++) {
var particle_a:Particle = particles*;
for (j = i + 1; j < particles.length; j++) {
var particle_b:Particle = particles[j];
// Calculate the square of their distance apart
var dx:Number = particle_a.x - particle_b.x;
var dy:Number = particle_a.y - particle_b.y;
var d:Number = dx * dx + dy * dy;
if (d < distance_sq) {
// Draw a line if they're close enough
var alpha:Number = (distance - Math.sqrt(d)) / distance;
this.graphics.lineStyle(1, 0, alpha);
this.graphics.moveTo(particle_a.x, particle_a.y);
this.graphics.lineTo(particle_b.x, particle_b.y);
}
}
}
}
/**
* Empties the stage of all particles and graphics
*/
function clear():void {
for (var i:Number = 0; i < particles.length; i++) {
particles*.parent.removeChild(particles*);
}
particles = [];
this.graphics.clear();
}
}
}
Particle.as
package {
import flash.display.Sprite;
class Particle extends Sprite {
public function Particle(parent:Sprite) {
// Draw the particle
this.graphics.beginFill(0x0000FF);
this.graphics.drawCircle(0, 0, 3);
this.graphics.endFill();
// Add the particle to the particle space
parent.addChild(this);
}
}
}
Q: Does anybody know if simple files like this perform better when published from flex as an actionscript project than from flash?
Thanks
