スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

スクロールボックス

スクロールバーとかで内容をスクロールさせるサンプルです。フツウはScrollPaneなんかを使うんでしょうか?そういったタグイのモノです。





スクロールバーを操作して、表示内容をスクロールさせることができます。
スクロールバーの両端にあるグレーの四角にマウスをのせると、その方向にスクロールします。

今回のサンプルでは、表示内容のオフセットを指定して一部を表示できるようなSpriteの継承クラスを作って、フレームアクションでソレを使ってスクロールを実現しています。

作成したクラス(ScrollBox.as)のソースコードはこんなカンジです。

package {
import flash.display.*;
import flash.events.*;
/**
* 内容をスクロール可能なボックス。
*/
public class ScrollBox extends Sprite {
/** マスク */
private var _mask:Sprite;
/** スクリーン */
private var _screen:Sprite;
/** ウィンドウの幅 */
private var _windowWidth:Number;
/** ウィンドウの高さ */
private var _windowHeight:Number;
/** x方向のスクロール位置 */
private var _scrollX:Number;
/** y方向のスクロール位置 */
private var _scrollY:Number;
/** x方向の目標位置 */
private var _targetX:Number;
/** y方向の目標位置 */
private var _targetY:Number;
/** スクロール速度係数 */
private var _scrollSpeed:Number;
/**
* コンストラクタ。
* @param w ウィンドウの幅
* @param h ウィンドウの高さ
*/
public function ScrollBox(w:Number = 10, h:Number = 10) {
_scrollX = 0;
_scrollY = 0;
_targetX = 0;
_targetY = 0;
_scrollSpeed = 0.3;
// スクリーンの生成
_screen = new Sprite();
addChild(_screen);
// マスクの生成
_mask = new Sprite();
var g:Graphics = _mask.graphics;
g.beginFill(0xFFFFFF);
g.drawRect(0, 0, w, h);
g.endFill();
_mask.x = 0;
_mask.y = 0;
addChild(_mask);
_screen.mask = _mask;
// フレームイベントハンドラを登録
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
/**
* 指定した座標が左上になるようスクロールします。
* @param x x座標
* @param y y座標
* @param easing イージングするか
*/
public function scrollTo(x:Number,
y:Number,
easing:Boolean = true):void {
if (x < 0) {
x = 0;
} else if (x > _screen.width - _windowWidth) {
x = _screen.width - _windowWidth;
}
if (y < 0) {
y = 0;
} else if (y > _screen.height - _windowHeight) {
y = _screen.height - _windowHeight;
}
_targetX = x;
_targetY = y;
if (!easing) {
_scrollX = x;
_scrollY = y;
_screen.x = -x;
_screen.y = -y;
}
}
/**
* フレームイベントハンドラ。
* @param evt イベントオブジェクト
*/
private function onEnterFrame(evt:Event):void {
var target:Object = evt.target;
// マスクサイズ調整
target._mask.width = target._windowWidth;
target._mask.height = target._windowHeight;
// スクロール処理
var newX:Number = _scrollX;
var newY:Number = _scrollY;
newX += (_targetX - _scrollX) * _scrollSpeed;
newY += (_targetY - _scrollY) * _scrollSpeed;
if (_targetX != newX || _targetY != newY) {
_scrollX = newX;
_scrollY = newY;
_screen.x = -_scrollX;
_screen.y = -_scrollY;
}
}
/**
* スクリーンを戻します。
* @return スクリーン
*/
public function get screen():Sprite {
return _screen;
}
/**
* ウィンドウの幅を設定します。
* @param w ウィンドウの幅
*/
public function set windowWidth(w:Number):void {
_windowWidth = w;
}
/**
* ウィンドウの幅を戻します。
* @return ウィンドウの幅
*/
public function get windowWidth():Number {
return _windowWidth;
}
/**
* ウィンドウの高さを設定します。
* @param h ウィンドウの高さ
*/
public function set windowHeight(h:Number):void {
_windowHeight = h;
}
/**
* ウィンドウの高さを戻します。
* @return ウィンドウの高さ
*/
public function get windowHeight():Number {
return _windowHeight;
}
/**
* スクロール速度係数を設定します。
* @param value スクロール速度係数
*/
public function set scrollSpeed(value:Number):void {
_scrollSpeed = value;
}
/**
* スクロール速度係数を戻します。
* @return スクロール速度係数
*/
public function get scrollSpeed():Number {
return _scrollSpeed;
}
/**
* 現在の水平方向のスクロール位置を戻します。
* @return 水平方向のスクロール位置
*/
public function get scrollX():Number {
return _scrollX;
}
/**
* 現在の垂直方向のスクロール位置を戻します。
* @return 垂直方向のスクロール位置
*/
public function get scrollY():Number {
return _scrollY;
}
}
}
ScrollBoxクラスは、中に_screenというスプライトを持っています。コイツに指定されたサイズでマスクをかけることで表示内容の一部だけが描画されるようにしています。使う側は、screenプロパティにaddChildしてスクロール表示したいモノを設定します。

scrollToメソッドがスクロール処理をするメソッドです。指定した座標が左上にくるように_screenの座標を動かします。
3つめのパラメータは、_screenの移動の際にイージングをするかどうかです。trueにすると、減速しながら指定した位置までスクロールします。

サンプルのフレームアクションはこんなカンジです。
// ボタンスクロール量
var btnValue:Number = 10;
// スクロールボックス生成
var box:ScrollBox = new ScrollBox();
addChild(box);
// スクロールボックスに表示オブジェクトを追加
var image_mc:IMAGE_MC = new IMAGE_MC();
image_mc.x = 0;
image_mc.y = 0;
box.screen.addChild(image_mc);
// スクロールボックスの位置/サイズを調整
box.windowWidth = 300;
box.windowHeight = 200;
box.x = 50;
box.y = 50;
// 縦スクロールバー
var vThumb_mc = verticalscrollbar_mc.verticalthumb_mc;
var vThumbMin = 0;
var vThumbMax = verticalscrollbar_mc.height;
vThumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,
function(e:Event) {
e.target.dragging = true;
e.target.dragOffset = mouseY - e.target.y;
stage.addEventListener(MouseEvent.MOUSE_UP, verticalThumbRelease);
});
function verticalThumbRelease(e:Event) {
if (vThumb_mc.dragging) {
vThumb_mc.dragging = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, verticalThumbRelease);
}
}
// 横スクロールバー
var hThumb_mc = horizontalscrollbar_mc.horizontalthumb_mc;
var hThumbMin = 0;
var hThumbMax = horizontalscrollbar_mc.width;
hThumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,
function(e:Event) {
e.target.dragging = true;
e.target.dragOffset = mouseX - e.target.x;
stage.addEventListener(MouseEvent.MOUSE_UP, horizontalThumbRelease);
});
function horizontalThumbRelease(e:Event) {
if (hThumb_mc.dragging) {
hThumb_mc.dragging = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, horizontalThumbRelease);
}
}
// スクロールボタン
up_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
up_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
down_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
down_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
left_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
left_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
right_mc.addEventListener(MouseEvent.MOUSE_OVER, doButtonMouseOver);
right_mc.addEventListener(MouseEvent.MOUSE_OUT, doButtonMouseOut);
function doButtonMouseOver(e:Event) {
e.target.on = true;
}
function doButtonMouseOut(e:Event) {
e.target.on = false;
}
// フレームアクション
addEventListener(Event.ENTER_FRAME,
function(e:Event) {
if (vThumb_mc.dragging) {
// 縦スクロールバーでのスクロール
vThumb_mc.y = mouseY - vThumb_mc.dragOffset;
if (vThumb_mc.y < vThumbMin) {
vThumb_mc.y = vThumbMin;
} else if (vThumb_mc.y > vThumbMax) {
vThumb_mc.y = vThumbMax;
}
var newY:Number = (box.height - box.windowHeight)
* (vThumb_mc.y - vThumbMin)
/ (vThumbMax - vThumbMin);
box.scrollTo(box.scrollX, newY, false);
} else if (hThumb_mc.dragging ) {
// 横スクロールバーでのスクロール
hThumb_mc.x = mouseX - hThumb_mc.dragOffset;
if (hThumb_mc.x < hThumbMin) {
hThumb_mc.x = hThumbMin;
} else if (hThumb_mc.x > hThumbMax) {
hThumb_mc.x = hThumbMax;
}
var newX:Number = (box.width - box.windowWidth)
* (hThumb_mc.x - hThumbMin)
/ (hThumbMax - hThumbMin);
box.scrollTo(newX, box.scrollY, false);
} else if (up_mc.on) {
box.scrollTo(box.scrollX, box.scrollY - btnValue);
} else if (down_mc.on) {
box.scrollTo(box.scrollX, box.scrollY + btnValue);
} else if (left_mc.on) {
box.scrollTo(box.scrollX - btnValue, box.scrollY);
} else if (right_mc.on) {
box.scrollTo(box.scrollX + btnValue, box.scrollY);
}
// つまみの位置を調整
if (!vThumb_mc.dragging) {
vThumb_mc.y = vThumbMin
+ (vThumbMax - vThumbMin)
* box.scrollY
/ (box.height - box.windowHeight);
}
if (!hThumb_mc.dragging) {
hThumb_mc.x = hThumbMin
+ (hThumbMax - hThumbMin)
* box.scrollX
/ (box.width - box.windowWidth);
}
});
最初にScrollBoxのインスタンスを生成し、表示内容であるimage_mcをscreenにaddChildしています。

