Scrollバーの表示

質問

ダイナミックテキストエリアに外部よりテキストを読み込み、テキストエリア以上に表示する情報があった場合に縦スクロールバーを表示したいのですが、どのようにしたら宜しいのでしょうか？。

自分でボタンを作成し、Scrollプロパティを使って実施すると言うような事をしないといけないんでしょうか？。

on(press) {
textField.scroll += 1;
}

どうぞ宜しくお願い致します。

回答No.5

DPE · ベストアンサー

＃３、４です。
テキストエリアの件は、解決しましたでしょうか？

> それと、「スクロールバーの自作は難しいです。」と言うのは本件に対する回答の一つですか？。それとも便乗して御願い致しました質問に対する回答でしょうか？。

どちらにも言えることです。
読み込むテキストが、例えば常に 20 行になると決まっているならまだしも、今回の場合はテキストが何行になるかは未定です。
となると、スクロールバーを自作するなら、テキストがどんな行数であってもスクロールできるような、融通の利く設計にしなければなりません。これは難しいということです。
画像の場合は、テキストで言うところの行数などが画像の高さや幅に変わるだけで、基本的な考え方は同じです。どんな大きさの画像もスクロールできるような、汎用性の高いスクロールバーの自作は難しいでしょう。
難しいですが、絶対に作れないとは言いません。現に、スクロールバーのコンポーネントが作られているのですから。
なお、Flash MX 2004 には、TextArea の画像版とも言える ScrollPane というコンポーネントもあります。

簡単なロジックでスクロールを実現するヒントとして、押している間だけスクロールさせるボタンをご紹介しました。スクロールバーの上下（左右）に付いているボタンと、同様のものです。
ボタンでのスクロールであれば、スライダの長さだとか移動距離だとかを考える必要はなく、押されている間、対象の座標や表示する行数を変更していくだけで済みます。
実際はムービークリップで作ります。フラグを１つ用意し、押された時にフラグを true に、離された時にフラグを false にします。ムービークリップがステージに存在している間、常に発生している enterFrame イベントを利用してフラグを監視し、フラグが true の時にだけ、スクロールの処理をすればいいわけです。
ムービークリップであれば、必要に応じて非表示にしたり、半透明表示にしてボタンとしての機能だけ休止することも可能です。
（ムービークリップをクリックできなくするには、MovieClip オブジェクトの enabled プロパティを false にします）

結局、UI コンポーネントとして提供されているものを利用するか、持っている技術や簡単に作れるもので似たような機能を実現するかではないでしょうか。
もちろん、自分の思い通りのスクロールバーを自作できる技術があれば、言うことはないのですが。（ちなみに、私にはないです　^^;）
どんな作成方法にも一長一短はありますので、納得のいく方法で制作してください。

お礼

テキストエリアの件、ありがとうございます。
別の処理でTextAreaを利用した際に確認しました。

スクロールバーの件ですが、先週GAP.COMのサイトで見つけたのですが、横300X縦200Pixel程度の枠が有り、その中にサムネイル画像が複数枚有って（見えているのは3枚程度）、横スクロールバーが表示されています。
横スクロールバーを操作すると左右に動いて画像が表示される。その画像をクリックすると、枠の外側に用意されている拡大画像表示エリアに拡大画像を表示すると言うものです。勿論、サムネイル画像は全て同じで、外部からJPEGを読み込むような事も出来れば最高ですが、今はそこまでは考えていません。

それって、Scrollpaneと言うもので出来るのでしょうか？。

回答No.4

DPE

＃３です。

テキストエリアが極端に小さいためだと思われます。
こちらでも縦 20 px にして試してみましたが、文字は表示されるものの、スクロールバーは確かに出てきませんでした。
縦 20 px は、さすがに小さすぎですね。もう少し大きくしてみてはいかがでしょう。
とりあえずはスクロールバーが出るかどうかを確認したいだけで、ファイルを用意するのが面倒でしたら、

　disp_fld.text = temp;

の後に、

　disp_fld.text += "・・・・・・・・・";

このような具合に、適当に長い文字列を連結して試してみてください。要するに、text プロパティに長い文字列が入っていればいいだけですので。

スクロールバーの自作は難しいです。
１から作るなら、スライダがドラッグされたかどうかの判定から作らなければなりません。
スクロールバーは、スライダが移動するレールと言いますか、トラックの長さは常に一定で、スクロールさせるものの対象の長さ（テキストでは行数・文字数、画像なら幅・高さ）によってスライダの大きさが変化します。それに伴い、スライダの移動可能な距離が変動します。
スクロールさせる長さが一定なら、予めスライダの大きさや移動距離などを決めておけるのですが、長さが変動する場合は、これらの変化に柔軟に対応できるように設計しなければなりません。ここが一番難しい点ではないでしょうか。
だからこそ、誰でも手軽にスクロールバーを利用できるようにと、UI コンポーネントとして提供されているのだと思います。

