Flash

ActionScriptで作るトランジション – クロスフェード編

トランジションといえば、シーンとシーンを切り替える際のエフェクトのことですが、なかでも「クロスフェード」は、前のシーンが消えていくと同時に次のシーンが現れるという、オーソドックスながらも美しく上品な印象を与えるトランジションです。
Flash CS4のタイムラインで作ることもできますが、Tweenerなどのトゥイーンエンジンを使ってスクリプトで制御したほうが調整も簡単です。
クロスフェードのサンプル(Flash Player 10で動作、クリックでトランジション開始)
transitionex1.jpg


これまで多くの人に愛されてきたトゥイーンエンジン「Tweener」ですが、設計が時代遅れになったということで先日、開発者が開発の終了を宣言しました。TweensyやTween Liteなど、これからどのエンジンを使うか迷うところですが、どれも個性的すぎる印象でした。
そんな中、いい意味で普通な印象を持ったのが「BetweenAS3」でした。まだAlpha版ということで、業務に使うにはまだ早そうですが、使い方にそれほど癖もなく、動作速度がおそろしく速いのでおすすめです。
まず、対象、パラメータ、時間、イージングを指定します。ここでは、現在値からトゥイーンするメソッド「to」を使っています。

var t:ITween = BetweenAS3.to(front, { alpha:0.0 }, 1.2, Quartic.easeOut);

次に、必要であれば、トゥイーンが終了した時の処理を行うハンドラを登録します。AS3的でいいですね。

t.addEventListener(TweenEvent.COMPLETE, tweenCompleteHandler);

最後に、playメソッドを呼び出すとトゥイーンが実行されます。

t.play();

BetweenAS3を使ったクロスフェード・トランジション:
(image1、image2はステージに配置したSpriteです)

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.Quartic;
import org.libspark.betweenas3.events.TweenEvent;
import org.libspark.betweenas3.tweens.ITween;
/**
* Transition 1
* @author Shuichi Ishikawa / Neuromagic
*/
public class Transition1 extends Sprite
{
public var image1:Sprite;
public var image2:Sprite;
private var front:Sprite;
private var back:Sprite;
public function Transition1()
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
front = image1;
back = image2;
stage.addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(event:MouseEvent):void
{
stage.removeEventListener(MouseEvent.CLICK, clickHandler);
var t:ITween = BetweenAS3.to(front, { alpha:0.0 }, 1.2, Quartic.easeOut);
t.addEventListener(TweenEvent.COMPLETE, tweenCompleteHandler);
t.play();
}
private function tweenCompleteHandler(event:TweenEvent):void
{
var t:ITween = ITween(event.target);
t.removeEventListener(TweenEvent.COMPLETE, tweenCompleteHandler);
swapChildren(front, back);
var tmp:Sprite = front;
front = back;
back = tmp;
back.alpha = 1.0;
stage.addEventListener(MouseEvent.CLICK, clickHandler);
}
}
}

Author

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

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

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

mikasa's text