スライドショーのアニメーション

最終更新日 2013/12/18

イージングの設定に続いて、スライドショーのタイムラインパネルです。

Adobe Edge Animate CC を使って、スライドショーを作成します。

「公式サイト：Learn Edge Animate CC | Adobe TV」

上の画像は、３枚の写真が切り替わるスライドショーです。

今回は、プロパティパネルの不透明度で切り替えました。

１秒～２秒の間、３秒～４秒の間、５秒～６秒の間で写真が切り替わります。

６秒では、一番上の写真のコピーが表示されます。

スライドショーが繰り返し再生するように、６秒の位置に再生ヘッドを合わせてトリガーを追加します。

上の画像のように、トリガーを設定するダイアログボックスが表示されます。

再生ボタンをクリックすると、自動的にコードが追加されます。

上の画像のように、タイムラインにトリガーが追加されました。

トリガーをダブルクリックすると、トリガーを設定するダイアログボックスが表示されます。

トリガーは、マウスを使って移動できます。

トリガーを右クリックすると、カット／コピー／削除を実行できます。

トリガーを選択して、Delete キーで削除することもできます。

ファイル／ブラウザでプレビューをクリックすると、ブラウザでスライドショーを確認できます。

Stage を選択して、プロパティパネルでタイトルを入力します。

タイトルは、title タグ（<title>～</title>）に設定されます。

新規作成したファイルのタイトルは「無題」になっているので、適切なページタイトルに変更します。

スライドショーが完成したので、パブリッシュ（最適化して書き出し）してアップロードします。

ファイル／パブリッシュ設定をクリックすると、パブリッシュ設定ダイアログボックスが表示されます。

パブリッシュターゲットは「Web」で、今回はオプションを全て選択しました。

テキストがないので、静的 HTML としてコンテンツをパブリッシュは、どちらでも良いかと思います。

オプションを選択したら、パブリッシュをクリックします。

上の画像のように、publish フォルダが作成されます。

web フォルダに作成されたファイルを、Adobe Dreamweaver でリモートサーバーにアップロードします。

ウェブサイトの公開が完了して、インターネットで閲覧できるようになりました。

今回の解説で作成したスライドショーはこちらです。

シンプルなスライドショーですが、制作のヒントになりましたら幸いです。