Top | Contents | Prev　| Next
TransitionManager クラス

　TransitionManager クラスはアニメーション効果を定義して適用させる事ができるクラスです。このクラスのメソッドやプロパティを使用してアニメーション効果の設定を行います。このクラスを学ぶ前にActionScriptアニメーションの学習に目を通してください。
MovieClip オブジェクトの作成
　アニメーションを適用させるには適用させるMovieClip オブジェクトを作成する必要があります。オブジェクトの作成はShape、Spriteなど他のオブジェクトを作成する方法と同じです。

・MovieClipオブジェクトを作成する方法（インスタンス化）はMovieClipコンストラクタを使用します。ここではオブジェクト名をmyMovieClipにしました。
var myMovieClip:MovieClip = new MovieClip();
TransitionManagerオブジェクトの使用
　アニメーション効果を定義して適用させる為にはTransitionManagerのインスタンスを作成してからTransitionManagerクラスで定義されているstart プロパティを使用します。TransitionManagerのインスタンスを作成する方法はnew キーワードを使用する方法がありますが、TransitionManager.start()メソッドを使用する方法が推奨されているので、このメソッドを使用しての説明をします。

ここでは例として次第に表示される矩形または消えていく矩形を使用して、MovieClipオブジェクトを表示させるアニメーション効果を作成します。これはfl.Transitions パッケージ内にあるBlindsクラスを使用して実現させます。

・ アニメーション作成に使用するクラスがあるパッケージをimport します。
import fl.transitions.*;
import fl.transitions.easing.*;

・ MovieClipオブジェクトを作成します。ここではオブジェクト名はmyMovieClipにしました。
import fl.transitions.*;
import fl.transitions.easing.*;

var myMovieClip:MovieClip = new MovieClip();

・ この状態ではMovieClipオブジェクトは空なのでGraphicsクラスのメソッドにアクセスして四角形の描画を行い、addChild()を使用し表示リストにmyMovieClipを追加します。

import fl.transitions.*;
import fl.transitions.easing.*;

var myMovieClip:MovieClip = new MovieClip();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.graphics.beginFill(0x990000);
myMovieClip.graphics.drawRect(100, 50, 100, 100);
myMovieClip.graphics.endFill();
this.addChild(myMovieClip);

・次にアニメーション効果を定義する為にTransitionManager.start()メソッドを使用してます。
import fl.transitions.*;
import fl.transitions.easing.*;

var myMovieClip:MovieClip = new MovieClip();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.graphics.beginFill(0x990000);
myMovieClip.graphics.drawRect(100, 50, 100, 100);
myMovieClip.graphics.endFill();
this.addChild(myMovieClip);

TransitionManager.start();

・TransitionManager.start()メソッドのメソッドパラメータを順に設定してきます。第1パラメータにはアニメーション効果を適用する為のムービークリップインスタンスを設定します。（ここではmyMovieClip）
import fl.transitions.*;
import fl.transitions.easing.*;

var myMovieClip:MovieClip = new MovieClip();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.graphics.beginFill(0x990000);
myMovieClip.graphics.drawRect(100, 50, 100, 100);
myMovieClip.graphics.endFill();
this.addChild(myMovieClip);

TransitionManager.start(myMovieClip);

・第2パラメータには適用するトランジションクラスの効果を示すtypeパラメータ（今回はBlinds）やdirection（トランジション効果が始まる方向）、duration（持続） および easing （どんなイージング効果にするか設定）します。これらはオブジェクト内で渡されるパラメータのコレクションです。１つずつ下記で説明します。

import fl.transitions.*;
import fl.transitions.easing.*;

var myMovieClip:MovieClip = new MovieClip();

var myMovieClip:MovieClip = new MovieClip();
myMovieClip.graphics.beginFill(0x990000);
myMovieClip.graphics.drawRect(100, 50, 100, 100);
myMovieClip.graphics.endFill();
this.addChild(myMovieClip);

TransitionManager.start(myMovieClip, {type:Blinds, direction:Transition.IN, duration:3, easing:None.easeNone, numStrips:10, dimension:0});

  • type
    type パラメータにはアニメーションを作成する為に使用するクラスを指定します。
  • direction
    direction にはイージングの方向を設定します。TransitionクラスにはINとOUTの定数が定義されています。
  • duration
    duration には継続時間を指定します。
  • easing
    easing にはアニメーションのトゥイーン効果を設定します。fl.transitions または fl.transitions.easing パッケージのいずれかの効果を使用します。
　上記のパラメータはどのアニメーション効果を適用する場合でも設定する必要があります。それ以外のパラメータはそのトランジション効果クラスで必要なパラメータがある場合はそれも指定する必要があります。Blindsクラスでは上記以外のパラメータ以外に以下のパラメータを指定します。
  • numStrips
    Blinds 効果内のマスクストリップの数。推奨される値の範囲は 1 ～ 50 です。つまり徐々にオブジェクトを表示、非表示に使用する場合のマスクの使用個数です。数が多ければ多いほどオブジェクトが細かく分割されて表示されるように見えます。

    numStrips = 1 numStrips = 10

  • dimension
    マスクストリップが垂直 か水平 かを示す整数。垂直は0で指定し横に表示・非表示され、水平は縦になります。

    dimension = 0 dimension = 1

・コードの記述が終わったらCtrl + Enter キー (Windows) または Command + Enter キー (Macintosh) を押して出力してみてください。（ボタンは表示されません。）
トップへ
Top | Contents | Prev　| Next