このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第76回

iPhoneでも動くアニメが作れるSencha Animatorの使い方

2011年11月14日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

シーンをつなぎ合わせる

 ここまでの操作で各シーンのアニメーションができましたが、このままHTMLファイルを出力するとScene 1だけのアニメーションが再生され、他は再生されない状態になります。そこでシーンの再生が終了したらどうするかを指定する必要があります。

 画面下部のScenesの部分でScene 1をクリックして選択すると、画面右側にシーンのプロパティパネルが表示されます。Actions欄にあるEnd:でシーンの再生終了時どのようにするかを設定します。単純に次にシーンを再生する場合は「Go to next scene」を選択します。

【図】fig32.png
Go to next sceneを選択

 同様にScene 2を選択した状態で、プロパティパネルから「Go to next scene」を選択します。最後のScene 3の場合は次にシーンがありませんから、最初のシーンに戻るように「Go to scene」を選択し、Scene:の欄でScene 1を選択します。これで、Scene 3の再生が終わると自動的にScene 1に戻ります(*1)。

【図】fig33.png
Go to sceneを選択
【図】fig34.png
Scene:からScene 1を選択

 あとはHTMLファイルに書き出して、スマートフォンで動作を確認すれば完成です。

【図】fig35.png
iPhoneで動作させた場合
【図】fig36.png
Android (Galaxy S)で動作させた場合

 次回は、画像を使ったアニメーションを作成します。

*1 Sencha Animator 1.0では再生後に画面が真っ白になってしまい、指定したシーンに戻らないようです。出力されたHTMLファイル内にある「controller.startSceneByID(undefined)」の文字を探し、「controller.startSceneByID(0)」に修正すると最初のシーンに戻って繰り返し再生されるようになります。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く