B03_009 外部テキストをスクロール表示(行単位)
Name つっち〜
Date2002年07月27日 (土) 02時29分
Message 憲ちゃん、そして皆様。お久しぶりです。蒸し暑い日々の中、いかがお過ごしでしょうか?夏バテしないように気をつけてくださいね!

早速質問に入らせてもらいます。今回の質問は、外部テキストをスクロール表示する方法です。一応、頭の中ではイメージはできているんですが、なかなか実行されません。確認の意味を含めて質問したいと思います。まずはこちらのイメージをご覧ください。(大きくて下手ですいません)

外部テキストをswfに読み込んでそれをスライドできるムービーを作りたいのです。
最初マスクを使ってやろうと思ったのですが、過去に、「ダイナミックテキスト」は、
マスクがきかないということをここで教わりましたね!過去記事
そこで今度は原始的(?)なマスクを使ってやろうとしたのですが、今作っているフラッシュは、
いろいろLOADMOVIEしているため(笑)デザインが損なわれてしまうのです。
そこで最後に思いついたのがこの「外部テキスト」です!
用は外部テキストを読み込んでそれをスクロール出来るムービーを作ってほしいのです!(笑)
あつかましいとは思いますが、お時間のあるときにお願い致します。
Response 01
2002年07月27日 (土) 03時01分> つっち〜   
丁度憲ちゃんのトップページの「Profile」の上下の矢印がないバージョンみたいなやつですね。
Response 02
2002年07月28日 (日) 01時47分> 憲ちゃん   
つっち〜さん、お久しぶり(*^-^*)
ちょっと理解が難しいご質問ですけど・・・(笑)
テキストでも図形でも、バーで上下にスクロールさせるこれまでの方法では、
表示部分をマスクレイヤー又は別途穴あき図形の窓を通して範囲を限定していましたが、
それではなくて・・・要するにそういったものを使用せず、
テキストだけに絞り込んで行単位でスクロールさせる方法はないか?ということですね(^^g/~~
例えば、ムービーで表示する行数を10行として、
そこからはみ出した行の文章について上下にスクロールさせるみたいな!!


scroll_txt2.fla profile.txt

以下の説明は、過去記事のダイナミックテキスト関係それの複数行などをご理解いただいてるとして
説明を省略します。
バーによるスクロールの考え方も、これまでのと似ているようで違うところもあります(*^-^*)
違いは・・・
1.ダイナミックテキストで最初に描くフィールド(ボックスともいいます)の大きさが、
 そのままムービーで表示する範囲になります。(はみ出た文章は見えない)
※これまでの場合は、テキストフィールド自体を上下にスクロールさせましたが、
今回はフィールドを固定したままです。
2.スクロールさせるのは、テキストフィールドでなく、文字自体を行単位でスクロールさせます。
※これまでは図形やテキストフィールドをピクセル単位でスクロールさせていました。

【テキストフィールド専用のプロパティ】
読み込んだテキストは、最初はテキストフィールドに”行”の0行目(一番上)から、順番に表示して、
設定したフィールドの下限をはみ出す”行”以下は表示されません。
例えば10行までしかフィールドに収まらないときは11行目以降は見えないことになります。
テキストフィールドに対して、何行目から表示するかを指定するプロパティに
scroll」というのがあります。
使い方は・・・
テキストフィールドの変数が例えば「message」とすると、
 変数 = message.scroll とすると・・・変数に現在のスクロール行目の値を取得できます。
また、message.scroll = 1 として数値を代入してやると、この場合、
(最初の行を0と数えて)1行目をフィールドのトップにして表示しなさい!
という意味になります。  
こうすると、全体に1行繰り上がってフィールドに表示されますから、
隠れていた下1行(11行目)も表示される訳です。
これをボタンをクリックする度に、数値を1づつ大きくして1行づつ繰り上げていくような
仕組みを作れば上手く行きそうですが、ボタンを使ってどこまでも果てしなく繰り上げていっては、
最後には何も見えなくなりますよね(笑)
最大スクロールの値を知っていれば、そこでストップさせればよいので問題ないのですが・・・
テキストフィールドに loadVariablesで読み込む「txtファイル」の中味は様々なうえに、
これをダイナミックテキストのテキストフィールド(複数行&ワードラップ)に読み込む場合、
設定する横幅や文字の大きさ次第で、行数はいろいろに変化して一定しません。
同じテキスト量でもフィールドの横幅が広く文字が小さいと行数は少なく、逆の場合は多くなります。
ですが、この最大スクロールの値を調べて教えてくれる便利なプロパティが用意されています。
maxscroll」というプロパティです。
使い方は、以下の作成手順の中でお示ししていきます(^^g/~~

【作成の手順】
外部テキストファイルは、今回憲ちゃんの「profile.txt」をそのまま使いました。
内容は・・・変数名を”message”として、
message=■ハンドルネームは”憲ちゃん”・・・<br>大阪生まれの大阪育ち!!<br>現在は・・・
こんな感じで、改行にHTMLの<BR>を入れています。

@スクリプトの計算は、スライドバーの移動量から”行”スクロールの値を求めることになりますから、
メインは「スライドバー」です。
まず、ステージに「スライドバー」の図形を描き、これを”ムービークリップ”シンボルに変換。
名前を仮に”TXTスクロールセット”としてください。
これから作成するテキストスクロールに関するすべてのオブジェクトは、
このムービークリップの中に作成します。
A”TXTスクロールセット”ムービークリップをダブルクリックして、MC編集画面にします。
MC編集画面の中心(X=0,Y=0)に、先ほどの「スライドバー」がありますが、
MC編集画面の中ではまだ単なる図形ですから、これをドラッグ可能なオブジェクトにするため、
”ボタン”シンボルに変換。名前は”スライダーボタン”とでもしてください。
B”スライダーボタン”のY座標位置を取得して計算の基礎としますから、座標を取り出すため、
これをさらに”ムービークリップ”シンボルに変換して、ムービークリップの中にボタンが
包含される形にします。
このMCのシンボル名を仮に”スライダーMC”、インスタンス名を”slider”としてください。
C次に、同じ”TXTスクロールセット”MC編集画面でレイヤーを追加して、
そこに枠だけの空のテキストフィールドを作成します。
ここで作成したフィールドの範囲が実際にムービー上でテキストが表示される範囲です。
「テキストオプション」で「ダイナミックテキスト」、「複数行」、「ワードラップ(折り返し)」に
設定します。
※サンプルでは、改行<BR>を使いたいので、さらに「HTML」にもチェックを入れています。
「変数」名は「profile.txt」で使っている”message”とします。
Dご質問で最低必要な部品はこれだけですが、それ以外にスライダーの上下に、
クリックすると1行単位でスクロールさせるためのボタンも付けてみました。
これも、ムービークリップ(”上ボタンMC”&”下ボタンMC”)の中に同じ”上下ボタン”を入れた
2重構造です。
あとは飾り物として、スライダーと上下ボタンの下敷きになる図形(スクロールバー)を
別のレイヤーに描いています。↓こんな感じになります(^^g/~~


次にいよいよこれにアクションを付けます!!
Eまずシーン編集画面に戻って、”TXTスクロールセット”MCを選択、アクションパネルで、
以下のような「クリップアクション」を設定します。

 onClipEvent (load) {          ←このMCが最初にタイムラインに登場したとき(だけ)
   loadVariables ("profile.txt", ""); ←外部テキストファイルの読み込み開始。
 }
 onClipEvent (data) {          ←上記データの読み込みがすべて完了したら
   sliderH = 100;           ←変数sliderHにスライダーの最大移動量を入れる
   sliderM = sliderH/message.maxscroll;←変数sliderMに1行当たりのスライダー移動量を!
 }
※「スライダーの最大移動量」とは、スライダーMC(インスタンス名”slider”)の移動量。
初期値は、上記ABでこのMC、つまり”TXTスクロールセット”MCの中心点(X=0,Y=0)に配置して、
それを後述のFGで設定するように一番下にスライドしたときを”X=0,Y=100”にしますので、
ここでの最大移動量は100ピクセルとしています。
※「1行当たりのスライダー移動量」とは、
「スライダーの最大値」を行の「最大スクロール数」で割ったものになるのは分かりますね!
最大スクロール数とは、テキストを読み込んだ後、文字の量とフィールドの大きさ、文字の大きさから
FLASHが自動的に判断して、「maxscrollプロパティ」の値として返してくれます。
使い方は、目的のテキストの入った変数(この場合は”message”)のあとに「.(ドット)」で繋いで、
  message.maxscroll こんな形で取り出します。

F”TXTスクロールセット”MCをダブルクリックしてもう一度上図のMC編集画面にします。
”スライダーMC(インスタンス名「slider」)”の位置が「情報パネル(中心点)」で、
”X=0,Y=0”であることを確認してから、それをキーボードの矢印キーで真下へ移動、
丁度良いところで「情報パネル(中心点)」の座標を読み取ってください。
サンプルではそれが”X=0,Y=100”ということです。
G”スライダーMC”をダブルクリックして編集画面にしてください。

上記Aで作成した”スライダーボタン”が入っていますので、これに以下のボタンアクションを設定。
 on (press) {
   startDrag ("", false, 0, 0, 0, 100);
 }
 on (release) {
   stopDrag ();
 }
※説明は上記過去記事を参照してください。
H図のようにレイヤーを追加して、1フレームと2フレームに空白キーフレームを挿入。
1フレームに以下のフレームアクションを記載します。

 _parent.message.scroll = Math.round(_y/_parent.sliderM);

右辺:「_y」は自分自身(インスタンス名”slider”)のY座標位置。
   「_parent.sliderM」はEで定義した1行当たりのスライダー移動量。
   前に「_parent」としているのは、この変数が自分よりひとつ上のMC階層にあるため。
   「Math.round()」は()内の演算結果を四捨五入して整数値にするためのもの。
   つまり、現在のY座標値÷1行当たりスライダー移動量で、上から何行目になるかが得られます。
   スクロール行の値は整数値(多分?)なので、それを四捨五入して整数にしています。
左辺:右辺で得た上から何行目という値を「message.scroll」に代入することで、
   「message」のテキストを指定された行から表示するようになります。
   「_parent」はテキストフィールドも自分よりひとつ上のMC階層にあるため。
2フレームに gotoAndPlay(1)を記載して、ループにします。
以上で、スライダーを上下することで、テキストがスクロールします(*^-^*)

最後に上下ボタンですが・・・
クリックすると1行づつ上下するようにしますが、同時に”スライダー”の位置も該当する位置に
移動させる必要がありますね!
それで、ボタンをクリックするとスクロール位置を計算するのではなく、
”スライダー”の位置を計算して、スライダーを動かすようにします。
スライダーが動くと、上のHによって自動的にスクロール位置が決まってきます。
そこで・・・
”TXTスクロールセット”MC編集画面にアクションレイヤーを追加して、
そこに以下のフレームアクションを記載します。

 function mesScroll (num) {
   var nextScroll = message.scroll + num;
   if (nextScroll >= message.maxscroll) {
     slider._y = sliderH;
   } else if (nextScroll <= 0) {
     slider._y = 0;
   } else {
     slider._y = nextScroll * sliderM;
   }
 }

functionというのは、任意のメソッド名(ここでは”mesScroll”)を自分で付けて、
{ }の中に自由に処理内容を書いておきます。自分で定義したメソッド(命令)です。
メソッド名の後ろの()内はパラメータで、変数の受け取って、処理に反映することが出来ます(^^;
となにやら訳のわからないことを書きましたが、やってみれば感じがわかると思います(笑)
これはこのままでは動作せず、例えば他のボタンアクションなどから、
 on(release){
   mesScroll(1);
 }
として、クリックされときにはじめて、上のfunctionの{処理}が実行されます。
ここでは()内に「1」が入っていますので、
finction mesScroll(num)のnumに1を代入して実行されます。
上の処理内容を日本語でいいますと・・・
変数nextScrollに現在のスクロール位置番号(message.scroll)に変数numの値をプラスして代入。
その結果もし、変数nextScrollの値がスクロールの最大値(message.maxscroll)以上なら、
 インスタンス名”slider”のY座標値を一番下(sliderH最大値)に移動。
そうでない場合でもし、変数nextScrollの値が「0(スクロールの最小値)」以下なら、
 インスタンス名”slider”のY座標値を一番上(0)に移動。
そのどちらでもない場合は・・・ インスタンス名”slider”のY座標値を
 変数nextScrollの値×1行当たりのスライダー移動量(sliderM)の位置に移動。

サンプルでは、ボタンを押し続けると連続移動できるようにするため、
上記Dで説明しましたがムービークリップの中にボタンを入れてちょっとだけ工夫しています。
Flaファイルを見ていただければすぐに分かると思いますので、説明省略です(^^;
Response 03
2002年07月28日 (日) 18時08分> つっち〜   
さすがっ!ありがとうございました(感謝)
僕の文章は説明不足な点があって理解しづらいですね…。
マスクを使おうとしたのは、外部テキストを使わずダイナミックテキストに文章を打ち込んで、テキストフィールド自体をフィールドさせようとしたんですね。それが憲ちゃんが言うこれまでの場合のケースですね。でもダイナミックテキストはマスクがきかないかったりと、フラッシュの都合を考えると外部テキストを使ったほうがいいかと思い今回質問させてもらいました!
いや〜!非常に勉強になりました、本当にありがとうございました。
それにしてもボタンを押し続けると連続移動するのはすごいですね!ちょっとした工夫でこんな便利なフラッシュができてしまうとわ…。
Response 04
2002年07月29日 (月) 00時18分> 憲ちゃん   
(*^-^*)
説明がちょっと雑かったかも知れないので・・・
疑問点があればまたカキコしてくださいね(^^g/~~

このページの先頭へ