Adobe Muse のページエレメントに対してモーションと不透明度スクロール効果を適用する方法を説明します。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

ページエレメントへのスクロール効果の適用

スクロール効果パネルには、ページのスクロールに基づいて、モーション、不透明度、スライドショーの各種ウィジェットのほか、Adobe Edge Animate のコンテンツを制御する 4 つの異なるタブがあります。スクロール効果を互いに連動して適用する場合や、いくつかのエレメントを固定もしたり、100% の幅に設定したり、レイヤーパネルを使用して互いの前面および背面に配置する場合に、魅力的な様々な効果を作成できます。

スクロール効果パネルを使用してモーションスクロール効果を適用

スクロール効果パネルのインターフェイスは、ブラウザー背景および背景塗りのスクロール効果パネルと同様です。スクロール効果パネルの「モーション」タブを使用してページエレメントにスクロール効果を適用するには、次の手順に従います。

  1. Muse で、デザインビューに切り替えて、ページページプロパティを選択します。
  2. 「最小の高さ」値を 2,000 ピクセル以上に設定して、スクロールできるだけ十分に長いページにします。
  3. 「OK」をクリックして変更を保存し、ページプロパティダイアログボックスを閉じます。
  4. デザインビューで、ページに長方形またはテキストフレームを描画します。
  5. 塗りメニューの「塗り」タブを使用して、タイル/非タイル背景画像を追加します。もしくは、単色またはグラデーションの塗りのカラーだけを選択します。
  6. ウィンドウ/スクロール効果を選択して、スクロール効果パネルを開きます。
スクロール効果パネルを開いて、スクロール効果設定にアクセスします。
スクロール効果パネルを開いて、スクロール効果設定にアクセスします。

  1. スクロール効果の有効化:スクロール効果パネルに「モーション」タブ(左端)が表示されます。ページ上のエレメントが選択されている間、「モーション」チェックボックスをオンにします。

    ヒント:「モーション」チェックボックスをオンにすると、上端から延びた T 字状のハンドルがエレメントに追加されます。T 字状のハンドルは、エレメントに適用したスクロール効果の適用されたキーの位置を示します。スクロール効果は、訪問者がキーの位置に到達すると有効になります。

    デフォルトで、T 字状のハンドルはエレメントより上に表示されます。ただし、ハンドルをクリック&ドラッグしてさらに上に伸ばしたり、下にドラッグして制御しているエレメントの上端に揃えたり、ハンドルをエレメントより下にドラッグすることができます。

  2. T 字状のハンドルを移動してキーの位置を設定する:T ハンドルをドラッグしてキーの位置を設定します。これにより、スクロールしたページが T 字状のハンドルの最上部に達する前および後で生じる移動を設定できるようになります。

    または、「モーション」タブを開いているときに、スクロール効果パネルの中央にある「キーの位置」フィールドに数値を入力することもできます。上の画像では、キーの位置は 200 ピクセルに設定されています。

    T 字状のハンドルの位置は、エレメントのキーの位置を表します。ページを垂直方向にスクロールすると、「初期モーション」セクションの設定が適用されるので、エレメントの位置はデザインビューに示されたとおりの位置に一致します。

    ビジターがページをスクロールするかアンカーリンクをクリックして、エレメントのキーの位置を超えたら、「最終モーション」セクションの設定が適用されます。

    「初期モーション」セクションには、垂直方向と水平方向の一組の矢印と速度のオプションが含まれます。

  3. 初期モーションの垂直方向の設定:どちらかの垂直方向ボタンをクリックして垂直方向(上または下)を選択します。垂直方向の矢印の横にあるフィールドに速度の値を入力して、ページスクロールの速度に相対した移動の速度を設定します。0 を入力すると、エレメントは垂直方向には移動しません。小数点を使用してパーセンテージを入力することもできます。例えば、0.5 と入力すると、エレメントはページのスクロール速度の半分の速さで垂直方向に移動します。

  4. 初期モーションの水平方向の設定:左または右矢印をクリックしてエレメントがスクロールする水平方向(左または右)を設定し、エレメントがキーの位置に到達するまで移動する方向を設定します。水平方向の矢印の右側にあるフィールドで、水平方向の速度の値を設定します。エレメントを水平方向に移動させない場合は、初期モーションの水平方向の速度フィールドを 0 に設定します。

  5. 手順 7 と 8 を繰り返して、「最終モーション」セクションのモーションの方向と速度を設定します。

