これは RuntimeRevolution 1.1.1 のヘルプにある文書を邦訳したものです。この文書の文責はUDIにあり、またUDIはこの文書についての一切の債務を負いません。 間違いがありましたら eudio@chabashira.co.jp までお知らせ下さい。この文書は必要と思われる時に適宜アップデートされます。
Help -> Tutorials -> The Animation Manager
1. Before you start
始める前に
このチュートリアルを始める前に、Revolution でアプリケーションを作る方法を修得しておくために、最初のチュートリアルである Getting Started を済ませておかなければならない。各ツールの使い方、オブジェクトの作り方、そしてスクリプトの書き方を知っておく必要がある。
このチュートリアルを始める前に、前のチュートリアルで使った "Hello World" スタックを開いておきなさい。
ティップス: 知らない用語が出てきたら、そこにマウスポインタを当ててみなさい。もし単語の色が変わったら、それをクリックすれば用語の説明を開くことが出来る。
各ステップが終わったらこのウィンドウの右下にある右向き矢印ボタンをクリックして、次のステップに進みなさい。
2. Introducing the Animation Manager
Animation Manager について
最初のチュートリアルでは move コマンドを使った簡単なアニメーションを実装した。 move コマンドはオブジェクトをスクリーン上のある点から別の位置に直線的に移動させるものである。
しかし複数のオブジェクトを同時に移動させたい時はどうしたらいい? 単純な直線ではなく、オブジェクトをカーブに沿って、或いは複雑な経路に沿って動かすにはどうしたらいい? Animation Manager はこれらの他にも、たくさんの機能を持っている。
最初のチュートリアルでは、スクリーンの外にあるフィールドをカードのセンターに移動させるスクリプトを書いた。このチュートリアルでは Animation Manager のシンプルかつ強力な機能を使って、いくつかの面白い変更を加える。
3. Choosing an object to animate
アニメーションさせるオブジェクトを選ぶ
Animation Manager を開くには、Tools メニューから "Animation Manager" を選択する。すると Animation Manager パレットが開く。
新しいアニメーションを作る前に、まずアニメーションさせるオブジェクトを1つ以上選択しておかなければならない。ここでは フィールド "My Field" をアニメーションさせたいので、これを選択する。もしフィールドが画面上に無かったら、"Show Me!" ボタンをクリックしてフィールドを画面上に出しなさい。フィールドが現れたら Tools パレットの Pointer ツールを選んで、"My Field" をクリックして選択する。
ティップス: "Add Selection to Palette" ボタンを使えば、アニメーションさせるオブジェクトをあとから追加することも出来る。
4. Creating a new animation
新しいアニメーションを作る
新しいアニメーションを作るには、Animation Manager の左上にある "New..." ボタンをクリックする。すると新しいアニメーションの名前を尋ねるダイアログが現れる。このチュートリアルでは名前を "MyAnim" と入れて OK ボタンをクリックする。
(アニメーションに、アルファベットとアンダースコア(_)から成る長い名前を付けることも出来る。ただし先頭に数字は使えない。また Transcript 言語の用語と同じ名前は付けられない)
新しいアニメーションを作ると、Animation Manager の左にあるリストにフィールドの名前が現れる。そしてパレットのタイトルバーに、今作業しているアニメーションの名前が反映される。
次に、フィールドをアニメーションさせるために、timeline をどう使うのか見てみよう....
5. Introducing the timeline
timeline とは
timeline (訳注:直訳では「スケジュール」のこと)とは、パレットの右側に表示されているグリッドのことで、Animation Manager の心臓部である。
左上のセル( timeline の最初のカラム:column であり、最初の列:row )に縦のバーがある。このバーは、このフレームがキーフレーム(あなたがオブジェクトの位置や見せ方を変化させたフレーム)であることを示している。(最初のフレームは常にキーフレームである)
アニメーションを作るにはまずフレームをクリックし、それからオブジェクトの位置や見せ方を指定する。これによって、あなたの指定したフレームはキーフレームに変わる。そしてアニメーションを実行すると、Revolution は2つのキーフレームの間を滑らかに繋ぐ。
この様子を見てみよう....
6. Setting the key frames
キーフレームの設定
最初に、最初のフレームでフィールドの位置をセットする。 Animation Manager の上部にある "Current Frame" ボックスに 1 を入れる。(または timeline の最初のカラムをクリックする) スタックウィンドウで "My Field" フィールドを文字が見えなくなるまで左に移動して、フィールドの端だけが見えている状態にしなさい。この位置が最初のキーフレームにセットされる。
次に、フレーム 20 のフィールド位置をセットする。 timeline の 20 番目のフレームをクリックして、これをカレントフレームにする。スタックウィンドウのフィールドをウィンドウの中央へ移動する。フィールドの位置を変えると、Revolution が 20 番目のセルに、それがキーフレームであることを示すバーを表示する。
アニメーションを実行すると、Revolution は2つのキーフレーム( 1 と終わりの 20 )を読んで、2-19 フレームのフィールド位置を自動的に補完する。
次のセクションでは、このアニメーションがどのように実行されるのかを見てみる。
7. Playing the animation
アニメーションを実行する
このシンプルなアニメーションを実行させるには、playback コントロールを使う。Animation Manager の右上にあるこのコントロールは、ビデオやカセットプレーヤのコントローラによく似ている。
まず Rewind ボタン( playback コントロールの一番左)をクリックして、アニメーションを最初のフレームへリセットする。それから Play ボタン(右側にある前進矢印)をクリックする。最初のフレームで指定した位置から、20 番目のフレームの位置まで、スクリーンを横切ってフィールドがスムーズにスライドする様子が見られただろう。(アニメーションを実行しているあいだ、カレントフレームを示すために、選択されたフレームが timeline 上を移動することに注目)
アニメーションがうまくいったら、これをもう少し良くするためにちょっとしたものを付け加えよう....
8. Adjusting the acceleration
速度を調整する
Animation Manager の便利な機能のひとつに、オブジェクトの動きに加減速を加える機能がある。このアニメーションに、フレーム 20 の位置に落ち着く前にスローダウンするような動きを加えてみる。
最初にフレーム 1 をカレントフレームにする。次に Animation Manager パレットの左下にあるディスクロージャートライアングルをクリックして、キーフレームのオプションタグを表示させる。
Acceleration タブをクリックしてタブメニューから "Decelerate" を選ぶと、どれくらいの早さで減速させるかを決めるスライダーがある。とりあえずスライダーを右から 2/3 の辺りへ移動させなさい。
9. Testing the final animation
完成したアニメーションをテストする
先ほどと同じようにして、減速処理を加えたアニメーションをテストすることが出来る。
まず Rewind ボタン、それから Play ボタンをクリックする。するとフィールドが最初は速く、そしてフレーム 20 の位置に近づくにつれてだんだん遅く移動するアニメーションを見ることが出来る。
希望通りのアニメーションになったら、Animation Manager を閉じなさい。
これでアニメーションが出来た。これをスクリプトから実行させるにはどうしたら良いだろう? その方法を見てみよう....
10. Using an animation in a script
スクリプトからアニメーションを使う
Revolution にはアニメーションのためのカスタムコマンドのライブラリがあり、それらは Revolution を使っている時に常に利用できる状態にある。Revolution ライブラリの中にあるコマンドは "rev" で始まる。アニメーション実行コマンドは revPlayAnimation である。
"Hello World" スタックにコマンドを追加するには、"Show Me!" ボタンのスクリプトを開き、
move field "My Field" to the location of this cardという行を
revPlayAnimation "MyAnim"に置き換える。