Adobe Muse でのスクロール効果の使用方法

このセクションでは、スクロール効果を使用してインタラクティブな機能、独特なサイトナビゲーション、および表現豊かなモーショングラフィックを Muse サイトに追加できる多数の方法のうちのいくつかについて説明します。

はじめるには、次の手順に従います。

1. ライブサンプルサイトにアクセスし、各セクションをクリックして、それぞれの目標に合った例を確認します。それぞれの例のページを下にスクロールして、スクロール効果がどのようにページエレメントの表示を制御するか確認します。
2. ライブサンプルサイトの最後までスクロールし、.muse ファイルをダウンロードします。
3. サンプルサイトを開いて、Muse ワークスペースでプロジェクトを確認します。
4. レイヤーパネルを開き、「Content」というラベルのセクションを展開して、それぞれの例の作成に使用されたエレメントを確認します。

この効果では、ビジターがページを下にスクロールしていくと、一連の個別のエレメントがフライインされ、組み立て直されてページデザインを構成します。パズルのピースが組み合わされていくように、インタラクティブなコンピレーションを作成するスクロール効果を使用してグラフィックおよびテキストフレームが制御されます。これは、Web ページで製品の詳細を引き立てる魅力的な方法です。

この例のワークフローは、スクロール効果パネルの「モーション」タブの「初期モーション」セクションを使用して、エレメントを統合デザインにまとめます。各ピースがそれぞれの所定の位置まで移動した後は、「最終モーション」設定が 0 に設定されているので、新しいエレメントがフライインしても既存のエレメントは移動しません。

同様のピースバイピース効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 14,120 ピクセルに設定されています。
2. テキストツールを使用して、テキストフレームを作成し、目的のテキストコンテンツを入力します。
3. スクロール効果パネルの「モーション」タブを開いて、「モーション」チェックボックスをオンにします。この例では、「初期モーション」セクションの設定に基づいて、テキストフレームはスクロールの 0.25 倍の速度（1/4 の速度）で所定の位置まで下に移動します。ページがテキストフレームのキーの位置に到達したときに、テキストフレームはデザインビューで配置されている位置に到達します。続いて、「最終モーション」設定（どちらの方向も 0 の値）により、最初のエレメントは固定されているかのようにその位置から動かなくなります。
4. 透明度付きの PNG ファイル（携帯電話の外形）はテキストフレームの背面に配置されます。このエレメントは、スクロール効果パネルの「モーション」タブの設定を使用して、ページの左側からフライインし、所定の位置まで移動した後、そこにとどまります。
5. 電話の外形のすぐ後ろからさらに小さな白いエレメントが同様の移動パターンに従って、ページの左側からフライインした後、所定の位置にとどまります。この白いグラフィックは携帯電話の上部にある受話口を模したものです。このアセット（phone-earpiece.png という名前）は、レイヤーパネルで携帯電話の外形より前面に配置されるため、デザインでは電話の外形の上に表示されます。 
6. 受話口のすぐ後ろから電話のホームボタンを模した小さな白いエレメントが右側からフライインし、受話口の同様の動作を行い、やはり携帯電話の外形の上に表示されます。
7. 次に、縦に白から薄灰色に変化する希薄なグラデーションを施した淡色の長方形のグラフィックが、スクロール効果パネルの「モーション」タブを使用して所定の位置に移動し、携帯電話の外形の中央の透明な領域内にぴったりと収まります。このグラフィックはいったん所定の位置に達すると、その場所から動かず電話の画面を表現します。この画面エレメント（phone-screen.png）は、レイヤーパネルの最背面にレイヤー化され、ページデザインでは他のすべてのエレメントの背面に表示されるように配置されます。
8. 次に 4 つの（青、緑、黄、赤の単色で塗りつぶされた）長方形の一群が所定の位置まで移動します。一緒に飛んでいく散発効果を作成するには、スクロール効果パネルの「モーション」タブでそれぞれの長方形の方向および速度を異なる値に設定します。「初期モーション」セクションで、青色の長方形は下および右に移動し、緑色と黄色の長方形は上および右に移動し、赤色の長方形は上および左に移動します。「最終モーション」セクションでは、すべての長方形は両方の方向が 0 の設定になっており、それぞれのエレメントは、携帯電話の画面の上にある最終移動先に到達すると、その所定の位置に固定されているかのように動作します。
9. 他のピースがすべて組み立てられた後、2 番目のテキストフィールドがページスクロールの 0.5 倍（半分）の速度上に移動し、最初のテキストフィールドの下に置かれます。

最後に、下部には 2 つのエレメントが残っています。ページと同じ単色で塗りつぶされた単色の長方形（デザインでは見えないようにレンダリング）と、その長方形の背面にあるオブジェクトのグループ（白熱電球のグラフィックを伴う黄色の長方形）です。

単色の長方形は、その背面に配置されたグループを隠すために用意されています。

10. 「初期モーション」フィールドと「最終モーション」フィールドの両方の値が 0 に設定されているので、長方形は基本的に所定の位置に固定され、移動することはありません。白熱電球グラフィックを含むグループのキーの位置までページがスクロールすると、グループは左に移動し、前面にある長方形で隠されなくなるため見えるようになります。白熱電球グループは、携帯電話の画面エレメントの前面ですが携帯電話の外形の背面にレイヤー化されるので、白熱電球グラフィックは所定の位置にワイプするように見えます（現実の電話機で水平方向にスワイプすると生じる変化に類似）。白熱電球グループは、それまで電話の画面を表していたグラデーションの長方形を覆い隠します。

