アニメーション作成の基本的な流れ

ここではSencah Animatorを使って画像を左から右に動かすシンプルなアニメーションを作成します。まず、FileメニューからNew Project...を選択します。

アニメーションさせるための画面サイズを指定します。Typeのところには、あらかじめいくつかの画面サイズが用意されています。任意のサイズにしたい場合にはSizeで設定することもできます。画面サイズが決まったらCreateボタンをクリックします。

図のような画面になります。

アニメーションを作成する前に保存します。というのもSencha Animatorではassetフォルダ内に画像ファイルなどをコピーするためです。このため、あらかじめプロジェクトを保存しておく必要があります。プロジェクトを保存するにはFileメニューからSave Projectを選択します。

保存するプロジェクトフォルダ名を入力します。その後、Saveボタンをクリックします。

ここでは画像をアニメーションさせるので図に示す画像のボタンをクリックします。

ステージ上でクリックします。クリックすると図のような暫定画像アイコンが表示されます。

ウィンドウ右側には画像に関する情報が表示されています。ここでImage:の欄にある「...」ボタンをクリックします。

配置する画像を選択します。選択したらOpenボタンをクリックします。

画像が配置されます。

画像を左から右に移動するアニメーションを作成するので、最初に画像を左に移動させます。

Timelineメニューから「Add Keyframe at Playhead」を選択します。

図のようにタイムラインに斜線のバーが表示されます。Sencha Animatorでは位置やスケール等に変化がない場合、このように斜線で変化がないことを示します。現時点では画像は同じ位置にあり変化していませんので図のように斜線で表示されています。

次にカレントタイムマーカーを動かして1s(1秒)のところに移動させます。移動させたら、画像をドラッグしてステージの中央に移動させます。

カレントタイムマーカーをドラッグすると、画像も一緒に移動するのがわかります。

アニメーション時間が1秒ではすぐに画像が表示されてしまいます。そこで、3秒間でアニメーションするように変更してみます。これはタイムラインのバーにある●をドラッグして3秒のところまで移動させます。

変更したアニメーションを確認するには矢印で示す再生ボタンをクリックします。これで、期待通りのアニメーションになっていればOKです。

作成したアニメーションは保存しておきます。

次に作成したアニメーションをファイルとして書き出します。Fileメニューから「Export Project...」を選択します。

オプションを設定できますが、ここでは最適化などはせずに、そのまま出力します。Preview Exportボタンをクリックします。

書き出されるHTMLファイルが表示されます。Export Folderボタンをクリックします。

保存するフォルダ名を入力します。Saveボタンをクリックします。

index.htmlファイルと画像ファイルなどが入ったassetsフォルダが作成されます。index.htmlファイルをブラウザ(Google Chrome)にドラッグドロップします。スマートフォンの場合はサーバーにアップロードして動作確認します。

ブラウザ上でアニメーションする事を確認します。問題があれば再度修正してから書き出しを行います。なお、ここで使用したプロジェクトファイルをダウンロードできます。（今回のサンプルをダウンロードする）