スクロールバーほどの使い勝手の良さはありませんが、例えば、押している間スクロールし続け、離すと止まる、といったボタンであれば、スクロールさせる長さが変動する場合でも、比較的簡単なスクリプトで作れます。

補足

DPEさん、

ありがとうございます。もう少し(ScrollBarが表示出来るくらい)縦サイズを大きくして試してみます。

それと、「スクロールバーの自作は難しいです。」と言うのは本件に対する回答の一つですか？。それとも便乗して御願い致しました質問に対する回答でしょうか？。

回答No.3

DPE

前回　http://okweb.jp/kotaeru.php3?q=961443　の続きですよね。
q=961443 で紹介した作り方の一部を変更していただくと、TextArea コンポーネントに移行できます。

　・テキストフィールドの代わりに TextArea コンポーネントを置き、インスタンス名を disp_fld とする
　・「パブリッシュ設定」の「 ActionScript バージョン」を”ActionScript 2.0”にする

この２点を変更してください。
TextArea コンポーネントを制御する TextArea オブジェクトも、TextField オブジェクト同様に text というプロパティを持っていますので、スクリプトはそのまま使用できます。

TextArea コンポーネントに関しては、TextArea オブジェクトの持つ各プロパティと、コンポーネントの外観や表示フォントなどを変更する UIObject オブジェクトの setStyle というメソッドで設定します。
UIObject.setStyle は、TextArea 以外のコンポーネントでも共通して使えるように設計されているため、ヘルプにはややこしく書かれていますが、基本的には

　インスタンス名.setStyle( "変更する項目" , 値 );

このような書式で使います。
第１引数に渡せる文字列とそれに対応する第２引数は、コンポーネントの種類によって違います。TextArea で利用できる引数の詳細は、ヘルプの「 Flash コンポーネントガイド」→「コンポーネント辞書」→「 TextArea コンポーネント」→「 TextArea コンポーネントのカスタマイズ」→「 TextArea コンポーネントでのスタイルの使用」をご参照ください。

実際にスクリプトにしてみますと、大体以下のようになります。フレーム１で済ませておくといいでしょう。
（↓このスクリプトをコピーする場合は、各行頭の全角のスペースを、全て半角のスペースかタブに置き換えてください）

　/* TextArea のカスタマイズ */
　　//縦・横のスクロールバーを自動で出す
　　disp_fld.vScrollPolicy = "auto";
　　disp_fld.hScrollPolicy = "auto";
　　//文字の折り返しを禁止する
　　disp_fld.wordWrap = false;

　/* 文字に関する設定 */
　　//使用するフォント
　　disp_fld.setStyle( "fontFamily" , "_等幅" );
　　//文字のサイズ
　　disp_fld.setStyle( "fontSize" , 15 );
　　//斜体・太文字にする
　　disp_fld.setStyle( "fontStyle" , "italic" );
　　disp_fld.setStyle( "fontWeight" , "bold" );
　　//テキストの色を青にする
　　disp_fld.setStyle( "color" , 0x0000DD );

横のスクロールバーは、文字の折り返しが許可（ wordWrap = true ）されていると、hScrollPolicy プロパティを auto にしても on にしても表示されません。
一般的には横スクロールは嫌われますから、利用はほどほどにしましょう。
斜体と太文字の設定は、第２引数に "normal" を渡すと無効（装飾なし）になります。デフォルトでは normal ですので、不要なら削除してください。

前回もちょっと書きましたように、TextArea コンポーネントではカスタムタブが利用できないようです。（調べたのですが、tabStops にあたるものは見当たりませんでした）
残る問題は段組みですが、表示に等幅フォント（どの文字も一律同じ幅のフォント）を使うと、１行あたりの文字数と行の長さは固定できます。
例えば、１列が全角 10 文字の段組みとして、全角３文字しかないセル（段組みごとの１行）では、タブ（ %09 ）の代わりに全角のスペースを残り７文字分詰めておくと、次の段は 11 文字目から始まります。
等幅フォントであれば、文字送りの関係で段組みが崩れるようなこともありません。半角が混ざって字数が半端になる場合も、半角のスペースを利用して詰め物をしておけば対応できます。
半角のスペースが何らかの原因で読み込めないようでしたら、半角スペースのコード %20 でお試しください。
なお、改行コード %0A と %0D はそのまま使えます。

字数を無理やり合わせるという原始的な手法で、テキストファイルの作成が余計に面倒ではありますが、＃１の方がおっしゃるアップデータのリリースまで待てない事情でしたら、さしあたってこのような対処でいかがでしょうか。

補足

DPEさん、

引き続きありがとうございます。
おっしゃる通り、TextArea コンポーネントに代えて実行しました。勿論、Script2.0への設定、vscrollpolicyも「auto」にしました。
横幅400Pixcel、縦20Pixcelに設定し、敢えてScrollBarが表示される事を確認したかったのですが、ScrollBarが表示されません。どうしてでしょうか？。

