クリック時のアクションを設定する
最後に、スライド画像がクリック（スマートフォンではタップ）されたら、指定したサイトに移動するようにします。ここでは、富士山の画像をクリックしたらWikipediaの富士山のページに移動するように設定します。
クリックの対象となる画像や文字またはグループをクリックして選択し、プロパティパネルのGeneralのカテゴリ→Click action:にあるポップアップメニューから「Open URL in same window」を選択します。
ポップアップメニューから「Open URL in same window」を選択
その下にURLを入力する欄が表示されますので、リンクしたいURLを入力します。
URLを入力する
以上でできあがりです。同様に他の画像もリンクを設定できます。完成したら、Fileメニューから「Export Project...」を選択してHTMLファイルを書き出し、期待通り動作するか確認します。
iPhoneでの実行画面。表示されている富士山の画像をタップすると...
Wikipediaの富士山の項目のページに移動する
テンプレートの利用
Sencha Animatorでは、作成したアニメーションをテンプレートとして保存できます。先ほど作成したスライドショーも、テンプレートとして一度保存しておけば画像を入れ替えるだけで新たなスライドショーを作成できます。
テンプレートとして保存するにはFileメニューから「Save Project As Template...」を選択します。
Fileメニューから「Save Project As Template...」を選択
テンプレート名を入力するダイアログが表示されますので入力します。ここではslide4という名前にしています。
テンプレート名を入力
実際にテンプレートを読み出して使うにはFileメニューから「New Project From Template...」を選択します。
Fileメニューから「New Project From Template...」を選択
テンプレートを選択します。ここではslide4となっていますが、ポップアップメニューをクリックするとSencha Animatorで用意されているテンプレートも表示されます。テンプレートを選択したら「Create」ボタンをクリックします。
ポップアップメニューからテンプレートを選択
すると画像がなく、アニメーション（モーション）だけが設定されているプロジェクトが作成されます。画像を設定するにはタイムラインでの項目をクリックして選択します。画面右側に表示されるプロパティパネルのGeneralカテゴリ内にあるImage:で画像のURLを設定します。
入れ替える画像となる項目を選択
GeneralカテゴリのImage:で「...」ボタンをクリックして入れ替える画像を選択。これで選択した画像が表示される
テンプレートを使わずに画像だけを入れ替えればよい場合には、書き出されたHTMLファイルと同じ階層にassetesフォルダがあります。この中にある画像を差し替えてしまう方法もあります。場合によってはWebサイト上にある画像を利用したいかもしれません。その場合は、GeneralカテゴリのImage:の右側にある画像のURLを入力します。
◆
3回にわたってSencha Animatorについて説明しました。Sencha Animatorを使えばFlashライクなアニメーションを簡単に作成できます。まだ、バージョン1.0なので不足している機能もありますが、今後に期待したいところです。
