FLASHのお勉強_アクションスクリプトaction script

　ホームページによく使われるスクロールバー付きテキストフィールドを、FLASH画面内に設置する方法について勉強することにする。　まず一番簡単なIUコンポーネントのTextAreaを使う方法、次に、テキストフィールドに上下スクロールボタンを配置し、テキストフィールドにはプロパティーインスペクターでプロパティーを、ボタンにはアクションスクリプトでスクロールアクションを付加する方法を述べる。　なおフィールド内には外部ファイルから読み込んだ文章を表示させる。
　なお、スクロールバーを設置しないで、単にテキストフィールド内のスクロールを可能にするには、テキストフィールドをテキストツールで作成した後、テキストメニュータグで「スクロール可能」にチェックを入れるだけでよい。

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

<作成方法>
（１）ステージにコンポーネントパネルからTextAreaをドラッグしドロップする。　望みの位置に配置し、望みの大きさに自由変形ツールもしくはプロパティーインスペクター数値入力を使って設定する。
（２）TextAreaのインスタンス名をtextboxとする。
（３）本FLASHファイルをここで名前をつけて保存し、同じフォルダ内に"text.txt"と言うファイル名のテキストファイル（表示したい文章が書かれていて、コード：UTF-８で保存されているもの；メモ帳で作成したもの）を置く。
（４）FRAME1を選択し、アクションスクリプトパネルで以下のスクリプトを書き込む。　右側が初期設定での出来上がりである。

　textbox.loadVariables("text.txt");

　なお、テキストフィールドのプロパティーインスペクターにパラメータータグが出現するが、ここで、編集可能（画面上で）にするかどうか、HTMLを書き込み可能にするかどうかなどの設定が出来る。　また、TextArea内の文字、枠線などはスタイル指定で設定できるが、詳しくはｈｅｌｐを参照されたい（かなり読みにくいことを覚悟の上）。

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

//FRAME1に
　　this.loadVariables("text.txt");

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

//下向きボタンに
　　on(press) {
　　_root.textbox.scroll--;
　　}
（注）scroll++はscroll+=1と同義

シンプルな例です。

枠線（border）を無しにすれば、フィールド内が透明になるので、背景や図形を下地にすることが出来る。　この例では、薄茶の背景に矩形ツールで枠線を書いている。　シンボル変換ではボタンを選び、アップ、オーバー、ダウンの色を選定している。

　さて、この例のスクリプトのように、インスタンスのアクションに関わるスクリプトをフレームに書き込む場合と、インスタンスに書き込む場合と二通りある。　いずれの場合も同じアクションが再生される。　ちなみに、上の３つのスクリプトを全てフレーム(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とすると、プレスしている間だけスクロールするようになる。

HOME　　　お勉強総リスト