Flashのマスクでグラデーションを利用する方法

Flash Player8以降で可能です

このように、マスク自体にグラデーションがかかっていて滑らかなアルファ(透明度)を再現したサンプルですが、意外とActionScriptなしでは出来なかったりします。

そういうのに限って需要が高かったりするので、これまた厄介(笑)。

しかしActionScriptとは言っても、それほど難解なものではないので、適用することはできますよ。

ActionScript1.0から利用可能で、Flash Player8以降であれば再生可能なので、世の中の99%以上のネットユーザーに見てもらうことが出来ます(参考:Adobe社公式のレポートページ)。

グラデーション・アルファマスクのサンプルファイル構造

今回作成したサンプルのタイムラインのスクリーンショットです。

gradation_alpha_timeline.png

スクリプト・サンプル

ポイントはやはりActionScriptのサンプルです。 グラデーション・マスクにしたインスタンスが「myMask」、マスクする対象が「myText」ですね。

今回のサンプルファイルです。 gradation_alpha.zip クリエイティブ・コモンズ・ライセンス

myText.cacheAsBitmap = true;
myMask.cacheAsBitmap = true;
myText.setMask(myMask);
//徐々に右に動かす
this.onEnterFrame = function() {
    myMask._x += 5;
    //右端までいったら移動をやめる
    if (myMask._x - myMask._width > Stage.width) {
        delete this.onEnterFrame;
    }
}

ポイントは各ムービークリップに設定した「cacheAsBitmap」です。 Flashヘルプによると、cacheAsBitmapプロパティは、複雑なベクターデータの描画を高速化するためのプロパティで、ビットマップとしてステージに描画されるようになります。

このページをシェアする

2 件のコメント

  • あばばばば より:

    アルファアニメーションのかかった画像を作りたかったので、非常に参考になりました。

  • 山下こうじ より:

    お役に立てて良かったです!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2010-09-08