テキストフィールド+UIScrollBarについて

質問

外部ファイルをダイナミックテキストとしてテキストフィールドに読み込んでいます。

System.useCodepage = true ;
loadVariablesNum("test.txt", 0);

UIScrollBarでターゲットをテキストフィールドのインスタンス名を指定するのですが、スクロールバーが表示されません。FLASH初心者ですが、助言などありましたら、お願いします。

2004MX Profationalです。

回答No.2

DPE · ベストアンサー

ダイナミックテキストの表示を更新するには、「変数：」の項目に変数名を指定して変数の内容を表示する方法と、ダイナミックテキストを制御する TextField クラスが持っている text というプロパティを書き換える方法の、２通りの方法があります。
UIScrollBar コンポーネントを利用する時は、「変数：」の項目に変数名を指定しただけではスクロールバーが正常に機能しない場合があります。理由はいろいろとあるのですが、今はさしあたって、そのような設計になっているからと考えてください。

外部から読み込んだ情報を表示するテキストフィールドに UIScrollBar コンポーネントを付ける場合は、読み込みの終了を待ってから、テキストフィールドの text プロパティに読み込んだ内容を代入する形で表示を更新します。
読み込みの終了を待つ方法はいろいろありますが、簡単なところで、変数が全て読み込まれた時に発生する data イベントを利用する方法をご紹介します。

Flash ではムービー自体も１つのムービークリップとして扱い、外部から他のムービーを読み込むといった操作をしなければ、通常は _root という名前で識別します。
これとは別に、Flash にはレベルという考え方があります。
レベル０はムービーの最も根底にあたる階層で、他のレベルにムービーが何も読み込まれていなければ、レベル０とは _root のことです。
loadVariablesNum でレベル０に変数を読み込むと、一般的には、この変数は_root 階層のものになります。

loadVariablesNum でレベル０に読み込むと、_root の data イベントを利用して読み込みの終了を検出できます。
ただし、_root は他のムービークリップと違い、ステージに本体がありません。
onClipEvent アクションでオブジェクトアクションとしてはスクリプトを書けないので、onData = function の書き方を使います。

ダイナミックテキストのテキストフィールドには、インスタンス名を付けてください。
仮にインスタンス名を disp とし、UIScrollBar コンポーネントのインスタンスがこのテキストフィールドに関連付けられているとします。
また、外部テキストファイル text.txt には sample という変数が定義されているものとします。
読み込み完了を待って disp に表示するスクリプトは、次のようになります。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　//Shift-JISで読み込む
　System.useCodepage = true;
　loadVariablesNum( "test.txt" , 0 );

　//読み込み終了時、テキストフィールドに表示
　_root.onData = function()
　{
　　disp.text = _root.sample;
　};

data イベントを使って読み込みの終了を待ち、テキストフィールドに表示します。
text プロパティを書き換えて表示しますから、「変数：」の項目は空白にしても構いません。
スクロールバーが動くかどうか、確認してみてください。

なお、変数 sample が最初は未定義になっているために、ほんの一瞬ですが、ダイナミックテキストに undefined の文字が見えることがあります。
気になるようでしたら、

　//変数を初期化
　sample = "";

というスクリプトを追加してください。
変数が正常に読み込まれていれば、sample には外部から読み込まれた値が上書きされ、テキストフィールドには読み込んだ内容が表示されます。

補足

ありがとうございます。下記記述でエラーは出ずに、テキストは表示できますので、”読み込みの終了を待ち、テキストフィールドに表示”というのはできていると思うのですが、やはりスクロールバーは動きません。コンポーネントのインスタンス名はどう設定すればよいのでしょうか？ご説明は何となく理解しているつもりですが、知識が乏しいもので申し訳ありません。

System.useCodepage = true ;
loadVariablesNum("text.txt", 0);

_root.onData = function()
{
};

回答No.5

DPE

UIScrollBar コンポーネントの色を変える方法は、あるにはあるのですが、Flash をインストールしたフォルダにあるコンポーネントの外観を定義したファイルを開いたり書き換えたりといった、複雑で少々怖い作業になるため、初心者には敷居が高いように思います。
薄情なようですが、もう少し Flash や ActionScript に慣れてきたら、ヘルプの「 Flash コンポーネントガイド」→「コンポーネントのカスタマイズ」を熟読して研究してみてください。

