スクロールバーの自作の仕方

質問

テキストフィールドにスクロールバーをつけようと思いUIScrollBarを使用したのですが、
少々味気ないのでマウスホイール対応のスクロールバーを自作しようと思ってます。
しかしWEBで検索してもサンプルを配布しているサイトは多数あったのですが、一から解説しているサイトは発見できませんでした。
お手数ですが、スクロールバーの自作の仕方を教えて頂けないでしょうか。
FLASH製作の知識が全くといっていいほどないので、分かりやすく教えていただければ助かります。
ちなみに製作ソフトはFLASH8を使っています。
よろしくお願いします。

回答No.1

noname#35109

先にツッコミを入れさせていただいでかまわないでしょうか。

UIScrollBar を付けたテキストフィールドを一度クリックして，
マウスホイールを回転させると，テキストフィールド　の文字もスクロールしますし，
スクロールバーもスクロールしますけど...。
UIScrollBarは元からマウスホイール対応のスクロールバーです。

と言うかですね，
UIScrollBar を付けなくても，
単なるダイナミックテキストフィールドやテキスト入力のテキストフィールドを用意しただけで，
マウスホイールの回転でテキストはスクロールします。

例えば，こちらのサンプルでも （どこのサンプルでも），
マウスホイールの回転でテキストはスクロールします↓。

「action script_テキストスクロール」
http://www.flashiroha.com/script/as5.html

私の環境は Windows XP ，Flash Player 9 です。

お使いの OS が Mac だと，
マウスホイールでスクロールさせられないのかもしれませんが，
それは ActionScript でいくら頑張ってもできません。
ですから，
自作しても，スクロールできない物はスクロールできませんし，
スクロールできる場合は自作しなくても元からスクロールできます。

Google 検索「onMouseWheel Mac」
http://www.google.co.jp/search?hl=ja&q=onMouseWheel+Mac&lr=lang_ja

/////////////////////////////////////////////

ですから，
上記のマウスホイール の話とは別問題として，
簡単にテキストフィールドに付けるスクロールバーを自作する方法（スクリプト）を説明します。

しかし，その前に，

> WEBで検索してもサンプルを配布しているサイトは多数あったのですが、
> 一から解説しているサイトは発見できませんでした。

ココは図入りで説明できたり，サンプルを置けるような一般的なサイトではありませんよ。
普通のサイトのようにちゃんと説明できるはずは元からありません。
どれだけの紙面とどれだけの画像とサンプルを用意しなければならないのかわかっていらっしゃいますか？

ですから，
簡単に スクロールバー の "バー" の部分についてのみ，
私流の作り方の簡易版を説明します。

Flash のヘルプで次のページのようなことを理解すると，
ある程度の簡易版が作れます↓。

scroll (TextField.scroll プロパティ)
http://livedocs.macromedia.com/flash/8_jp/main/00002773.html

maxscroll (TextField.maxscroll プロパティ)
http://livedocs.macromedia.com/flash/8_jp/main/00002755.html

startDrag 関数
http://livedocs.macromedia.com/flash/8_jp/main/00001769.html

まず，
ステージ上に，３～４行ほどのテキストが表示できる小さめのダイナミックテキストのテキストフィールドを作成します。
そして，プロパティインスペクタ（プロパティパネル）で，
文字の色は黒など背景色以外の色を指定して，「複数行」の設定にしてください。
そしてインスタンス名を付けますがこの説明では 「my_txt」 というインスタンス名を付けたとしておきます。

その小さめのテキストフィールドの右横に，
バーとなる 塗りの長方形 を矩形ツールで描きます。
長さはテキストフィールドの高さより短くしてください。
その 塗りの長方形 を選択して，
「修正」→「シンボルに変換」でムービークリップシンボルに変換するわけですが，
その変換するときの基準点の位置を 「左上」 にしてください。
　　　　　　　　　　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
変換できましたら，インスタンス名を付けるのですが，
この説明では 「my_bar」 というインスタンス名を付けたとしておきます。

　　↓「my_txt」　　　　　　　↓「my_bar」　
　□□□□□□□□□□ ■
　□□□□□□□□□□ ■
　□□□□□□□□□□ ■
　□□□□□□□□□□
　□□□□□□□□□□

そして，
フレームに次のようなスクリプトを書けば，
「簡易版スクロールバー」の「バー」の部分だけの完成です。

