画面構成とアニメーション作成の手順
Sencha Animatorを起動すると以下のような画面になります。画面中央にあるのがステージです。このステージ上にテキストや画像を配置して、アニメーションを設定していきます。ステージの下にあるのがシーンで、Sencha Animatorでは複数のシーンを作成して、シーンを組み合わせたアニメーションが作成できます。
画面上部にあるのがタイムライン、画面右側がアニメーションするオブジェクトのプロパティ値やプロジェクトなどを設定する部分です。画面のもっとも左側にあるのがツールで、画像や文字を配置したり移動したりするツールが並んでいます。
Sencha Animatorの画面構成
Sencha Animatorの基本的な手順を見てみましょう。Sencha Animatorでは以下の手順で最終的なアニメーションファイル（HTML）を出力します。
- 素材を用意する（四角形、円、角丸四角形、テキストのみであれば用意しなくてもよい）
- 素材やテキストを配置
- 配置した素材に動きをつける（アニメーション設定）
- アニメーションが複雑な場合は新規にシーンを作成し2．へ
- HTMLファイルを出力
最初に、四角形が左から右に移動するシンプルなアニメーションを作成してみましょう。ツールから四角形ツール（Rectangle Tool）をクリックして選択します。
四角形ツールをクリックして選択
ステージ上でドラッグして四角形を描画します。四角形を描くとツールは自動的に選択ツールになります。
ステージで四角形を描画
ステージ上にある四角形をドラッグしてステージの左側に動かします。ここがアニメーションの開始位置になります。
四角形をステージ左端に移動
キーフレームの設定
アニメーションさせる要素をステージに配置したら、キーを設定します。Timelineメニューから「Add Keyframe at Playhead」を選択して、現在の再生ヘッドがある部分にキーを設定します。新規の場合は、0秒の位置に再生ヘッドがあるものとして、0秒にキーが設定されます。
キーを設定する。新規に手順通り作成していけば0秒のところにキーが設定される
キーが設定されるとタイムラインに●が表示されます。これが設定されているキーを示しています。
タイムラインにキーが追加される
キーが設定されたらタイムラインの1sにあるキー（●）をクリックします。クリックするとキー（●）が白くハイライトされますので、この状態で四角形を右端まで移動させます。右端まで移動させるとタイムライン上のキーの間にあるバーが水色に変化します。タイムラインで動きがある場合は水色で、動きがない場合は水色の斜線のバーが表示されます。
1sの●をクリックして選択。その後、四角形を右端まで移動させる
タイムライン部分では四角形に動きがあることを示す水色のバーになる
これで四角形が左から右に移動するアニメーションができました。
作成したアニメーションの動きを確認してみましょう。画面中央にある再生ボタンをクリックすると、四角形が左から右に移動するはずです。
再生ボタンをクリックするとアニメーション再生が始まる
作成したアニメーションは1回のみ再生され、繰り返し再生されません。そこでアニメーションが繰り返し再生されるようにします。
画面中央にあるループボタンをクリックすると、ループする／しないが交互に切り替わります。ループするように設定してから再生ボタンをクリックすると、アニメーションが延々と再生されるのを確認できます。
ループボタンをクリックすると、ループする／しないを切り換えることができる
作成したアニメーションはわずか1秒で四角形が左から右に移動してしまい、ちょっと速すぎるかもしれません。そこで、今度は3秒かけて四角形が左から右に移動するように変更してみましょう。変更はとても簡単で、タイムラインで1sのところに表示されているキー（●）を3sのところまでドラッグするだけです。ドラッグした後に再生ボタンをクリックすると、今度はゆっくりと四角形が左から右に移動します。
キーを3sのところまでドラッグする。再生ボタンをクリックして動きを確認する
以上で、四角形が左から右にアニメーションするサンプルが完成しました。アニメーションが完成したらファイルに保存します。Fileメニューから「Save Project」を選択し、プロジェクト名を入力して保存してください。
プロジェクトを保存する
