自分用にスクロールバーを作りました。
私は、ActionScriptが苦手な方です。
見苦しいコードとは思いますが、ご勘弁お願いします。
(困った時は、何でもかんでもif文で解決しようとしてしまいます・・・)
→サンプル(scrollbar_var001)
↓メインタイムラインの1フレーム目
(まだ、カスタムクラスの書き方ができるレベルまで達していませんので、タイムラインに書いています。)
import flash.display.*;
import flash.events.*;
import flash.geom.*;
//▼変数・定数設定
var myRange:Number = bg.height - bar.height;
var myPosition:Number = 0;
var myPercent:Number = 0;
var plusMinus:Number;
const scrollVolume:Number = 1;//スクロールする量の値
var offsetMytxtY:Number = 25;//mytxtの最初の座標の値
var newsTxtWidth:Number=305;//newsTxtの幅の値
var loader:URLLoader = new URLLoader();
const NEWSTXT_URL:String="news.txt";//外部テキストのURL
var scrollBtnClick:String="off";
var scrollBtnFlag :int;
//▼初期化
bar.y = bg.y;//このサンプルでは31
bar.visible=false;
bg.visible=false;
up.visible=false;
down.visible=false;
//▼通常処理
//テキストのマスク
mytxt.mask = mask_txt;
//テキスト読み込み
loader.addEventListener(Event.COMPLETE, loadComplete);
loader.load(new URLRequest(NEWSTXT_URL));
//▼イベント処理
bar.addEventListener( MouseEvent.MOUSE_DOWN, onPressBar );
bar.addEventListener( MouseEvent.MOUSE_UP, onReleaseBar );
bar.stage.addEventListener( MouseEvent.MOUSE_UP, onReleaseBar );
up.addEventListener(MouseEvent.MOUSE_DOWN, updownHandler);
up.addEventListener(MouseEvent.MOUSE_UP, updownClearHandler);
down.addEventListener(MouseEvent.MOUSE_DOWN, updownHandler);
down.addEventListener(MouseEvent.MOUSE_UP, updownClearHandler);
addEventListener( Event.ENTER_FRAME, onUpdatemytxt );
addEventListener(Event.ENTER_FRAME, updownEnterFrame);
//▼関数定義
//スクロールバー表示設定
function scrollSet() {
if (mytxt.height<=bg.height) {
bar.visible=false;
bg.visible=false;
up.visible=false;
down.visible=false;
} else {
bar.visible=true;
bg.visible=true;
up.visible=true;
down.visible=true;
}
}
//テキスト読み込み
function loadComplete(evt:Event):void {
var style1:StyleSheet = new StyleSheet();
style1.setStyle(".news", {leading:4});
style1.setStyle(".indent", {marginLeft:65});
style1.setStyle("a", {color:"#0000ff", textDecoration:"none"});
style1.parseCSS('a:hover{text-decoration:underline;}');
var newsTxt = new TextField();
newsTxt.width = newsTxtWidth;//newsTxtの幅
newsTxt.autoSize = "left";//左に揃えて整形
newsTxt.multiline = newsTxt.wordWrap = true;// 複数行・折り返し
newsTxt.styleSheet = style1;//スタイルシートを関連付け
newsTxt.condenseWhite=true;//HTML表示時にスペース改行などを削除
newsTxt.htmlText = evt.target.data;//HTMLテキストの表示
mytxt.addChild(newsTxt);
//newsTxtをaddChildした後にスクロール表示の判定
scrollSet();
}
//▼イベントハンドラ定義
//onPressBarボタンMOUSE_DOWN用
function onPressBar( evt:Event ):void {
//Rectangle(x座標,y座標,幅,高さ)
bar.startDrag( false, new Rectangle( bg.x, bg.y, 0, myRange ) );
addEventListener( Event.ENTER_FRAME, onUpdateBar );
}
//onReleaseBarボタンMOUSE_UP用
function onReleaseBar(evt:Event):void {
bar.stopDrag();
removeEventListener( Event.ENTER_FRAME, onUpdateBar );
}
//位置とパーセント値を更新
function onUpdateBar(evt:Event):void {
myPosition = bar.y - bg.y;
myPercent = myPosition / myRange;
}
//up・downボタンMOUSE_DOWN用
function updownHandler(evt:MouseEvent):void {
scrollBtnClick = "on";
//upボタンを押すとscrollVolume、downボタンを押すと-scrollVolume
plusMinus = (evt.target.name == "up") ? scrollVolume : -scrollVolume;
updownBarMove();
}
//up・downボタンMOUSE_UP用
function updownClearHandler(evt:MouseEvent):void {
scrollBtnClick = "off";
removeEventListener(Event.ENTER_FRAME, onUpdateBar);
}
//up・downボタンを押している間の処理
function updownEnterFrame(evt:Event) {
if (scrollBtnClick == "on") {
scrollBtnFlag=1;
updownBarMove();
} else if (scrollBtnClick=="off" && scrollBtnFlag==1) {
scrollBtnFlag=0;
}//trace("off");
}
//barの移動処理
function updownBarMove() {
//plusMinusの値がscrollVolumeの値と等しい場合
if (plusMinus==scrollVolume) {
bar.y=bar.y-scrollVolume;//bar.yを移動
//myPercentが0以下の場合
if (myPercent<=0) {
bar.y=bg.y+myPosition;//bar.yは一番上
//trace(myPosition);
}
} else {
bar.y=bar.y+scrollVolume;//bar.yを移動
//myPercentが1以上の場合
if (myPercent>=1) {
bar.y=bg.y+myPosition;//bar.yは一番下
//trace(myPosition);
}
}
addEventListener(Event.ENTER_FRAME, onUpdateBar);
//trace(plusMinus);
}
//mytxt.yのy座標の位置
function onUpdatemytxt( evt:Event ):void {
mytxt.y = (myPercent * -(mytxt.height-bg.height)) + offsetMytxtY;
}
■簡単な解説
実際に作った時に実装した手順は、下記の通りです。
- ○スクロールバーをつくるときのポイントのサンプルを自分で触ってみてなんとなく理解する。
└自分で実際に触ることが大事!
- ○外部テキストを実装する。
└mytxtのMCは、空のMCをステージに置いてnewsTxtのTextFieldをaddChildしています。
- ○外部テキストがbgのMCより大きい場合、スクロールバーの表示を行う。
- ○up・downボタンを実装する。
- ○up・downボタンを押している間、barを移動する仕組みを実装する。
※コードになるべくコメントを入れて作ったので、見ていただけるとたぶんわかると思います。
→Flashデータダウンロード[CS3形式](scrollbar_var001)
■参考
もっとこうした方が効率的とかアドバイスを頂けると幸いです。