この単純な例からわかるように、非常に長いページ、レイヤーパネルで効果を十分に配慮してレイヤー化された一連のエレメント、スクロール効果パネルの「モーション」タブを組み合わせて使用して、ページを下にスクロールするごとにピースが一体となる錯覚をアニメーションでもたらすことができます。

スライディングメニュー効果は、ピースバイピース効果で説明したものと同じ方法を数多く使用します。エレメントはスクロール効果パネルの「モーション」タブを使用してフライインしているように見え、長方形は、一部のエレメントがページデザインに登場するタイミングまでそれらのエレメントを隠しています。

この例では、効果を十分配慮して配置された長方形のグループを使用して、複雑な斜めのデザインの外観を作成します。

ブラウザーでサンプルサイトを表示して、飛行機が右から左に水平にページを横断して飛行し、その後に、スタイルを設定した一連のメニューオプションと斜線を伴ったグラデーション背景が続くことを確認します。

同様のスライディング効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 4,665 ピクセルに設定されています。
2. 飛行機画像は、ページの他のすべてのコンテンツよりも前面にレイヤー化されているので、レイヤーパネルのリストの最上部に表示されます。この画像は、スクロール効果パネルの「モーション」タブで、そのキーの位置の前と後の両方で左に移動するように設定されています。
   

3. 4 つのテキストフレームは左にフライインし、垂直方向はそのまま保つように設定され、ナビゲーションメニューを構成します。スクロール効果パネルの「モーション」タブの「初期モーション」セクションで、それぞれのテキストフレームには同じ速度（スクロール速度の 1.25 倍）が設定されています。それぞれのテキストフレームはキーの位置も異なります。ページが下にスクロールするにつれ、それぞれのテキストフレームは所定の位置へスライドしていき、デザインの左側で揃います。すべてのテキストフレームは「最終モーション」セクションで 0、0 の値が設定されているので、メニュー項目は所定の位置に到達した後はその位置から動かなくなります。
4. テキストフレームは、端がまっすぐな縦の線ではなく、斜めの切り口を示しているので、一見したところでは画像のように見えますが、単色の背景色で塗りつぶされたものです。この効果は、ブラウザー背景色と同じ単色を使用して塗りつぶされた 3 つの長方形のグループをテキストフレームの前面にレイヤー化することによって実現しています。

5. テキストフレームアニメーションは、そのテキストフレームがレイヤーパネルで別のグループの背面に配置されているので、最初はそのグループの長方形によって隠されています。このグループは 3 つの長方形を組み合わせたもので、1 つは垂直方向にグラデーションが施された大きな長方形であり、残りの 2 つは小さな四角形（1 つは正方形で 1 つは回転させたもの）でグラデーションの最上部の色に一致した単色で塗りつぶされています。

6. 下にスクロールしてグループの下部を確認すると、大きなグラデーションの長方形の右下隅の前面に回転して並べられた、幅の異なる一連の 4 つ以上の長方形が見られます。
   

グループは、一連のエレメントを組み合わせて、単一のアイテムとして制御する場合に役立ちます。この例では、様々な長方形のグループにはモーションスクロール効果が適用されて、グループが単一のエンティティとして移動するようにしています。

この例では、ネガティブスペースの創造的な使用も示しています。ブラウザー背景に単色の背景色が適用されている場合、同じ色で塗りつぶされた長方形を他の長方形の前面にレイヤー化することにより、興味深い多数の切り抜き効果を作成できます。画像編集プログラムでグラフィックをデザインして単一の画像を配置する代わりに、長方形を使用して、Muse ワークスペース内からグラフィックを構築できます。

このアニメーション化した朝日と夕日の例は、モーションと不透明度の 2 つのスクロール効果を組み合わせて使用することで実現しています。この例では、グラデーション色の塗りのページ背景と、単一で配置された太陽の PNG 画像を表示します。PNG 画像には、背景ページの塗りのカラーが透過的に見える透明領域が含まれています。

ブラウザーで例のサイトを表示して、太陽がページを移動しながら 100% の透明度からフェードアップする様子を確認します。その頂点では完全に不透明になりますが、ページを下にスクロールし続けると、太陽は沈み、再び徐々に透明になり、最後にフェードアウトします。
同様のフェード効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。ページがスクロールできるように、「最小の高さ」フィールドを平均的なモニターで表示できるピクセル数よりも大きな値に設定します。このサイト例では、ページの最小の高さは 2,988 ピクセルに設定されています。
2. 太陽の画像はページの中央に配置されます。スクロール効果パネルの「モーション」タブで、キーの位置は 1410 ピクセルに設定されています。また、「初期モーション」セクションと「最終モーション」セクションの設定にも注意してください。

これらの設定により、太陽は、ページの左下から中央に昇り（キーの位置に到達）、ページの右下に下がる円弧を描きながら、半円状の軌跡で移動します。

3. 太陽をまだ選択した状態で、「不透明度」タブをクリックしてその設定を確認します。フェード位置 1 は 726 ピクセル（太陽より上）に設定されています。フェード位置 2 は 1,925 ピクセル（太陽より下）に設定されています。太陽は 0% の不透明度（完全に透明）から始まり、ページがそのキーの位置までスクロールすると完全に不透明になります。ページが下にスクロールし太陽のキーの位置を過ぎると、不透明度は 100% から 0% に推移していき、フェードインおよびフェードアウトの効果を作成します。
   

4. ファイル／ブラウザーでページをプレビューを選択してページをテストします。ページをスクロールして、太陽がフェードインしながら昇り、続いてフェードアウトしながら右下に移動するように見えることを確認します。
5. ブラウザーを閉じて Muse ワークスペースに戻ります。