一応、大まかに説明しますと。
Flash に最初から付属しているコンポーネントは、多数のムービークリップを組み合わせて作られています。
スクロールバー１つをとってみても、上下のボタンやスクロールさせるスライダ、スライダが移動するレール（トラック）、更にはトラックやボタンの陰影など、複数の部品からできています。
これらのムービークリップは HaloTheme.fla という fla ファイルの中に収められていて、デフォルトでは、HaloTheme.fla のライブラリを参照してコンポーネントを描画するように設計されています。

Flash に付属のコンポーネントで使われている文字・色などのスタイルは、setStyle という命令（メソッド）で変更できるようになっています。
ヘルプの「 Flash コンポーネントガイド」→「コンポーネント辞書」→「 UIScrollBar コンポーネント」→「 UIScrollBar コンポーネントのカスタマイズ」を見ますと、UIScrollBar コンポーネントで変更できるスタイルが載っています。
「 UIScrollBar コンポーネントでのスタイルの使用」の項目を見ますと、変更できるのは、テーマカラー（上下のボタンをクリックした時の色：デフォルトではグリーン）と、スライダが動くトラックの背景色・上下ボタンの矢印の色・ボタンが無効な時の矢印の色を変更できる、とあります。

しかし、表の「テーマ」の項目を見てみてください。
themeColor 以外は、「 sample 」となっていますよね。
Flash には実は、コンポーネントの外観のサンプルとして、HaloTheme.fla の他にもう１つ、sampleTheme.fla という fla ファイルが付いています。
「テーマ」の項目が「 sample 」となっているスタイルは、sampleTheme.fla の中にある部品を使って UIScrollBar を描画する時だけ、setStyle メソッドを使って適用できるのです。
デフォルトでは、UIScrollBar コンポーネントは HaloTheme.fla 内にある部品で描画されています。
要するに、スクリプトで変更できるのは、デフォルトではテーマカラーだけで、スクロールバーのトラックや矢印の色は変更できません。

スクロールバーを、HaloTheme.fla ではなく別のファイル（例えば sampleTheme.fla ）にある部品を使って描画したい場合は、ある規格に従って部品を作った fla ファイルを用意し、その fla ファイルとスクロールバーを利用する fla ファイルを関連付けます。
このあたりの作業については、ヘルプでは「 Flash コンポーネントガイド」→「コンポーネントのカスタマイズ」→「テーマについて」→「新しいテーマの作成」および「ドキュメントへのテーマの適用」に説明があります。

setStyle の使い方は、基本的には

　インスタンス名.setStyle( "スタイル名" , 値 );

として使います。
例えば、スクロールバーのインスタンス名を sc_bar と付けたとしますと、themeColor を適用するには

　sc_bar.setStyle( "themeColor" , "haloBlue" );

といった使い方をします。
何もしない状態（ HaloTheme.fla の部品でスクロールバーが描画されている状態）では、テーマカラーがブルーに変わり、ボタンをクリックすると青いマーカーが表示されます。

スクロールバーを構成する部品を、HaloTheme.fla から sampleTheme.fla にある部品に変更すると、スタイルの表に「 sample 」とあった項目のスタイルが利用できるようになります。
ただし、今度は逆に、「 Halo 」と表示されているスタイル（ UIScrollBar では themeColor スタイル）が利用できなくなります。

ちなみに、sampleTheme.fla に収められているスクロールバーの部品は、Flash MX 2004 の先代にあたる Flash MX に付いていた ScrollBar コンポーネントと同じデザインで、陰影の乏しい平坦な感じのちょっと鈍くさいデザインになっています　^^;
しかし、だからこそ、スクリプトで色の RGB 値を１つ指定するだけで簡単に色を変更できるのです。
HaloTheme.fla にあるようにグラデーションや陰影を付けたデザインですと、グラデーションの色数やかかり具合などの情報が必要になり、スクリプトによる色の変更は面倒になります。