下に示す例では、キーの位置は 500 ピクセルに設定されています。ブラウザーがスクロールし始めると、エレメントは、1 倍の速度、つまりページスクロールと同じ速度で所定の位置に向かって下に移動します。ページがキーの位置までスクロールしたときに、エレメントはその所定の位置に到達します。ページがキーの位置を過ぎると、エレメントはページスクロールの 2 倍の速度で右に移動します。

Adobe Muse でモーション設定を適用してスクロール効果を設定
モーション設定を適用してスクロール効果を設定

  1. プレビューを押すか、ファイル/ブラウザーでページをプレビューを選択して、スクロール効果をテストします。ページを下にスクロールし、もう一度上に戻って、エレメントの移動を確認します。
  2. テストが終了したら、Muse に戻るか、「デザイン」ボタンをクリックしてページの編集を続けます。

スクロール効果パネルを使用して不透明度スクロール効果を適用

このセクションでは、ビジターのスクロール操作に基づいてエレメントの表示を変化させる変形効果を表示に適用する方法について説明します。これは、ビジターがページの新しいセクションまで下にスクロールしたときにアイテムをフェードインまたはフェードアウトさせることによって、コンテンツを表示したり非表示にしたりするときに役立つ方法です。スクロール効果パネルの「不透明度」タブを使用して、ページエレメントの透明度に影響するスクロール効果を適用するには、次の手順に従います。

  1. デザインビューでページを編集するときに、ページプロパティの「最小の高さ」フィールドに、大部分のモニターの平均の高さよりも大きなピクセル値(2,000 ピクセルなど)が入力されていることを確認します。または、ページコンテンツをページに追加して、スクロールできるだけ十分に長いページにすることもできます。
  2. デザインビューで、ページに長方形またはテキストフレームを描画します。
  3. 塗りメニューの「塗り」タブを使用して(または塗りパネルを使用して)、選択したページエレメントにタイル/非タイル背景画像を追加するか、単色またはグラデーションの塗りのカラーを設定します。(または必要に応じて、スライドショーウィジェットを追加したり、Adobe Edge Animate OAM ファイルをページに配置します)。
  4. エレメントを選択した状態で、スクロール効果パネルの「不透明度」タブ(左から 2 番目のタブ)をクリックし、続いて「不透明度」チェックボックスをオンにします。
「不透明度」チェックボックスをオンにして、選択したエレメントに不透明度スクロール効果を有効にします。
「不透明度」チェックボックスをオンにして、選択したエレメントに不透明度スクロール効果を有効にします。

不透明度オプションを有効にすると、エレメント上に別の種類のハンドルが表示されます。「モーション」タブでキーの位置の設定に使用する T ハンドルと同様に、このハンドルをクリック&ドラッグしてエレメントより上に表示したり、上端に一致する(つまりエレメントのどの部分よりも上になる)ように下にドラッグしたり、エレメントより下にドラッグしたりすることができます。不透明度ハンドルには 3 つの異なる部分があり、これらの部分を個別にドラッグしてキーの位置、フェード位置 1、フェード位置 2 の値を設定できます。

  1. キーの位置を設定するには、ハンドルの中央の四角をクリック&ドラッグします。下に示す例では、キーの位置は 150 ピクセルに設定されています。
中央の四角のハンドルを垂直方向にドラッグしてキーの位置を設定します。
中央の四角のハンドルを垂直方向にドラッグしてキーの位置を設定します。

  1. ハンドルの上側の円部分をクリック&ドラッグして、目的の場所に配置します。下に示す例では、フェード位置 1 は 100 ピクセルに設定されています。