この例は、スクロール効果を使用して、Adobe Edge Animate から書き出した OAM ファイルの制御方法を示します。このサンプルでは、ページは、明るい青緑色から濃い青色に変化する垂直方向のグラデーションで塗りつぶされています。

「モーション」タブと「Edge Animate」タブで適用された設定の組み合わせによって、このアニメーション効果がもたらされます。

同じ OAM ファイルの 3 つのインスタンスが、水平方向に並べて配置され、アニメーション化されたコンパスを構成しています。ブラウザーでサンプルサイトを表示すると、3 つのコンパスがすべて上に移動して姿を現し、その所定の位置から動かなくなります。3 つのコンパスはそれぞれ異なる速度で回転しているように見えますが、異なる速度で回転させているのはスクロール効果パネルの設定であり、Edge アニメーションファイルの構成ではありません。

3 つの配置された OAM ファイルを使用して、同様の効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 7,465 ピクセルに設定されています。
2. ページでコンパスの 3 つのインスタンスをすべて選択します。スクロール効果パネルの「モーション」タブにはすべての値が表示されているので、3 つの OAM ファイルのキーの位置とモーション設定はどれも同じであることがわかります。

ブラウザーでサンプルを表示すると、3 つの OAM エレメントすべてが同時に上昇し、その後は固定されているかのように一列になって動かなくなることがわかります。

3. コンパス以外の場所をクリックして 3 つすべてを選択解除してから、左のコンパスだけを選択します。Shift キーを押しながら右のコンパスを選択すると、両方が選択されます。スクロール効果パネルの「Edge Animate」タブを開いて設定を確認します。

左右のコンパスはどちらも、タイムラインアニメーションをループして、ページが 350 ピクセル下にスクロールするごとに次のフレームに進むように設定されます。

4. 外側の 2 つのコンパスを選択解除します。中央のコンパスを選択し、もう一度「Edge Animate」タブを調べて「フレーム切り替え間隔」フィールドが 400 ピクセルに設定されていることを確認します。この設定のために、中央のアニメーションは外側の 2 つのコンパスに比べてゆっくりと動きます。

ページスクロールの速度に対して、複数配置された Edge Animate アニメーションの速度を変えることにより、興味深いアニメーション効果をもたらすことができます。例えば、同じ OAM ファイルに異なるスクロール効果設定を適用した複数の複製を追加することにより、魚の群れ、雲が流れる空、またはその他の効果を作成できます。

スライドショーウィジェットの一連の画像がページのスクロールに基づいてどのように表示されるかを制御できます。ここでは、スライドショーウィジェットをページに追加し、続いて、スクロール効果パネルの「スライドショー」タブを使用してスライドショーオプションを変更します。

この例では、スライドショーには、バックパックの 360 度回転ビューを構成する一連の画像が読み込まれます。三脚を使用し、回転スタンド上に置いたオブジェクトの写真を撮ることで、同様のスライドショー画像を用意できます。この効果は、インタラクティブな製品の説明を表示して、購入前にあらゆる角度からアイテムを見込み客に見せる場合に役立ちます。

スライドショーウィジェットを使用して同様の効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 7,465 ピクセルに設定されています。
2. スクロール効果を使用するように、「Superpack」の語を記したテキストフレームを設定します。「モーション」タブで、ページのスクロールと同じ速度で左から右にテキストを移動させるように、「初期モーション」設定を変更します。「最終モーション」設定で両方の方向を 0 に設定します。これにより、テキストフレームはページ上に固定されているかのように所定の位置から動かなくなります。
    

3. ウィジェットライブラリを開き、スライドショーウィジェットを、ページ中央のテキストフレームの最終移動先の右側にドラッグします。
4. オプションメニューの「画像を追加」オプションを使用して、スライドショーに画像ファイルを読み込みます。

スライドショーを選択した状態で、スライドショーウィジェットを選択し、コントロールパネルの固定インターフェイスを使用して、スライドショーを所定の位置に固定できます。フルスクリーンスライドショーウィジェットを追加し、これをスクロール効果で制御することにより、試してみることもできます。 

5. スライドショーを選択した状態で、スクロール効果パネルの「スライドショー」タブを開いて、「スライドショー」チェックボックスをオンにします。
6. T ハンドルをドラッグするか、フィールドに値を入力して、キーの位置を設定します。この例では、キーの位置は 1,066 ピクセルに設定されています。
7. 「スライドの切り替え間隔」ラジオボタンをオンにして、その下のフィールドを 50 ピクセルに設定します。
   

8. プレビューまたはブラウザーでページをテストします。ページを下にスクロールして、バックパックが回転して表示されることを確認します。アニメーション GIF のフレームのように、似ているが若干異なる一連の画像ファイルをスライドショーに組み込むことによって、上に飛び上がったり下に落ちているように見える画像も作成できます。
9. スクロール効果のテスト後、Muse のデザインビューに戻って、ページの編集を続けます。
   

スクロール効果を使用して、外観が完全に異なるセクションに区分された非常に長いページを作成できます。ビジターがページを下にスクロールしていくと、ページはページセクション間を変遷し、アニメーション化されたテキスト効果と、シャドウ効果を使用して作成した区分線によってロールアップするように見えます。

それぞれのセクションを表示するには、アンカータグを使用するか、単にページを下にスクロールするようにビジターを促すメモを追加できます。例のサイトの下部が表示されているときに、「トップに戻る」ボタンをクリックすると、アンカーリンクでページデザインの先頭に戻る場合と同様に、ページ全体を飛び越える様子が見られます。

同様のロールアップ効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 16,990 ピクセルに設定されています。
2. ブラウザー背景メニューで、ブラウザー背景色を単色の青色に設定します。

3. ページ全体を選択した状態で、塗りメニューを使用してページの色を「なし」に設定することで、青色のブラウザー背景色が表示されるようにします。
4. 最上部から約 2,248 ピクセルまでページを下にスクロールします。長方形ツールを使用して、幅 3,000 ピクセル、高さ 2,000 ピクセルの長方形を描画します。選択ツールを使用して、ページの中央に長方形を配置し、ブラウザーウィンドウの端を超えるまで左右に幅を広げます。
5. まだ長方形を選択した状態で、塗りメニューを使用して塗りの色を単色の緑色に設定します。効果メニューを使用して、シャドウ効果を設定します。

6. 緑色の長方形を選択した状態で、スクロール効果パネルの「モーション」タブで「モーション」チェックボックスをオンにします。T ハンドルをクリック＆ドラッグして、キーの位置が長方形の上端（例のサイトでは 2,248 ピクセル）に設定されるまで短くします

7. 「初期モーション」セクションで、長方形がスクロールの 1.5 倍の速度で下に移動するように設定します。その他の方向をすべて 0 に設定します。
8. テキストツールを使用して、緑色の長方形の上部付近にテキストフィールドを作成します。この例ではテキストフィールドに「This is the roll-up.」と記されています。ただし、テキストコンテンツを入力し、好みのテキスト書式設定を適用できます。
9. テキストフレームを選択した状態で、スクロール効果パネルの「モーション」タブをオンにします。T ハンドルをドラッグして緑色の長方形の上端に揃え、テキストフレームの表示をページのスクロールに基づいて制御するように設定を変更します。

10. 「初期モーション」で、スクロールの 1.5 倍の速度で下方向に移動するように設定します。パネル内の他の値をすべて 0 に設定します。これにより、テキストフィールドは、緑色の長方形と同じ方向および速度で一緒に下に移動します。ページがスクロールしそのキーの位置を過ぎると、長方形とテキストフレームの両方は所定の位置から動かなくなります。
11. 「プレビュー」をクリックすると、下にスクロールして、緑色の長方形とテキストフィールドが上部から下にロールして姿を現す様子を確認できます。テストが終了したら「デザイン」をクリックして、ページの編集を続けます。
12. 表示メニューを使用して、サイトデザインの 10% までズームアウトします。緑色の長方形とテキストフィールドを選択します。Option/Alt キーを押しながら、2 つのエレメントをページのさらに下にドラッグして、それらの複製を作成します。複製した長方形の塗りのカラーを濃い青色に設定し、テキストツールを使用してテキストコンテンツを変更します。

この例では、複製したテキストフレームには「Use it to drastically alter the appearance of your website.」というテキストが記されています。ただし、ページの濃い青色のセクションを識別するテキストならどのようなものでも自由に入力できます。

13. 選択ツールを使用して、複製した長方形とテキストフレームを、ページの最上部から約 5,448 ピクセル下に配置します。
14. 濃い青色の長方形を選択した状態で、スクロール効果パネルの「モーション」タブを調べます。キーの位置は、長方形の新しい位置（5,448 px）に自動的に変更され、「初期モーション」セクションで下方向の移動はスクロールの 1.5 倍の速度で移動するように設定されたままになっています（他の値は 0 に設定）。複製したテキストフレームを調べると、複製したエレメントにもスクロール効果が保持されていることがわかります。
15. 手順 12 と 13 を 4 回以上繰り返して、合計で 6 つの大きさの異なる長方形とそれらの上に置かれたテキストフレームを作成します。それぞれの長方形にはシャドウ効果とスクロール効果設定が既に適用されています。少なくとも 4 つの長方形を、8,648 ピクセル、11,852 ピクセル、15,058 ピクセル、および 18,251 ピクセルのキーの位置に配置し、各セクションが 1,200 ピクセルほど離れるようにします。
16. 塗りメニューを使用して、異なる色が適用されるように長方形の塗りのカラーを設定します。単色とグラデーションの両方の塗りを適用してみて、ページの各セクションが目立ち、他のセクションから際立つ場合を調べます。
17. テキストツールを使用して、各セクションのテキストコンテンツを変更します。例えば、「This is the blue section.」のように、その下にある長方形の背景色を反映するように各テキストを変更できます。
18. ファイル／ブラウザーでページをプレビューを選択してページをテストします。ページをスクロールして、別のページセクションが表示され、続いて次のページセクションに置き換えられるか確認します。
19. ブラウザーを閉じて Muse ワークスペースに戻ります。
    

モーションスクロール効果と Adobe Edge Web Fonts を組み合わせて使用して、特殊なタイポグラフィックデザインを作成できます。Web フォントを使用すると、ページを読み込むときに読み込まれる多彩なフォントを使用してテキストのスタイルを設定できます。画像編集プログラムで作成したテキストの画像を配置しアニメーション化するのではなく、Edge Web Fonts を使用して、見た目に優れ、変更の容易なページを作成できます。また、スクロール効果は、ページのスクロールに合わせた印象的なアニメーションを作成します。

動的なテキストを使用して同様の効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 4,854 ピクセルに設定されています。
2. ページの塗りのカラーを「なし」に設定します。ブラウザー背景色は重要ではありません。次の手順で長い長方形によって覆われるからです。
3. 長方形ツールを使用して、幅 1,159 ピクセル、高さ 4,854 ピクセルほどの大きな長方形を描画します。塗りメニューを使用して、単色またはグラデーションの塗りのカラーで長方形を塗りつぶします。この例では、青緑色から赤紫色のグラデーションカラーが塗りとして適用されます。選択ツールを使用して、長方形を中央に配置して、ブラウザー領域全体を塗りつぶします。必要に応じてズームアウトして、長方形がページの中央に置かれていることを確認できます。

