Flash

ActionScriptで作るトランジション – 放射状グラデーションマスク編

単にマスクが上下左右に動くのではなく、中心から放射状に広がっていくグラデーションマスクによって、トランジションを作ってみたいと思います。真ん中から広がるこのトランジションは、それほどコミカルな印象を与えることなく、記憶や思い出といったキーワードと結び付く印象になるようです。
円形マスクを使ったトランジション
transition4.jpg


最初は原点をステージの中心に置いた、マスク用のSpriteを黒で塗りつぶしておき、後ろの画像が見えないようにしておきます。
次に、GraphicsクラスのbeginGradientFillメソッドでマスクを描いてみたいと思いますが、最低でもtype, colors, alphas, ratios, matrixの5つを指定しないと制御できないので、非常に難解です。

frontMask.graphics.beginGradientFill(GradientType.RADIAL, [0xFFFFFF, 0x000000], [0.0, 1.0],
[p1, p2], matrix);

4番目の引数はratiosで、グラデーションがどこで始まり、どこで終わるかを指定します。0は中心を表し、255は一番外側の部分を表します。たとえば、[0, 10]であれば、中心からはじまり、中心に近い位置でグラデーションが終わります。残りの外側全部は色が0x000000、アルファ値が1.0で描かれるため、真ん中付近だけが抜けるようになります。
5番目の引数matrixは、MatrixクラスのcreateGradientBoxメソッドで作ります。グラデーションの大きさ、回転角、位置を決めるために指定します。この例では、画面をおおいつくすサイズにして、サイズの半分だけ位置をずらすことで、ステージの中心からグラデーションがはじまるようにしています。

matrix = new Matrix();
matrix.createGradientBox(1200, 1200, 0, -600, -600);

今回は、BetweenAS3で、変数maskScaleの値を変化させることにします。

var t:ITween = BetweenAS3.to(this, { maskScale:1.0 }, 1.3, Quad.easeOut);

トゥイーンが進むたびにグラデーションを書き変えるようにするため、UPDATEイベントを受け取るようにします。

t.addEventListener(TweenEvent.UPDATE, tweenUpdateHandler);

変化するmaskScaleの値を元に、さきほどのp1とp2の値を決めて、グラデーションを書きなおします。

private function tweenUpdateHandler(event:TweenEvent):void
{
var p2:int = 255 * maskScale;
var p1:int = 225 * maskScale;
if (p2 < 30)
p1 = 0;
drawGradientMask(p1, p2);
}

Author

  • Shuichi Ishikawa
    Shuichi IshikawaShuichi
    Ishikawa
  • MikasaHideyuki
    Hideyuki MikasaHideyuki
    Mikasa
Shuichi Ishikawa
執行役員/インタラクションデザイングループ

フロントエンド開発からクラウドサーバー構築まで、新しいことに興味がありすぎて時間が足りない制作部門リーダー。Adobeインフルエンサー。九州芸術工科大学→ドリームキャスト→サーバーサイド→フロントエンド→執行役員→早稲田大学大学院→Kinect v2

好きな飛行機
B787-8
好きな空港
SXM
好きな航空路
Y28
Hideyuki Mikasa
オーサリングエンジニア

mikasa's text