不透明度ハンドルのフェード位置 1 を設定
上の左側にある円形ハンドルをクリック&ドラッグして、エレメントの透明度に影響を与える最初の位置を設定します。

  1. ハンドルの下側の円部分をクリック&ドラッグして、目的の場所に配置します。下に示す例では、フェード位置 2 は 200 ピクセルに設定されています。
不透明度ハンドルのフェード位置 2 を設定
上の右側にある円形ハンドルをクリック&ドラッグして、エレメントの透明度に影響を与える 2 番目の位置を設定します。

注意:

必要に応じて、キーの位置をドラッグしてフェード位置ハンドルに並べることにより、同じ値に設定できます。ハンドルをドラッグする代わりに、スクロール効果パネルのこれらのフィールドにそれぞれ数値を入力することもできます。

この例では、エレメントは完全に透明な状態から始まり、次第に不透明になっていきます。ページがキーの位置に到達すると完全に不透明になります(キーの位置に対応した不透明度値は現在 100% に設定されています)。ページがスクロールしてキーの位置を過ぎると、再びエレメントは徐々に透明になっていき、ページが 200 ピクセルを過ぎるとフェードアウトして見えなくなります。

スクロール効果の不透明度のパーセンテージを設定
スクロール効果パネルの「不透明度」タブで、不透明度のパーセンテージを設定します(0% は完全に透明)。

  1. プレビューを押すか、ファイル/ブラウザーでページをプレビューを選択して、スクロール効果をテストします。ページを下にスクロールし、再び上に戻して、ページのスクロールに連動してエレメントの不透明度が変化することを確認します。
  2. テストが終了したら、Muse に戻るか、「デザイン」ボタンをクリックしてページの編集を続けます。

スクロール効果パネルの「スライドショー」タブの使用

スクロールモーションはまた、スクロールの操作とスライドショーの画像表示を組み合わせる場合によく使用されます。スライドショーウィジェットをページに追加し、スクロール効果パネルの「スライドショー」タブを使用して、ページを特定の場所にスクロールするごとにスライドショーで自動的に新しい画像を表示するなどのスクロール効果を適用します。

「スライドショー」タブ(左から 3 番目のタブ)をクリックして、このセクションの設定を確認します。

スクロールモーションインターフェイスのこの部分は通常、スライドショーウィジェットをページに固定するときに使用します。一般に、スライドショーウィジェットは、より大きなスライドショーコンテナだけを表示し、サムネールと「次へ」および「前へ」ボタンを非表示にするように(オプションメニューを使用して)設定されます。

この効果には特にフルスクリーンスライドショーが適していますが、追加するスライドショーウィジェットの種類は最終的にサイトのデザインに応じて異なります。

スライドショーウィジェットにスクロール効果を適用するには、次の手順に従います。

  1. ページプロパティダイアログボックスの「最小の高さ」フィールドを変更して、スクロールできるだけ十分にページを長くします。または、コンテンツを追加してさらに長いページを作成します。
  2. スライドショーウィジェットをウィジェットライブラリからページにドラッグします。オプションメニューを使用して、スライドショーオプションを設定します。(スライドショーウィジェットにスクロール効果を適用すると、「次へ」、「前へ」、および「サムネール」オプションは通常無効になります)。
  3. オプションメニューの「画像」セクションの横にあるフォルダーをクリックして、スライドショーウィジェットに画像を追加します。コンピューターから追加する画像を参照して選択し、画像ギャラリーに登録します。
  4. コントロールパネルの固定インターフェイスを使用して、スライドショーをブラウザーウィンドウ内のその現在の位置に固定します。スライドショーを選択した状態で、6 つの固定位置のいずれかをクリックします。
スライドショーウィジェットにスクロール効果を適用
ページがスクロールしてもブラウザーウィンドウでの位置が変わらないように、スライドショーウィジェットを特定の場所に固定します。

