タイムラインアニメーションというものは，メイン（_root）のタイムラインだけを使って作成するものだけを指すわけではありません。 　次のサンプルでは，メインのフレームはフレーム1のみしか使用していません。 　また，使用している ActionScript も gotoAndPlay() のみです。     　サンプル作成や説明に使っている ParaDraw のバージョンは Ver.0.3a4，Suzuka のバージョンは Ver. 0.7.4.1[リッチエディット版] です。 　このサンプルと以下の説明は，タイムラインの制御 で書いた「スプライトのタイムラインを使う」ということについての，基礎的なほんの一例の補足です。 　モミジ や イチョウ を動かすこと自体にはスクリプトなど使用していません。使用しなくても，妙な動きをする葉を，無限ループでランダムっぽく動かすことはできます。 　以下は上のサンプルを作る Suzuka での作成手順です。   　Suzuka の前に，ParaDraw で 100×100px のモミジとイチョウの葉は作成してあって，すでに Suzuka のシンボルリストに追加してある状態であるものとします。 　モミジスプライトの作成方法です。 　モミジの画像は 100×100px なので，そのサイズと同じスプライトを作成します。 　まずは，スプライト内でモミジの葉を単純に回転させるアニメーションを作成します。 　スプライトを作成しましたら，そのモミジスプライト内のタイムラインの編集に移ります。 　そして，モミジスプライト内のタイムラインのフレーム1にモミジの葉の画像を配置します。 　そして，モミジの葉の座標と制御点を，スプライトの大きさの半分である 50px に設定します。 　トゥイーンでものを動かすとき，この「制御点」が動きの基準ポイントになるからです。 　その座標と制御点を 50px に設定したスプライトのフレームを選択してコピーし，トゥイーンで動かす先のフレームに貼り付けします。 　これで，設定ごとそのままの画像が違うフレームにも複製できます。 　貼り付けた方の葉を選択して，角度を 360°に設定します。 　そして，フレーム1を選択して，「トゥイーン」にチェックを入れれば，360°時計回りに回転するモミジの葉のアニメーションが作成できます。 　反時計回りに回したい場合は，-360°に設定すれば良いと言うことになります。 　上のままでも，一応 360°回転するのですが，0°と 360°が同じ角度で重なってしまいます。 　そこで，同じ角度の重複を防ぐために，アクションレイヤーの最終フレームをキーフレームにして，そこに， 　　gotoAndPlay(1); 　を書きます。 　これで，最終フレームは表示されることなく，フレーム1 に戻るので，ちょうど上を向いた角度 0°と 360°の重複表示は防ぐことができます。 　ここまでの「モミジ」スプライトをメインのレイヤーに配置して，「SWFファイルの生成」をしたものが左の Flash です。 　上では「葉が時計回りに回転するアニメ」しかできていません。 　さらに「手前向こうの上下回転」を加えたいのですが，これをするには，「葉が時計回りに回転するアニメ」をさらにスプライトの中に入れて，「葉が時計回りに回転するアニメ」のスプライトごと，「手前向こうの上下回転」をさせます。 　スプライトを入れ子にすると，複合的な動きを作成することが可能になります。 　この「スプライトの入れ子によって，動きを足し算する。」ということは，タイムラインアニメーションの基礎的なテクニックの１つです。 　「葉が時計回りに回転するアニメ」を入れる親スプライトを作成します。 　その親スプライト内の編集に移り，上で作成した「葉が時計回りに回転するアニメ」をレイヤーに追加します。 　そして今度も，座標と制御点を，スプライトの大きさの半分である 50px に設定します。 　それを，４箇所のフレームにコピー貼り付けします。 　そして，複製した１つ目（左から２つ目）のスプライトを選択して，倍率のチェックをはずし，倍率(H) を 0 にします。 　次に，複製した２つ目（左から３つ目）のスプライトを選択して，倍率のチェックをはずし，倍率(H) を -1 にします。 　これでスプライトは上下反転しますね。 　複製した３つ目（左から４つ目）のスプライトも，倍率のチェックをはずし，倍率(H) を 0 にします。 　これで，見た目疑似的に「手前向こうの上下回転」をさせています。 　そしてそれぞれのフレームをトゥイーンでつないで，スクリプトレイヤーの最終フレームのキーフレームに，また， 　　gotoAndPlay(1); 　を書きます。 　理由は上で説明した理由と同じです。 　こういった回転をさせるときは，シンプルなトゥイーンでは不自然に見えます。 　上下に伸びきった辺りでは動きは遅くするようにして，偏平になるほど動きを速くしてやると，スムーズな回転に見えます。 　そのために，イージング（速度変化）を使います。 　この場合は，SWF8 以降でしか使えないカスタムイージングの機能は特に必要ありません。普通のイージングで十分です。 　最初は「徐々に速く」動くようにすれば良いので，イージングを -200 くらいにします。 　次は「徐々に遅く」動くようにすれば良いので，イージングを 200 くらいにします。 　その次はまた，-200，そのまた次は 200 です。 　ここまでの「モミジ親」スプライトをメインのレイヤーに配置して，「SWFファイルの生成」をしたものが左の Flash です。 　この「モミジ親」スプライトをさらに「モミジ爺」スプライトの中に入れます。 　そしてその中でトゥイーンを使って大きく位置を変化させます。 　このようなスプライトをたくさん作って，たくさんメインのレイヤーに配置すると，このページの最初にあるような，「妙な動きをする葉が，無限ループでランダムっぽく動く」 というアニメーションが作成できます。 　この方法は，このページの続き「炎のエフェクト」でも使用しています。   　サンプルでは，メインのフレーム1しか使っていません。つまり，メインのタイムラインに依存しない葉の動きが作成できたということになります。 　したがって，この葉がランダムっぽく動くアニメーションを背景として，別のストーリーがメインのタイムラインでアニメーションするということも可能になります。 　一見スゴイと思うような動きでも，単なるスプライト（ムービークリップ）の入れ子による「動きの足し算」である場合が多いです。 　また，大きな企業サイトの Flash でも，こういうテクニックはかなり使われています。 　「ものの動き」に関しては，変なActionScriptより，むしろこういうテクニックの方が多く使われていると思います。 　また，「モミジ爺」スプライトまでは作らず，「モミジ親」スプライトまでは手動で作成して，その後，ActionScript でランダムに出没させて動かしても良いと思います。 　その反対に，「モミジ爺」をさらに「モミジ爺々」スプライト内にたくさん配置して，持ち運びに便利にしても良いと思います。 　Flash は，ActionScript などというものが全てではありません。

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso035.zip」 4.94 KB (5,068 バイト)