Flexのエフェクトの使い方

いろいろなエフェクトがあって、使い方が複雑そうだと戸惑うところがありますが、

覚えてしまえば若干のクラス間の差はあれど共通した概念が多いので

まずはひとつずつ使い方を覚えていきましょう。

例えば、Moveエフェクト。

座標(x1, y1)から(x2, y1)にコンポーネントを移動させたいとき、以下のようにします。

ここでは、mxmlでの説明はいたるところにあるので、AS3.0での実装方法について説明します。

// 親Canvasを定義
var cvs: Canvas = new Canvas();
cvs.width = 200;
cvs.height = 100;
// エフェクトをかける対象となるUIComponentを定義
uc = new UIComponent();
uc.graphics.beginFill(0x0000ff, 0.5);
uc.graphics.drawRect(x1, y1, 100, 50);
uc.alpha = 0.5;
uc.graphics.endFill();
//Canvasにコンポーネントを登録
cvs.addChild(uc);

var me: Move = new Move(uc);
// 3000ms 
me.duration = 3000;
me.xFrom = x1;
me.yFrom = y1;
// 移動距離：50pxを設定
me.xBy = 50;
// 0を設定すると、リピート回数が無限に設定される
me.repeatCount = 0;
// 1200ms 
me.repeatDelay = 1200;
// エージング：Cubicで、Moveの移動量を制御する
me.easingFunction = Cubic.easeInOut;
// Moveエフェクト開始
me.play();

これで、(x1, y1) -> (x2, y1)へコンポーネントucを移動させることができます。

この例では異動先の定義を、「me.xBy」でおこなっていますが、これは起点からの相対量を指定するときに用います。

絶対座標で異動先を定義することもできて、

そのときは「me.xTo, me.yTo」にて (x2, y1)のそれぞれの座標値を指定すればOKです。

以上が簡単なエフェクトの設定方法ですが、どんどんクールなエフェクトをかけたくなってきますよね？

例えば、移動させながら拡大縮小とかフェードアウトとか。。。

次回は、複数のエフェクトを連結する方法について解説したいと思います。

PHACTORY

Flexのエフェクトの使い方