|
| Suzuka 基礎・基本 ものをトゥイーンで動かす |
|
スプライトやボタンの作成方法に続いて，ものをトゥイーンで動かす方法の説明です。説明に使っているSuzuka のバージョンは Ver. 0.7.2 です。 Suzuka はタイムラインベースの Flash 作成ソフトと言われているように，タイムラインを使って絵や写真を動かせば，ほとんど ActionScript(アクションスクリプト) という言語を使用することなく簡単にアニメーションが作成できます。ノープログラミングで主観的で簡単にアニメーションが作成可能であるということです。 タイムラインで絵や写真などを動かしたり，色などの状態を変化させたりするのには，普通は「トゥイーン」を使用します。 この説明は，前の「スプライトやボタンを作る」で作成したスプライトやボタンをベースとしてアニメーションを作成して行きます。 |
 |
まず，トゥイーンで動かすスプライトの「青玉」と「back.pdr」という背景用の画像をシンボルリスト内に用意して，両者をレイヤーに追加します。 |
 |
このサンプルでは「青玉」をキャンバスの左から登場させて，右へ退場させる動きを作ろうとしているため，まずは「青玉」をキャンバスの左横に配置します。 |
 |
次に「青玉」のあるレイヤーのフレーム1を選択して「右クリック」→「コピー」を選択します。 |
 |
30フレームかけて左から右に動かしたいので，同じレイヤーのフレーム30を選択し，「右クリック」→「貼り付け」で青玉スプライトを フレーム30 にも複製します。 |
|
「フレームとは何？」と思われるかもしれませんが，フレームとはアニメーションの１コマに当たるものです。 アニメーションを１フレーム（１コマ）進める時間は，「ファイル」→「プロジェクトのプロパティ」の「FPS」の値で設定します。FPS は Frame Per Second の略で，「フレーム/秒」つまり，１秒間に何フレーム進めるかというフレームレートの単位です。 フレームレートはデフォルトでは 12 FPS になっていますが，これは１秒間に12フレーム進むアニメーションということになります。 このサンプルの場合は，「青玉」を30フレームで左から右に動かそうとしているのですから，「青玉」は 30/12 ＝2.5秒間 でキャンバスの左から右に動きます。 複雑な画像データを表示させたり，複雑な計算をさせたりするほど，再生時のフレームレートは低下します。また，低スペックな PC ほど計算処理が遅いのでフレームレートは下がります。FPS は，あくまでも理想環境で動作する場合の目安の値だと思ってください。厳密なものではありません。 |
|
 |
そして，フレーム30の「青玉」をキャンバスの右端に移動させます。これが動作の終了点です。 |
 |
青玉レイヤーのフレーム1を選択し，下の「スプライト：青玉」パネルで「トゥイーン」にチェックを入れます。 すると，青玉レイヤーフレーム1からフレーム30までが薄い赤で結ばれます。 |
 |
背景画像用のレイヤーのフレーム1は「固定表示」を選択します。 これで，自動的に「青玉」のあるフレームには「背景」も存在するようになります。 |
|
この状態で，「ファイル」→「SWFファイル生成」をしたものが次の Flash です。
動かしたい物の最初のフレームと位置などを指定 これだけでアニメーションが作成できます。 上のものを少しだけ発展させてみます。 「青玉」のフレーム30をダブルクリックしてフレーム60にドラッグします。 上では適当に フレーム30 を終点としただけで，フレーム30 はいつでも変更可能です。 |
 |
また，「青玉」同様に「赤玉」もシンボルリストに追加し，レイヤーに挿入します。 そして「赤玉」は「青玉」と逆に，キャンバスの右から左に動くようにトゥイーンさせます。 |
|
そして，「ファイル」→「SWFファイル生成」をしたものが次の Flash です。
このように，複数のものに対して同時に違う動きをさせることもできます。 これだけでアニメーションが作成できます。
上までのものだと，無機質な「青玉」と「赤玉」が一定の速さで動くだけなので，少し変わった変速をさせてみます。 |
 |
「青玉」や「赤玉」レイヤーのフレーム1を選択して，「カスタム」にチェックを入れ「編集」をクリックします。 |
 |
すると，カスタムイージングのパネルが出てきますから，線を右クリックして「制御点追加」で制御点を２箇所追加します。 |
 |
そして，適当に線をくねらせて「OK」をクリックします。 |
|
「青玉」，「赤玉」とも同じような曲線にして，「ファイル」→「SWFファイル生成」をしたものが次の Flash です。
速度の変化を付けただけですが，微妙に「すれ違って振り返るかつての恋人どうし(もう戻ることはない)」という感じがしませんか？(そんな感じがするのはささきちだけ？？？） カスタムイージングを使った場合は SWF8 以上の Fash ファイルに書き出す必要がありますが，これを使うと簡単に動きに表情が付けられます。ActionScript などのプログラミングでは，なかなかこういう動きは作れません。タイムラインならではの主観的な動きを簡単に作成できます。 |
サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso021.zip」 3.31 KB (3,391 バイト)