Jamie White

I’ve written a simple particle system that abandons the use of display objects. A typical particle system in Flash would often use Sprites or MovieClips that have their properties updated by a single enter frame. This can usually result in performance issues if they are not removed properly afterwards. The particles in this example are drawn to a sprite (off stage) every frame, then the container is drawn to a bitmap. I’ve had about 5000 particles being drawn each frame, effortlessly.

Ok, this post is a bit random. I was playing about with animating circle outlines using trig, then just went overboard making it scale and stuff. Then I remembered Seb Lee-Delisle wrote a simple drawing api for Flash 10, so then I made made a similar thing in 3D space.

Be patient with the 3D version, It does this cool wavy effect when it finishes.


private var _startPoint:Point = new Point(0, 0); // The centre point of the circle.
private var _circleTween:TweenMax; // Tween used for drawing the circle.
private var _canvas:Sprite; // The container for the graphics.
private var _maxLines:int = 400; // The maximum number of lines to draw.
private var _lineCount:int = 0;

public function WierdCircles():void
{
_canvas = new Sprite();
_canvas.x = stage.stageWidth/2;
_canvas.y = stage.stageHeight/2;
addChild(_canvas);

TweenMax.to(_startPoint, 30, {x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight, ease:Quad.easeIn, overwrite:2});
TweenMax.to(_canvas, 10, {scaleX:.2, scaleY:.2, yoyo:true, repeat:-1, ease:Quad.easeInOut, overwrite:2});

_drawCircle(120, 150, .2, 80);
}

private function _drawCircle($angle:int, $rad:int, $increment:int, $totalFrames:int):void
{
_circleTween = TweenMax.to(_canvas, $totalFrames, {rotation:-360, useFrames:true, onUpdate:_circleStep, onUpdateParams:[$angle, $rad, $increment], onComplete:_circleComplete, onCompleteParams:[$angle, $rad, $increment, $totalFrames], ease:Linear.easeNone});
}




private function _circleStep($angle:int, $rad:int, $increment:int):void
{
if(_lineCount < _maxLines)
{
var nextX:Number;
var nextY:Number;
var angle:Number;
var theta:Number = 0 * Math.PI/180;

nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));

if(_lineCount == 0) _canvas.graphics.moveTo(nextX, nextY);
else _canvas.graphics.lineStyle(3, 0xFF0000, 1);

angle = 360 * (_circleTween.currentProgress);
theta = angle * Math.PI/180;

nextX = _startPoint.x + (Math.cos(theta) * ($rad + _lineCount));
nextY = _startPoint.y + (Math.sin(theta) * ($rad + _lineCount));

_canvas.graphics.lineTo(nextX, nextY);

_lineCount++;
}
}

public function _circleComplete($angle:int, $rad:int, $increment:int, $totalFrames:int):void
{
_drawCircle($angle, $rad, $increment, $totalFrames);
}


Here is something I made a while back. I was mimicking a sequence from a TV ad which meant splitting up a 2D image and mapping them onto 3D planes for animation. This idea was abandoned in the end for something more substantial. It was cool to accomplish it, at least.

So here’s how its done:

• Get the size of the image and break it up into segments depending on the number of rows and columns you want.

• Apply each segment of the bitmapdata onto its own bitmap material, then apply it to a primitive plane.

• Calculate the target x/y position depending on where the top left corner of the image should sit.

• Cue all 3D planes from scale 0, and the start xy position.

• Create a bezier path for the tween on the XYZ axis.

This is a quick demo of basic UV mapping onto Triangles in Flash 10. I was quite excited when I did this as I could use it to projection map video onto surfaces.