Step1.はじめの一歩

○キーフレームアニメーション

このままではおもしろくないので、少しだけ動きをつけてみましょう。MoPeeの「キーフレームアニメーション」の機能を利用します。「キーフレームアニメーション」とは、「キーフレーム」と呼ばれる特定のフレームにのみ表示位置の情報を持たせ、キーフレームとキーフレームの間では、位置を補完することで平行移動させるための手法です。すべてのフレームについて位置情報を作る必要がないので、アニメーション作成時の手間とデータ量を削減につながります。

先ほど作成したイメージシーケンスの一番先頭(左端)のフレームを右クリックするとメニューが現れますので、その中の[キーフレームの追加]を選択します。

これで先頭フレームが「キーフレーム」になり、マークがつきます。

同じように最後（右端)のフレームもキーフレームにします。

もしキーフレームの設定位置を間違った場合には、そのフレームで右クリックして現れるメニューの[キーフレームの削除]を実行することで、削除してやり直すことができます。

それぞれのキーフレームでの、ロボットの画面上での表示位置を指定しましょう。 一度、最初のキーフレームをクリックします。すると青いラインが10フレーム目(10の目盛りのところ)に来ます。

この状態で「ステージ」ウィンドウを開くとこのようになっているはずです。「ステージ」ウィンドウは、あるフレームでの、iアプリの表示状態を表しています。

この図では10フレーム目(シーケンスの先頭)で、キャスト「robo」が座標(0,0)に表示されるということを示しています。このステージ上でキャストをドラッグして表示位置を調整することができますは、ひとまずこのままにして、コードウィンドウに移り、今度は最後のフレームをクリックしましょう。

再度ステージウィンドウに注目すると、先ほどと何ら変化のなさそうな画面になっているはずです。この状態で「robo」をドラッグして右端に移動させてみましょう。

シーケンスに表示されていたものと同じキーフレームマークが2つと、その間にライトグリーンの線が描かれています。この線が、キーフレームの間で、キャラクタがどのように動くかの軌跡を表しています。この場合は、左から右へと水平移動するというわけです。 さて、この状態でプレビュー再生してみましょう。再生ボタンを押すと左から右へとロボが動いて行くのが見えるはずです。

完全に右端まで到達する前に止まってしまいますが、あまり気にせずに「キーフレームアニメーションができた」と思ってください。

ここまでのところ：01-01.mop　キャストが1方向に移動する