/////////////////////////////////////////////////////////////////
// データの用意
my_txt.text = "あいうえお\nか\nさ\nた\nな\nは\nま\nや\nら\nわ\nん";
//
// スクロール数 の初期化
var scr = 0;
// スクロールフラグの初期化
var scr_flg = 0;
//
// ---１行スクロールさせるための my_bar の移動量の算出---
// my_txt の最大スクロール数の取得
var max = my_txt.maxscroll;
// my_bar の全移動範囲を算出
var all = _root.my_txt._height-_root.my_bar._height;
// １行スクロールさせるための my_bar の移動量の算出
var mov = all/max;
// trace(max);//←確認してみたりする...
//
// 1フレーム進む時間ごとに毎回実行
_root.my_bar.onEnterFrame = function() {
if (scr_flg == 0) {
// my_bar の座標を決定
_root.my_bar._y = _root.my_txt._y+_root.my_txt.scroll*_root.mov;
} else {
// my_txt のスクロール数を決定
_root.my_txt.scroll = Math.round((this._y-_root.my_txt._y)/_root.mov);
}
};
//
// バーをプレスしたとき
_root.my_bar.onPress = function() {
// スクロールフラグ を１にする
_root.scr_flg = 1;
// ドラッグ開始（中心に固定しない，左，上，右，下の移動範囲）
this.startDrag(false, this._x, _root.my_txt._y, this._x, _root.my_txt._y+_root.all);
};
// バーからマウスをアップしたとき
_root.my_bar.onRelease = function() {
_root.scr_flg = 0;
this.stopDrag();
};
// バーからドラッグアウトしたとき（onReleaseと同じ）
_root.my_bar.onDragOut = _root.my_bar.onRelease;
/////////////////////////////////////////////////////////////////

上記は，あくまでも 私流の簡易版 です。

あとは理解して，
▲ボタン と ▼ボタン も作れば良いということになります。

おそらく，これくらいな簡単なものは，
サッサと理解し，▲ボタン と ▼ボタン も作れる方でないと，
実際のスクロールバーの作成方法などはどのサイトも理解できないと思いますし，
カスタマイズもできないと思います。

その前に，
上記ぐらいのものはサッサと自作できるような方でないと，
ちゃんとしたスクロールバーは，
どんなサンプルや説明を見ても理解不能だと思いますよ。

スクロールバーに限らず，
たくさんのものを自分で考えて自作することです。
すると，UIScrollBarレベルのすごい物がそのうち作れるようになると思います（多分，かなり自信なし）。

UIScrollBar は Macromedia の開発者が寄り集って検討し，試作を繰りかえした結果の産物ですから，
なかなかあのレベルのものを作るのは難しいとは思いますけどね。

～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・

★ 以下は余談であり，本題かも。

Windows で Flash 8 をデフォルトの C:\Program Files にインストールした場合，
「C:\Program Files\Macromedia\Flash 8\ja\Configuration\Components\User Interface」
というフォルダに，
「UIScrollBar.swc」というファイルができます。
これが，UIScrollBar の本体です。

この 「UIScrollBar.swc」 をデスクトップなどにコピーして，
コピーしたものの拡張子を手動で .zip に変えてやります。
つまり 「UIScrollBar.zip」に名前を変更するということです。
それでその「UIScrollBar.zip」を圧縮解凍ソフトなどで解凍すると，
35個のファイルが出てきます。

「catalog.xml」や「LivePreview.swf」というファイルもありますが，
大半は拡張子 .asi というファイルです。

　mx.controls.Button.asi
　mx.controls.HScrollBar.asi
　mx.controls.scrollClasses.ScrollBar.asi
　　　～ 略 ～
　mx.styles.StyleManager.asi

この .asi ファイルは実はテキストファイルで，
メモ帳などテキストエディタで見ることができます。
例えば１つめの「mx.controls.Button.asi」を開いてみると，

----------------------------------------
import mx.core.UIObject;
import mx.controls.SimpleButton;
import mx.core.UIComponent;