4. 長方形を中央に配置した後、表示メニューの倍率を 100% に戻します。
5. ページの左側で、テキストツールを使用して一連のテキストフレームを作成します。この例では、合計で 5 つのテキストフレームがあります。各テキストフレームのコンテンツが下に表示されていますが、それぞれのテキストフレームには、自由に選択したテキストを入力してください。
   • Five Frames（5 つのフレームが）
   • Scrolling（スクロールする）
   • At Different Speeds Will（異なった速度で）
   • Create（作成します）
   • Dynamic Tension（動的テンションを）

オプションの追加手順として、一部のテキストフレームの複製を作成して、若干異なるスタイル設定を適用できます。この例では、Create という語を記したテキストフレームが複製され、続いて 2 つの複製が互いの上にレイヤー化され、淡青色のドロップシャドウ効果を作成します。

6. テキストツールを使用して、それぞれのテキストフレームを選択します。テキストパネル（またはコントロールパネルのテキスト書式設定オプション）を使用して、異なる Web フォント、フォントサイズ、色、およびその他のテキスト編集設定を適用し、各テキストフレームを目立たせます。
7. すべてのテキストフレームを選択します。テキストフレームを選択した状態で、スクロール効果パネルの「モーション」タブを開きます。同じ数値を入力して、選択したすべてのテキストフレームのキーの位置を一度に設定します。（この例では、キーの位置は 1,372 ピクセルに設定されています）。また、「初期モーション」セクションと「最終モーション」セクションの両方の水平方向を右に設定します。「初期モーション」セクションと「最終モーション」セクションの垂直方向をすべて 0 に設定して、テキストフレームが垂直方向には動かないようにします。
8. テキストフレーム以外の場所をクリックしてから、各テキストフレームを個別にクリックします。それぞれのテキストフレームに若干異なる値を入力します。下のリストで、最初の値は水平（右）方向の「初期モーション」での速度で、2 番目の値は「最終モーション」での速度です。
   • Five Frames（5 つのフレームが）：0.9x、0.1x
   • Scrolling（スクロールする）：0.12x、0.5x
   • At Different Speeds Will（異なった速度で）：0.7x、0.17x
   • Create（作成します）：1.1x、0.005x
   • Dynamic Tension（動的テンションを）。：1x、0.01x
     

9. テキストツールを使用して、テキストフィールドを作成し、ページの右側に 5 の数字を入力します。再び、テキストフレームを複製して、異なる色とテキストの書式設定を適用して、ベベル付きエッジおよびドロップシャドウの錯覚をもたらすことができます。デザインのためにテキストフレームの複製を作成する場合、テキストフレームをグループ化して、スクロール効果をグループに適用できます。
10. 5 の数字を入力したテキストフィールドを選択した状態で、スクロール効果パネルの「モーション」タブで「モーション」チェックボックスをオンにします。数値を入力するか、T ハンドルをドラッグして、キーの位置を設定します（この例では 1,425 px）。「初期モーション」セクションで、エレメントがスクロールの 1 倍の速度で左に移動するように設定します。「最終モーション」セクションで、エレメントがスクロールの 0.01 倍の速度で左に移動するように設定します。
11. ファイル／ブラウザーでページをプレビューを選択してページをテストします。ページをスクロールして、5 の数字を入力したテキストフレームが右側から移動してきたときに、5 つのテキストフレームが左側からページに移動してくることを確認します。上下にスクロールしてテキストフレームのアニメーションを確認します。
12. ブラウザーを閉じて Muse ワークスペースに戻ります。
     

様々なボタンがページの表示領域にフライインし、自動的に整列してメニューバーを構成するように、スクロール効果を使用して魅力的でインタラクティブなサイトナビゲーションを作成できます。この例では、ページをスクロールしたときに、4 つのロールオーバーボタンがページの最下部から上に移動し、所定の位置でロックされ垂直メニューバーを表示します。

4 つのボタンが整列すると、（白熱電球グラフィック、色付き背景領域、テキストフレーム、および角の斜線の形の）背景コンテンツがページの両側からフライインしてサイトのセクションを構成します。

この例ではボタンはリンクされていませんが、必要に応じて、ビジターがリンクをクリックして、新しいページを読み込んだり、アンカータグを使用して現在のページの別の場所にジャンプできるように、ハイパーリンクドロップダウンメニューを使用してリンクを追加できます。

同様の重ね合わせメニュー効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 7,465 ピクセルに設定されています。
2. ページの塗りのカラーを「なし」に設定し、ブラウザー背景を単色の塗りのカラーに設定します。例のサイトでは、ブラウザー背景は明るい黄褐色に設定されています。
3. テキストツールを使用して、新しいテキストフレームを作成します。Home の語を入力します。コントロールパネルで書式設定オプションを使用して、テキストフレームに背景色を追加します。また、必要に応じて書式設定オプションを変更して、テキストのスタイルを設定します。ボタンの各辺のハンドルを使用して、その幅を約 300 ピクセルに、高さを約 115 ピクセルに伸ばします。

4. ステートパネルを開きます。ロールオーバーステートを選択し、異なる塗りのカラーを追加（または必要に応じてスタイルを設定）して、ロールオーバーボタンを作成します。

