as3.0でscriptのみでスクロールバー実装(フルサイズのみ対応)
まぁ、簡単に指定するだけで、スクロールできるものを作成します。
以下に完成をアップしておきました
http://prfry.net/practice/slider/sb.zip
//ステージの中にコンテナを作成して、スクロールバーを作成します。 //最初は四角を作成してスクロールの形を作成します。 public function Scrollbar():void { container = new MovieClip(); scroll_bg = new Sprite(); scroll_bg.graphics.beginFill(0xcccccc); scroll_bg.graphics.drawRect(-12,0,12,200); scroll_bg.graphics.endFill(); grab = new Sprite(); grab.graphics.beginFill(0x666666); grab.graphics.drawRect(-12,0,12,30); grab.graphics.endFill(); container.addChild(scroll_bg); container.addChild(grab); }
スクロールバーに関しては、何を対象にするかが必要なので、置いただけででは少し無理なので、
何を対象にするか指定する部分を作ります。
サイズが小さい時など必要がなかったりするので、addChildを行うかなどの条件を分岐します。
public function init(t:MovieClip):void { //スクローラーの高さを設定します。 scroll_bg.height=stage.stageHeight; target = t; //ステージの横によせる container.x=stage.stageWidth; container.y=0; if (target.height<=scroll_bg.height) { change_flag = false }else { addChild(container); change_flag = true //イベントの設定 event_make(); } stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; stage.addEventListener(Event.RESIZE, _resize); }
private function _resize(e:Event):void { scroll_bg.height=stage.stageHeight; //ステージの横によせる container.x=stage.stageWidth; container.y = 0; if (target.height <= scroll_bg.height) { if(change_flag ==true){ //イベント削除 event_remove(); removeChild(container); } change_flag = false }else { if(change_flag==false){ //イベント作成 event_make(); addChild(container); } change_flag = true } grab.y=0; if (!hasEventListener(Event.ENTER_FRAME)) { addEventListener(Event.ENTER_FRAME, scrollenterframe); } }
イベント自体は3つだけです。マウスホイールと、マウスのドラッグの設定を行います。
private function event_make():void { grab.addEventListener(MouseEvent.MOUSE_DOWN, dragScroll); stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll); stage.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler); } private function event_remove():void { grab.removeEventListener(MouseEvent.MOUSE_DOWN, dragScroll); stage.removeEventListener(MouseEvent.MOUSE_UP, stopScroll); stage.removeEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler); }
イベントの時はスクロールを始めたいのですが、少し軽くできるようにします。(詳しく見てくださいー。)
//ドラッグの開始の瞬間からステージの方に関してはエンターフレームで現在のグラブの位置に観応して移動をする。 private function dragScroll(event:MouseEvent):void { //グラブに関しては、上から下まで動く。 var sRect:Rectangle=new Rectangle(0,0,0,stage.stageHeight-grab.height); grab.startDrag(false, sRect); addEventListener(MouseEvent.MOUSE_MOVE, _mousemove); }
マウスが動いた時と、きちんと動く場合だけ、うまくスクロールに準じてエンターフレームが発動するようにしてあります。
private function _mousemove(e:MouseEvent):void { if (!hasEventListener(Event.ENTER_FRAME)) { addEventListener(Event.ENTER_FRAME, scrollenterframe); } } // private function mouseWheelHandler(event:MouseEvent):void { if (event.delta<0) { grab.y += 10; if (grab.y>stage.stageHeight-grab.height) { grab.y=stage.stageHeight-grab.height; } if (!hasEventListener(Event.ENTER_FRAME)) { addEventListener(Event.ENTER_FRAME, scrollenterframe); } } else { grab.y -= 10; if (grab.y<0) { grab.y=0; } if (!hasEventListener(Event.ENTER_FRAME)) { addEventListener(Event.ENTER_FRAME, scrollenterframe); } } } //ステージの外にマウスが移動した場合には、ドラッグが終了 private function stopScroll(event:MouseEvent):void { removeEventListener(MouseEvent.MOUSE_MOVE, _mousemove); grab.stopDrag(); } private function scrollenterframe(evt:Event):void { var op:Number = (-1)*grab.y/(stage.stageHeight-grab.height)*(target.height-stage.stageHeight) target.y += (op-target.y)/10 if (Math.abs(target.y-op)<0.1) { removeEventListener(Event.ENTER_FRAME,scrollenterframe); } }
アップしておきました
http://prfry.net/practice/slider/sb.zip