・・・とまあ、文字色などの簡単な要素ならともかく、コンポーネントそのものの外観を変更しようとすると手間がかかります。
制御用のスクリプトはそのままで、外観だけを入れ替えたり、他のコンポーネントでも使えるようなものはなるべく共有しようとする発想のあまり、意外と難しい設計になっているようです。
コンポーネントに言及した参考書や解説サイトは、あまり見当たりません。
難しいですけれど、ヘルプを見ながら研究していくしかないと思います。
それが嫌なら、コンポーネントなどに頼らず、自分でスクロールバーを自作することです。

----------------------------------------------------------

なお、UIScrollBar コンポーネントといえども基本的にはムービークリップなので、簡単な色調補正程度の変更でよければ、ムービークリップの色を調整する Color クラスの setTransform を利用する方法も考えられます。
仮にスクロールバーのインスタンス名を sc_bar としますと、

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　//オブジェクトを作成
　clr = new Color( sc_bar );
　c = new Object();

　//色調補正データ：赤だけを強くする
　c.ra = 100;
　c.rb = 255;
　c.ga = 100;
　c.gb = 0;
　c.ba = 100;
　c.bb = 0;

　//色調補正を適用
　clr.setTransform( c );

というスクリプトで、スクロールバー全体が赤っぽい色に変わります。
このスクリプトはフレームに設定してください。

setTransform に渡すパラメータの意味と色味の計算式は、以前別の質問で回答したことがありますので、よろしければご参照ください。
＃２で説明しております。
下記の回答中で「高度な設定」と呼んでいるものは、Flash MX 2004 では「詳細」という呼称に変わりましたが、機能は同じです。

　・setTransform()で設定した色をgetRGB()で取得するのは無理でしょうか
　　http://okweb.jp/kotaeru.php3?q=784847

お礼

ありがとうございます。かなり複雑なのですね。簡単な色調補正でできる範囲で対応します。何度も丁寧に説明頂き、本当にありがとうございました。

回答No.4

DPE

＃２です。

まず、確認していただきたいのですが。
テキストフィールドを選択した状態で、「プロパティ」パネルを見てください。
左上の方にテキストフィールドのタイプを選ぶリストがあり、その下にテキストフィールドに名前を付ける項目があります。
ここに、何か名前を入力してください。
この名前は、スクリプトでテキストフィールドを操作する時に必要になります。
＃２の例では、” disp ”という名前が付いているものとしてスクリプトを組んでいます。
違う名前を付けた場合は、

　disp.text = _root.sample;

の disp の部分を、ご自分で付けた名前に変更してください。

テキストフィールドが持っている text プロパティを書き換えて表示を更新する方法では、「プロパティ」パネルにある「変数：」の項目に何も指定しなくても外部から読み込んだ内容を表示できます。
「変数：」の欄を空白にしても、テキストフィールドに意図した通りの内容が表示されますでしょうか？
これが表示されなくなるようなら、onData = function の中で実行しているスクリプトが正常に機能していません。
テキストフィールドのインスタンス名や、読み込む変数の名前とスクリプトで使っている変数の名前が一致していないなど、些細な間違いがないかどうかをご確認ください。

「変数：」を指定した時は、あえて読み込みの終了を待つ処理を用意しなくても、また、読み込みを待つ処理に多少の不具合があったとしても、読み込んだ変数の内容が表示されます。
ですから、「変数：」の項目に変数名を設定し、onData = function の {　} 内を空白にして読み込んだ内容が表示されたとしても、これは変数が正常に読み込めただけの話であって、”読み込みの終了を（明示的に）待ち、text プロパティを書き換えることで表示する”方法が上手くいっている証明にはなりません。

＃２で説明しましたように、外部から読み込むテキストに対し UIScrollBar を付ける時は、「変数：」の項目を利用して表示させる方法ではスクロールバーが動かない設計になっています。
「変数：」の欄を空白にしてもテキストを表示できるように、スクリプトや変数名・インスタンス名を見直してみてください。

テキストファイルの中身が

　test=サンプル

このようになっているとすると、外部テキストファイルからは” test ”という名前の変数が読み込まれます。
理論的には、＃２のスクリプトの

　disp.text = _root.sample;

の sample の部分を test と変更すれば、読み込む変数の名前が test でも表示できることになります。
しかし、テキストフィールドのインスタンス名も test と付けたとすると、スクリプトは

　test.text = _root.test;