5. ロールオーバーステートを変更した後、再び通常ステートを選択します。
6. スクロール効果パネルの「モーション」タブを開きます。ボタンを選択した状態で、「モーション」チェックボックスをオンにします。T ハンドルをドラッグするか数値を入力して、キーの位置を設定します。また、スクロールの 0.75 倍の速度で上に移動するように「初期モーション」セクションを設定します。その他のフィールドはすべて 0 の設定のままにしておきます。

7. Option/Alt キーを押しながら、Home ボタンをページのさらに下にドラッグします。これにより、ボタンが複製されます。複製が元の Home ボタンと垂直に並ぶようにします。2 つのエレメントが並べられ、複製がまだ選択されているときに、濃い青色のスマートガイドが中央に一時的に表示されます。

8. 複製ボタンをページの元のボタンの 460 ピクセル下まで移動します。
9. 手順 7 と 8 を繰り返して、ボタンを 2 回以上複製し、ページ上で均等に間隔を空けた合計 4 つのボタンを作成します。テキストツールを使用して、上から 2 番目、3 番目、および 4 番目のボタンを編集し、それぞれ Products、Photos、Contact Us のラベルを使用してテキストコンテンツを変更します。

最初の Home ボタンの複製を作成したときに、テキストフレームのスタイル設定とコンテンツのほか、スクロール効果設定もコピーされました。複製したいずれかのボタンを選択しスクロール効果パネルを調べると、「モーション」タブの設定は Home ボタンに適用された設定と同じであり、各ボタンのキーの位置が前のボタンの 460 ピクセル下（ページでの各ボタンの間隔と同じ距離）になっていることがわかります。

10. 最終的な位置で整列したときの 4 つのボタンの高さの合計を、高さと間隔を合算して計算します。例のサイトでは、ボタンはそれぞれ 116 ピクセルの高さで、各ボタン間の間隔は 4 ピクセルです。したがって、（組み上がったときの）垂直メニューバーの高さの合計は 476 ピクセルになります。長方形ツールを使用して、ページセクションの目的の幅であり、メニューバーと同じ高さの長方形を描画します。この例では、長方形は幅 931 ピクセル、高さ 476 ピクセルです。
11. 例のサイトでデザインを複製しようとする場合、長方形の塗りのカラーを、ボタンの通常ステートより明るい色調の淡いピンク色に設定できます。また必要に応じて、コントロールパネルで角丸の半径値を入力して、丸い角を作成できます。この例では、4 つのすべての角で 10 ピクセルに設定されています。

12. 選択ツールを使用して、上端がページの最上部から約 5,094 ピクセル離れた位置になるように、長方形を揃えます。また、長方形の左側が、ボタンの左側と垂直方向に揃っていることを確認します。例のサイトでは、長方形とボタンはすべて、ページの左側から 14 ピクセル離れた位置になります。エレメントを選択し、変形パネルを開くと、これらの設定を確認できます。X 値は左側からの距離（14 ピクセル）で、Y 値はページの最上部からの距離（5,094 ピクセル）です。
13. まだ長方形を選択した状態で、スクロール効果パネルを開いて、「モーション」タブで「モーション」チェックボックスをオンにします。キーの位置を 4,979 に設定します。
14. 「初期モーション」で、スクロールの 1 倍の速度で右に移動するように設定します。「モーション」タブのその他のフィールドはすべて、そのまま 0 に設定しておきます。

15. 長方形が確実に 4 つのボタンの背面になるようにするには、長方形を選択した状態で、オブジェクト／最背面へを選択します。
16. ファイル／配置を選択して、画像ファイルを参照して選択した後、ページを 1 度クリックして配置します。この例では、透明度付きの PNG が配置され、白熱電球画像を表示します。白熱電球は、大きな長方形の中で、メニューボタンで覆われる領域から離れた右側に配置されます。この例では、画像は、ページの左から 501 ピクセル（X 位置）、最上部から 5,245 ピクセル（Y 位置）に配置されています。
17. 配置された画像が確実に 4 つのボタンの背面になるようにするには、画像を選択した状態で、オブジェクト／最背面へを選択します。この目的は、配置された画像を大きな長方形の前面に置き、4 つのボタンの背面に表示することにあります。
18. 配置された画像を選択した状態で、スクロール効果パネルの「モーション」タブを開いて、「モーション」チェックボックスをオンにします。キーの位置を目的の値に設定します。例のサイトでは、4,979 ピクセルに設定されています。
19. 「初期モーション」セクションで、スクロールの 0.75 倍の速度で右に移動するように設定します。その他の値はすべて 0 に設定します。

20. テキストツールを使用して、テキストフレームを作成します。例のファイルでは、テキストフレームには、「Stack linked text frames with high contrast roll-overs to create unusual menus.」というコンテンツが記されています。 ただし、好みのテキストコンテンツを入力できますコントロールパネルの書式設定オプションを使用して、必要に応じてテキストのスタイルを設定します。この例では、テキストフレームには、背景の塗りのカラーが適用されていません。
21. 選択ツールを使用して、配置された画像の右側にテキストフレームを置きます。この例では、テキストフレームは X 値が（左から）357 ピクセルに、Y 値が（最上部から）5,136 ピクセルに設定されています。実際の位置は、テキストフレームに適用するテキストコンテンツと書式設定オプションに応じて異なります。
22. テキストフレームを選択した状態で、テキストフレームが 4 つのボタンの背面で大きな長方形の前面に表示されるように、オブジェクト／背面へオプションを使用して配置するか、レイヤーパネルで移動させます。
23. スクロール効果パネルで「モーション」チェックボックスをオンにします。T ハンドルをドラッグするか値を入力して、キーの位置を設定します。例のサイトでは、キーの位置は 4,979 ピクセルに設定され、配置された画像（白熱電球グラフィック）で使用されるキーの位置の値と同じです。
24. 「初期モーション」セクションで、テキストフレームがスクロールの半分（0.5 倍）の速度で左方向に移動するように設定します。その他のフィールドはすべて 0 に設定します。

