プログレスバー

(サンプル一覧を表示する)

FlashDevelop を使って、プログレスバーの表示テストをしてみました。

FlashDevelop の ActionScript プロジェクトでは、便利な GUI 部品が使えないので
自力で部品を作る必要があります。
Flash の実行画面
プログレスバー

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

プログレスバー

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	
	/**
	 * プログレスバーのサンプル
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * バーの状態表示用スプライト
		 */
		private var sprite:Sprite;
		
		/**
		 * % 表示用テキストフィールド
		 */
		private var textField:TextField;
		
		/**
		 * バーの現在の値
		 */
		private var value:Number;
		
		/**
		 * バーの前回の値
		 */
		private var prevValue:Number;
		
		/**
		 * バーの最大値
		 */
		private var maxValue:Number;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化イベント
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			// バーの値を設定
			value = 0;
			prevValue = 0;
			maxValue = 300;
			
			// バー作成
			sprite = new Sprite();
			sprite.x = 60;
			sprite.y = 110;
			addChild(sprite);
			
			// ボーダーを描く
			drawProgressBarBorder();
			
			// テキストフィールド作成
			textField = new TextField();
			textField.autoSize = TextFieldAutoSize.CENTER;
			textField.selectable = false;
			textField.x = 100;
			textField.y = 2;
			textField.text = "0 %";
			sprite.addChild(textField);
			
			// フレーム開始イベント登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		/**
		 * フレーム開始イベント
		 * @param	event
		 */
		private function onEnterFrame(event:Event):void
		{
			value += 0.5;			
			renewProgressBar();
		}
		
		/**
		 * バーのボーダーラインを描く
		 */
		private function drawProgressBarBorder():void
		{
			var g:Graphics;
			g = sprite.graphics;
			g.lineStyle(2, 0x0000FF);
			g.drawRect(1, 1, 200, 20);
			g.lineStyle();
		}
		
		/**
		 * バーの表示を更新する
		 */
		private function renewProgressBar():void
		{
			// 最大値より大きい場合、最大値を代入する
			value = value >= maxValue ? maxValue : value;
			
			if (value == prevValue)
				return;
			
			var ratio:Number;
			var w:Number;
			ratio = value / maxValue;
			w = (200 - 2) * ratio;
			
			// テキストを更新する
			textField.text = Math.floor(ratio * 100).toString() + " %";
			
			var g:Graphics;
			g = sprite.graphics;
			
			// 値が減った時は、いったんクリアする
			if (value < prevValue)
			{
				g.beginFill(0xFFFFFF);
				g.drawRect(2, 2, 198, 18);
				g.endFill();
			}
			
			// 量に応じてバーを伸ばす
			var x:Number = (200 - 2) * (prevValue / maxValue)
			g.beginFill(0x8888FF);
			g.drawRect(2 + x, 2, w - x, 18);
			g.endFill();
			
			// 前回の値を保存
			prevValue = value;
		}
		
	}
	
}		

外部リンク