Cafi Netつながる情報技術
  1. トップ>
  2. Edge Animate の使い方>
  3. スライドショーのタイムライン

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

最終更新日 2013/12/18

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

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

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

スライドショーのタイムラインパネル

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

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

1秒~2秒の間、3秒~4秒の間、5秒~6秒の間で写真が切り替わります。

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

トリガーを追加

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

再生のトリガー

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

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

タイムラインのトリガー

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

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

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

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

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

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

タイトルを入力

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

タイトルは、title タグ(<title>~</title>)に設定されます。

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

スライドショーをパブリッシュ

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

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

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

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

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

アップロードするファイル

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

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

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

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

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