[AS3]円(環状)のローディング

フラッシュサイトのローディング画面でよく見る環状のローディングが作りたいと思いまして、いろいろ調べて試した結果が下記のコード。 progress eventとかで、drawCircleにパーセントを引数として呼び出せばクルッとローディングができます。
PV3Dの練習で作ったTypography Cubeのローディングもこれです。

どういう作りになってるかというと、引数で受け取った値を角度に変換して、その角度までの円を書きます。
それだけだとただの円になってしまうので、円の真ん中の部分くり抜く感じです。
そうすると環状になります。
radiusが円の半径で、radius2はくり抜く円の半径です。

ちなみに、lineStyleを設定して線のみでも可能です。が、若干荒かったです。

package
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	
	public class LoadingCircle extends Sprite 
	{
		//円の半径
		private var _radius:uint;
		//くり抜く円の半径
		private var _radius2:uint;
		
		private var _moveX:Number;
		private var _moveY:Number;
		
		public function LoadingCircle(radius:uint, radius2:uint)
		{
			_radius = radius;
			_radius2 = radius2;
		}
		
		public function drawCircle(per:uint):void
		{
			var angle:uint = 0;
			var g:Graphics = this.graphics;

			g.clear();
			g.beginFill(0xFFFFFF, 1);
			g.moveTo(0, -_radius);

			//円を書く
			while (angle < = per)
			{
				getPoint(angle, _radius)
				g.lineTo(_moveX, _moveY);
				angle++;
			}
			
			angle = per;

			//円をくり抜く
			while (angle >= 0)
			{
				getPoint(angle, _radius2)
				g.lineTo(_moveX, _moveY);
				angle--;
			}
		}
		
		private function getPoint(angle:Number, radius:Number):void
		{
			//0時のところからスタートするように、90度(Math.PI / 2)を引いて計算します。
			_moveX = radius * Math.cos(2 * Math.PI * angle / 100 - (Math.PI / 2));
			_moveY = radius * Math.sin(2 * Math.PI * angle / 100 - (Math.PI / 2));
		}
	}
	
}

コメント

Comments are closed.

Post Navigation