このページの本文へ

もうFlashは要らない!?スマホ用CSS3アニメを作ろう (3/3)

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

文●古籏一浩

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

クリック時のアクションを設定する

 最後に、スライド画像がクリック(スマートフォンではタップ)されたら、指定したサイトに移動するようにします。ここでは、富士山の画像をクリックしたらWikipediaの富士山のページに移動するように設定します。

 クリックの対象となる画像や文字またはグループをクリックして選択し、プロパティパネルのGeneralのカテゴリ→Click action:にあるポップアップメニューから「Open URL in same window」を選択します。

【図】fig21.psd

ポップアップメニューから「Open URL in same window」を選択

 その下にURLを入力する欄が表示されますので、リンクしたいURLを入力します。

【図】fig22.png

URLを入力する

 以上でできあがりです。同様に他の画像もリンクを設定できます。完成したら、Fileメニューから「Export Project...」を選択してHTMLファイルを書き出し、期待通り動作するか確認します。

【図】fig23.png

iPhoneでの実行画面。表示されている富士山の画像をタップすると...

【図】fig24.png

Wikipediaの富士山の項目のページに移動する

テンプレートの利用

 Sencha Animatorでは、作成したアニメーションをテンプレートとして保存できます。先ほど作成したスライドショーも、テンプレートとして一度保存しておけば画像を入れ替えるだけで新たなスライドショーを作成できます。

 テンプレートとして保存するにはFileメニューから「Save Project As Template...」を選択します。

【図】fig25.png

Fileメニューから「Save Project As Template...」を選択

 テンプレート名を入力するダイアログが表示されますので入力します。ここではslide4という名前にしています。

【図】fig26.png

テンプレート名を入力

 実際にテンプレートを読み出して使うにはFileメニューから「New Project From Template...」を選択します。

【図】fig27.png

Fileメニューから「New Project From Template...」を選択

 テンプレートを選択します。ここではslide4となっていますが、ポップアップメニューをクリックするとSencha Animatorで用意されているテンプレートも表示されます。テンプレートを選択したら「Create」ボタンをクリックします。

ポップアップメニューからテンプレートを選択

 すると画像がなく、アニメーション(モーション)だけが設定されているプロジェクトが作成されます。画像を設定するにはタイムラインでの項目をクリックして選択します。画面右側に表示されるプロパティパネルのGeneralカテゴリ内にあるImage:で画像のURLを設定します。

【図】fig30.png

入れ替える画像となる項目を選択

【図】fig31.png

GeneralカテゴリのImage:で「...」ボタンをクリックして入れ替える画像を選択。これで選択した画像が表示される

 テンプレートを使わずに画像だけを入れ替えればよい場合には、書き出されたHTMLファイルと同じ階層にassetesフォルダがあります。この中にある画像を差し替えてしまう方法もあります。場合によってはWebサイト上にある画像を利用したいかもしれません。その場合は、GeneralカテゴリのImage:の右側にある画像のURLを入力します。

 3回にわたってSencha Animatorについて説明しました。Sencha Animatorを使えばFlashライクなアニメーションを簡単に作成できます。まだ、バージョン1.0なので不足している機能もありますが、今後に期待したいところです。

前へ 1 2 3 次へ

この連載の記事

一覧へ

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

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