前回(前編:インタフェース,グラフィック編)に引き続いて,アドビシステムズのCreativeSuiteファミリーに加わったFlashの新バージョン「Flash CS3」の新機能について解説します。

 Flashの今回のバージョンアップで,一番大きな変更点と感じるのは,ActionScript3.0が搭載された点です。ActionScript3.0は,ActionScript2.0に比べ,非常に整理された言語となっています。

“整理整頓”されてわかりやすくなった言語仕様

 ActionScriptはもともと,Flashムービーにインタラクティブ性を持たせる「アクション」機能の延長線上として開発されてきたために,タイムラインですとか,ムービークリップですとか,Flash独特のパーツが前提となった,一種の「触っている人でないとわかりにくい業界用語の集まり」のような面がありました。

 また,ActionScript2.0では,「イベント処理」を実現させるための手段が何パターンか混在している(*6)等,あまり言語的に整理整頓されているわけではありませんでした(*7)。

 また,ムービークリップを管理する「MovieClipクラス」に多くのプロパティやメソッドが集まっており,他言語に比べると「なんでもかんでもMovieClipに詰め込みすぎじゃない? そのせいで,いったい何を使えば目的の処理ができるのか探すのが大変。たぶんMovieClipクラスのどこかの機能なんだろうけど」と,いうような感覚でもありました。

 上記のような,ちょっと散らかっている部屋のような言語が,ActionScript3.0になると,かなり整理整頓されました(表2)(*8)。

表2:ActionScript3.0で整理された点の一例
ActionScript2.0で混乱していた点ActionScript3.0で整理された点
複数のイベント処理に対する記述方法の混在DOM3イベントモデルに基づき,統一された記述方法になった
MovieClipクラスへのプロパティ・メソッドの集中処理に応じたわかりやすいクラス名のクラスに分散した
「深度」という概念と深度の管理深度管理を自動化した
絵を表示したいだけなのに,「タイムライン」という概念のある「ムービークリップ」を作成しなくてはならないという,少しもったいないような,負荷の高そうな印象のある操作「スプライト」という概念(Spliteクラス)の導入により,単に絵を表示する場合には,ムービークリップよりも「軽い」スプライトを使用できるようになった
createEmptyMovieclipメソッド,attachMovieメソッド等,画面にインスタンスを配置する手段の混在addChildメソッド,removeChildメソッド等,整理・統一されたメソッドになった
「_xプロパティ」と「xプロパティ」等,同じ用途のプロパティのはずなのに,クラス間で微妙に表記が揺れているプロパティ名の表記が整理・統一された
イベントハンドラメソッド実行時のスコープの混乱レキシカル環境への参照の保持がされるようになった

 また,以前から「こういうことできたら面白そうなのになあ」「こういう書き方ができると便利なのになあ」というような処理も,追加されたクラス等を使用して作成できるようになりました(表3)。

表3:ActionScript3.0で実現できることになった点の一例
ActionScript3.0でできるようになったこと用意されたもの
スクリプトからのフレームレートの変更Stage. frameRateプロパティ
スクリプトからの「シーン」の利用Sceneクラス
スクリプトを使ったアニメーションの簡易化Animatorクラス
XMLデータへの簡単なアクセスXMLクラスの大幅な変更(E4Xの実装)(*9
正規表現を使った処理RegExpクラス
バイナリデータの読み書き(*10ByteArrayクラス
サウンド波形の取得SoundMixerクラス
タイマー処理Timerクラス
関数定義時における,任意の数の引数を受け取るインタフェースfunction traceParams(... rest) { trace(rest); }という形でのパラメータの受取が可能に
定数の作成constステートメント
ファイナルクラス,ファイナルメソッドの作成finalステートメント
コレクション内のアイテムに対する,インデックス値を使用しないループ処理for each..in ステートメント

AS3.0としてのトゥイーンのコピーが可能に

 アニメーションを作成する際に,とても便利になった機能が「ActionScript3.0(AS3.0)としてのトゥイーンのコピー」機能です。これはどういう機能なのかというと,Flashのタイムラインで作成したトゥイーンの動きを,そのままコードとしてコピーしてしまう機能です。

 前回は,一つの文字のトゥイーンの動きを,コピーして他の文字へと適用する機能をご紹介しましたが,その機能をスクリプトとして再現したような機能です。タイムラインで作成したトゥイーンの動きをコードとして[アクションパネル]に張り付けると,図16のようになります(*11)。

図16:トゥイーンの動きをコードとしてコピー

 コードの内容はというと,トゥイーンの動きをxml表現で表し,新設された「Animatorクラス」の一つのインスタンスとして作成するものです。

 このAnimatorクラスは,

new Animator(xml, インスタンス名);

というコードで任意のインスタンスに,xml表現としてペーストされたトゥイーンの動きを関連付けます。さらに,

Animator.play()

とすれば,そのインスタンスを指定したトゥイーンの動きでアニメーションさせます。つまり,一つ「定番の動き」となるアニメーションを作成し,それをコードとしてコピーしてしまえば,あとは,

var motionXML:XML = //ここは自動で作成
//mc1~mc5にモーションを関連付ける
var ani1:Animator = new Animator(motionXML,mc1);
var ani2:Animator = new Animator(motionXML,mc2);
var ani3:Animator = new Animator(motionXML,mc3);
var ani4:Animator = new Animator(motionXML,mc4);
var ani5:Animator = new Animator(motionXML,mc5);

のようにして,簡単に複数のインスタンスにモーションを関連付けることができます。あとは,ボタンを押す等のユーザーの操作に応じて,

ani1.play();

としてあげれば,指定したインスタンスが,コピーしておいたモーションで動き出すというわけです。

 「作業の分担」という観点からみると,「モーションを作る人」は,タイムライン上で試行錯誤しながらトゥイーンアニメーションを作成し,そのファイルを「コードを書く人」に渡します。コード担当者は,その動きをAS3.0のコードとしてコピーし,動かしたいインスタンスへと割り当てる,といった切り分けができるようになりますね。

 インスタンスを入れ替えて,同じ動きをさせたいような処理も,非常に作成しやすくなりました。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら