このページの本文へ

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

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

文●古籏一浩

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

 HTML5/CSS3を使ったアニメーションを作成できるオーサリングツールSencha Animator。本連載ではこれまでSencha Animatorに用意された基本図形や文字だけを使ってアニメーションを作成しましたが、実際には既存の写真やイラストなどの画像を組み合わせることが多いでしょう。そこで、今回は画像を使ってスライドアニメーションを作成します。また、画像がクリックされたら特定のページへ移動する方法も解説します。学習事項をまとめると以下のようになります。

  1. 画像の読み込みと配置
  2. グループ化
  3. フェードイン/フェードアウトの処理
  4. クリック時の処理
  5. テンプレートの追加

 最初に、画像を1枚だけ読み込んだ状態でフェードイン/アウトする処理の設定方法を解説し、その後、複数の画像を読み込ませる方法、クリック時にページを移動させる処理について説明します。

画像の読み込みと配置

 Sencha Animatorを起動し、新規プロジェクトを作成します。今回は起動時のデフォルトサイズである480×320でプロジェクトを作成して一度保存します。Sencha Animatorでは画像データを内部でコピーするため、最初にプロジェクトを保存しないと画像を配置するときに警告が表示されます。

【図】fig1.png

プロジェクトを作成したら、その時点でプロジェクトを保存する

 プロジェクトを保存したら画像を配置します。画像を配置するには画像ツールをクリックして選択します。

【図】fig2.psd

画像ツールをクリック

 画像ツールを選択状態でステージ上をクリックすると、画像が配置されます。表示されている画像はSencha Animatorで設定されている画像になっています。

【図】fig3.png

ステージ上でクリックする。暫定画像が表示される

 実際に使用する画像に変更します。画面右側のプロパティパネル内にあるGenralのカテゴリ内にImage:の項目にある「...」ボタンをクリックします。ボタンをクリックするとダイアログが表示され、画像ファイルを選択するとステージ上に配置されます。

【図】fig4.psd

Image:の右側にある「...」(画像選択)ボタンをクリック

【図】fig5.png

配置する画像を選択する

【図】fig6.png

ステージに画像が配置される

前へ 1 2 3 次へ

この連載の記事

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

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

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

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