図1●Flashの開発環境に表示されたタイムライン。並んだフレームの上の数字が“時刻”を表す
図1●Flashの開発環境に表示されたタイムライン。並んだフレームの上の数字が“時刻”を表す
[画像のクリックで拡大表示]

 前回までFlash MX Professional 2004(以下「Flash」)を使用したアプリケーション開発について,Visual Basicをはじめとする他言語の統合開発環境と似ている点をピックアップしながらご紹介してきました。ほかのプログラミング言語を扱った経験のある方であれば,今までのノウハウを応用してFlashアプリケーションを開発できそうだな,という感触をつかんでいただけたのではないでしょうか。

 しかし,もともとWeb向けのアニメーション作成ツールとして登場したFlashには,ほかのプログラミング言語の開発環境にはない独特の仕組みがあります。そこで今回は,他言語を使用している方にはなじみが薄いと思われる仕組みのうち,特に重要な「タイムライン」と「ムービークリップ」の概念と,タイムラインに絡んで,Flashが備えるスクリプト言語ActionScriptでプログラミングをする際に知っておきたいことを紹介します。

ActionScriptのルーツをたどってみれば

 最初に,ActionScriptについて基本的な知識を説明しておきましょう。ActionScriptはECMA(European Computers Manufacturers Association)*1という標準化団体が定めた規格であるECMA-262に準拠して作成されています*2

 ECMA-262は,元々は米Netscape Communicationsの作成したJavaScript*3の仕様の中から,汎用的なものを抽出して標準化した規格です。つまり「JavaScriptを実装するブラウザなどの処理系を作成する場合には,この規格を参考にしてくださいね」というルールを定めたものです。そのため,JavaScriptを筆頭に,ECMA-262規格に対応しているスクリプト言語を一般にECMAScriptと呼ぶことがあります。

 ECMA-262で定めるのは,基本的な文法,データ型,if文やfor文などの制御構造とその文法,いくつかの汎用的なオブジェクトの仕様*4,クラス定義のための構文などです。ECMAScriptを実装するときには,この規格をベースに,独自の命令やオブジェクトを加えて具体的な仕様を決めます。したがって,JavaScriptもActionScriptも,ECMA-262という基本的な仕様に,独自の仕様を追加して作成した処理系というわけです。オブジェクト指向的な言い方をすると,「JavaScriptとActionScriptは,ともにECMA-262を継承し,独自の拡張を追加したスクリプト言語」というイメージでとらえればよいでしょう*5

 こうした背景があるため,ActionScriptとJavaScriptは基本的な文法が非常に似ており,一方を使った経験があれば,もう一方の学習も容易になります。基本的な文法さえ覚えてしまえば,あとは独自のオブジェクト*6にどんな物が用意されているかをチェックし,その使い方に慣れていくだけですむからです。余談ですが,筆者はActionScript学習の壁にぶつかったときに,JavaScriptについて詳しく書かれた書籍を読んで,一気に仕組みを整理できたことがあります。この経験から,詳細はもちろん異なりますが,大まかに整理するには,JavaScriptに関して詳しく書いてある書籍を読んで,その概念をFlashで検証するのも有効な方法の一つだと思います。

ムービークリップとタイムラインはFlashの基本

 ActionScriptについて基本的な知識を押さえたところで,今度はFlashアプリケーション(以下「Flashムービー」)独自の仕組みについてざっと見ておきましょう。

 Flashムービーの仕組みを理解するうえで押さえておくべき基本的な概念は「タイムライン」と「ムービークリップ」です。Flash MX Professional 2004から可能になった「フォームアプリケーション」や「スライドプレゼンテーション」形式のアプリケーション開発では,この二つの仕組みを開発者があまり意識しなくてすむようになりました*7。しかし,実は裏ではきっちり使われています。この二つは,Flashムービーに独特であり,通常のプログラミング言語での開発経験しかない人は少しわかりにくいかもしれません。ただし,いったん理解すれば,Flashにおける各GUIコンポーネントや変数の仕組みなどを非常にスムーズに整理できます。

 タイムラインはその名の通り,Flashムービーにおいて時間の流れを表現するために用いられる概念のことです。一般的なFlashムービーは,タイムラインに沿って,決められたタイミングで指定された絵を表示することで動画(アニメーション)を実現しています。パラパラ漫画と同じ原理ですね。Flashの開発環境ではタイムラインは,図1[拡大表示]の[タイムライン]パネルで,順番付けられたマス目の並びとして表されます。一つひとつのマス目に,パラパラ漫画の1コマに該当するデータを割り当てておき,それを順に表示していくわけです。タイムラインのマス目のことを「フレーム」と呼びます。

 Flashムービーでは,一つのアニメーションを行うムービーの中に,独立してアニメーションを行う別のムービーを入れ子の状態にすることも可能です。この独立したアニメーションを行うムービーを「ムービークリップ」と呼びます。

 ここではFlashを用いたアニメーション作成の方法については説明しませんが,

(1)Flashムービーは入れ子にすることができる。入れ子にしたFlashムービーはムービークリップという単位で管理する

(2)Flashムービーのそれぞれのムービークリップは,独自のタイムラインを持つ

という2点を覚えておいてください。(1)については,パラパラ漫画の中に,別のパラパラ漫画を組み込むイメージ,とでも言ったらよいのでしょうか。アニメーション作成で言えば,いろいろな登場人物(キャラクタ)が一つの背景の中で別々に動いているような画像を効率よく作成するための仕組みです。(2)は,ムービークリップごとにタイムラインを自前で持たせることで,それぞれのムービークリップを独立に作成できると同時に,入れ子の親に当たるムービーのタイムラインの,どの時点にでも組み込めるようにするための仕組みです。どちらの概念も,もともとは効率よくアニメーションを作成するために用意されたものだったわけですね。この仕組みがFlashでGUIコンポーネントを使ってプログラミングをする際にも,基本的な考え方になります。


つづく…

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

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