|
|---|
HTML5/CSS3を使ったアニメーションを作成できるオーサリングツール「Sencha Animator」。本連載ではこれまでSencha Animatorに用意された基本図形や文字だけを使ってアニメーションを作成しましたが、実際には既存の写真やイラストなどの画像を組み合わせることが多いでしょう。そこで、今回は画像を使ってスライドアニメーションを作成します。また、画像がクリックされたら特定のページへ移動する方法も解説します。学習事項をまとめると以下のようになります。
- 画像の読み込みと配置
- グループ化
- フェードイン／フェードアウトの処理
- クリック時の処理
- テンプレートの追加
最初に、画像を1枚だけ読み込んだ状態でフェードイン／アウトする処理の設定方法を解説し、その後、複数の画像を読み込ませる方法、クリック時にページを移動させる処理について説明します。
画像の読み込みと配置
Sencha Animatorを起動し、新規プロジェクトを作成します。今回は起動時のデフォルトサイズである480×320でプロジェクトを作成して一度保存します。Sencha Animatorでは画像データを内部でコピーするため、最初にプロジェクトを保存しないと画像を配置するときに警告が表示されます。
プロジェクトを作成したら、その時点でプロジェクトを保存する
プロジェクトを保存したら画像を配置します。画像を配置するには画像ツールをクリックして選択します。
画像ツールをクリック
画像ツールを選択状態でステージ上をクリックすると、画像が配置されます。表示されている画像はSencha Animatorで設定されている画像になっています。
ステージ上でクリックする。暫定画像が表示される
実際に使用する画像に変更します。画面右側のプロパティパネル内にあるGenralのカテゴリ内にImage:の項目にある「...」ボタンをクリックします。ボタンをクリックするとダイアログが表示され、画像ファイルを選択するとステージ上に配置されます。
Image:の右側にある「...」（画像選択）ボタンをクリック
配置する画像を選択する
ステージに画像が配置される
