このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです

FLASH講座 ーアクションスクリプトの実践的事始めー
基本編
(5)テキストスクロール

 ホームページによく使われるスクロールバー付きテキストフィールドを、FLASH画面内に設置する方法について受講していただきます。

 まず一番簡単なIUコンポーネントのTextAreaを使う方法です。 
 
次に、テキストフィールドに上下スクロールボタンを配置し、テキストフィールドにはプロパティーインスペクターでプロパティーを、ボタンにはアクションスクリプトでスクロールアクションを付加する方法を述べます。 なおフィールド内には外部ファイルから読み込んだ文章を表示させます。

 そして、スクロールバーを設置しないで、単にテキストフィールド内のスクロールを可能にするには、テキストフィールドをテキストツールで作成した後、テキストメニュータグで「スクロール可能」にチェックを入れるだけです。
UIコンポーネントを使う方法
 コンポーネントパネル(開いていないときは、「ウインドウ」「開発パネル」の中のコンポーネントにチェックを入れる)のなかに、TextAreaというUIコンポーネントがあり、これを使ってテキストフィールドを作成すると、文章がフィールドに収まらなくなると自動的にスクロールバーが現れる。 なかなか便利なツールであるが、できあがるスクロールバーが味気ないことと、フィールドや枠線のカスタマイズが面倒であることから使うのを敬遠されがちである。 このまま使っていい場面なんかでは便利なので紹介する。

<作成方法>
(1)ステージにコンポーネントパネルからTextAreaをドラッグしドロップする。 望みの位置に配置し、望みの大きさに自由変形ツールもしくはプロパティーインスペクター数値入力を使って設定する。
(2)TextAreaのインスタンス名をtextboxとする。
(3)本FLASHファイルをここで名前をつけて保存し、同じフォルダ内に"text.txt"と言うファイル名のテキストファイル(表示したい文章が書かれていて、コード:UTF-8で保存されているもの;メモ帳で作成したもの)を置く。
(4)FRAME1を選択し、アクションスクリプトパネルで以下のスクリプトを書き込む。 右側が初期設定での出来上がりである。
 textbox.loadVariables("text.txt");  
 なお、テキストフィールドのプロパティーインスペクターにパラメータータグが出現するが、ここで、編集可能(画面上で)にするかどうか、HTMLを書き込み可能にするかどうかなどの設定が出来る。 また、TextArea内の文字、枠線などはスタイル指定で設定できるが、詳しくはhelpを参照されたい(かなり読みにくいことを覚悟の上)。

TextField及びスクロールボタンを作成、使用する方法
 この方法は、自分でデザインできるという利点のほかに、上記コンポーネントを使ったファイルのサイズが40KBであるのに対し、こちらのサンプルの場合は1KBであり、軽量に出来上がるという利点がある。
(1)レイヤー1でステージにTextFieldをテキストツール(Aのマークのツール)で描き配置する
(2)プロパティーインスペクタで以下の設定をする
   テキストの種類:ダイナミックテキスト
   インスタンス名: 適当につける ここでは、textbox
   行タイプ: 複数行
   変 数 : 適当につける 例えばtext (外部ファイルを読み込むときに必要;下記参照)
   フォント、枠線の有無、インデントなどのフォーマットは任意に設定
(3)TextFieldを選択し、メニュータグの「テキスト」でスクロール可能にチェックを入れる
(4)フィールドの大きさを自由変形ツールなどで調節する
(5)レイヤー2を作成し、TextFieldの右上側に上向きのボタンを配置する
(6)ボタンをシンボルに変換する 単にスクロールするだけならムービークリック、ロールオーバーやアクションを付けたい場合はボタンを選ぶ
(7)レイヤー3を作成し、TextField右下側に、下向きボタンを配置し、同様にシンボルに変換する
(8)以下のスクリプトを記入する 
//FRAME1に
 
 this.loadVariables("text.txt");

//上向きボタンに
  on(press) {
  _root.textbox.scroll++;
  }


//下向きボタンに
  on(press) {
  _root.textbox.scroll--;
  }

(注)scroll++はscroll+=1と同義
シンプルな例です。



枠線(border)を無しにすれば、フィールド内が透明になるので、背景や図形を下地にすることが出来る。 この例では、薄茶の背景に矩形ツールで枠線を書いている。 シンボル変換ではボタンを選び、アップ、オーバー、ダウンの色を選定している。
 さて、この例のスクリプトのように、インスタンスのアクションに関わるスクリプトをフレームに書き込む場合と、インスタンスに書き込む場合と二通りある。 いずれの場合も同じアクションが再生される。 ちなみに、上の3つのスクリプトを全てフレーム(FRAME1)に書き込む場合のスクリプトは以下のようになる。 この場合、ボタンのインスタンスは、up_btn と down_btn としている。

  this.loadVariables("text.txt");
  _root.up_btn.onPress = function():Void {
  textbox.scroll++;
  }
  _root.down_btn.onPress = function():Void {
  textbox.scroll--;
  }


 このようなスクリプトの書き方は、スクリプト全体を把握しながらまとめることができると言うことや、多くのインスタンスに共通のアクションを割り付けるときに向いていること、スクリプトとデザインを分離して作成できることなどから、Macromedia社が推薦している方法らしい。 しかし、スクリプトに慣れていない初心者にとっては、インスタンスに書き込むほうが確実で分かりやすく、特に簡単なスクリプトの作成にはインスタンスに書き込むほうがお勧めである。
      
(注)外部テキストファイルを読み込んで表示する方法;
 時々内容を更新する必要のあるときなどに、外部ファイルから読み込めるようにしておくといちいち fla ファィルを更新しなくて済むの で便利である。
 外部ファイルはメモ帳などで作成し、UTF-8形式で保存する。 このとき、文章の一番初めに、あらかじめ決めておいた変数(半角英 数)に=を付けた、例えば text= を配置する。
 変数は、テキストフィールドを作成したときにプロパティインスペクタの右下の方にある「変数」欄で定義する。 また、テキストの種類では、ダイナミックテキストを選択しておく。
  
(追加) ロールオーバーでスクロール
 上の例では、マウスをクリックし続けないとスクロールしないので、ロールオーバーするだけで連続的にスクロールするタイプを追加することにする。 長い文章をスクロールするにはこちらの方がベターである。
 上の「TextField及びスクロールボタンを作成、使用する方法」と全く同様にテキストフィールドとボタンを作成し、ボタンに記入するスクリプトを以下に変える。
//FRAME1に
 
 this.loadVariables("text.txt");
//上向きボタンに
  on(rollOver){
    _root.onEnterFrame = function() {
      _root.textbox.scroll -= 1;
    }
  }
  on(rollOut, releaseOutside) {
    _root.onEnterFrame = function() {
      _root.textbox.scroll -= 0;
    }
  }

//下向きボタンに
  上向きボタンのスクリプトで、-= += にする


 左のスクリプトのように、FRAME移動(時間経過)を付加させると、連続的な動作にすることが出来る。
 また、左のスクリプトで、rollOverのかわりにpress、rollOutのかわりにreleaseとすると、プレスしている間だけスクロールするようになる。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト flash action script 基本編(6)