注意：
Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。
Adobe Edge Animate は、HTML5 などの Web 標準を使用して、アニメーション化したコンテンツを Web サイトに持ち込むことができるようにする Web 対話操作デザインツールです。Animate 内の直観的なタイムラインインターフェイスを使用して、すべての最新のブラウザーで表示したときに再生できる、感動的な HTML5 アニメーションを視覚的に制作できます。
Animate コンテンツを Muse に挿入する前に、いくつかの変更を行って Animate ファイルを準備し、Muse にシームレスに埋め込めるようにすることができます。次のいずれかの操作を行います。
-
Animate プロジェクトがステージに表示されます。
Animate を使用して作成したアニメーションは、自動再生（autoplay）するように設定するか、または読み込み時にアニメーションを再生するために静止画像をクリックする必要があります。SkyScraper の例では、自動再生するように設定されており、ユーザー操作は必要ありません。ただし、自動再生をオフにすると、アニメーションをクリックするまでページには静止画像が表示されます。自動再生しないアニメーションの例を見るには、Animate Showcase にアクセスしてください。
注意：
アニメーションをすぐに再生するかどうかを制御するには、ステージを選択してから、プロパティパネルの「自動再生」チェックボックスをオンまたはオフにします。
「自動再生」プロパティを選択して、自動再生を有効にします。
-
ファイル／ブラウザーでページをプレビューを選択し、アニメーションが予想どおりに表示されることを確認します。何らかの変更を行う場合は、Muse に戻り、ページエレメントの位置を変更します。アセットパネルを見ると、.OAM ファイルがアセットとしてリストされるようになったことがわかります。Edge Animate で作成したアニメーションは、他のサイトアセットと同様に、再リンクして更新することができます。
例えば、Animate に戻れば、プロジェクトを開いて変更することができます。後で、.OAM ファイルを再パブリッシュしてサイトフォルダーにあるバージョンと置換すると、アセットパネルには日付の古いリンクアイコンが表示されます。これは、アセットをページに配置して以降、元のファイルが編集されていることを示します。
配置したファイルを更新するには、アセットパネルで .OAM ファイル名を右クリックし、「リンクを再設定」を選択します。
Adobe Edge Animate で HTML5 Web コテンツとアニメーションを作成する方法について詳しくは、Adobe Edge Animate リソースを参照してください。Muse の使用に関するヒントについては、Muse ヘルプとチュートリアルページにあるチュートリアル、または、Muse イベントページにあるライブウェビナーおよび録画ビデオによるチュートリアルを参照してください。
-
ホームページへの新規変更によってサイト全体がどのように表示されるかをレビューするために、ファイル／ブラウザーでサイトをプレビューを選択して、様々なページ上でロゴの表示をテストします。サイトをパブリッシュしないで、コンピューター上でローカルに作業し、ブラウザーでサイトをプレビューして、サイトナビゲーションでクリックしてページを切り替えます。ホームページ上でアニメーション（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 つのコンパスに比べてゆっくりと動きます。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。