HTMLファイルの出力
アニメーションが完成したので、HTMLファイルに出力してブラウザーでも表示してみます。Fileメニューから「Export Project...」を選択し、その後、表示されるダイアログでPreview Exportボタンをクリックします。
Fileメニューから「Export Project...」を選択
Preview Exportボタンをクリック
実際に出力されるHTMLが表示されます。Sencha Animator 1.0ではHTMLファイル内にCSS3とJavaScriptコード一式が収められます。スマートフォンでは同時接続数が少ないクライアントもあるため、なるべく高速に読み込ませるためでしょう。PC向けにCSS3とJavaScriptを分離して出力する機能があればよいのですが、現時点ではないようです。
出力されるHTMLを確認したら「Export to Folder」ボタンをクリックし、保存するフォルダ名を指定します。入力したフォルダ内にHTMLファイルや画像データがまとめて保存されます。
Export to Folderボタンをクリック
HTMLファイルが作成された
出力されたHTMLファイルの動作を確認します。PC上ではGoogle ChromeかSafariでHTMLを開くとアニメーションが始まります。
Google ChromeかSafariで動作確認できる
ところが、ブラウザーでアニメーションを実行すると、先ほど設定したはずのループが機能せず、アニメーションがすぐに終わってしまいます。これでは困りますので、再生が終了したら最初からループするように修正します。Sencha Animatorの画面に戻って、画面下部にあるScenesの領域にある「Scene 1」をクリックして選択します。
Scene 1をクリック
右側のプロパティパネルにシーン設定用の項目が表示され、その中にActionsというカテゴリがあります。Actionsカテゴリ内にEnd:とかかれた文字の右側にポップアップメニューがあります。このポップアップメニューから「Restart Scene」を選択します。
ポップアップメニューからRestart Sceneを選択
あとは先ほどと同様に、Fileメニューから「Export Project...」を選択してHTMLファイルを出力します。出力されたHTMLファイルをGoogle Chrome/Safariのいずれかで開いて動作を確認します。
Safariで動作確認。今度は繰り返し再生される
PC上で動作を確認できたら、スマートフォンでも確認してみましょう。
iPhone 4で動作確認
Android (Galaxy S)で動作確認。iPhoneとAndroidでは多少再生速度に違いがある
◆
次回はSencha Animatorを使って、テキストアニメーションを作成します。
