[Flex]カスタムエフェクトの作成 #4 - さらに複雑なアニメーションへ

前回までのは単なるサンプルに少し手を加えただけのもの。 あんなのでは桜を表現したエフェクトなどできるはずもない。 ここからはより実践的に調査を続けよう。

まず、要求定義。

最終目標

• 桜の花びらが舞いながらオブジェクトがフワーッと消えていくようなエフェクト

うん、めっちゃ難しそう＼(＾o＾)／

もう少しハードルを下げる。

第２目標

• オブジェクトが端から徐々に消えていく。消えていくときの境界線に桜の花びらが表示される

このくらいか。 この要件を満たすために必要な要素を、自分の実現可能なパーツに分解しよう。 これは何もソフトウェア開発に限らず、あらゆる問題解決に有効なアプローチだ。

1. オブジェクトを端から徐々に消す
2. 桜の花びらを一か所に表示する
3. 画像を線上に均等に並べて表示する（2と組み合わせれば桜を線状に並べて表示できる）

細かいところをあげたらもう少し色々ありそうだけど、このくらいでよし。

さて、2はたぶん問題無い。 画像に(x, y)座標を指定して addChild してやればいいのだろう。

3は数学的アプローチ。 直線状の座標を均等に分割する点を計算してやれば2と組み合わせればできるだろう。 中学で習った1次関数の応用、もしくは高校で習うベクトルの問題に落としこめるので、たぶんできる。

問題は1だ。 これは今の自分ではできない。 これについて調査すればすべての問題が解決できるはず。

実はこれについては似たようなものを見たことがある。 いや、というか見たことがあるから、これならできると思って要求定義をこのようにしたと言ってもいい。 mx.effects.WipeDown というエフェクトクラスがあるのだ。 これはオブジェクトを上から下へスーッと描画する。

消していくのと描画するのとでは、動作としては逆だが部分的に表示し、部分的に隠すという意味ではどちらも同じだ。 このWipeDownについて調査することから始めた。

調査となれば、まずはAdobeのドキュメント。 Adobeは相当Flex/Flashに期待をかけているのか非常にドキュメントが充実している。日本語への直訳がわかりにくい、という欠点はあるけど、結果的にAdobeのドキュメントを調べることで問題解決することが経験的にも多い。

WipeDown - ActionScript 3.0 言語およびコンポーネントリファレンス

さて、ここで mx.effects.WipeDown のリファレンスを見て気づいたこと。それは

1. mx.effects.MaskEffect を継承している
2. mx.effects.WipeDown が独自に設定しているプロパティ、メソッドは無く全て MaskEffect からの継承

どうやら MaskEffect がオブジェクトの一部を Mask （隠す）するのに必要なインターフェースを提供しているようだ。 じゃあこいつを使えば一発解決かも？

ということで次にすべきことは MaskEffect を継承したエフェクトを作成すること。

進め、どんどん。