[Event("click")]
[TagName("Button")]
[IconFile("Button.png")]
intrinsic class mx.controls.Button extends mx.controls.SimpleButton
{
public function Button();
public var __label:String;
public var __labelPlacement:String;
public var _color;
public function _getIcon(Void):String;
public var _iconLinkageName:String;
[Bindable] [ChangeEvent("click")] public var _inherited_selected:Boolean;
public function _setIcon(linkage):Void;
public var borderW:Number;
public var btnOffset:Number;
public function calcSize(tag:Number, ref:Object):Void;
public var centerContent:Boolean;
public var className:String;
public var clipParameters:Object;
public function createChildren(Void):Void;
public function draw();
public var falseDisabledIcon:String;
public var falseDisabledSkin:String;
public var falseDownIcon:String;
public var falseDownSkin:String;
public var falseOverIcon:String;
public var falseOverSkin:String;
public var falseUpIcon:String;
public var falseUpSkin:String;
public function getBtnOffset(Void):Number;
public function getLabel(Void):String;
public function getLabelPlacement(Void):String;
public var hitArea_mc:MovieClip;
function get icon():String;
[Inspectable(defaultValue="")] function set icon(linkage);
public function init(Void):Void;
public var initIcon;
public function invalidateStyle(c:String):Void;
[Inspectable(defaultValue="Button")] function set label(lbl:String);
function get label():String;
public var labelPath:Object;
[Inspectable(enumeration="left,right,top,bottom"defaultValue="right")] function set labelPlacement(val:String);
function get labelPlacement():String;
static var mergedClipParameters:Boolean;
public function onRelease(Void):Void;
public function setColor(c:Number):Void;
public function setEnabled(enable:Boolean):Void;
public function setHitArea(w:Number, h:Number);
public function setLabel(label:String):Void;
public function setLabelPlacement(val:String):Void;
public function setSkin(tag:Number, linkageName:String, initobj:Object):MovieClip;
public function setView(offset:Number):Void;
public function size(Void):Void;
static var symbolName:String;
static var symbolOwner;
public var trueDisabledIcon:String;
public var trueDisabledSkin:String;
public var trueDownIcon:String;
public var trueDownSkin:String;
public var trueOverIcon:String;
public var trueOverSkin:String;
public var trueUpIcon:String;
public var trueUpSkin:String;
static var version:String;
public function viewSkin(varName:String):Void;
};
----------------------------------------

すごい行のスクリプトですが，
これは実はスクリプト本体ではなく，
クラスファイルの呼びだしと，変数の宣言部分だけです。
それに，UIScrollBar はスクリプトだけで動くわけはなく，
複雑なムービークリップの入れ子状態の構造とスクリプトが連携してまともに動くのです。

そんなものを一々解析もできませんし，解説もできません。
もし，解説できたら，UIScrollBarだけで分厚い本になってしまうと思いますし，
そんな本を売ってもおそらく誰も買いません。
ちゃんとしたスクロールバーの作り方を解説するなんて不可能なことがわかりますか？

そんなことをする時間があったら，
最初から UIScrollBar を何も文句を言わずに使うか，
文句があるのなら，簡易でも良いので，自分で考えて自作することです。
それが手っとり早いですよ。

簡易でも良いので，自分で考えて自作することができなければ，
上にも書きましたが，
スクロールバーに限らず，
たくさんのものを自分で考えて自作することです。
すると，UIScrollBarレベルのすごい物がそのうち作れるようになる....と思います（？？？）。
思えませんが，近い物は作れるようになると思います。

～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・

★★ 結局これが本題かも。

> 少々味気ないのでマウスホイール対応のスクロールバーを

ひょっとして，味気ないのは動きの問題ではなく，
UIScrollBar の見かけの問題でしょうか？

もしそうであれば，
次の方法でUIScrollBarの見かけだけを簡単に変更できますよ。

「ドキュメントのコンポーネントスキンの編集」
http://livedocs.macromedia.com/flash/8_jp/main/00003003.html

テキストフィールドに UIScrollBar を付けた段階で，
[ファイル]-[読み込み]-[外部ライブラリを開く] を選択して，
Windows で Flash 8 をデフォルトの C:\Program Files にインストールした場合，
C:\Program Files\Macromedia\Flash 8\ja\Configuration\ComponentFLA\SampleTheme.fla
のライブラリを読み込み，
そのライブラリ内の
「Flash UI Components 2」ライブラリフォルダ内の「SampleTheme」をステージ上に引きずりだして，
その▼や▲やバーの色などを塗りかえては「制御」→「ムービープレビュー」で確かめると，
UIScrollBar の外観が変わります。
「SampleTheme」をステージ上に引きずりだして，編集したあとは，ステージ上から消しておけば良いです。

単にこれだけのことだと， ActionScript や 最初から自作 など考えなくて良いので楽です。

お礼

返信が遅れて申しわけありません。
丁寧な説明、ありがとうございました。
スクロールバーの外観を変えたかったので、
非常にためになりました。
本当にご丁寧にどうもありがとうございました。