このようになりますが、これではテキストフィールドのインスタンス名と変数で名前の衝突が起こり、何も表示されなくなってしまいます。
どちらかを別の名前にしてください。

-----------------------------------------------------

UIScrollBar はコンポーネントなので、スクロールバーのインスタンスを選択した状態で「プロパティ」パネルを見ると、右上に「プロパティ」と「パラメータ」という２つのタブが表示されるはずです。
コンポーネントとは、編集可能なパラメータを持っているムービークリップシンボルのことです。
コンポーネントシンボルから作られたインスタンスは全て同じ名前のパラメータを持ち、インスタンスごとにそれぞれ違う情報を設定できます。
言うなれば、コンポーネントのインスタンスにはどれにも同じ規格のソケットが作られていて、ソケットの規格に合ってさえいれば、インスタンスごとに違う電球をはめることができるようなものです。
コンポーネントのパラメータは、「パラメータ」のタブで編集します。

UIScrollBar コンポーネントが持っているパラメータは、次の２つです。

　・ _targetInstanceName
　　スクロールさせるテキストフィールドのインスタンス名。

　・ horizontal
　　横スクロールの切り替えスイッチ（フラグといいます）。
　　true で横、false で縦のスクロールバーになります。

スクロールバーを選択した状態で、「プロパティ」パネルの右上にある「パラメータ」タブをクリックしてください。インスタンスが持っているパラメータを編集できます。
スクロールバーには、どのテキストフィールドをスクロールさせるのかという情報が必要です。
この情報を保持しているのが、_targetInstanceName パラメータです。
_targetInstnceName にテキストフィールドのインスタンス名が正しく入力されているかどうか、確認してみてください。
スクロールバーを設置する際、テキストフィールド内にドラッグすると、_targetInstanceName にはそのテキストフィールドのインスタンス名が自動的に設定されます。

今回はスクロールバーはスクリプトでは制御しないので、スクロールバー自体のインスタンス名は付けなくても、特に支障はありません。

補足

ありがとうございました、うまく動きました。何度もファイルを作り直したので、どこが悪いのか分からなくなってしまいましたが、変数なしでは、テキストを表示しませんでしたので、onData = function の中で実行しているスクリプトが正常に機能していなかったようです。丁寧なご説明、本当にありがとうございました。

PS.厚かましくて恐縮ですが、関連ということで質問させてください。このUIScrollBarなどのコンポーネントには色はどのようにしてつけるのでしょうか？

回答No.3

perse

#1です。
>テキストフィールドに直接入力したものは、
>スクロールバーが正常に動作するからです。
なるほどそういうことでしたか。
大変失礼しました。

テキストを読込むならこういう方法もあります。
System.useCodepage = true;
var my_lv = new LoadVars();
my_lv.onLoad = function(success:Boolean) {
　if (success) {
　　trace(my_lv.str);
　} else {
　　//読込みエラー
　}
};
my_lv.load("test.txt");

*test.txtの中身*
str=これはテストです。

補足

ありがとうございます。回答頂いた記述にインスタンス名"test"変数”str”とするのですが、スクリプトエラーとなり、うまく外部テキストを読み込めません。test.txtもstr=~と記述しているのですが。せっかく回答頂いたのに、申し訳ありません。質問時のloadVariablesNumでのテキスト読み込みもやっとできた程度なので。

回答No.1

perse

(1)ダイナミックテキストは複数行表示可能になっているか。
(2)読込んだテキストにはダイナミックテキストに入る行数を超える文字がはいっているか。
質問されるときにHTMLのテキストボックスに書き込んだと思いますが、最初スクロールバーは表示されておらず、行数が一定値を超えたときからスクロールバーが表示されたと思います。Flashの場合も同じです。

外部からテキストを読込んだ
というのは関係あるのですか？

補足

ありがとうございます。ダイナミックテキストは複数行に設定していますし、もちろん、読込むテキストはスクロールが必要な量です。

>外部からテキストを読込んだ
>というのは関係あるのですか？

外部からテキストを読込まずに、テキストフィールドに直接入力したものは、スクロールバーが正常に動作するからです。ちなみにUIscroolを使わずに、on(press)のアクションボタンを自分で作った場合には、正常に動作します。