第27回　Flexでちょっと実用的なサンプル・サイトを作ってみる（視覚エフェクト編：続き）

　今回は，Mask系のエフェクトと，エフェクトで使用される「Easing」関数のクラスについて解説します。Maskとは文字通り，ターゲット（対象）を（部分的に）見えなくする効果です。Easingとはターゲットのパラメータ（位置や透明度など）をある法則にしたがって徐々に変化させる手法です。

今回の記事のサンプルのコードをこちらからダウンロードできます

様々なMask系エフェクト

　まず，「Mask」とは何でしょうか？ 言葉どおりに解釈すると「覆い隠すもの」という意味になります。FlexやFlashでは，Maskとして何か適当なオブジェクトを指定して（＊1），ターゲットとするオブジェクトに「mask」属性を適用すると，図1のようになります。

図1：「mask」属性の適用

　「mask」用オブジェクトは，形のみが適用されます。色は関係ありません。そして「mask」属性を適用されたオブジェクトは，mask用オブジェクトの形に透明になります。図1のターゲット・オブジェクトは，mask適用後には背景の色が表示されているのです。したがって，例えば，「mask」用オブジェクトがターゲットと同じ大きさの場合には，ターゲットは見えなくなり，背景が表示されます。

　この特性を利用したのがMask系エフェクトです。Mask系エフェクトにおける「mask」用オブジェクトはエフェクト終了と同時に消えてしまいますので，自前でコントロールする必要があります。

　では，実際にサンプルを見てみましょう（図2）。

図2：Mask系エフェクトのサンプル（クリックすると別ウィンドウで動作を確認できます）

　上から順に

1-1．WipeUp / WipeDown
1-2．WipeLeft / WipeRight
1-3．Iris
1-4．Using two images

となります。

　1-1ではイメージを非表示にするときに「WipeDown」エフェクト（＊2）が再生され，非表示状態から表示するときに「WipeUp」エフェクト（＊3）が再生されます。Mask系エフェクトにおける一般的なコーディング方法はほぼすべて同じなので，ここで説明します。

　まずは図3 をご覧ください。

図3：Maskエフェクトのコード

　14行目に「WipeUp」エフェクト，17行目に「WipeDown」エフェクトが宣言されています。そして，28行目と29行目のエフェクト・トリガーに各エフェクトのIDがバインドされています。これで，エフェクトのターゲットであるイメージが表示状態から非表示状態になるときに「hideEffect」に指定されたエフェクトが再生されます。逆に，非表示状態から表示状態になるときには「showEffect」に指定されたエフェクトが再生されます。

　Mask系エフェクトには「showTarget」と呼ぶ属性があります。これが「false」の場合には「mask」用オブジェクトを徐々に大きくしていき，最後にはターゲットと同じ大きさにしてターゲットを覆い隠します（※エフェクト時間の終了とともに「mask」オブジェクトは消えます）。逆に「true」の場合は「mask」オブジェクトは徐々に小さくなります（図4）。

図4：「showTarget」属性によるエフェクト再生の違い

　図3のコードでは「showTarget」属性は指定していませんが，エフェクト・ターゲットのイベントによって自動的に判断されています（＊4）。

　サンプルで「showEffect」/「hideEffect」エフェクト・トリガーをキックしているのが，20行目における「visible」属性の切り替えです（＊5）。

　余談になりますがエフェクト・トリガーにエフェクトをセットすると，エフェクト自体はターゲット・オブジェクトにStyleとして格納され（＊6），対象となるイベント用のリスナー関数は「EffectManager」クラスのスタティック関数「eventHandler」にセットされます。この関数で実行される様々な処理の中で実際のエフェクトが生成され実行されます。

　なぜ，ここで生成されるか，わかるでしょうか？ それはエフェクトの宣言は一つでも，そのエフェクトは複数のオブジェクトで使用され，かつ，同時に実行されることがあるからです。つまり，エフェクトの宣言は実際にはエフェクトの初期化パラメータのように利用されるのです。

　1-1から1-3で使用しているWipeDown/WipeUp/WipeLeft/WipeRight/Iris がどんなエフェクトなのかは，図3のサンプルを見てご確認ください（＊7）。

　1-4は少し工夫しています。エフェクト自体は変わりませんが，イメージを2重にしています。つまり，ネズミのイメージと全く同じ場所にイヌのイメージを配置することで，ネズミのイメージのエフェクトが実行されるとともに，イヌのイメージに徐々に置き換わったかのように見えるわけです。

　ちょっとコードを見てみましょう（図5）。

図5：「1-4」のコード

　「img4_1」が最初に表示されているネズミで，「img4_2」がネズミの下に配置されているイヌです。「horizontalCenter」/「verticalCenter」Styleをともにゼロにすることで，各イメージは親コンポーネントである「Canvas」の中央に表示されています。MXMLコードにおけるZ軸的な上下関係は後に書いたほうがZ軸的に上になります。

サンプルで見るEasing関数の働き

　次に，「Easing」関数について解説します。Easing関数とは，一般的に言うとオブジェクトの属性値（位置や透明度など）をある法則にしたがって変化させる関数といった感じでしょうか。

　Flex SDKで用意されているEasing系クラスのそれぞれについて言葉で説明するのは難しいので，図6のサンプルをご覧ください（＊8）（サンプルのソースは汎用化して込み入っているため，ここでは解説を省略します）。

図6：Easing系クラスの動作テスト用サンプル（クリックすると別ウィンドウで動作を確認できます）

　画面上部のEasing系クラス名が記述されているボタンをクリックすると，作用させるEasing関数を変更できます。右下にある九つのボタンをクリックすることでその方向へ「Move」エフェクトが再生されます。九つのボタン群中央の「init」ボタンはイメージの位置を初期位置に戻します。

　下段のチャートにはMove エフェクトによる「x」/「y」属性値の変化がグラフ化されます。これがEasing系クラスによる法則です。昔懐かしい2次曲線や3次曲線のようになると思います。実際の計算式はもう少しややこしいのですが。

　右のパネルにはEasing関数用のコンフィグがあります。「easeIn」/「easeOut」/「easeInOut」についても言葉での表現が難しいのですが，大雑把に言うと，「easeIn」関数はエフェクト時間の前半に大きく変化し，「easeOut」関数では後半あたりに大きく変化します。「easeInOut」関数は「easeIn」/「easeOut」両方の特性が発生します。

　「duration」はエフェクトの実行時間で，単位はミリ秒です。「distance」はMove エフェクトによる移動距離です。

　「Back」クラスと「Elastic」クラスの場合は，専用のオプションが表示されます。「Back」クラスの「overshoot」というのは，たとえるなら「オーバーラン」（行き過ぎ）の距離でしょうか。「Elastic」クラスに関しては，専門的になるのですが，「amplitude」は正弦波の振幅（波の揺れの大きさ），「period」は正弦波の周期（波の間隔）になります。「period」は「360」で1周になります。

　と，書いてみましたが，実際に試すほうが良くわかっていただけると思います。後半の「Quadratic」/「Quartic」/「Quintic」/「Sine」は，グラフを見てもほとんど見分けが付きません。もはや，感覚の世界だと思います。