固定されたスライドショーを追加し設定した後に、スクロール効果を追加できます。

スクロール効果パネルの「スライドショー」タブにある、スライドショーウィジェットを選択した状態で、「スライドショー」チェックボックスをオンにします。

スクロール効果パネルで「スライドショー」オプションをオンにします。
スライドショーウィジェットを選択し、スクロール効果パネルで「スライドショー」オプションをオンにします。

「スライドショー」オプションをオンにするとすぐに、デザインビューでキーの位置のハンドルがスライドショーに追加されることに注意してください。キーのスクロール位置の値を変更する場合は、ハンドルの左側および右側をドラッグすることも、「キーのスクロール位置」フィールドに数値を入力することもできます。また、スクロール効果パネルで上下の矢印をクリックして、数値を増減することもできます。

スクロール効果パネルの「スライドショー」タブは、スライドショー画像の再生を制御できる 2 通りの異なる方法を備えたインターフェイスです。自動再生するようにスライドショーを設定することも、ページのスクロールに基づいて画像を 1 つずつ進めるように設定することもできます。

最初の方法は、目的のキーの位置を設定してから、「自動再生」チェックボックスをオンにするというものです。

ページをスクロールしてキーの位置を過ぎたとき(またはビジターがアンカータグへのリンクをクリックし、キーの位置よりも下の部分にジャンプしたとき)、スライドショーの再生が始まります。自動再生機能は、ページを上にスクロールしてキーの位置よりも上に戻るか、ビジターがページから離れるまで、一連の画像を繰り返し表示し続けます。

上図に示した例では、スライドショーは、ページが 100 ピクセル(または、そのキーの位置の設定より下の任意の箇所)までスクロールすると再生を開始します。ビジターが再び上にスクロールした場合、ページがキーの位置(99 ピクセル以下)より上までスクロールすると、スライドショーは再生を停止します。

スライドショーウィジェットを制御する 2 番目の方法は、キーの位置を設定してから、「スライドの切り替え間隔」ラジオボタンをオンにするというものです。このワークフローでは、ページがスクロールした距離に基づいてスライドショーの画像を切り替える間隔を示すピクセル数も、ラジオボタンの下にあるフィールドで設定します。

例えば、他のページコンテンツがスクロールしていても、固定された場所から動かないようにスライドショーウィジェットを長いほうのページに固定することができます。「スライドの切り替え間隔」オプションを設定することにより、指定したピクセル数だけページが下にスクロールするごとに、スライドショーを次の画像に切り替えるように設定できます。

上の画像では、キーの位置は 200 ピクセルに設定されています。ページをスクロールして最上部から 200 ピクセルの地点を過ぎた後、さらにページが 30 ピクセルをスクロールするごとに、一連の中で次の画像がスライドショーに表示されます。

Adobe Muse でスライドショーのスクロール効果を設定
ページが特定の距離(ピクセル単位)だけ下にスクロールするごとに次の画像に切り替わるようにスライドショーを設定します。

スクロール効果パネルの「Adobe Edge Animate」タブの使用

Adobe Edge Animate は、HTML5 ベースの Web アニメーションを作成するための直観的なデザインツールです。Edge Animate のインターフェイスを使用すると、ループするモーショングラフィックおよびシンボルを使用したコンポジションを構築できます。Adobe Edge Animate を使用して作成したアニメーションは、OAM ファイルとして書き出して、Muse サイトのページに配置できます。Edge Animate で作成したアニメーションはプラグインなしにブラウザーで再生されます。

Adobe Edge Animate でアニメーションを構築するときに、ステージ上にエレメントをドラッグし、タイムラインを使用してその動きを操作します。エレメントを直接メインのタイムラインに追加する以外に、独自の内部タイムラインを使用して再生するサブエレメントを入れ子にしたエレメントを作成することもできます。Adobe Edge Animate の使用について詳しくは、Adobe Edge Animate 製品ページを参照してください。Adobe TV の Adobe Edge Animate ビデオチュートリアルもご覧ください。