基本的な重ね合わせメニューセクションは現在完成しています。ただし、追加できるもう 1 つのデザインエレメントがあります。ここでは、スライディングメニューの例で、回転した長方形を使用して斜線効果を追加した場合と同様に、大きな長方形の右下隅の上に複数の回転した長方形を追加します。

25. 長方形ツールを使用して、幅の異なる複数の長方形を描画します。ブラウザー背景に適用された背景色と同じ色で長方形を塗りつぶします。そのため、これらの長方形は、大きな長方形が右に移動してそれらの背面に配置されるまで認識されません。必要に応じて、複数の斜めの長方形をグループ化して、単一のエレメントとして操作できます。

26. 必要に応じて、レイヤーパネルを使用するか、オブジェクト／最背面へを選択して、大きな長方形を、ページ上の他のすべてのエレメントの背面になるように配置します。
27. 必ず、定期的にプレビューをクリックするかブラウザーでページをプレビューして下にスクロールし、重ね合わせたメニューが所定の位置に移動するか確認して、進捗状況をテストしてください。テストし終えたら Muse に戻ります。 

モーション背景効果を作成する場合、長いページを覆うタイル背景画像で埋められた一連の大きな長方形を作成できます。この例では、（スクロール効果パネルの「モーション」タブではなく）塗りメニューの「スクロール」タブを使用してモーション設定を適用します。

同様のモーション背景効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 6,254 ピクセルに設定されています。

2. ページの最上部で、長方形ツールを使用して大きな長方形を描画します。例のサイトでは、長方形は幅 1,159 ピクセル、高さ 1,312 ピクセルです。選択ツールを使用して、ページの中央に長方形を配置し、ブラウザーウィンドウの端を超えるまで左右に幅を広げます。
3. まだ長方形を選択した状態で、塗りメニューを使用して背景画像を設定します。サイズを合わせるメニューを「並べて表示」に設定し、画像を並べて表示します。

4. 必要に応じて、効果メニューを使用して、シャドウ効果を設定し、長方形を囲む印象的な境界線を作成できます。
5. 埋められた長方形を選択した状態で、塗りメニューの「スクロール」タブを開きます。「モーション」チェックボックスをオンにしてから、T ハンドルをクリック＆ドラッグするか、フィールドに値を入力して、キーの位置を設定します。例のサイトでは、キーの位置は 512 ピクセルに設定されています。ただし必要に応じて、ハンドルを縮めて、長方形の上端に揃えることができます。
6. 「初期モーション」セクションで、下と左に移動する方向を設定し、両方の移動速度をスクロールの 0.2 倍の速度に設定します。「最終モーション」セクションでも同じ設定を繰り返します。

7. 手順 2 から 6 を繰り返して、別の埋められた長方形を作成します。最初に作成した長方形のすぐ下に新しい長方形を配置して、ブラウザー背景領域は一切見えず、2 つの長方形の間に隙間がないようにします。新しい長方形を別のタイル画像背景塗りで塗りつぶします。
8. 手順 7 を繰り返して、3 番目の大きな長方形を作成して、2 番目の長方形のすぐ下に配置します。塗りメニューを使用して、別のタイル背景画像を設定します。表示メニューでズームアウトしてすべての長方形を表示し、ページ上で垂直方向に並べると役立つ場合があります。

9. 2 番目の長方形を選択した状態で、塗りメニューの「スクロール」タブを開きます。「初期モーション」セクションで、長方形がスクロールの 0.3 倍の速度で右に移動するように変更します。「最終モーション」セクションで、スクロールの 0.3 倍の速度で右に長方形を移動するように同じ設定を適用します。両方の垂直方向のフィールドはそのまま 0 に設定しておきます。

10. 3 番目の長方形を選択し、塗りメニューの「スクロール」タブで設定を変更します。「初期モーション」セクションで、スクロールの 0.25 倍の速度で上に移動し、スクロールの 0.6 倍の速度で左に移動するように設定します。3 番目の長方形の「最終モーション」セクションでも同じ設定を適用します。
11. ファイル／ブラウザーでページをプレビューを選択してページをテストします。ページをスクロールして、それぞれのタイル長方形が、下にスクロールしてページの最下部に到達するまで、斜めに移動するように見えることを確認します。上にスクロールすると、長方形も移動し続けます。
12. ブラウザーを閉じて Muse ワークスペースに戻ります。

この例では、棒グラフがアニメーション表示しながら所定の位置に配置されるように見えます。ピンク色の矢印グラフィックが上に伸びて、グラフの棒の前面および背面を縫うように進みます。グラフの棒は、グラフ領域の最下部から上に伸びていくように見えますが、実際には、より大きな（ページの背景色と同じ単色の白色で塗りつぶされた）白い長方形の背面から現れる、モーションスクロール効果が適用された単色の長方形です。

この例では、スクロール効果とともに複数のテクニックが使用されています。エレメントは、レイヤーパネルを使用して、互いの前面および背面に配置されています。白い長方形は、グラフエレメントの上に描画されます。白い長方形が棒グラフを覆っているとき、棒と矢印はマスクされているかのように見えなくなっています。白い長方形とグラフ領域は、モーションスクロール効果で 0 の設定を使用して、ページがスクロールしても所定の位置から動きません。背面にレイヤー化された棒とピンク色の矢印グラフィックは、モーションスクロール効果が適用され、それによって上に移動して姿を現し、棒グラフを構成します。

