これは 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"
に置き換える。

 この新しい行は、このカードにある "MyAnim" アニメーションを実行するものである。

 ティップス: revPlayAnimation コマンドを使ったスタンドアローンアプリケーションを作るときは、必ず Revolution のカスタムアニメーションライブラリを含めなければならない。このライブラリを含めるには Distribution Builder ウィンドウで Resources タブをクリックして、"Animation Libraries" チェックボックスをチェックする。


11. Whatユs next?
さて次は?

 このチュートリアルでの作業を通して、あなたは Animation Manager のたくさんのパワフルなオプションに気が付いただろう。オブジェクトの位置を動かすだけでなく、特定のフレームが実行された時に、カードにメッセージを送ることも出来る。これらのオプションを調べて、Animation Manager の強力な機能を見つけよう!

 あなたは Revolution でアニメーションを作る方法を理解した。次のチュートリアルでは、ユーザーがカードウィンドウをリサイズした時に、オブジェクトの位置を自動調整する Geometry Manager(ジオメトリーマネージャ)の使い方について学ぶ。

 ウィンドウの下部にある "Tutorials" ボタンをクリックして、チュートリアルのリストに戻りなさい。


邦訳/文責:UDI
2002.11.18
2003.01.10

inserted by FC2 system