ActionScript 3.0でのアニメーションの作成
作成日
16 April 2009
ページ ツール |
必要条件
この記事に必要な予備知識
この記事は、Flashオーサリング環境の基本を理解していること、およびActionScriptの使用経験があることを前提にしています。
ユーザーレベル
中級
必要な製品
- Flash Professional CS4 (Download trial)
ActionScript 3.0言語を使用すると、Adobe Flash Playerのほとんどのエレメントにプログラムによってアクセスできます。ActionScript言語には、アニメーション作成のための専用クラスがいくつか用意されています。これらのクラスにより、タイムラインを使用しなくても、単純なものから複雑なものまで様々なモーション効果を作成できます。
この記事では、普段はActionScriptを使用していない方でも、ActionScript 3.0アニメーション機能を簡単に使用できることを説明します。利用できるオプションを調べて、ムービークリップとコンポーネントをアニメーション化し、SWFアプリケーションにアニメーションを追加する方法を学んでください。
トゥイーン、トランジションおよびイージングについて
ActionScriptの作成済みのクラスから、SWFアプリケーション内の様々な機能やオブジェクトにアクセスすることができます。Tweenクラス、TransitionManagerクラス、イージングクラスを使えば、アニメーションとトランジションをムービーに動的に追加することが簡単になります。これらのクラスを使用するためのプロセスは、ActionScript 2.0バージョンとたいへん似ています。ActionScript 2.0のクラスとActionScript 3.0のクラスの主な違いは、ActionScriptパッケージが、以前の「mx」から「fl」に変わったことです。
ここでは、ActionScript 3.0で利用できるトゥイーン、トランジション、イージングの各オプションの概要を説明します。コードを生成するトゥイーンの基礎から見ていきましょう。
注意：TweenクラスとTransitionManagerクラスは、ActionScript 2.0言語の「mx」コンポーネントパッケージにも存在します。詳細については、ActionScript 2.0ドキュメントの「About the Tween and TransitionManager classes（TweenクラスおよびTransitionManagerクラスについて）」を参照してください。
はじめに
Tweenクラスまたはトランジションクラスを操作する場合は、トランジションパッケージ（イージングを使用することを計画している場合はイージングパッケージ）を読み込むことによってコードを開始します。次のコードをアクションパネルのスクリプトウィンドウの先頭に追加します。
import fl.transitions.*;
import fl.transitions.easing.*;
ActionScriptパッケージは、関連するActionScriptクラスのグループです。スクリプトの先頭でトランジションとイージングパッケージを読み込むと、横間隔を保存するために、オブジェクトクラスのクラス名別に、直接パッケージ内のオブジェクトクラスにアクセスできるようになります。また、クラスを読み込む際に、Flash CS4 Professionalに対し、SWFファイルとともにクラスをコンパイルするよう指示されます。
ヒント：ActionScriptの記述に慣れていない場合、初めはコピー＆ペーストを多用しましょう。便利なコードスニペットを見つけたら、ファイルにコピー＆ペーストし、テキストに入力してスクリプトを作成します。
トランジションとTransitionManagerクラスについて
トランジションとは、ムービークリップに適用できるアニメーションであり、スクリーンの遷移の「イン」と「アウト」を切り替えることができます。ActionScript 3.0には10個の異なるトランジションクラスがあり、イージングメソッドといくつかのオプションパラメータを使用してカスタマイズできます。
Flash CS4 Professionalには、TransitionManagerクラスで使用するための次のトランジションが含まれています。
- Blinds：スクィーズする矩形のアニメーションマスクを使用して次のスクリーンを表示します。
- Fade：スクリーンをフェードインしたりフェードアウトしたりします。
- Fly：特定の方向からスクリーンにスライドインします。
- アイリス： 拡大するシェイプのアニメーションマスクを使用してスクリーンを表示します。
- 写真画質： スクリーンを写真撮影のフラッシュのように表示します。
- ピクセルディゾルブ： 矩形を表示したり非表示にしたりしてスクリーンをマスクします。
- 回転： 現在のスクリーンを回転させます。
- スクィーズ： 現在のスクリーンを水平方向または垂直方向に伸縮させます。
- ワイプ： 水平方向に移動するシェイプのアニメーションマスクを使用してスクリーンを表示します。
- ズーム： スクリーンを拡大したり縮小したりします。
アニメーションに適用できるカスタマイズは、トランジションによって若干異なります。
TransitionManagerクラスは、トランジションとの連携に使用する管理オブジェクトです。
次のコードでは、Wipeトランジションを作成する方法を示します。
import fl.transitions.*;
import fl.transitions.easing.*;
// Apply wipe transition
TransitionManager.start(img1_mc, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});
このコードでは、ステージ上に「img1_mc」という名前のムービークリップインスタンスがあることを前提にしています。ムービーにワイプエフェクトを作成するために必要なのは、この数行のコードだけです。
ターゲットのインスタンスと、トランジションパラメータを含むオブジェクトに渡していることを確認します。パラメータとして、必ず、タイプ、方向、継続時間およびイージングのプロパティと共に、必要となるトランジション固有のその他のプロパティを含めます。
詳細については、『ActionScript 3.0 言語およびコンポーネントリファレンス』のTransitionManagerクラスの項を参照してください。
イージングクラスについて
イージングとは、アニメーションの際、徐々に加速したり減速したりすることをいいます。例えば、アニメーションが始まるとボールが徐々に速度を増していき、アニメーションが終わる直前に速度を落として、完全に停止するような場合です。イージングを加えると、アニメーションがより臨場感に富んだものになります。
Flashには、TweenクラスとTransitionManagerクラスで使用するための６つのイージングクラスが用意されています。
- Back：オーバーフローエフェクトに似て、同時に一端または両端でトランジションの範囲を超えてアニメーションを拡張します。
- Bounce：一端または両端でトランジションの範囲内にバウンシングエフェクトを追加します。バウンスの数は継続時間に関連します。継続時間が長ければ長いほど多くのバウンスを作成します。
- Elastic：一端または両端でトランジションの範囲の外に及ぶ伸縮エフェクトを追加します。伸縮の量は継続時間の影響を受けません。
- Regular：一端または両端で比較的低速の動きを追加します。この機能によって、加速エフェクト、減速エフェクトまたはその両方が追加されます。
- Strong：一端または両端で比較的低速の動きを追加します。このエフェクトはRegularのイージングと似ていますが、より大きなエフェクトがあります。
- None：最初から最後まで、エフェクト、減速または加速なしで一定の動きを追加します。このトランジションは、線形トランジションともいいます。
前述の６つのイージングクラスには、それぞれ３つのイージングメソッドがあります。
- easeIn：トランジションの最初にイージングエフェクトを付加します。
- easeOut：トランジションの最後にイージングエフェクトを付加します。
- easeInOut：トランジションの最初と最後の両方にイージングエフェクトを付加します。
注意：Noneクラスには、前述のTransitionManagerのコード例に示すように、easeNoneメソッドが含まれます。
Flashでこれらのクラスを開くか、ActionScriptエディタにコードを読み込む場合、クラスファイルは次の場所で確認できます。 Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\projects\Flash\src\fl\transitions。
TransitionManagerクラスの詳細については、『ActionScript 3.0言語とコンポーネントリファレンス』のfl.transitions.easingパッケージの項を参照してください。
Tweenクラスについて
Tweenクラスでは、タイムラインに沿って作成されたトゥイーンと同様に、ステージ上でムービークリップを簡単に移動、サイズ変更およびフェードすることができます。
例えば、ステージをまたがってムービークリップを移動することを考えてみます。オプションとして、次のものが挙げられます。
- タイムラインにキーフレームを追加し、キーフレーム間にモーショントゥイーンまたはシェイプトゥイーンを挿入できます。
onEnterFrameイベントハンドラにコードを記述して、アニメーションを強化できます。- 定期的に関数を呼び出すには、
setInterval()関数を使用できます。 - Motionクラスとモーションパッケージのクラスを使用します。
- あるいは、イージングクラスとともにTweenクラスを使用できます。
トゥイーンアニメーションを作成する最も簡単な方法の１つは、Tweenクラスを使用することです。次のActionScriptを使用します。
import fl.transitions.*;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(ball_mc, "x", Elastic.easeOut, 0, 300, 3, true);
このActionScriptコード例では、Tweenクラスの新しいインスタンスを作成します。これは、ステージ上のball_mcムービークリップをx軸に沿って（左から右に）アニメーション化します。ムービークリップは、３秒で０ピクセルから300ピクセルまでアニメーション化されます。ActionScriptはelasticイージングメソッドを適用します。これは、液体のモーションエフェクトを使用してアニメーションを戻すまで、ボールがx軸上で300ピクセル先に拡張することを意味します。
次のリストに、Tweenのコンストラクタ、Tween（obj、prop、func、begin、finish、duration、useSeconds）のパラメータを示します。
- obj（参照）：Tweenがターゲットとするオブジェクト
- prop（ストリング）：影響を受ける（obj内の）プロパティ名
- func（関数）：トゥイーンに適用されるイージング関数
- begin（数値）：propの最初の値。つまりプロパティの初期値
- duration（数値）：モーション時間の長さ。この値が負の数または省略される場合、値は
infinityに設定される - useSeconds（ブール値）：フレーム数ではなく、秒を使用するかどうかを指定するフラグ
上の最初のコード例は、アニメーションの継続時間を秒数で指定するために使用する設定を示しています。秒を使用する代わりに、いくつかのフレームにわたってシンボルをフェードアウトすることもできます。Tweenクラスで秒数の代わりにフレーム数で継続時間を設定するには、最後のパラメータuseSecondsをtrueからfalseに変更します。パラメータをtrueに設定すると、指定した継続時間を表す単位が秒であることをFlashに伝えます。あるいは、パラメータをfalseに設定すると、継続時間はトゥイーンを使用するフレームの数になります。例えば、次のコードを検討してみます。
import fl.transitions.Tween;
import fl.transitions.easing.*;
var myTween:Tween = new Tween(ball_mc, "alpha", Strong.easeIn, 1, 0, 24, false);
このコード例では、ball_mcインスタンスをStrong.easeInイージングメソッドを使用してフェードアウトさせています。インスタンスを３秒間でフェードアウトさせるのではなく、インスタンスを24フレームにわたってフェードアウトさせています。秒ではなくフレームを使用すると、柔軟性がはるかに高くなります。しかし、継続時間は現在のFlashドキュメントのフレームレートに紐付けられています。Flashドキュメントで12fps（フレーム/秒）のフレームレートを使用している場合は、前のコードスニペットではインスタンスを２秒間（24フレーム/12fps＝２秒）でフェードアウトさせます。しかし、フレームレートが24fpsの場合は、同じコードがインスタンスを１秒間（24フレーム/24fps＝１秒）でフェードアウトさせます。継続時間を表すためにフレームを使用する場合、ドキュメントのフレームレートを変更するときに、ActionScriptを修正せずにアニメーションの速度を大幅に変更できます。
詳細については、『ActionScript 3.0言語およびコンポーネントリファレンス』のTweenクラスの項を参照してください。
トランジションクラスとTweenクラスの使用
トランジションクラスおよびTweenクラスを使用して、ActionScriptでアニメーションをムービークリップとコンポーネントに追加できます。トランジションクラスまたはTweenクラスを使用しない場合は、ムービークリップをアニメーション化したり、ムービークリップのアルファ値や座標値を変更するための独自のコードを作成する必要があります。イージングをアニメーションに追加する場合、ActionScript（および数式）を使用するとすぐに複雑になる可能性があります。ただし、特定のアニメーションのイージングを変更する必要があり、これらの作成済みのクラスを使用している場合は、スムーズなアニメーションを作成するために必要な新しい数式を考えるのではなく、別の種類のイージングクラスを選択してみることができます。
トランジションクラスを使用して、ステージ上で拡大していくムービークリップをアニメーション化するには、以下の手順に従います。
- ファイル／新規作成を選択して、新しいActionScript 3.0ドキュメントの作成を選択します。「OK」をクリックして、新しいFLAファイルを作成します。
- ファイル／読み込み／ステージに読み込みを選択し、FLAファイルに読み込むハードドライブ上のイメージを選択します。イメージはビットマップイメージとしてファイルに読み込まれるため、イメージを手動でムービークリップシンボルに変換する必要があります。「開く」をクリックしてイメージを読み込みます。
- ステージで読み込んだイメージを選択し、修正／シンボルに変換（F8）を選択します。シンボルにimg1という名前を付け、ムービークリップのビヘイビアを設定しているか確認します。シンボルの基準点は、デフォルトではシンボルの左上隅になります（図１を参照）。
- 「OK」をクリックして、ビットマップイメージをムービークリップに変換します。
- プロパティインスペクタを開き（イメージが選択された状態で）、ムービークリップにインスタンス名img1_mcを割り当てます。
- メインのタイムラインのフレーム１を選択します。次のActionsScriptをアクションパネルに追加します。
import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start(img1_mc, {type:Zoom, direction:0, duration:3, easing: Bounce.easeOut});
- 制御／ムービープレビューを選択し、アニメーションをテストします。イメージはすぐに拡大し、元のサイズに戻る前に若干のバウンシングエフェクトがあります。アニメーションの動きが速すぎる場合は、アニメーションの
duration（前のコード例の場合）を１秒から２または３秒に増やします。
イメージが左上隅で固定されているのがわかります。このイメージは右下隅の方向に拡大します。イメージを隅に固定せず、中央から拡大していくようにする場合は、イメージをビットマップから変換するときに（上記の手順２を参照）、シンボルの基準点を変更する必要があります。以下の手順で作業を進めましょう。
- ライブラリパネルから、ステージの現在のムービークリップシンボルの横に、ビットマップシンボルのコピーをドラッグします。
- ビットマップイメージをステージで選択した状態のまま、F8キーを押してシンボルをムービークリップに変換します。シンボルにimg2という名前を付けます。
- ３x３グリッドの中央をクリックし、基準点をビットマップの中央に設定します（図２を参照）。「OK」をクリックします。
- ステージ上の新しいイメージを選択し、プロパティインスペクタでそのイメージにimg2_mcというインスタンス名を付けます。
- メインのタイムラインのフレーム１を選択し、次のActionScriptを既存のコードに追加します。
import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start(img2_mc, {type:Zoom, direction:0, duration:3, easing: Bounce.easeOut});
上記の手順７で継続時間を変更した場合は、このコード例を修正して同じ数値を使用してください。
- 制御／ムービープレビューを選択し、アニメーションをテストします。２つ目のムービークリップは、シンボルの隅からアニメーション化されるのではなく、シンボルの中央から拡大していくようになります。
ここまで説明したきたように、複雑なアニメーションの作成はトランジションを使用すると非常に簡単で、タイムラインでモーショントゥイーンやシェイプトゥイーンを作成する必要はありません。最も重要なのは、イージングメソッドを作成するのに複雑な計算を使用する必要がないという点です。
注意：トランジションの中には、ムービークリップ内の基準点の配置場所が重要な場合があります。基準点を変更すると、SWFファイルでのアニメーションの表示方法に大きく影響する場合があります。
Tweenクラスを使用してオブジェクトをアニメーション化するには、以下の手順に従います。
- 新しいActionScript 3.0ファイルを作成し、tweenWithEvent.flaという名前で保存します。
- レイヤー１を選択し、assetsという名前に変更します。
- レイヤー上にシェイプを描画し、それをシンボルに変換します（F8）。ムービークリップのビヘイビアを選択し、「OK」をクリックします。
- インスタンスにimg1_mcという名前を付けます。
- 新しいレイヤーを追加して、actionsという名前を付けます。
- actionsレイヤーのフレーム１を選択した状態で、アクションパネルを開き、次のコードをスクリプトウィンドウに入力します。
import fl.transitions.*;
import fl.transitions.easing.*;
function finishHandler(event:TweenEvent):void
{
// Place your actions here
trace("MOTION_FINISH time = "+event.time);
}
var myTween:Tween = new Tween(img1_mc, "y", Elastic.easeOut, 0, 250, 3, true);
myTween.addEventListener(TweenEvent.MOTION_FINISH, finishHandler);
注意：このコード例では、アニメーションをリスンするためにイベントハンドラ関数を割り当てて簡単なトゥイーンを作成する方法を示します。イベントは、アニメーション内の様々なポイントに応答することができるタイミングフックです。motionChange、motionFinish、motionLoop、motionResume、motionStartおよびmotionStopのイベントに応答できます。
- 制御／ムービープレビューを選択し、結果を確認します。メッセージ「MOTION_FINISH time = 3」が、ステージ上での
img1_mcのアニメーションが終了した後に出力パネルに表示されます。
詳細については、『ActionScript 3.0言語およびコンポーネントリファレンス』のTweenクラスの項を参照してください。
繰り返しアニメーションの作成
最初のアニメーションが終了した後もボールを動かす必要がある場合はどうすればよいのでしょうか。この処理を実行するには、少なくとも２つの方法があります。１つは、おそらく最もわかりやすい方法で、motionFinishedベントを使用してボールを再アニメーション化する方法です。この方法のほかに、さらに簡単な方法として、TweenクラスではcontinueTo()メソッドを使用できます。continueTo()メソッドでは、トゥイーンしたアニメーションに対して、現在の値から新しい値へ継続するように指示します。このメソッドの機能については次のActionScriptで確認できます。
import fl.transitions.*;
import fl.transitions.easing.*;
var ball_tween:Object = new Tween(ball_mc, "x", Regular.easeIn, 0, 300, 3, true);
function handleFinish(event:TweenEvent):void {
ball_tween.continueTo(0, 3);
};
ball_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);
最初のトゥイーンが終了すると、ball_mcムービークリップのトゥイーンは、元の０ピクセルの位置に戻ります（シンボルの基準点がグラフィックの左側に置かれている場合）。
Tweenメソッドには７つの引数がありますが、実際にcontinueTo()メソッドに渡されるのは２つの引数だけです。continueTo()メソッドに渡されない５つの引数（obj、prop、func、beginおよびuseSeconds）は、Tweenクラスの呼び出しで事前に定義した引数を使用します。continueTo()メソッドを呼び出す場合は、obj、prop、func（イージングタイプ）およびuseSeconds引数がTweenクラスの前の呼び出しと同じであることを前提にします。continueTo()メソッドでは、Tweenクラスの呼び出しからのfinish値を使用し、begin引数の値は指定しません。
独自の連続するアニメーションの作成
アニメーションを、x軸に沿って停止せずに繰り返し継続的にアニメーション化することもできます。また、Tweenクラスは、この種類のアニメーションに対し、適切に指定されたyoyo()メソッドで対応します。yoyo()メソッドはmotionFinishedイベントの実行を待機してから、beginパラメータとfinishパラメータを逆にします。アニメーションは、次の例に示すように再び開始されます。
- ファイル／新規を選択して、yoyo.flaという名前の新しいActionScript 3.0ドキュメントを開きます。
- 矩形ツールを選択し、ツールパネルで線のカラーを「カラーなし」に設定し、塗りのカラーを赤に設定します。ステージ上に、幅が約20ピクセルで高さがステージ全体と同じ高さの矩形を描画します（図３を参照）。
- 選択ツールを選択し、矩形をクリックして塗りを選択します。F8キーをクリックして、シェイプをムービークリップに変換します。シンボルにboxという名前を付け、ビヘイビアをムービークリップに設定し、基準点をデフォルト設定（左上隅に設定）のままとします。完了したら「OK」をクリックします。
- ステージ上の矩形を選択し、プロパティインスペクタでその矩形にインスタンス名box_mcを付けます。インスタンスの選択を解除する前に、x座標とy座標の両方を０ピクセルに設定し、シェイプをステージの左上隅に移動します。
- 新規レイヤーをタイムラインのレイヤー１の上に挿入します。レイヤーの名前をstrokeに変更します。
- 矩形ツールを選択し、ツールパネルで塗りのカラーを「カラーなし」、線のカラーを黒に変更します。
- strokeレイヤーを選択した状態で矩形を描画し、選択ツールを使用して線を選択します。ステージの幅（デフォルトでは550ピクセル）に合わせて矩形の幅を変更し、矩形の高さをステージの高さ（デフォルトでは400ピクセル）に合わせます。次に、線のx座標とy座標を０ピクセルに設定し、線がステージのサイズに合わせてアウトラインを描くようにします（図４を参照）。
- 手順５で実行したように、別の新しいレイヤーを既存の２つのレイヤーの上に挿入します。新しいレイヤーの名前をactionsに変更します。次のActionsScriptをactionsレイヤーのフレーム１に追加します。
import fl.transitions.*;
import fl.transitions.easing.*;
var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth, 3, true);
function handleFinish(event:TweenEvent):void {
box_tween.yoyo();
}
box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);
- 制御／ムービープレビューを選択します。ボックスは左から右にアニメーションし、また最初から繰り返されます。アニメーションがスムーズではない場合は、ドキュメントのフレームレートを12fpsから24fpsに増やすことができます。ムービーをもう一度テストし、アニメーションの変更を確認します。
- ボックスがステージの右端に近づくと、ボックスは手順７で作成した線の外側まで動きます。これはオーサリング環境ではそれほど大きな問題ではないかもしれませんが、Webブラウザでアニメーションを表示した場合（ファイル／パブリッシュプレビュー／HTML）、ステージの右端に近づくと矩形が消えてしまうのがわかります。これを修正するには、矩形を０ピクセルから、ステージの幅から
box_mcムービークリップの幅を差し引いた値の位置までアニメーションする必要があります。これは、手順８のコードを次のように修正して実現することができます。
import fl.transitions.*;
import fl.transitions.easing.*;
var box_tween:Tween = new Tween(box_mc, "x", Regular.easeInOut, 0, stage.stageWidth - box_mc.width, 3, true);
function handleFinish(event:TweenEvent):void {
box_tween.yoyo();
}
box_tween.addEventListener(TweenEvent.MOTION_FINISH, handleFinish);
ここで、アニメーションをテストし、ボックスがステージの境界線から消えてしまう前にイージングを停止する方法を確認します。
３次元空間でのアニメーション
Flash CS4 Professionalの優れた新機能の１つに、２次元オブジェクトを３次元空間でアニメーション化する機能があります（図５を参照）。オーサリング時環境での新規ツール、DisplayObjectクラスの新規プロパティおよびgeomパッケージによって、オブジェクトの遠近法投影が可能になりました。
DisplayObjectクラスの更新されたプロパティ
DisplayObjectクラスの新規プロパティを使用して、図５に示す回転効果をActionScriptで実現できます。スプライトとムービークリップはすべて、ActionScript 3.0の表示オブジェクトです。ユーザは、この言語の旧バージョンでMovieClipオブジェクトのxプロパティとyプロパティを使用することに慣れていることでしょう。Flash CS4 Professionalでは、xプロパティとyプロパティに、深度を表すzプロパティが加わりました。
ムービークリップとスプライトは、次の変換プロパティにアクセスできます。
xyzrotationrotationXrotationYrotationZ
scaleXscaleYscaleZtransform
rotationプロパティが３つの異なるプロパティに分割されただけでなく、従来のrotationプロパティも存在することに注意してください。transformプロパティは、より高度な複数プロパティの変換を行うためのマトリックスを処理できます。
前述したように、前バージョンからの変更点は、新しいzプロパティです。zプロパティは、視点からの距離を表します。zプロパティを100に設定したオブジェクトは、zプロパティを50に設定したオブジェクトよりも、視点から離れた距離にあります。図５に示すように、矩形の上端のz座標が下端のz座標より大きい場合、シェイプは後ろに傾いているように見え、回転効果が生まれます。rotationプロパティを使用すると、２次元グラフィック上で簡単に、このような種類の効果を作成できます。
簡単な３次元アニメーションの作成
rotationプロパティを使用すると、魅力的なアニメーション効果を簡単に作成できます。次の例では、enterFrameループを使用して、２次元オブジェクトの連続アニメーションを３次元空間で生成します。
- ファイル／新規を選択し、3dRotation.flaという名前の新しいActionScript 3ドキュメントを作成します。
- デフォルトレイヤーに、Imageという名前を付けます。
- イメージを読み込むか（ファイル／読み込み／ステージに読み込み）、矩形ツールを使用してステージ上で矩形を描画します。
- イメージまたはシェイプを選択し、imgという名前のムービークリップシンボルに変換します（F8キー）。
- ステージ上で、インスタンスにsq_mcという名前を付けます。
- Imageレイヤーの上に、Actionsという名前の新しいレイヤーを追加します。
- Actionsレイヤーでキーフレームを選択し、アクションパネルを開きます（F9キー）。
- アクションパネルに、次のコードをコピー＆ペーストします。
function enterFrameHandler(event:Event):void
{
sq_mc.rotationY += 5;
}
addEventListener(Event.ENTER_FRAME, enterFrameHandler);
- ムービーをプレビューして（制御／ムービープレビュー）、アニメーションの実行を確認します。imgクリップが、y軸に沿って回転していることに注目してください。視覚的に異なる結果を期待するかもしれませんが、imgクリップが（縦）y軸の周りを回転（スピン）していると思えば理解できます。
- コードに戻って、
rotationY値をrotationZ値に変更します。
function enterFrameHandler(event:Event):void
{
sq_mc.rotationZ += 5;
}
addEventListener(Event.ENTER_FRAME,
enterFrameHandler);
- ムービーをプレビューして、結果を確認します。イメージクリップが、z軸に沿ってスピンしていることに注目してください。z軸は、視点からオブジェクトの中心を通って空間に突き抜ける直線です。
- コードに戻り、
rotationXプロパティとrotationZプロパティを組み合わせて指定して、z軸がパースペクティブに表示されることを確認します。
function enterFrameHandler(event:Event):void
{
sq_mc.rotationY += 5;
sq_mc.rotationZ += 5;
}
addEventListener(Event.ENTER_FRAME,
enterFrameHandler);
- ムービーをプレビューして、結果を確認します。２次元のオブジェクトが、３次元空間内でねじれて表示されていることに注目してください。
注意：ENTER_FRAMEイベントは、すべてのスプライトとムービークリップに含まれています。このような種類のオブジェクトのいずれかのタイムラインにイベントハンドラを追加すると、関連するイベントハンドラ関数は、そのフレームレートで繰り返し呼び出されます。プロパティインスペクタでムービーのフレームレートを変更すると、アニメーションの速度を速くしたり遅くしたりすることができます。
3Dアニメーションへの高度なアプローチ
ActionScript 3.0のgeomパッケージが更新され、3D変換を操作するための専用クラスがいくつか追加されました。
- Matrix3D
- Orientation3D
- PerspectiveProjection
- Utils3D
- Vector3D
Matrix3Dクラスを使用すると、３つの軸をすべて同時に変換することができます。これにより、パフォーマンスとコードの効率性が格段に向上します。PerspectiveProjectionクラスを使用すると、Matrix3Dインスタンスを明示的に作成しなくても、オブジェクトやビューに3D変換を簡単に適用できます。Orientation3D、Utils3D、Vector3Dの各クラスは、3D変換の作成を支援するためのサポートユーティリティとオブジェクトを提供します。
rotationプロパティを使用すると、魅力的なアニメーション効果を簡単に作成できます。次の例では、enterFrameループを使用して、２次元オブジェクトの連続アニメーションを３次元空間で生成します。
- ファイル／新規を選択して、projectionCenter.flaという名前の新しいActionScript 3.0ドキュメントを作成します。
- デフォルトレイヤーにAssetsという名前を付けます。
- 矩形ツールを使用して、ステージ上で幅と高さが約150ピクセルの矩形を描画します。
- 矩形を選択し、整列パネルを使用して、ステージ上のオブジェクトを中央に配置します。
- シェイプを選択して、squareという名前のムービークリップシンボルに変換します（F8キー）。
- ステージ上で、インスタンスにsquare1という名前を付けます。
- インスタンスを選択してコピーし、Control + Shift + Vキーを押して、最初の正方形の上に２つ目の正方形をペーストします。新しいインスタンスにsquare2という名前を付けます。
- 楕円ツールを使用して、幅と高さが約15ピクセルの円を描画します。
- 円を選択して、circleという名前のムービークリップシンボルに変換します。円シンボルの基準点が中央に設定されていることを確認します。
- 円インスタンスにfocalPtという名前を付けます。
- Assetsレイヤーの上に、Actionsという名前の新しいレイヤーを追加します。
- Actionsレイヤーでキーフレームを選択し、アクションパネルを開きます（F9キー）。
- アクションパネルに、次のコードをコピー＆ペーストします。
// Set position in the z axis
square1.z = 200;
square2.z = 500;
// Flag while dragging circle
var isDragging:Boolean = false;
// Change the projection center in relation to the
// circle while it's being dragged...
function dragPressHandler(event:Event)
{
isDragging = true;
focalPt.startDrag();
}
function dragMoveHandler(event:Event)
{
if( isDragging ){
root.transform.perspectiveProjection.projectionCenter = new Point(focalPt.x, focalPt.y);
}
}
function dragReleaseHandler(e:Event)
{
focalPt.stopDrag();
isDragging = false;
root.transform.perspectiveProjection.projectionCenter = new Point(focalPt.x, focalPt.y);
}
focalPt.addEventListener(MouseEvent.MOUSE_DOWN, dragPressHandler);
focalPt.addEventListener(MouseEvent.MOUSE_MOVE, dragMoveHandler);
focalPt.addEventListener(MouseEvent.MOUSE_UP, dragReleaseHandler);
スクリプトが実行する最初の処理は、focalPtインスタンスに対して、２つの正方形を空間（z軸）内で後方に配置することです。focalPtインスタンスについては、z軸の調整はありません。
- ムービーをプレビューして（制御／ムービープレビュー）、アニメーションの実行を確認します。スクリーン内で円をゆっくりドラッグすると、フォーカルポイントの位置を基準に、ルートタイムライン上のオブジェクトの投影が変化するのがわかります。
PerspectiveProjectionクラスの操作の詳細については、Flashドキュメントの「Projecting 3D objects onto a 2D view（２次元ビューへの３次元オブジェクトの投影）」を参照してください。
ボーンツールを使用したアニメーション
Flash CS4 Professionalのもう１つの優れた新機能は、ボーンツールを使用した骨格の作成機能です。 骨格は、クリックまたはアニメーション化したときに、相互に連動して動くように連結されている一連のシンボルまたはシェイプです。アニメーションのこのメソッドをインバースキネマティック（IK）と呼びます。古典的な例として、糸につながれた操り人形があります。人形の手足は、ジョイントで相互に連結されています。操り人形師が糸のどれかを動かすと、そのジョイントに連結された手足は、位置が変わった手足に連動して動きます。
骨格は、Flashのオーサリング環境に新しい視覚状態を追加します（図６を参照）。オブジェクトの中心をつなぐ線をボーンと呼びます。ボーンを連結するジョイントを選択すると、骨格の各セクションに一意のプロパティと制約を適用できるようになります。
骨格の構築
まず知っておくべきことは、骨格は実行時に動的に作成できないということです。骨格は、オーサリング時にFlash CS4 Professionalのボーンツールを使用して作成する必要があります。これは簡単です。
骨格を作成したら、作成した骨格をムービークリップ内に保存し、実行時にActionScriptを使用してアニメーション化できます。プログラムによるアニメーションでは、骨格に関する作業は２つの手順から構成されます。最初の手順では、FlashのFLAファイル内で骨格を構築します。
以下の手順に従って、骨格を作成します。
- ファイル／新規を選択して、armature.flaという名前の新しいActionScript 3.0ドキュメントを作成します。
- デフォルトレイヤーにAssetsという名前を付けます。
- 楕円ツールを使用して、幅と高さが約10ピクセルの円をステージ上に描画します。
- 円を選択し、整列パネルを使用してステージ上のオブジェクトを中央に配置します。
- 円を選択して、シンボルに変換します（F8キー）。基準点が中央に設定されていることを確認します。
- インスタンスを４回複製して、複製したインスタンスを最初の円の上下左右に配置します。左右の円の下に、さらに２つの複製を追加します（図７を参照）。
- ツールバーからボーンツールを選択します。グループの最上部にある円をクリックし、その下にある円までドラッグします。最初のクリックによって、他のすべてのジョイントがヒンジのように動くルートジョイントが定義されます。ボーンマーカーを表すために描画された線に注目してください。
- ボーンツールで円を１つずつクリック＆ドラッグしていき、最終的にすべての円を論理的な順序で連結します。ボーンセクションを選択して「削除」ボタンをクリックすると、ボーンセクションを削除できます。ジョイントの構成によって骨格のビヘイビアが変化する様子は、見ていて楽しいものです。
- ボーンマーカーのエンドジョイントにある円をクリックして、プロパティインスペクタで制約プロパティを編集します。まず、すべての変換プロパティを有効にし、次に制約の追加とプロパティの削除を試します。
- 実行時の操作用に骨格を設定するには、骨格レイヤーの最初のキーフレームをクリックして選択します。プロパティインスペクタで、「種類」オプションフィールドを「オーサリング時」から「実行時」に変更します（図８を参照）。
骨格のアニメーション化
この例では、アニメーションは実際に骨格のビヘイビアの一部として動作します。ムービーをパブリッシュする際には、円をクリックして、円が相互に連動して動くのを確認できます。骨格セグメントの見栄えを整え、魅力あるアニメーションの土台とするには、次のコードを追加して、ActionScriptを使用した骨格の分析とジョイント間の線の描画を行います。
以下の手順に従って、サンプルを完成させます。
- armature.flaファイルに戻ります。
- Actionsという名前の新規レイヤーを作成します。
- Actionsレイヤーの最初のフレームを選択して、アクションパネルを開きます。アクションパネルに、次のコードをコピー＆ペーストします。
import fl.ik.*;
import flash.display.Sprite;
// Retrieve the armature and the root joint
var armInst:IKArmature = IKManager.getArmatureAt(0);
var rootJnt:IKJoint = armInst.rootJoint;
var lineContainer:Sprite = new Sprite();
// Add a container for drawing lines
// to the bottom of the display object stack
addChild(lineContainer);
setChildIndex(lineContainer, 0);
// Traverse the armature and draw lines to
// connect the joint...
function drawConnectingLines(jnt:IKJoint):void
{
var len:uint = jnt.numChildren;
for(var n:uint=0;
n<len; n++)
{
var childJnt:IKJoint = jnt.getChildAt(n);
var childClip1:DisplayObject = getChildByName(childJnt.bone.headJoint.name);
var childClip2:DisplayObject = getChildByName(childJnt.bone.tailJoint.name);
lineContainer.graphics.lineStyle(3, 0xCCCCCC);
lineContainer.graphics.moveTo(childClip1.x, childClip1.y);
lineContainer.graphics.lineTo(childClip2.x, childClip2.y);
drawConnectingLines(childJnt);
}
}
// Update line drawing every frame
function enterFrameHandler(event:Event):void
{
lineContainer.graphics.clear();
drawConnectingLines(rootJnt);
}
addEventListener(Event.ENTER_FRAME,
enterFrameHandler);
- ムービーをプレビューして（制御／ムービープレビュー）、結果を確認します。円をクリックして、様々な場所にドラッグします。移動、および移動に対する制約が、骨格のジョイントの設定に基づいてどのように調整されるのかを観察してください。
- ジョイント値を変更して、結果がどのようになるかも試してみてください。
この機能の詳細については、Flashドキュメントの「About inverse kinematics（インバースキネマティックについて）」を参照してください。
「ActionScript 3.0としてのモーションのコピー」を使ったアニメーションの作成
ActionScript 3.0に関連するもう１つの強力なアニメーション機能に、タイムラインベースのモーショントゥイーンをコピーし、ActionScript 3.0コードとしてペーストする機能があります。Flash CS4 Professionalには、3DアニメーションをActionScriptベースのトゥイーン定義にコピーする機能が新たに加わりました。この機能を使用すると、ActionScriptを初めて使用する場合でも、動的なスクリプトベースのアニメーションコントロールを作成できます。
モーショントゥイーンの次のプロパティをコピーできます。
- ブレンドモード
- カラー
- カスタムイージング
- フィルタ
- モーションガイド
- 位置
- 回転
- 伸縮
- 傾斜
「ActionScript 3.0としてのモーションのコピー」コマンドは、コピーしたトゥイーンプロパティをActionScript定義またはXML定義として適用します。XMLはトゥイーンを記述するための効率的な方法ですが、Flash CS4 ProfessionalではデフォルトでAnimatorFactoryクラスにプロパティ値を配列として適用します。
「ActionScript 3.0としてのモーションのコピー」を使用してアニメーションを作成するプロセスは簡単です。まず、タイムラインに沿ってトゥイーンをビジュアルに作成し、必要なエフェクトを作成します。トゥイーンインスタンスを右クリックすると、「ActionScript 3.0としてのモーションのコピー」または「モーションをコピー」に対するオプションを選択できます。
「モーションをコピー」の使用とアニメーションの適用
ひとまず編集するだけで、トゥイーンのプロパティを保存する必要がない場合は、「モーションをコピー」コマンドを使用してトゥイーンをコピーし、そのコピーを独自のファイルや別のファイルなどにペーストするだけです。
ここでは、「モーションをコピー」コマンドを使用して、トゥイーンアニメーションのプロパティのコピーを生成し、このプロパティを別のファイルのインスタンスに適用します。
オブジェクト間のトゥイーンをコピー＆ペーストするには：
- 新しいActionScript 3.0ファイルを作成し、tween1.flaという名前で保存します。
- ステージの左上隅にシェイプを描画します。
- シェイプを選択してシンボルに変換し（F8キー）、アニメーション化できるようにします。表示されたダイアログボックスで、ムービークリップのビヘイビアを選択し、基準点を中央に設定します。
- インスタンスを右クリックし、「モーショントゥイーンを作成」オプションを選択します。タイムラインがフレーム24まで拡張し、赤色の現在のフレームインジケータがフレーム24に移動します。
- インスタンスを選択し、ステージの右下にドラッグします。
- モーションガイドラインをクリックし、上方向にドラッグしてトゥイーンのパス内に曲線を作成します。
- インスタンスを右クリックし、「モーションをコピー」オプションを選択します。
- 新しいActionScript 3.0 FLAファイルを作成し、tween2.flaという名前で保存します。
- シンボルを作成し、インスタンスを右クリックします。「モーションをペースト」オプションを選択し、コピーしたトゥイーンをペーストします。タイムラインが拡張し、元のトゥイーンと同じ状態を示していることに注意してください。
- 「ムービープレビュー」コマンドを実行し、適用されたアニメーションを確認します。
「ActionScript 3.0としてのモーションのコピー」の使用とアニメーションの適用
トゥイーンを生成するコードを再使用できるようにする場合は、「ActionScript 3.0としてのモーションのコピー」コマンドを使用します。
ここでは、「ActionScript 3.0としてのモーションのコピー」コマンドを使用して、トゥイーンアニメーションのプロパティのコピーを生成し、このプロパティを別のファイルに適用します。
再使用可能なActionScript 3.0アニメーションを作成するには：
- 新しいActionScript 3.0ファイルを作成し、tween3.flaという名前で保存します。
- ステージ上でシェイプを描画し、シンボルに変換します。
- インスタンスにshape_mcという名前を付けます。この手順は特に重要ではありませんが、トゥイーンから生成されたコードにはインスタンス名が含まれています。
- インスタンスを右クリックし、「モーショントゥイーンを作成」オプションを選択します。
- インスタンスを選択し、ステージ上で新しい位置にドラッグします。
- モーションガイドラインをクリックし、上方向にドラッグしてトゥイーンのパス内に曲線を作成します。
- インスタンスを右クリックし、「ActionScript 3.0としてのモーションのコピー」オプションを選択します。
- 新しいActionScript 3.0 FLAファイルを作成し、tween4.flaという名前で保存します。
- 新しいファイルのステージ上でシェイプを作成し、シンボルに変換します。
- プロパティインスペクタでインスタンスにshape_mcという名前を付けます。
- actionsという名前の新しいレイヤーを追加します。
- タイムラインのフレーム１上のキーフレームを選択し、アクションパネルを開きます（F9キー）。手順６でコピーしたコードを、テキストエディタ内にペーストします。コードは、次のようになります。
import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import flash.filters.*;
import flash.geom.Point;
var __motion_shape_mc:MotionBase;
if(__motion_shape_mc == null) {
import fl.motion.Motion;
__motion_shape_mc = new Motion();
__motion_shape_mc.duration = 30;
// Call overrideTargetTransform to prevent the scale, skew,
// or rotation values from being made relative to the target
// object's original transform.
// __motion_shape_mc.overrideTargetTransform();
// The following calls to addPropertyArray assign data values
// for each tweened property. There is one value in the Array
// for every frame in the tween, or fewer if the last value
// remains the same for the rest of the frames.
__motion_shape_mc.addPropertyArray("x", [0,3.97311,8.40006,13.3186,18.7471,24.7331,31.3031,38.4825,46.2956,54.7578,63.8896,73.665,84.0945,95.1365,106.738,118.856,131.428,144.384,157.653,171.187,184.905,198.775,212.74,226.781,240.837,254.924,268.981,283.03,297.043,311]);
__motion_shape_mc.addPropertyArray("y", [0,13.5007,26.857,40.057,53.0306,65.7758,78.2331,90.3444,102.053,113.294,124.016,134.125,143.585,152.323,160.286,167.446,173.783,179.291,183.979,187.877,191.01,193.423,195.157,196.26,196.773,196.742,196.207,195.207,193.776,191.95]);
__motion_shape_mc.addPropertyArray("scaleX", [1.000000]);
__motion_shape_mc.addPropertyArray("scaleY", [1.000000]);
__motion_shape_mc.addPropertyArray("skewX", [0]);
__motion_shape_mc.addPropertyArray("skewY", [0]);
__motion_shape_mc.addPropertyArray("rotationConcat", [0,-4.13792,-8.27584,-12.4138,-16.5517,-20.6896,-24.8275,-28.9655,-33.1034,-37.2413,-41.3792,-45.5172,-49.6551,-53.793,-57.931,-62.0689,-66.2068,-70.3447,-74.4827,-78.6206,-82.7585,-86.8964,-91.0344,-95.1723,-99.3102,-103.448,-107.586,-111.724,-115.862,-120]);
__motion_shape_mc.addPropertyArray("blendMode", ["normal"]);
// Create an AnimatorFactory instance, which will manage
// targets for its corresponding Motion.
var __animFactory_shape_mc:AnimatorFactory = new AnimatorFactory(__motion_shape_mc);
// Call the addTarget function on the AnimatorFactory
// instance to target a DisplayObject with this Motion.
// The second parameter is the number of times the animation
// will play - the default value of 0 means it will loop.
// __animFactory_shape_mc.addTarget(<instance name goes here>, 0);
}
- コードの最後の行からコメントを削除し、
<instance name goes here>テキストを、アニメーション化するインスタンス名に置き換えて、０をアニメーションのループ回数に更新します。
__animFactory_shape_mc.addTarget(shape_mc, 1);
- 「ムービープレビュー」コマンドを実行し、適用されたアニメーションを確認します。
「XML形式でモーションをコピー」コマンドの使用
アニメーションのプロパティをモーションXMLフォーマットで保存する場合は、コマンドメニューの「XML形式でモーションをコピー」コマンドを使用します。
ここでは、「XML形式でモーションをコピー」コマンドを使用して、XMLとコードを生成し、それらを別のファイルに適用します。
ActionScript 3.0 Motion XMLアニメーションを作成するには：
- 新しいActionScript 3.0 FLAファイルを作成し、tween5.flaという名前で保存します。
- ステージ上でシェイプを描画し、シンボルに変換します。
- フレーム20にキーフレームを追加して、タイムラインを拡張します。フレーム20のシェイプのインスタンスを、新しい位置に移動します。必要に応じて、アルファ、回転、変換の各プロパティを変更します。
- インスタンスを右クリックし、「クラシックトゥイーンを作成」オプションを選択します。
- 選択範囲内の２つのキーフレームなどの、クラシックトゥイーンを含めたレイヤー全体を選択します。
- 選択範囲を右クリックし、コマンド／XML形式でモーションをコピーを選択します。
- 新しいActionScript 3.0 FLAファイルを作成します。tween6.flaという名前でファイルを保存します。
- ステージ上でシェイプを描画し、シンボルに変換します。
- ステージのインスタンスにshape_mcという名前を付けます。
- 新しいレイヤーを追加して、actionsという名前を付けます。
- actionsレイヤーの最初のフレームを選択してアクションパネルを開きます。次のコードを追加して、モーションXMLを保持する変数を作成します。
import fl.motion.Animator;
var my_mc_xml:XML =
- 最後の手順の等号記号（=）の後にカーソルを置いて、クリップボードからモーションXMLをペーストします。コードは次のようになります。
import fl.motion.Animator;
var my_tween_xml:XML = <Motion duration="20" xmlns="fl.motion.*"
xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="30" x="80.45" y="83" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">
<dimensions>
<geom:Rectangle left="-35.45" top="-41" width="70.95" height="82"/>
</dimensions>
<transformationPoint>
<geom:Point x="0.4996476391825229" y="0.5"/>
</transformationPoint>
</Source>
</source>
<Keyframe index="0" tweenSnap="true" tweenSync="true">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
<Keyframe index="19" x="326" y="201.95" rotation="135"/>
</Motion>
- モーションXML記述の後に次のコードを追加して、Animatorインスタンス内のトゥイーンを再生します。Animatorクラスのコンストラクタは、モーションXMLインスタンス名とターゲットインスタンス名の２つのパラメータを受け取ることに注目してください。
var my_animator:Animator = new Animator(my_tween_xml, shape_mc);
my_animator.play();
- 「ムービープレビュー」コマンドを実行し、アニメーションの再生を確認します。このプロセスは同じファイル内、またはプロジェクト内の複数のファイルで必要な回数繰り返すことができます。
注意：Flash CS3 ActionScript 3.0 FLAファイル内でトゥイーンを作成するか、クラシックトゥイーンを使用する場合、Flashではトゥイーン記述にモーションXMLを使用するようにデフォルト設定されます。
モーションXMLフォーマットの詳細については、『ActionScript3.0言語およびコンポーネントリファレンス』の「Motion XML Elements（モーションXMLのエレメント）」を参照してください。
BitmapDataクラスを使ったアニメーション
BitmapDataクラスを使用すると、ActionScriptでビットマップイメージを動的に生成できます。BitmapDataクラスは、ビデオやインポートされたイメージの操作に使用するのが最も一般的ですが、それ以外にも、最初からグラフィックをレンダリンクするときや、ベクターデータのコンテンツからグラフィックをレンダリングするときにも使用できます。
この強力なクラスには幅広い用途がありますが、アニメーションにおける最も日常的な用途の１つは、膨大な量のベクターイメージのスナップショットの取得です。これにより統合ビットマップが生成され、より滑らかアニメーション効果を実現できます。ビットマップは、ベクターのようにすべてのフレームで再描画する必要がありません。したがって、このアプローチが使用できれば、膨大な量のベクターデータコンテンツを含むトランジションエフェクトやぼかしエフェクトのパフォーマンスが格段に向上します。
BitmapDataクラスを使用したトランジションを作成するには、以下の手順に従います。
- ファイル／新規を選択して、bitmapdata.flaという名前の新しいActionScript 3.0ドキュメントを作成します。
- デフォルトレイヤーに、Actionsという名前を付けます。
- actionsレイヤーの最初のフレームを選択して、アクションパネルを開きます。
- アクションパネルに、次のコードをコピー＆ペーストします。
import fl.transitions.*;
import fl.transitions.easing.*;
// Generate overlapping vector
// graphics in a Sprite container...
function createRectangle(x:Number, y:Number, w:Number, h:Number):void
{
var sprt:Sprite = new Sprite();
sprt.graphics.lineStyle(Math.random()*2, 0×000000);
sprt.graphics.beginFill(0×00FFCC);
sprt.graphics.drawRect(0, 0, w, h);
sprt.graphics.endFill();
sprt.x = x;
sprt.y = y;
imageContainer.addChild(sprt);
}
var imageContainer:Sprite = new Sprite();
addChild(imageContainer);
// Randomly build 200 of graphics
for(var n:Number=0;
n<200; n++)
{
var useX:Number = Math.random()* 400;
var useY:Number = Math.random()* 400;
var useW:Number = Math.random()* 400;
var useH:Number = Math.random()* 400;
createRectangle(useX, useY, useW, useH);
}
// Tween to fade out
var fadeOut:Tween = new
Tween(imageContainer, "alpha", Strong.easeOut, 1 , 0, 78);
- ムービーをプレビューして（コントロール／ムービープレビュー）、トランジションの再生を確認します。オーバーラップしているベクターをとおして確認できることに注目してください。上記のスクリプトは、ランダムなサイズと位置の矩形を、スプライトコンテナ内のスクリーン上に200個生成します。各フレームで再計算されているベクターシェイプが200個を超えると、アニメーションのパフォーマンスおよび描画上の問題が発生する可能性があります。
- コードに戻って、最後の行を次の新しい内容に置き換えます。
// Take a snapshot of the imageContainer sprite
// so it can be animated as a single bitmap object
// during the transition
var fadeOutTarget:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
fadeOutTarget.draw(imageContainer);
// Paint the BitmapData snapshot to a bitmap
var fadeOutBitmap:Bitmap = new Bitmap(fadeOutTarget);
addChild(fadeOutBitmap);
// Remove the sprite containing the vectors.
removeChild(imageContainer);
// Tween to fade out
var fadeOut:Tween = new
Tween(fadeOutBitmap, "alpha", Strong.easeOut, 1 , 0, 78);
- ムービーを再度プレビューして結果を確認します。統合されたビットマップでは、トランジション中に、ベクターのオーバーラップレイヤーが表示されないことに注目してください。この方法により全体のパフォーマンスが向上するため、他のアニメーションも画面上に同時に表示することができます。また、トランジション中にぼかしのようなビットマップフィルタやPixelBender*フィルタを適用できるという利点もあります。
- 詳細については、Flash ProfessionalドキュメントのBitmapDataクラスの項を参照してください。
次のステップ
この記事では、ActionScriptを使用してアニメーションをいかに簡単に作成できるかを示します。これで、最小限の作業量でリッチメディアプロジェクトに必要なエフェクトを追加することができます。ActionScript 3.0の使用の詳細については、ActionScriptテクノロジセンターでオンラインチュートリアル、書籍からの引用、およびサンプルファイルを参照してください。シンタックスと用途については、Flash Help and Supportセンター内にある詳細な「Flashドキュメンテーション」リンクを参照してください。
様々な種類のアニメーションを作成し、プロジェクトでトゥイーンをどのように再利用できるかを確認してみてください。トランジションクラスとTweenクラスおよび「ActionScript 3.0としてのモーションのコピー」コマンドの使用に慣れてきたら、モーションXML定義の動的な生成に挑戦し、ActionScript 3.0クラスを開発するときにこれらの戦略を適用する新しい方法を見つけてください。
More Like This
- Flash CS4 Missing Manual excerpts: Video, testing and debugging, optimization, and sound
- Personalized video on the web
- Character animation with the Bone tool in Flash
- Creating a simple animation in Flash
- Exploring the new 3D features in Flash CS4 Professional
- Creating a simple document in Flash CS4 Professional
- Advanced character animation in Flash
- Animation in Macromedia Flash: Squash and Stretch
- Building Preloaders and Progress Bars in Macromedia Flash
- Creating an accessible animated presentation in Flash
