トップページ > Flash入門 > GUIパーツを作る（１）

スライドバーを作る

スライドバーで拡大・縮小

スライドバーを使って，表示画像を拡大・縮小するflashです。 “vSlideBar”という縦方向のスライドバークラスを作製し， Main関数内でインスタンス化，画像の拡大・縮小処理に結び付けています。

ソースコード：　“vSlideBar.as”

barの部分をドラッグで移動できるようにし，その時のｙ方向位置に対応して“value”変数の値を変更しています。 barの画像自体の縦幅と，スライドの際の移動範囲との調整で，少々ややこしいことになっています。。。

※スライドバー用の適当な画像（今回は“StrongGrayBar.png”）が必要になります。バーの部分は画像ではなく， 簡単なスプライトの矩形塗りつぶしなどでも代用可です。

//************************************************************************
//2012/03/22
//縦方向スライドバークラス
//Proggramed by Koten-Kairoya
//************************************************************************

package
{
    import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.display.Bitmap;
    import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.*;
	
    public class vSlideBar extends Sprite 
    {
		
		//画像ファイルを読み込む
		[Embed(source = "./StrongGrayBar.png")]
		public var bar_Img:Class;
		public var bar_img:Bitmap = new bar_Img();

		//寸法
		public var Width:int;
		public var Height:int;
		//バー描画用スプライト
		public var bar:Sprite = new Sprite();
		//スライドバーの値
		public var value:int = 0;
		//ドラッグ中フラグ
		public var click_flag:Boolean = false;
		//座標保存用
		public var pre_y:int = 0;
		public var delta_y:int = 0;


		//================================================================         
        //コンストラクタ。引数は，横方向寸法，スライドバーの最大値初期位置。
		public function vSlideBar(width:int, height:int, ini_pos:int) 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point

			//バーを用意
			bar.addChild(bar_img);
			
			//寸法を保存。縦の寸法はバーの寸法を加えた値
			this.Width = width;
			this.Height = bar.height + height;

			//矩形描画
			this.graphics.beginFill(0xefefef, 1);
			this.graphics.drawRect(0, 0, Width,  Height);
			this.graphics.endFill();
			
			//スライドの軸を描画
			this.graphics.lineStyle(2, 0x3f3f3f);
			this.graphics.moveTo(Width / 2, 0);
			this.graphics.lineTo(Width/2,  Height);
			
			//バーを表示
			addChild(bar);
			
			//バーの初期位置を設定
			bar.x = Width/2 - bar.width/2
			bar.y = Height - bar.height - ini_pos;
			
			//初期値を設定
			value = ini_pos;
			
			//イベントリスナを登録
			bar.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			bar.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
			bar.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
			bar.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
			this.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout );
        }

		//バーの上でマウス左ボタンが押されると呼ばれる関数
		private function onMouseDown(e:MouseEvent):void
		{
			//フラグを立てて，クリック中の状態にする
			click_flag = true;
			//ドラッグ処理開始
			bar.startDrag();
		}
		
		//バーの上でマウス左ボタンが離された時に呼ばれる関数
		private function onMouseUp(e:MouseEvent):void
		{
			//フラグを下げて，クリック中の状態をやめる
			click_flag = false;
			//ドラッグ処理終了
			bar.stopDrag();
		}
		
		//マウスが動いたときに呼ばれる関数
		private function onMouseMove(e:MouseEvent):void
		{
			//クリック中の場合は処理を行う
			if (click_flag == true)
			{
				//ドラッグを一度やめる
				bar.stopDrag();
				//横方向には動かさない。常に中心。
				bar.x = width / 2 - bar.width / 2;
				
				//バーがスライドバーエリア外に出た場合は，もとに戻す
				if(bar.y+delta_y <=0 )
				{
					bar.y = 0;
				}
				if (bar.y  >= Height - bar.height)
				{
					bar.y = Height - bar.height;
				}
				
				//ドラッグ処理再開
				bar.startDrag();
				//valueの値を更新
				value = Height - bar.height - bar.y;
			}
		}

		//スライドバーの領域からマウスが離れた場合
		private function onMouseRollout(e:MouseEvent):void
		{
			//クリック中フラグを下げる
			click_flag = false;
			//ドラッグ終了
			bar.stopDrag();
			//バーの横ズレを修正
			bar.x = Width/2 - bar.width/2;
		}
	}
}}

ソースコード：　Main.as

Mainクラスのソースコードです。 スライドバーをインスタンス化し，表示します。 フレームごとの処理で，スライドバー・クラスのvalueの値を読んで表示画像を拡大・縮小しています。

※拡大・縮小用画像（今回は“ClearBall_pink.png”）が必要です。

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.Bitmap;
	
    //画面サイズと背景色，フレームレートを設定
    [SWF(width = "350", height = "300", frameRate = "30", backgroundColor = "0xffffcc")] 
     
	public class Main extends Sprite 
	{
		//画像ファイルを読み込む
		[Embed(source = "./ClearBall_pink.png")]
		public var ball_Img:Class;
		public var ball_img:Bitmap = new ball_Img();
		
		//ボール表示用スプライト
		public var ball:Sprite = new Sprite();
		
		//スライドバー
		public var slidebar:vSlideBar = new vSlideBar(50,275,100);
		
		//main関数
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		//コンストラクタ
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			//スライドバーを表示
			addChild(slidebar);
			slidebar.x = 300;
			
			//ボールを表示
			ball.addChild(ball_img);
			addChild(ball);
			//ball.x = 0; 
			//ball.y = 0;
			
			//イベントリスナ登録
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		
		//フレームごとに，slidebarの値を呼んで，ボールを適当に拡大・縮小
		private function onEnterFrame(e:Event):void
		{
			ball.scaleX = slidebar.value / 100;
			ball.scaleY = slidebar.value / 100;			
		}
	}
}

戻る　 次へ