また、大変恐縮ですがご存知でしたら「No.968748　Imageのスクロール」、「No.968505 ユーザー環境の把握」に付いてもご教授頂けませんか？。

何卒宜しくお願い致します。

回答No.2

HapHands

＃1です。
FlashのバージョンはMX2004なのですね？
それも含めてご質問の仕方によって有効な回答が引き出せるかどうかは大きく変わってきます。

質問者さまの求められる要件は以下のようなものと推測しました。
１．外部テキストを読み込む
２．読み込んだ内容をテキストフィールドに表示し、必要に応じてスクロールバーをつける
３．見やすい表示にする

最初に書いたLoadVarsクラスとtextAreaコンポーネントを使用する方法なら上記１、２はクリアできます。
３については私なら外部テキストにタグを使用する方法をとります。
Flashプレイヤーが理解できるタグについてはヘルプをご確認ください。

また、ScrollBarコンポーネントをお使いになりたければ、7.2アップデータを待たずともMacromediaのFlash Exchangeページから「Flash MX Components for Flash MX 2004, V1.5.0」をダウンロードすることができます。
これはMX2004で使用できる、MXに含まれていたコンポーネントです。ActionScript1.0での書き出しになりますが、これをインストールすれば今のMX2004でもScrollBarコンポーネントを使用できます。

最後に．．．
No.961443のご質問で回答を受けられた後、ご自身ではどこまで試してみられましたか？
No.961443で回答されているDPEさまは私の知る限りFlashに関する回答者さまではトップクラスのクオリティの回答をされる方です。
いくら有効なご回答をしてくださる方がいらっしゃっても、最終的に解答を見つけるのは質問者さまご自身です。
頑張って色々調べたり試したりしてみてください。
応援しています。

Macromedia Flash Exchange：
http://www.macromedia.com/cfusion/exchange/#loc=en_us&view=sn110&viewName=Flash%20Exchange

お礼

早速ありがとうございます。

DPEさまから頂きました回答を基にして、外部ファイルからの読込みテキストエリアに表示する事、Tabとフォントの関係なども全て試しました。
この質問に関しても、新たな質問を設定した方が色々な方からのレスが頂けるとの助言を受けての事です。

お陰で貴重な助言を受ける事が出来ました。

ありがとうございます。

回答No.1

HapHands

こんばんは。
まず、ご使用のFlashのバージョンは書いておかれた方が的確な回答がつきやすいです。

MXでしたらダイナミックテキスト＋ScrollBarコンポーネントを使用するのが簡単です。しかし、ダイナミックテキストにプロパティインスペクタで「変数」名を設定し、loadVariablesアクションで外部テキストを読み込んでもScrollBarコンポーネントは期待した動作をしません。
これは、ScrollBarコンポーネントは関連付けられたダイナミックテキストのtextプロパティを監視しているためです。つまり、「変数」を使用してダイナミックテキストの内容を更新してもScrollBarコンポーネントはその変更を感知しません。
対策としてはLoadVarsオブジェクトを使用して外部テキストのロードが完了するのを待って、取得した内容をダイナミックテキストのtextプロパティに代入する、という方法を行うのがよろしいと思います。

MX2004の場合はScrollBarコンポーネントが無くなってしまっているので、「現時点では」ダイナミックテキスト＋ScrollBarコンポーネントの代わりにtextAreaコンポーネントを使用します。やはりLoadVarsクラスを使用してtextAreaコンポーネントのtextプロパティを更新すればよろしいと思います。

「現時点では」と書いたのは近日リリース予定のFlash7.2アップデータを適用後はScrollBarコンポーネントが復活しますので、MXと同様の方法でOKになるからです。

補足

No.961443で教えて頂いたのですが、

・外部ファイルを読み込んだら変数に連結しながら格納する。（temp += 外部ファイルの変数）

・外部ファイルを全部読み終えたらダイナミックテキストにtempを代入。

この「ダイナミックテキストへの代入」のターゲットをテキストエリアにすれば宜しいのですね？。
textArea.text = temp ;

ただ、textAreaではTabの設定など細かい設定が出来ないと
言う事を教えて頂いたのですが、「近日リリース」とはどの程度なんでしょうか？。第3四半期中にはリリースと言うくらいの話なんでしょうか？。

現時点では、ダイナミックテキストエリアにTab設定などして読み込んでおき、そのエリアの横に上下のボタンを設定してアルファ値を0%おく。現時点のテキストエリアの高さを求め、当初していした高さを超えているようならボタンインスタンスのアルファ値を100%にして表示する。

こんなことで対応するんでしょうか？。
でも、
・当初設定したエリアを超えるようなデータを代入出来るのでしょうか？。（途中で切られるのでは？。）

・現時点での高さを求める事が出来るのでしょうか？。
　例えば、最初に高さ400pixelのダイナミックテキストを定義したとします。そこに複数行を要するテキストを代入したとして（仮に450pixcel程度の高さを要する）、450pixcelと言う現時点の高さを求められるのでしょうか？、と言う事です。

どうぞ宜しくお願い致します。