スクロールバーは、バーのムービークリップ内につまみ(水色の四角)のムービークリップがあるという構造になっています。
つまみのムービークリップは、MOUSE_DOWNイベントハンドラでdraggingプロパティをtrueにします。このプロパティがtrueになっているとENTER_FRAMEイベントハンドラで、つまみの位置を元にスクロールが実行されるようにしています。また、マウスボタンを離したときにdraggingプロパティをfalseにするためにstageのMOUSE_UPイベントハンドラを登録しています。

スクロールボタン(グレーの四角)のほーは、MOUSE_OVERイベントハンドラとMOUSE_OUTイベントハンドラを登録しています。MOUSE_OVERイベントハンドラでonプロパティをtrue、MOUSE_OUTイベントハンドラでonプロパティをfalseにします。このプロパティによってENTER_FRAMEイベントハンドラ内でスクロール処理を行います。

ENTER_FRAMEイベントハンドラは、縦スクロールバー/横スクロールバー/4つのスクロールボタンの状態によって処理をふりわけています。スクロールバーのつまみを動かしている場合は、マウスカーソルの位置でつまみの位置をスクロール位置を調整します。スクロールボタンにマウスカーソルが乗っている場合は、btnValueの値分だけスクロールをさせます。
スクロールボタンによってスクロールした場合は、スクロールバーつまみの位置も設定します。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.08.19 | | Comments(0) | Trackback(0) | Flash CS3

コメント

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。