Animate を起動します。開始ウィンドウが表示されます。
Edge Animate で作成したアニメーションやロール効果で、リッチでインタラクティブな Adobe Muse Web サイトの作成方法を学習します。
Adobe Edge Animate は、HTML5 などの Web 標準を使用して、アニメーション化したコンテンツを Web サイトに持ち込むことができるようにする Web 対話操作デザインツールです。Animate 内の直観的なタイムラインインターフェイスを使用して、すべての最新のブラウザーで表示したときに再生できる、感動的な HTML5 アニメーションを視覚的に制作できます。
Animate でのアニメーションの準備
Animate コンテンツを Muse に挿入する前に、いくつかの変更を行って Animate ファイルを準備し、Muse にシームレスに埋め込めるようにすることができます。次のいずれかの操作を行います。
-
-
「ファイルを開く」をクリックし、ダウンロードした拡張子 .an のサンプルプロジェクトファイルを探して選択します。または、必要に応じて、自分で作成した Animate ファイルを開きます。
開始ウィンドウで「ファイルを開く」リンクをクリックします。 -
「開く」をクリックして .an ファイルを開き、開くダイアログボックスを閉じます。Animate ワークスペースにプロジェクトが表示されます。
Animate プロジェクトがステージに表示されます。 Animate を使用して作成したアニメーションは、自動再生（autoplay）するように設定するか、または読み込み時にアニメーションを再生するために静止画像をクリックする必要があります。SkyScraper の例では、自動再生するように設定されており、ユーザー操作は必要ありません。ただし、自動再生をオフにすると、アニメーションをクリックするまでページには静止画像が表示されます。自動再生しないアニメーションの例を見るには、Animate Showcase にアクセスしてください。
注意：アニメーションをすぐに再生するかどうかを制御するには、ステージを選択してから、プロパティパネルの「自動再生」チェックボックスをオンまたはオフにします。
「自動再生」プロパティを選択して、自動再生を有効にします。 -
背景画像をクリックし、ステージ上で選択します。選択している間は、青いバウンディングボックスが表示され、左側のプロパティパネルには画像のプロパティが表示されます（このサンプル画像の名前は Image2）。Backspace（Windows）または Delete（Mac） を押して、背景画像ファイルを削除します。
背景画像を選択して削除します。 -
ステージがまだ選択されている間に、プロパティパネルでステージのカラーチップをクリックし、透明オプションを設定します。
ステージの背景プロパティを透明に設定します。 注意：ステージ上のコンテンツの背景にはホワイトが表示されます。アニメーションを書き出しまたはプレビューするまでは、透明の背景がステージに表示されることはありません。
-
ファイル／保存を選択して、最近の変更を保存します。
-
ファイル／パブリッシュ設定を選択して、パブリッシュ設定ダイアログボックスを開きます。
-
左側の「パブリッシュターゲット」列で、「Web」チェックボックスをオフにし、Animate デプロイメントパッケージオプションを選択します。
-
「保存」をクリックして変更を保存し、パブリッシュ設定ダイアログボックスを閉じます。
-
ファイル／パブリッシュを選択して、プロジェクトをパブリッシュします。
-
Animate を終了します。Windows エクスプローラー（または Mac OS Finder）を使用して、ハードドライブ上の Animate プロジェクトファイルを検索します。プロジェクトをパブリッシュすると、「Animate Package」という名前のフォルダーが見つかります。このフォルダーの .OAM ファイルを使用して、Animate コンテンツを Muse サイトに追加します。
-
その .OAM ファイルをコピーして、Web サイト用の他の画像やサイトアセットがすべて含まれているデスクトップ上のフォルダーに保存します。アニメーションをパブリッシュし、ファイルをサイトフォルダーに保存したら、次のセクションに進み、Animate コンテンツをページに配置します。
Muse Web ページに Animate で作成したアニメーションを配置
Muse Web サイトのページにアニメーションを追加するには、次の手順に従います。
-
Adobe Muse を起動して、編集するサイトを開きます。
-
プランビューで、アニメーションを追加するページの名前をダブルクリックします。
-
ファイル／配置...を選択し、サイトフォルダー内で .OAM ファイルを探して選択します。
-
ページをワンクリックすると、アニメーションが配置されます。
注意：画像の配置とは異なり、Animate アニメーションを配置してクリック＆ドラッグしても、サイズ変更はできません。違うサイズでコンテンツを配置する場合は、Edge プロジェクトを更新し、.OAM ファイルを再パブリッシュします。
-
選択ツールを使用して、ページ上の所定の場所にアニメーションを配置します。Muse でアニメーションの背景が不透明であるように表示されていても、ページのプレビューやパブリッシュのときには、背景は透明です。
-
ファイル／ブラウザーでページをプレビューを選択し、アニメーションが予想どおりに表示されることを確認します。何らかの変更を行う場合は、Muse に戻り、ページエレメントの位置を変更します。アセットパネルを見ると、.OAM ファイルがアセットとしてリストされるようになったことがわかります。Edge Animate で作成したアニメーションは、他のサイトアセットと同様に、再リンクして更新することができます。
例えば、Animate に戻れば、プロジェクトを開いて変更することができます。後で、.OAM ファイルを再パブリッシュしてサイトフォルダーにあるバージョンと置換すると、アセットパネルには日付の古いリンクアイコンが表示されます。これは、アセットをページに配置して以降、元のファイルが編集されていることを示します。
配置したファイルを更新するには、アセットパネルで .OAM ファイル名を右クリックし、「リンクを再設定」を選択します。
「リンクを再設定」オプションにより、配置したアセットが更新され、編集済みのソースファイルと同じになります。ファイルを手動で削除して置き換えるよりも、こちらの方がアニメーションをすばやく簡単に更新できます。
-
コントロールパネルの「パブリッシュ」リンクをクリックします。必要なオプションを選択し、「OK」をクリックしてサイト更新をパブリッシュします。
Adobe Edge Animate で HTML5 Web コテンツとアニメーションを作成する方法について詳しくは、Adobe Edge Animate リソースを参照してください。Muse の使用に関するヒントについては、Muse ヘルプとチュートリアルページにあるチュートリアル、または、Muse イベントページにあるライブウェビナーおよび録画ビデオによるチュートリアルを参照してください。
リッチメディアコンテンツの埋め込みによるサイトへのアニメーションの追加
-
プランビューで MasterFlash サムネールをダブルクリックして、デザインビューで編集用に開きます。前の手順で A-マスターページをコピーしたので、静止したロゴ画像はそのままその場所にあることがわかります。静止した画像を使用すると、アニメーション用長方形の配置を合わせるのに役立ちます。ただし、リッチメディアエレメントを埋め込んだ後、静的に配置されたロゴ画像を忘れずに削除してください。
-
ファイル／配置を選択します。読み込みダイアログボックスで、Kevins_Koffee_Kart フォルダー内を移動し、logo.swf というファイルを選択します。
-
左上隅に SWF ファイルを配置し、既存のロゴ画像ファイルの位置に合わせます。
-
配置した新しい SWF ウィンドウを古い静止したロゴの位置に合わせたら、静止したロゴを選択し、Delete キーを押して、削除します。
-
ホームページへの新規変更によってサイト全体がどのように表示されるかをレビューするために、ファイル／ブラウザーでサイトをプレビューを選択して、様々なページ上でロゴの表示をテストします。サイトをパブリッシュしないで、コンピューター上でローカルに作業し、ブラウザーでサイトをプレビューして、サイトナビゲーションでクリックしてページを切り替えます。ホームページ上でアニメーション（SWF ファイル）が 1 回表示されてから停止することがわかります。他のページをクリックすると、静止したロゴのみが表示されます。
注意：ファイル／ブラウザーでページをプレビューを選択すると、新しいブラウザーウィンドウに表示されるホームページの読み込み速度が向上しますが、プレビュー対象はアクティブな（ホーム）ページだけです。Web サイト全体ではなく、サイトの 1 ページを確認したい場合は、このオプションを選択してください。
アニメーションへのスクロール効果の追加
Adobe Muse では、Adobe Edge Animate を使用して作成したアニメーションを Web ページに追加できます。Adobe Edge Animate のスクロール効果機能を使用するには、最初の手順として、この目的専用のアニメーションを作成します。
Adobe Muse では、OAM ファイルにスクロール効果を追加して、メインのタイムラインに配置されるアニメーションに影響を与えることができます。ページのスクロール時に動かすアイテムだけをメインのタイムラインに配置するように、効果を十分に配慮してアニメーションをデザインして、インタラクティブなアニメーションを作成できます。残りの要素は入れ子のタイムラインに必ず配置する必要があります。ビジターがページをスクロールすると、スクロール効果設定は、メインのタイムライン上のアニメーション化されたエレメントの再生だけを制御します。
Adobe Muse のスクロール効果について詳しくは、「スクロール効果」を参照してください。
スクロール効果パネルの「スライドショー」タブを使用するには、次の手順に従います。
- Animate から OAM ファイルを書き出して、それをサイトフォルダーに保存します。Animate から OAM ファイルを書き出す方法については、「Adobe Muse で作成したアニメーションを配置」を参照してください。
- Muse を起動し、ページをクリックしてデザインビューでそのページを開きます。ページプロパティダイアログボックスで最小の高さの設定を変更して、スクロールできるだけ十分に長いページにします。
- ファイル／配置を選択し、サイトフォルダーから OAM ファイルを参照して選択します。
- スクロール効果パネルを開きます。「Adobe Edge Animate」タブ（左から 4 番目のタブ）をクリックして、このセクションの設定を確認します。
- OAM ファイルを選択した状態で、「Edge Animate」チェックボックスをオンにします。
上の画像では、キーの位置は 700 ピクセルに設定されています。T ハンドルをドラッグするか、「キーの位置」フィールドに別の値を入力して、この位置を調整できます。
キーの位置を設定した後、次の 2 つのオプションを使用してアニメーションの再生を制御できます。
- 自動再生：このオプションを選択すると、メインのタイムラインのアニメーションは、メインのタイムライン内のフレーム数とは無関係に、ブラウザーがキーの位置までスクロールするとすぐに再生を開始します。アニメーションは、ページが上にスクロールしてキーの位置よりも上になるまで再生し続けます。
- フレーム切り替え間隔：このオプションを選択すると、メインのタイムラインのアニメーションは、ページがスクロールして特定のピクセル数だけ通過するごとに 1 フレーム進みます。例えば、高さが 3000 ピクセルのページを作成し 10 の数値を入力した場合、メインのタイムラインのアニメーションは、ページが 10 ピクセルスクロールするごとに 1 フレームという速度で再生します。訪問者がスクロールを速くすると、アニメーション速度は上がります。
注意：
スクロール効果の設定は、Animate コンポジションでメインのタイムラインの入れ子になった、またはそこからリンクされたアニメーション化されたオブジェクトに影響を与えません。したがって、静止した背景を使用することも、ビジターのページスクロール操作とは無関係に一貫して動く、ループし続ける入れ子エレメントを使用することも選択できます。
- スクロール効果パネルの「Edge Animate」タブで設定を選択した後、ファイル／ブラウザーでページをプレビューを選択します（または「プレビュー」ボタンをクリックします）。上下にスクロールし、（メインのタイムラインに追加された）Edge Animate アニメーションのコンテンツが再生されることを確認して、ページをテストします。
- 変更する必要がある場合は、Muse に戻り（または「デザイン」ボタンをクリック）、スクロール効果パネルの設定を変更します。
例
この例は、スクロール効果を使用して、Adobe Edge Animate から書き出した OAM ファイルの制御方法を示します。このサンプルでは、ページは、明るい青緑色から濃い青色に変化する垂直方向のグラデーションで塗りつぶされています。ScrollEffects.com からサンプルファイルをダウンロードできます。
「モーション」タブと「Edge Animate」タブで適用された設定の組み合わせによって、このアニメーション効果がもたらされます。
同じ OAM ファイルの 3 つのインスタンスが、水平方向に並べて配置され、アニメーション化されたコンパスを構成しています。ブラウザーでサンプルサイトを表示すると、3 つのコンパスがすべて上に移動して姿を現し、その所定の位置から動かなくなります。3 つのコンパスはそれぞれ異なる速度で回転しているように見えますが、異なる速度で回転させているのはスクロール効果パネルの設定であり、Edge アニメーションファイルの構成ではありません。
3 つの配置された OAM ファイルを使用して、同様の効果を作成するには、次の手順に従います。
- デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 7,465 ピクセルに設定されています。
- ページでコンパスの 3 つのインスタンスをすべて選択します。スクロール効果パネルの「モーション」タブにはすべての値が表示されているので、3 つの OAM ファイルのキーの位置とモーション設定はどれも同じであることがわかります。
ブラウザーでサンプルを表示すると、3 つの OAM エレメントすべてが同時に上昇し、その後は固定されているかのように一列になって動かなくなることがわかります。
- コンパス以外の場所をクリックして 3 つすべてを選択解除してから、左のコンパスだけを選択します。Shift キーを押しながら右のコンパスを選択すると、両方が選択されます。スクロール効果パネルの「Edge Animate」タブを開いて設定を確認します。
左右のコンパスはどちらも、タイムラインアニメーションをループして、ページが 350 ピクセル下にスクロールするごとに次のフレームに進むように設定されます。
- 外側の 2 つのコンパスを選択解除します。中央のコンパスを選択し、もう一度「Edge Animate」タブを調べて「フレーム切り替え間隔」フィールドが 400 ピクセルに設定されていることを確認します。この設定のために、中央のアニメーションは外側の 2 つのコンパスに比べてゆっくりと動きます。
ページスクロールの速度に対して、複数配置された Edge Animate アニメーションの速度を変えることにより、興味深いアニメーション効果をもたらすことができます。例えば、同じ OAM ファイルに異なるスクロール効果設定を適用した複数の複製を追加することにより、魚の群れ、雲が流れる空、またはその他の効果を作成できます。