PR
図5●onハンドラのひな型を生成しているところ,「ターゲットパスを挿入」については後述
図5●onハンドラのひな型を生成しているところ,「ターゲットパスを挿入」については後述
[画像のクリックで拡大表示]
表2●各コンポーネントに付ける名前
表2●各コンポーネントに付ける名前
[画像のクリックで拡大表示]
リスト1●[送信]ボタンに記述するActionScriptのコード
リスト1●[送信]ボタンに記述するActionScriptのコード
[画像のクリックで拡大表示]
図6●ActionScriptが階層構造でアプリケーションを管理している様子
図6●ActionScriptが階層構造でアプリケーションを管理している様子
[画像のクリックで拡大表示]

コンポーネントごとにコードを記述

 画面が完成したところで,ボタンを押したときに実行する処理をActionScriptで記述していきましょう。[送信]ボタンを選択したら,キーボードの[F9]キーを押して[アクション]パネルを表示します。[アクション]ツールボックスから[グローバル関数]-[ムービークリップ制御]の[on]をダブルクリックするか,スクリプトペインにドラッグアンドドロップしてください*10。スクリプトペインに,(図5[拡大表示])のように「onハンドラ」のひな型が自動的に入力されます。

 onハンドラは,マウスでボタンが押されたなどのユーザーの操作(イベント)が起こったときに呼び出される処理を記述する場所です。onの後の( )内にはイベントの種類を指定します。今回は「ボタンを押したとき」に対応する「click」を選んでおきましょう。

ターゲットパスでコンポーネントを指定

 続く{ }の中には,ボタンを押したときに「おなまえ」欄に何も入力されていなかったら「おなまえの入力をお願いします」,そうでなければ「ご協力,ありがとうございました!」という文章を表示するコードを記述します。「おなまえ」欄コンポーネントの名前はmyNameでしたね(表2[拡大表示])。ActionScriptでは,コンポーネントに入力・選択されている値は,プロパティを使って取得します(カコミ記事「基本的な文法を確認しておこう」を参照)。「myName」の元になっているTextInputコンポーネントで,入力されている値を取得するにはtextプロパティを使用します。したがってコンポーネント名とプロパティを「.」(ドット)でつないだmyName.textで「おなまえ」欄に入力されている値を取得できます。リスト1[拡大表示]の(1)(2)を見てください。(1)でaという文字列(String)型の変数を定義し,(2)で「おなまえ」欄の値をaに代入しています。

 あれ,(2)ではmyName.textではなくて,this._parent.myName.textとしていますね。このthis._parent.myNameという記述はいったい何なのでしょうか。これは「ターゲットパス」と呼ばれる,操作対象を指定するための仕組みなのです。現在,onハンドラのコードは[送信]ボタン(myButton)に記述しています。ActionScriptで操作対象を指定する際には,そのコードを記述している場所から見てどの位置にあるのかを,たどる道筋(path)で指定します*11

 ActionScriptでは今回のアプリケーションを,(図6[拡大表示])のような階層構造で管理しています。ここでmyButtonからmyNameにたどり着くには,自分自身(myButton)からいったん一つ上の階層に上がって,そこからさらにmyNameに降りるという道筋になります。ActionScriptでは自分自身はthis,一つ上の階層は_parentで表します。したがって,これらを「.」(ドット)でつなぎ合わせて,this._parent.myNameと記述すれば,myButtonからmyNameを指定したことになります。

 慣れないとややこしく感じるかもしれませんが,心配は不要です。実は[アクション]パネルには簡単にターゲットパスを入力してくれる機能が用意されています。それが図5の[ターゲットパスを挿入]ボタンです。このボタンを押して現れるウィンドウでコンポーネントを選択すると,自動的にそこまでのターゲットパスを作成してくれます。さらに,[OK]ボタンを押すとそれがスクリプトペインのコード内に挿入されます。

 残りの処理を見ていきましょう。リスト1の(3)は,lengthプロパティを使って「おなまえ」欄に入力された文字列の長さが0(ゼロ)であるかどうかを調べています。0だったら,ifのすぐ下の行でクッキーの吹き出し内のラベル(cookie_Balloon)のtextプロパティに入力を促すメッセージを代入し,画面の吹き出しの中に表示させます。0でなければelse以下の行で同様にしてメッセージを表示させます。

 これで完成です。メニューで[制御]-[ムービープレビュー]と選択して,動作を確認してみましょう。うまく動いてくることを確認したら,このアプリケーションをブラウザ上で実行してみましょう。

 メニューで[ファイル]-[パブリッシュ]と選ぶと,Flashムービー(Flashで開発するアプリケーションの総称)のファイル(拡張子が.swf)と,Flashムービーをブラウザ上で表示するためのHTMLファイルが生成されます。これら二つのファイルはデフォルトではFlashファイル(拡張子が.fla)と同じフォルダ内に,同名のswf形式のファイルと,html形式のファイルとして作成されます。最後に,生成されたHTMLファイルをダブルクリックで開いてみましょう。アプリケーションがブラウザ上で動作していますね*12

☆          ☆          ☆

 さて,少し駆け足になってしまいましたが,Flashを使ったプログラミングの流れを一通り紹介してきました。思っていたよりも“普通”のプログラミング・ツールではありませんでしたか? 次回は,今回よりちょっと凝ったアプリケーションの開発に挑戦してみます。お楽しみに。


基本的な文法を確認しておこう

 ActionScriptはFlash MX 2004でバージョン2.0にバージョンアップしました。ActionScript 2.0は「ECMAScript」と呼ばれる規格をベースにしており,JavaScriptと同じような文法で記述できます。例えば,変数の宣言を行う際には「var 変数名;」のように記述します。

 ActionScript 2.0では新たに,「var 変数名:型;」と記述して厳密な型宣言を行えるようになりました。例えば文字列を扱う変数「myName」に対して厳密な型宣言を行うには,次のようなコードを記述します。

var myName:String;
myName = "クッキー";

 ActionScriptのプログラミングは基本的に,制御したいオブジェクト(ここではコンポーネントのことだと考えても結構です)を指定し,そのオブジェクトに対して命令を行うスタイルを取ります。

 既存のオブジェクトには,実行できる命令が用意されています。この命令を「メソッド」と言います。メソッドを実行するには,そのオブジェクトと実行したいメソッドを「.」でつないで記述します。

[オブジェクト名].[メソッド名()];

といった感じです。メソッドによっては( )に引数を指定することができます。

 さらに各オブジェクトは,幅や高さ,

表示している文字列といった状態を「プロパティ」として管理しています。プロパティの値を取得/設定することで,オブジェクトの状態を知ったり,変化させたりできます。例えば,

var a;
a = [オブジェクト名].[プロパティ];

とすると,プロパティ値を変数aに代入できます。逆に

[オブジェクト名].[プロパティ]
= [値];

で,オブジェクトのプロパティに値を設定できます。

 「オブジェクトを指定してメソッドやプロパティを利用する」という方法は,JavaやC++などほかのプログラミング言語と共通しているので,あまり戸惑うことはないでしょう。


つづく…

吉岡 梅(よしおか うめ)
山梨県在住のソフトウエア開発者。

◆下記のURLから,サンプル・プログラムを無償ダウンロードできます
http://software.nikkeibp.co.jp/software/download/down04c.html#200404