[Flex]カスタムエフェクトの作成 #1

Tweet

なぜこんなことをしようとしているかというと、理由はこちら。

B-Wiki - Flex3勉強会第68回＠大阪参加受付 - Flex User Group

※桜をRIAで表現できれば素敵ですね～

これをやってみたいと思ったから。 桜の花びらが舞いながらオブジェクトが消えていくエフェクト。 昔のパチンコ「花満開」とかであった（知らんか）チープな感じでOK。

ってことで一切予備知識なしで調べながら取り組む過程を残していきましょう。

まずはAdobeのドキュメント

基本ですね。 ここです。

Adobe Flex 3 カスタムエフェクトの作成について

ここによると以下の２つのクラスを用意する必要がある。

1. ファクトリクラス

   mx.effects.Effectもしくはそのサブクラスを継承する。エフェクトのパラメータ（ズームサイズとかエフェクト持続時間など）を受け取り、インスタンスクラスに引き渡す役割を持つ。 以下のようなMXMLで使用しているWipeDownはこのファクトリクラスのことのようだ。 名前も Zoom や Fade などそのエフェクトそのものを表わす名前にする慣例らしい。

   <!-- Define factory class. -->
   <mx:WipeDown id="myWD" duration="1000"/>
   <!-- Assign factory class to effect targets. -->
   <mx:Button id="myButton" mouseDownEffect="{myWD}"/>
   <mx:Button id="myOtherButton" mouseDownEffect="{myWD}"/>
   

2. インスタンスクラス

   エフェクトの実際の処理を実装するクラス。ファクトリクラスがインスタンスクラスを使用して各コンポーネントのエフェクトを実行していくようなイメージだろう。エフェクト処理そのものは、インスタンスクラス内に書くわけだ。ZoomInstanceやFadeInstanceのように、エフェクト名の末尾にInstanceとつける慣例らしい。

以上、どうやら構成はかなりシンプルだ。 しかし、それだけではない。 ファクトリクラスにしてもインスタンスクラスにしても、目的に応じてある程度の機能を備えたクラスが既に準備されているようだ。

ファクトリクラスには以下の代表的なクラスがある。

今回はアニメーションを必要とするため、TweenEffectを継承して作っていこう。 続く。