文系の人でも、数理学がわからない人でもゲームプログラミングをマスターできるブログ
Flash のモーション XML エレメントを自作してみた
話題のモーション XML エレメントですが、奇跡的に仕事で使うタイミングがあったので自作してみました。
本当はこれを他のプログラムで利用する方法が一番知りたかったのですが、まぁ、それをやるにもフォーマットを知る必要がありますので、わかったことを残しておきます。
まず、モーション XML エレメントというのは、 IDE から使う場合は必要な項目をガッチガチに固めてやらないとまずいっぽいのですが、以下のように ActionScript から使う場合は必要な項目だけ設定してやれば良さそうです（とりあえず動きました）。
import fl.motion.Animator; var theShape:Shape = new Shape(); theShape.graphics.beginFill(0x0000FF); theShape.graphics.drawRect(0, 0, 100, 100); theShape.graphics.endFill(); addChild(theShape); var theMotion:XML = <Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*"> <Keyframe index="0" x="100" y="100"> <color> <Color alphaMultiplier="0" /> </color> <tweens> <CustomEase target="position"> <geom:Point x="0.1" y="0.1" /> <geom:Point x="0.2" y="0.15" /> <geom:Point x="0.3" y="0.2" /> <geom:Point x="0.4" y="0.25" /> <geom:Point x="0.5" y="0.3" /> <geom:Point x="0.6" y="0.35" /> <geom:Point x="0.7" y="0.4" /> <geom:Point x="0.8" y="0.45" /> <geom:Point x="0.9" y="0.75" /> </CustomEase> <SimpleEase target="color" /> </tweens> </Keyframe> <Keyframe index="9" x="400" y="200"> <color> <Color alphaMultiplier="1.0" /> </color> </Keyframe> </Motion>; var theAnimator:Animator = new Animator(theMotion, theShape); theAnimator.play();
初めて見る方は驚かれるかもしれません。なんと ActionScript は XML をソースコード中に組み込むことができるんですね（ PHP などでは文字列として用意してパースしなければなりません）。
以下、ポイントです。
- この XML で動かしたい表示オブジェクトを最初に構築しておく（上記コード中の theShape オブジェクト）
- Motion 要素の duration 属性に総フレーム数を指定する（上記コードは 10 フレームとなる）
- キーフレームの数だけ Keyframe 要素を追加する（上記コードは２つのキーフレームがある）
- Keyframe 要素の index 属性にフレーム番号を指定する（０から始まる点に注意）
- Keyframe 要素に x, y, scaleX, scaleY, skewX, skewY, rotation といった、対象表示オブジェクトの位置や大きさ、回転に関する情報を指定する
- トゥイーンを使いたい場合は Keyframe 要素内に tweens 要素を追加する
- SimpleEase 要素はキーフレームとキーフレームの中間のアニメーションを中割で自動作成する
- CustomEase 要素はキーフレームとキーフレームの中間のアニメーションをどういった割合で作成するか指定する（単純なトゥイーンデータでも感性がついているように動かすこともできる）
XML が用意できたら Animator クラスを使ってアニメーションを開始します（最後の２行）。 Animator クラスのインスタンスは参照が０にならないように注意してください。アニメーションが止まってしまいます。
ちなみに、「モーション XML エレメントのデータを動的に変更できないのか？」と疑問に思われるかもしれませんが、 theMotion が XML オブジェクトになっていますので、後からノードの編集は可能です。また、ソースコードに書いた XML 中で以下のようにすると変数を展開することができます。
<!-- variable が Flash の変数 --> <Element attribute={variable} /> <!-- ↓ variable の中身が value の場合は以下のように展開される --> <Element attribute="value" />
もう、簡単な動きに IDE は要らなくなるかもしれません。
Comments
[...] モーション XML の使い方が知りたい→ Flash アニメを作る仕事が来た [...]
[...] モーションデータは Flash を参考に XML で持つことを考えていたのですが、もっと軽いフォーマットがあると教えていただきました。その名も YAML 。 [...]
Contributions