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.

Flash 10 CirclesWeird 2D Circles


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);
}

Leave a comment

Your email address will not be published. Required fields are marked *