Flash

ActionScriptで作るトランジション – マスク編

紙芝居のようにシーンが変わるトランジションです。マスクを動かすことで、手前の写真が見えている範囲を狭めていきます。マスクの端を手書きの線で切り落とせばコミカルな印象になりますし、端にグラデーションをかければとても上品な印象になります。簡単に実現できますが、マスクの形状によって表情ががらりと変わるトランジションです。
マスクを使ったトランジション(手書きマスク)
transitionex3a.jpg
マスクを使ったトランジション(グラデーションマスク)
transitionex3b.jpg


まず、写真を覆う十分な大きさのマスクを用意し、端の一部を透明(または半透明)にします。
次に、ビットマップキャッシュを有効にします。これを行わないと、アルファチャンネル付きのマスクがうまくかかりません。

frontMask.cacheAsBitmap = true;

次に、写真に対してマスクを設定します。

front.mask = frontMask;

あとはBetweenAS3でマスクを動かすだけです。

var t:ITween = BetweenAS3.to(frontMask, { x:0.0 }, 1.2, Quad.easeIn);
t.addEventListener(TweenEvent.COMPLETE, tweenCompleteHandler);
t.play();

この例では、次のトランジションのために、表示インデックス順を入れ替え、新しく手前にきた写真に対してマスクを設定し、マスクの位置を画面外にリセットしています。

swapChildren(front, back);
var tmp:Sprite = front;
front = back;
back = tmp;
back.mask = null;
front.mask = frontMask;
frontMask.x = -1000.0;

Author

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

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

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

mikasa's text