トップページ > Flash入門 > GUIパーツを作る(1)
スライドバーを使って,表示画像を拡大・縮小するflashです。 “vSlideBar”という縦方向のスライドバークラスを作製し, Main関数内でインスタンス化,画像の拡大・縮小処理に結び付けています。
barの部分をドラッグで移動できるようにし,その時のy方向位置に対応して“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クラスのソースコードです。 スライドバーをインスタンス化し,表示します。 フレームごとの処理で,スライドバー・クラスの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; } } }