同様のマスク効果を作成するには、次の手順に従います。

1. デザインビューで、ページ／ページプロパティを選択します。「最小の高さ」フィールドをさらに大きな値に設定します。このサイト例では、ページの最小の高さは 6,076 ピクセルに設定されています。
2. ページおよびブラウザー背景の両方を単色の白色（または好みの色。ただし、後からマスクの長方形を塗りつぶすときに、この同じ色を使用します）に設定します。
3. 長方形ツールを使用して、ページ上に大きな長方形を描画します。例のサイトの長方形は、幅 804 ピクセル、高さ 489 ピクセルです。
4. 長方形の塗りのカラーを「なし」に設定します。好みの線のカラーを設定します。線メニューで、20 の線幅の線を表示するように長方形の左辺と下辺を設定しますが、上辺と右辺は 0 に設定して線を非表示にします。これで棒グラフの基本領域が作成されます。
    

5. 長方形を選択した状態で、スクロール効果パネルの「モーション」タブを開きます。キーの位置を設定し、すべてのフィールドに 0 を入力します。この設定は、キーの位置に到達する前または後で長方形は動かず、したがってエレメントは所定の位置にとどまることを意味します。

6. 長方形ツールを使用して、さらに大きな長方形を 2 つ描画します。最初の長方形を描画して、グラフの左側に揃えます。例のサイトでは、長方形は幅 657 ピクセル、高さ 1,810 ピクセルです。
7. 2 番目の長方形をグラフ領域の下に描画して、グラフの下端に揃えます。例のサイトでは、長方形は幅 1,002 ピクセル、高さ 1,541 ピクセルです。
8. 両方の長方形の塗りのカラーを白色（またはブラウザー背景色と同じ色）に、線幅を 0 に設定します。選択ツールを使用して、長方形をグラフの 2 辺に揃えます。
   

9. 長方形を選択した状態で、右クリックしてオブジェクト／グループを選択し、2 つのマスク長方形を一緒にグループ化します。
10. 長方形のグループを選択した状態で、スクロール効果パネルの「モーション」タブを開きます。キーの位置を設定し（この例では 1,516 ピクセル）、4 つのフィールドすべてに 0 を入力します。この設定は、白色の長方形のグループが、キーの位置に到達する前後で移動しないことを意味します。グループは、グラフ領域の外側のテーブルのように、所定の位置にとどまります。
11. レイヤーパネルを使用して、グループを一時的に隠してロックします。
12. グループの下のスペースへスクロールし、長方形ツールを使用して、すべて同じ幅の長方形を合計で 5 つ描画します。例のサイトでは、棒の幅はすべて 74 ピクセルですが、高さは異なります。左から右に見ていくと、例の 5 つの長方形の高さは、141、188、292、444、583 です。すべての長方形は、グラフ領域の左辺と下辺を示す線と同じ緑色で塗りつぶされます。

13. 長方形（左から右）の場所の X 値と Y 値を下に示します。
    • X：200 Y：2622
    • X：330 Y：2797 
    • X：460 Y：3081 
    • X：590 Y：3304 
    • X：721 Y：3499
14. 次に、左の長方形から右に、それぞれの長方形を選択します。それぞれを選択し、スクロール効果パネルの「モーション」タブの「モーション」チェックボックスをオンにして、次のキーの位置を設定します。
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
15. すべての長方形を選択した状態で、「初期モーション」セクションでスクロールの 1 倍の速度で上に移動するように、スクロール効果パネルの設定を変更します。その他のフィールドをすべて 0 に設定します。
     

16. 透明度付きの PNG をページ上に配置します。例のサイトでは、PNG ファイルは、ジグザグに上昇するピンク色の矢印のグラフィックになっています。この例で使用される PNG は幅 695 ピクセル、高さ 443 ピクセルです。これをページ上に配置した後、X：78、Y：3,427 の位置まで移動させます。
17. レイヤーパネルで、PNG ファイルを、（左から）1 番目と 3 番目の棒を表す長方形の背面になり、2 番目、4 番目、5 番目の棒の前面になるように並べ替えます。

18. 矢印画像を選択した状態で、スクロール効果パネルの「モーション」タブを開いて、「モーション」チェックボックスをオンにします。キーの位置を設定します（この例では 3,238 ピクセル）。「初期モーション」セクションで、方向を上と右に設定し、両方の「初期モーション」フィールドにスクロール速度の 0.25 倍と入力します。「最終モーション」セクションの両方のフィールドを 0 に設定します。

19. レイヤーパネルで、以前に隠してロックした 2 つの白い長方形のグループを表示し、ロック解除します。ページの他のコンテンツの上に表示されるように、グループを他のエレメントより前面に移動します。グループは最前面にあるので、棒と矢印グラフィックがグラフ領域のフレーム内に上昇してきたときに、これらだけを表示するマスクとして機能します。
20. ファイル／ブラウザーでページをプレビューを選択してページをテストします。ページをスクロールして、棒グラフが所定の位置まで移動することを確認し、棒グラフエレメントがグラフ領域内に入るまで、棒をマスクしている 2 つの白い長方形が棒グラフエレメントを隠していることを確認します。
21. ブラウザーを閉じて Muse ワークスペースに戻ります。

Demential Lab Web サイトを参照して、スクロール効果機能の使用例をご確認ください。