Adobe Edge Animate スクロールモーション機能を使用するには、最初の手順として、この目的専用のコンポジションを設計します。スクロール効果を OAM ファイルに適用して、メインのタイムラインに配置されるアニメーションに影響を与えることができます。ページのスクロール時に動かすアイテムだけをメインのタイムラインに配置する(およびそれ以外のアニメーション内のすべてを入れ子のシンボルタイムラインに配置する)ように、効果を十分に配慮してアニメーションをデザインすることにより、インタラクティブなアニメーションを作成できます。ビジターがページをスクロールすると、スクロール効果設定は、メインのタイムライン上のアニメーション化されたエレメントの再生だけを制御します。

Adobe Muse サイトに追加するアニメーションの作成については、「Adobe Muse でのアニメーションコンテンツの追加」を参照してください。

スクロール効果パネルの「スライドショー」タブを使用するには、次の手順に従います。

  1. Adobe Edge Animate から OAM ファイルを書き出して、それをサイトフォルダーに保存します。
  2. Muse を起動し、ページをクリックしてデザインビューでそのページを開きます。ページプロパティダイアログボックスで最小の高さの設定を変更するか、ページコンテンツを追加してより長いページを作成することにより、スクロールできるだけ十分に長いページにします。
  3. ファイル/配置を選択し、サイトフォルダーから OAM ファイルを参照して選択します。
  4. スクロール効果パネルを開きます。「Adobe Edge Animate」タブ(左から 4 番目のタブ)をクリックして、このセクションの設定を確認します。
  5. OAM ファイルを選択した状態で、「Edge Animate」チェックボックスをオンにします。
Adobe Muse でのアニメーションのスクロール効果の設定
ページが特定の位置までスクロールしたときに再生を開始するように Edge Animate アニメーションを設定するか、ページが特定の距離(ピクセル単位)だけ下にスクロールするごとにフレームを切り替えるように設定します。

上の画像では、キーの位置は 50 ピクセルに設定されています。T ハンドルをドラッグするか、「キーの位置」フィールドに別の値を入力して、この位置を調整できます。

キーの位置を設定した後、次の 2 つのオプションを使用してアニメーションの再生を制御できます。

  • 自動再生:このオプションを選択すると、メインのタイムラインのアニメーションは、メインのタイムライン内のフレーム数とは無関係に、ブラウザーがキーの位置までスクロールするとすぐに再生を開始します。アニメーションは、ページが上にスクロールしてキーの位置よりも上になるまで再生し続けます。
  • フレーム切り替え間隔:このオプションを選択すると、メインのタイムラインのアニメーションは、ページがスクロールして特定のピクセル数だけ通過するごとに 1 フレーム進みます。例えば、高さが 3000 ピクセルのページを作成し 10 の数値を入力した場合、メインのタイムラインのアニメーションは、ページが 10 ピクセルスクロールするごとに 1 フレームという速度で再生します。ビジターがスクロールを速くすると、アニメーション速度は上がります。

注意:

Adobe Edge Animate コンポジションでメインのタイムラインの入れ子になった、またはそこからリンクされたアニメーション化されたオブジェクトはどれも、スクロールモーション効果設定の影響を受けません。したがって、静止した背景を使用することも、ビジターのページスクロール操作とは無関係に一貫して動く、ループし続ける入れ子エレメントを使用することも選択できます。

  1. スクロール効果パネルの「Edge Animate」タブで設定を選択した後、ファイル/ブラウザーでページをプレビューを選択します(または「プレビュー」ボタンをクリックします)。上下にスクロールし、(メインのタイムラインに追加された)Edge Animate アニメーションのコンテンツが再生されることを確認して、ページをテストします。
  2. 変更する必要がある場合は、Muse に戻り(または「デザイン」ボタンをクリック)、スクロール効果パネルの設定を変更します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー