如何在 Adobe Muse 中使用捲動效果

在本節中，我們將說明眾多捲動效果使用方式中的其中幾種，以便您用於新增互動功能、獨特網站導覽和簡單明瞭的動作圖形到 Muse 網站。

依照下列步驟開始：

1. 造訪線上範例網站，然後按一下各區段，查看每個目標的範本。向下捲動各範例頁面，查看捲動效果如何控制頁面元素的顯示方式。
2. 捲動到線上範例網站尾端，並下載 .muse 檔案。
3. 在 Muse 工作區開啟範例網站並檢閱專案。
4. 開啟「圖層」面板，展開標示為「內容」的區段，查看用來建立各範例的元素。

此效果會使一組獨立元素在訪客向下捲動頁面時飛入，重新組合進頁面設計。圖形和文字框都是使用建立互動式編譯的捲動效果進行控制，彷彿一片片拼圖結合在一起。以這種方式在網頁呈現產品細節通常能引起人的興趣。

這個範例的工作流程使用「捲動效果」面板「動作」標籤的「初始動作」區段，讓元素結合為整合的設計。各片段就位後，「最終動作」設定會設為 0，現有的元素在新元素飛入時才不會移動。

請依照下列步驟操作來建立類似的片段組合效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 14,120 像素。
2. 使用「文字」工具建立文字框，然後輸入所需的文字內容。
3. 開啟「捲動效果」面板的「動作」標籤，啟用「動作」核取方塊。在本範例中，「初始動作」區段的設定會導致文字框以捲動速度 0.25 倍 (四分之一的速率) 的速度向下移動到位。網頁達到文字框的關鍵位置時，文字框會達到它在「設計」視圖中放置的位置。接著，「最終動作」設定 (兩個方向的值都是 0) 會導致第一個元素保持在原位，彷彿元素已固定。
4. 含透明度的 PNG 檔案 (手機素描) 置於文字框下方。此元素使用「捲動效果」面板「動作」標籤中的設定，從頁面左側飛入、移至定位，然後停住不動。
5. 在手機素描之後，隨即有較小的白色元素依循類似的移動模式，從頁面左側飛入，然後停住不動。白色圖形是模擬手機頂端的聽筒。這項資源 (名為 phone-earpiece.png) 會在「圖層」面板中排列在手機素描的上方，這樣它才會在設計中顯示於手機素描的上方。 
6. 緊接聽筒之後，有個模擬手機「首頁」按鈕的小型白色元素從右側飛入，模仿聽筒的行為，並同樣顯示於設計中的手機素描上方。
7. 接著，有個從白到淺灰隱約垂直漸層的淺色矩形圖形，使用「捲動效果」面板的「動作」標籤移入定位，完全貼合手機素描的透明中央區域。到位後，它就停住不動，顯示手機螢幕的外觀。螢幕元素 (phone-screen.png) 堆疊在「圖層」面板底部，因此會出現在頁面設計中所有其他元素後面。
8. 四個矩形 (填滿實色的藍色、綠色、黃色和紅色) 的組合接著移入定位。為了建立一起飛入的散佈效果，已在「捲動效果」面板的「動作」標籤將每個矩形設為不同的方向和速度。在「初始動作」區段中，藍色矩形向下再向右移動，綠色和黃色矩形向上再向右移動，而紅色矩形向上再向左移動。在「最終動作」區段中，所有矩形兩個方向的設定都是 0，使得每個元素彷彿一抵達手機螢幕上方的最終目的地就被固定到位。
9. 其他片段組合後，第二個文字欄位會向上移動到第一個文字欄位下方，移動速率是頁面捲動速度的 0.5 倍 (一半)。

最後，底部還剩下兩個元素：填有與頁面相同之實色的實色矩形 (使其在設計中隱形)，以及其後的物件群組 (有燈泡圖形的黃色矩形)。

實色矩形是用於隱藏排列在它後面的群組。

10. 矩形基本上會固定不動，因為「初始動作」和「最終動作」欄位中的所有值都設為 0。頁面捲動到燈泡圖形群組的關鍵位置時，燈泡圖形會向左移動並顯示出來，因為其已不再被上方的矩形遮蔽。燈泡群組堆疊在手機螢幕元素上方、手機素描下方，因此燈泡圖形看起來就像滑入定位 (類似水平撥動時真實世界的手機轉換效果)。燈泡群組會覆蓋先前代表手機螢幕的漸層矩形。

如同這個簡單的範例所示，您可以結合超長頁面、一系列在「圖層」面板中精心分層顯示的元素，以及「捲動效果」面板的「動作」標籤，來建立頁面向下捲動時，片段以動畫方式結合的錯覺。

滑動選單效果使用許多片段組合效果所述的相同準則。使用「捲動效果」面板的「動作」標籤，創造元素的飛入效果；在部分元素可以在頁面設計現身前，使用矩形將其隱藏。

本範例使用精心放置的矩形群組，建立具有複雜稜角設計的外觀。

在瀏覽器檢視範例網站，觀看飛機由右到左水平飛過頁面，其後接著一組經過設計的選單選項，以及斜紋漸層背景。

請依照下列步驟操作，以建立類似的滑動效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 4,665 像素。
2. 飛機影像堆疊在頁面所有其他內容上方，因此會出現在「圖層」面板中清單的最上方。飛機影像已在「捲動效果」面板的「動作」標籤設為在關鍵位置前後都向左移動。
   

3. 四個文字框都設定為向左飛入並垂直堆疊，以建立導覽選單。在「捲動效果」面板的「動作」標籤中，每個文字框在「初始動作」區段的速度都相同 (1.25 倍捲動速率)。每個文字框也有不同的關鍵位置。隨著頁面向下捲動，各文字框會滑入定位，在設計左側對齊。所有文字框在「最終動作」區段的值都是 0，使得選單項目一旦到位就會固定在位置上。
4. 文字框是以實色背景顏色填色，由於其顯示的是斜線切邊，而不是直線垂直邊緣，因此乍看之下像是影像。在文字框上方堆疊三個一組的矩形 (填滿和瀏覽器填色顏色相同的實色) 圖層，便能達成此效果。

5. 文字框動畫一開始被另一個矩形群組遮蔽，因為文字框在「圖層」面板中排列在該群組下方。該群組是三個矩形的組合：垂直漸層的大矩形，以及填滿漸層頂部實色的其他兩個小矩形 (一個正方形，一個經過旋轉)。

6. 如果您向下捲動並查看群組底部，就會看到另外四個一組寬度各異的已旋轉矩形，均對齊在大漸層矩形右下角上。
   

群組適用於結合一組元素，並將其視為單一項目控制。在本範例中，不同矩形組成的群組已套用動作捲動效果，讓群組以單一實體的方式移動。

本範例也示範了負空間的創意利用方式。如果瀏覽器填色是套用實色背景顏色，您可以將填滿相同顏色的矩形堆疊在其他矩形上方，創造出許多有趣的剪下效果。您可以使用矩形從 Muse 工作區建構圖形，而不需要用影像編輯程式設計圖形和放置單一圖形。

這個日出和日落動畫範例的製作，結合使用了兩種捲動效果：動作和不透明度。本範例將展示填滿漸層顏色的頁面背景，搭配單一置入的 PNG 太陽影像。PNG 影像包含透明區域，可讓背景頁面填色顏色透出來。

請使用瀏覽器檢閱範例網站，瞭解太陽如何從 100% 透明度淡入上升，在頁面上移動。位於高峰時，太陽是完全不透明，但隨著您繼續向下捲動頁面，太陽逐漸下山，再度變得越來越透明，直到淡出為止。
請依照下列步驟操作，以建立類似的淡化效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為大於一般螢幕顯示範圍的值，頁面才能捲動。在網站範例中，頁面的最小高度設為 2,988 像素。
2. 將太陽影像置於頁面中央。在「捲動效果」面的「動作」標籤中的關鍵位置設為 1410 像素。另外，請注意「初始動作」和「最終動作」區段的設定。

這些設定會使太陽以半圓路徑移動，從頁面左下側朝上畫一個弧形到中央 (抵達關鍵位置)，然後再朝下移動到頁面右下側。

3. 在選取太陽的狀態下，按一下「不透明度」標籤，查看其設定。「淡化位置 1」設為 726 像素 (太陽上方)。「淡化位置 2」設為 1925 像素 (太陽下方)。太陽一開始的不透明度為 0% (完全透明)，然後隨著頁面捲動到其關鍵位置，變成完全不透明。隨著頁面向下捲動超過太陽的關鍵位置，不透明度從 100% 變成 0% 不透明，建立出淡入和淡出的效果。
   

4. 選擇「檔案 > 在瀏覽器中預視網頁」，測試頁面。捲動頁面，觀看太陽一邊上升，一邊淡入，然後一邊朝右下移動，一邊淡出。
5. 關閉瀏覽器，返回 Muse 工作區。

本範例示範了如何使用捲動效果，控制從 Adobe Edge Animate 轉存的 OAM 檔案。在本範例中，頁面是以垂直漸層填色，從淺藍綠色轉變成深藍色。

透過「動作」和「Edge Animate」標籤套用的設定組合，可建立出這個動畫效果。

三個相同 OAM 檔案的執行個體以水平方式並排，建立出一列動畫指南針。在瀏覽器檢視範例網站時，全部三個指南針都會向上移入視野，然後留在原位。三個指南針旋轉的速率各不相同，但導致指南針以不同速度旋轉的是「捲動效果」面板中的設定，不是 Edge 動畫檔案的建構。

請依照下列步驟，以三個置入的 OAM 檔案建立類似的效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 7465 像素。
2. 選取頁面上全部三個指南針的執行個體。在「捲動效果」面板的「動作」標籤中，您可以看到，全部三個 OAM 檔案都有相同的關鍵位置和動作設定，因為所有值都顯示出來了。

如果您使用瀏覽器預視樣本，就會看到全部三個 OAM 元素一起跳起來，然後彷彿被固定般排成一列。

3. 按一下指南針以外的地方，取消選取全部三個指南針，然後只選取左邊的指南針。按住 Shift 鍵並選取右邊的指南針，同時選取兩者。開啟「捲動效果」面板的「Edge Animate」標籤，檢閱設定。

兩側的指南針都設為重複播放時間軸動畫，而且頁面每向下捲動 350 像素就切換到下一個影格。

4. 取消選取兩個靠外面的指南針。選取中間的指南針，然後再次檢查「Edge Animate」標籤，會看到「切換影格間隔」欄位是設為 400 像素。此設定會使中間動畫的移動速度比兩個靠外面的指南針慢。

您可以依頁面捲動速度變化多個置入的 Edge Animate 動畫速度，建立有趣的動畫效果。例如，您可以新增多個相同 OAM 檔案的反覆項目，並將其套用不同的捲動效果設定，以建立魚群、飄著浮雲的天空，或是其他效果。

您可以控制「幻燈片展示」Widget 中的影像組合相對於頁面捲動方式的顯示方式。這需要新增「幻燈片展示」Widget 到頁面，然後使用「捲動效果」面板的「幻燈片展示」標籤更新幻燈片展示選項。

在本範例中，幻燈片展示填入了建立 360 度背包旋轉視圖的一連串影像。您可以架起三腳架，拍攝放在旋轉支架上物件的相片，拍攝類似的幻燈片展示影像。此效果對於顯示互動式產品描述相當有用，可協助潛在客戶在購買前從全方位的角度查看項目。

請依照下列步驟操作，使用「幻燈片展示」Widget 建立類似的效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 7,465 像素。
2. 設定包含 Superpack 這個字的文字框，以使用捲動效果。在「動作」標籤中，將「初始動作」設定設為由左到右移動文字，移動速率和頁面捲動速率相同。在「最終動作」設定中，兩個方向都設為 0，因此文字框會留在原位，就像固定在頁面上。
    

3. 開啟「Widget 程式庫」，將「幻燈片展示」Widget 拖移到頁面中央文字框最終目的位置的右側。
4. 使用「選項」選單中的「新增影像」選項，以使用影像檔案填入幻燈片展示。 

在選取幻燈片展示的狀態下，您可以選取「幻燈片展示」Widget，並使用「控制」面板中的「固定」介面固定幻燈片展示。您也可以嘗試新增「全螢幕幻燈片展示」Widget，並以捲動效果加以控制。 

5. 在幻燈片展示為已選取的狀態下，開啟「捲動效果」面板的「幻燈片展示」標籤，並啟用「幻燈片展示」核取方塊。
6. 拖移 T 控制點，或是在欄位中輸入值，設定關鍵位置。在本範例中，關鍵位置設為 1066 像素。
7. 啟用「切換投影片間隔」選項按鈕，將其下方的欄位設定為 50 像素。
   

8. 在「預視」或瀏覽器中測試頁面。向下捲動頁面，觀看背包旋轉。您也可以將一連串相似但稍有差異的影像檔案 (類似動畫 GIF 中的影格) 填入幻燈片展示，建立向上飛或向下墜的影像。
9. 測試捲動效果後，返回 Muse 中的「設計」視圖，繼續編輯頁面。
   

您可以使用捲動效果建立非常長的頁面，並將其分割為外觀大相逕庭的多個區段。訪客向下捲動頁面時，他們會在看似逐一顯示的頁面區段間轉換，這些頁面區段具有動畫文字效果和使用陰影效果建立的分隔邊框。

您可以使用錨點標記，或直接新增註解，鼓勵訪客向下捲動頁面，查看每個區段。到達範例網站底部時，按一下「Back to Top」(回到頂端) 按鈕，就會看到錨點連結帶動整個頁面快速捲動返回頁面設計頂端。

請依照下列步驟操作，以建立類似的逐一顯示效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 16,990 像素。
2. 在「瀏覽器填色」選單中，將瀏覽器填色顏色設定為實色藍色。

3. 在選取整個頁面的狀態下，使用「填色」選單將頁面顏色設定為「無」，讓藍色的瀏覽器填色穿透顯示出來。
4. 將頁面向下捲動到距離頂端約 2248 像素的位置。使用「矩形」工具繪製寬 3000 像素、高 2000 像素的矩形。使用「選取」工具讓矩形在頁面上置中，且矩形兩側向外延伸超過瀏覽器視窗邊緣。
5. 在仍選取矩形的狀態下，使用「填色」選單設定實色綠色填色。使用「效果」選單設定陰影效果。

6. 在選取綠色矩形的狀態下，在「捲動效果」面板的「動作」標籤中啟用「動作」核取方塊。按住 T 型控制點並將其拖移至矩形上緣的關鍵位置，也就是範例網站中 2248 像素的位置。

7. 在「初始動作」區段中，將矩形設定為以 1.5 倍捲動速率的速率向下移動。將所有其他方向設為 0。
8. 使用「文字」工具，在綠色矩形頂端附近建立文字欄位。在本範例中，文字欄位顯示：This is the roll-up. (這是逐一顯示效果)。您可以輸入任意文字內容，並套用自己喜歡的文字格式設定。
9. 在選取文字框的狀態下，啟用「捲動效果」面板的「動作」標籤。將 T 型控制點拖移到對齊綠色矩形上緣的位置並更新設定，以控制文字框相對於頁面捲動的顯示方式。

10. 將「初始動作」的向下方向設定為以 1.5 倍的捲動速率移動。將面板中的其他值設為 0。這會使文字欄位以和綠色矩形一樣的方向和速度向下移動。一旦頁面捲動超過矩形和文字框的關鍵位置，矩形和文字框都會留在原位。
11. 按一下「預視」，您便可以向下捲動，查看綠色矩形和文字欄位如何由上往下捲動，進入視野。完成測試後，按一下「設計」，繼續編輯頁面。
12. 使用「檢視」選單，縮小至網站設計的 10%。選取綠色矩形和文字欄位。按住 Option/Alt 鍵，同時在頁面將這兩個元素進一步向下拖移，加以複製。將複製矩形的填色顏色設定為深藍色，然後使用文字工具更新文字內容。

在本範例中，複製的文字框內顯示以下文字：Use it to drastically alter the appearance of your website. (將其用於大幅修改網站的外觀)。然而，您可以輸入任何想要的文字，識別頁面的深藍色區段。

13. 使用「選取」工具，將複製矩形和文字框置於頁面頂端下方約 5,448 像素的位置。
14. 在選取深藍色矩形的狀態下，核取「捲動效果」面板的「動作」標籤。關鍵位置已自動更新到矩形的新位置 (5,448px)，「初始動作」區段中的向下方向仍然設為，以捲動速率 1.5 倍的速率移動 (其他值都設為 0)。如果您查看複製的文字框，就會看到複製的元素也保留同樣的捲動效果。
15. 另外重複步驟 12 和 13 四次，建立共六個其上含有文字框的大型矩形。每個矩形都有陰影效果，而且已經套用捲動效果設定。將最後四個矩形置入下列關鍵位置：8,648 像素、11,852 像素、15,058 像素和 18,251 像素，讓每個區段相隔約 1,200 像素。
16. 使用「填色」選單，將矩形填色顏色設定為套用不同顏色。請套用實色和漸層顏色填色進行實驗，以突顯頁面的每個區段，並使區段間彼此對比。
17. 使用「文字」工具，為每個區段更新文字。例如，您可以變更每個區段的文字，以反映其下矩形的背景顏色，像是：這是藍色區段。
18. 選擇「檔案 > 在瀏覽器中預視網頁」，測試頁面。捲動頁面，查看不同的頁面區段輪番顯示。
19. 關閉瀏覽器，並返回 Muse 工作區。
    

您可以結合使用動作捲動效果和 Adobe Edge 網頁字體，建立獨特的印刷設計。網頁字體可讓您使用頁面載入時載入的各種字體設計文字樣式。您可以使用 Edge 網頁字體建立出色且易於更新的頁面，而無須置入影像編輯程式所建立的文字動畫影像。捲動效果會隨著頁面向下捲動，建立強烈的動畫感。

請依照下列步驟操作，以使用動態文字建立類似的效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 4,854 像素。
2. 將頁面的填色顏色設為「無」。瀏覽器填色顏色並不重要，因為頁面在下一步就會被長矩形覆蓋。
3. 使用「矩形」工具，繪製約寬 1,159 像素、高 4,854 像素的大矩形。使用「填色」選單，以實色或漸層填色顏色填滿矩形。在本範例中，填色是套用藍綠色到桃紅色的漸層顏色。使用「選取」工具將矩形置中，使其填滿整個瀏覽器區域。如有需要，您可以縮小顯示，確定矩形置中於頁面上。

4. 將矩形置中後，將「檢視」選單中的放大倍數設回 100%。
5. 在頁面左側，使用「文字」工具建立一連串文字框。在本範例中，共有五個文字框。每個文字框的內容如下所列，但您可以隨意在每個文字框中輸入想要的文字：
   • Five Frames (五個框)
   • Scrolling (捲動)
   • At Different Speeds Will (速度各異)
   • Create (建立)
   • Dynamic Tension (動態張力)

在這個選用的額外步驟中，您可以複製部分文字框，然後套用稍微不同的樣式。本範例複製含有 Create (建立) 這個字的文字框，然後將兩個重複項目相互堆疊，以建立淺藍色的陰影效果。

6. 使用「文字」工具，選取每個文字框。使用「文字」面板 (或「控制」面板的文字格式選項) 套用不同的網頁字體、字體大小、顏色和其他印刷設定，將每個文字框突顯出來。
7. 選取所有文字框。在選取文字框的狀態下，開啟「捲動效果」面板的「動作」標籤。輸入相同的數值，一次設定所有選定文字框的關鍵位置。(在本範例中，關鍵位置設為 1372 像素。)另外，將「初始動作」和「最終動作」區段的水平方向設定為向右。將「初始動作」和「最終動作」區段所有的垂直方向設為 0，文字框才不會垂直移動。
8. 按一下文字框以外的地方，然後個別按一下每個文字框。為每個文字框輸入稍微不同的值。在下方的清單中，第一個值是水平 (向右) 方向的「初始動作」速度，第二個值是「最終動作」的速度：
   • Five Frames (五個框)：0.9 倍、0.1 倍
   • Scrolling (捲動)：0.12 倍、0.5 倍
   • At Different Speeds Will (速度各異)：0.7 倍、0.17 倍
   • Create (建立)：1.1 倍、0.005 倍
   • Dynamic Tension (動態張力)：1 倍、0.01 倍
     

9. 使用「文字」工具建立文字欄位，在頁面右側輸入數字 5。同樣地，您可以選擇複製文字框，然後套用不同的顏色和文字格式設定，製作斜角邊緣和陰影的效果。如果您是針對設計用途建立文字框的複本，請將文字框組成群組，以便將捲動效果套用到該群組。
10. 在選取含有數字 5 之文字欄位的狀態下，在「捲動效果」面板的「動作」標籤中啟用「動作」核取方塊。指定數值或是拖移 T 控制點來設定關鍵位置 (在本範例中是 1425px)。在「初始動作」區段中，將元素設定為以捲動速率的 1 倍向左移動。在「最終動作」區段中，將元素設定為以捲動速率的 0.01x 倍向左移動。
11. 選擇「檔案 > 在瀏覽器中預視網頁」，測試頁面。捲動頁面，觀看五個文字框從左側移入頁面，含有數字 5 的文字框則從右側移入。上下捲動，觀看文字框動畫。
12. 關閉瀏覽器，並返回 Muse 工作區。
     

您可以使用捲動效果建立引人入勝的互動式網站導覽，讓不同的按鈕飛入頁面上的可見區域，然後自行對齊，建立選單列。在本範例中，四個滑鼠指向效果按鈕會隨著頁面捲動，從底部向上移動，然後鎖住定位，顯示垂直選單列。

四個按鈕對齊後，背景內容 (以燈泡圖形、彩色背景區域、文字框和對角條紋的形式) 會從頁面兩側飛入，建立網站區段。

雖然本範例中的按鈕並未連結，但是如有需要，您可以使用「超連結」下拉式選單新增連結，讓訪客按一下按鈕就可以載入新頁面，或是使用錨點標籤跳到目前頁面上的不同位置。

請依照下列步驟操作，以建立類似的堆疊選單效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 7465 像素。
2. 將頁面填色顏色設定為「無」，並將瀏覽器填色設定為實色填色顏色。在範例網站中，瀏覽器填色設為淺棕色。
3. 使用「文字」工具建立新文字框。輸入文字：Home (首頁)。使用「控制」面板的格式設定選項，新增背景顏色到文字框。另外，更新格式設定選項，視需要設計文字樣式。使用按鈕側邊的控制點，將其寬度和高度展開到約寬 300 像素、高 115 像素。

4. 開啟「狀態」面板。選取「滑鼠指向效果」狀態，並新增不同的填色顏色 (或視需要設定樣式)，以製作滑鼠指向效果按鈕。

5. 更新「滑鼠指向效果」狀態後，再次選取「正常」狀態。
6. 開啟「捲動效果」面板的「動作」標籤。在選取按鈕的狀態下，啟用「動作」核取方塊。拖移 T 控制點或輸入數值，設定關鍵位置。另外，將「初始動作」區段設定為，以捲動速率 0.75 倍的速率向上移動。讓所有其他欄位保留 0 的設定。

7. 按住 Option/Alt 鍵，同時將「Home」(首頁) 按鈕進一步向頁面下方拖移。按鈕隨即複製。確定複本與原始的「Home」(首頁) 按鈕垂直對齊。在兩個元素對齊且仍選取複本的狀態下，中央會暫時顯示深藍色的智慧型參考線。

8. 在頁面上將複製的按鈕向下移動至原始按鈕下方約 460 像素的位置。
9. 重複步驟 7 和 8 來另外複製按鈕兩次，在頁面上建立總共四個間距相同的按鈕。使用「文字」工具編輯從上面數來第二個、第三個和第四個按鈕，並使用下列標籤更新文字內容：Products (產品)、Photos (相片)、Contact Us (聯絡我們)。

複製第一個「Home」(首頁) 按鈕時，同時也會複製文字框樣式和其內容，以及捲動效果設定。如果您選取其中一個複製的按鈕，然後查看「捲動效果」面板，就會發現「動作」標籤中的設定與「Home」(首頁) 按鈕所套用的設定相符，每個按鈕的關鍵位置都在前一個按鈕下方 460 像素的地方 (與頁面上每個按鈕之間的距離相同)。

10. 四個按鈕在最終位置對齊後，以加總高度和間距的方式，計算它們的總高度。在範例網站中，每個按鈕的高度都是 116 像素，每個按鈕之間的間距都是 4 像素。那表示垂直選單列 (組合後) 的總高度是 476 像素。以需要的頁面區段寬度，以及與選單列相同的高度，使用「矩形」工具繪製矩形。在本範例中，矩形寬 931 像素、高 476 像素。
11. 如果您想在範例網站中複製設計，可以將矩形的填色顏色設定為淺粉紅，也就是比按鈕「正常」狀態淡的色調。如有需要，您也可以在「控制」面板輸入圓角半徑值，建立圓角。在本範例中，全部四個角都設為 10 像素。

12. 使用「選取」工具對齊矩形，使其上緣距離頁面頂端約 5094 像素。另外，請確保矩形左側與按鈕左側垂直對齊。在範例網站中，矩形和按鈕都距離頁面左側 14 像素。選取元素並開啟「變形」面板時，您可以看見這些設定。X 值是與頁面左側的距離 (14 像素)，Y 值是與頁面頂端的距離 (5094 像素)。
13. 在選取矩形的狀態下，開啟「捲動效果」面板，然後在「動作」標籤啟用「動作」核取方塊。將關鍵位置設定為 4979。
14. 將「初始動作」設定為，以捲動速度 1 倍的速率向右移動。讓「動作」標籤的所有其他欄位都保留 0 的設定。

15. 為確保矩形排列在四個按鈕後方，請在選取矩形的狀態下，選擇「物件 > 移至最後」。
16. 選擇「檔案 > 置入」，瀏覽以選取影像檔案，然後在頁面上按一下將檔案置入。本範例置入了含有透明度的 PNG，以顯示燈泡影像。燈泡置於大矩形右側上方，遠離會被選單按鈕覆蓋的區域。在本範例中，影像置於距離左側 501 像素 (X 位置)、距離頁面頂端 5245 像素 (Y 位置) 的地方。
17. 為確保置入的影像排列在四個按鈕後方，請在選取影像的狀態下，選擇「物件 > 移至最後」。目標為將置入的影像顯示於大矩形上方、四個按鈕後方。
18. 在選取置入影像的狀態下，開啟「捲動效果」面板的「動作」標籤，啟用「動作」核取方塊。將關鍵位置設定為需要的值。在範例網站中，值設為 4979 像素。
19. 在「初始動作」區段中，將向右值設定為以捲動速率 0.75 倍的速率移動。將所有其他方向值設為 0。

20. 使用「文字」工具建立文字框。在範例檔案中，文字框有下列內容：Stack linked text frames with high contrast roll-overs to create unusual menus. (使用高對比的滑鼠指向效果堆疊連結的文字框，以建立獨特的選單)。 您也可以輸入任何喜歡的文字內容。使用「控制」面板的格式設定選項，視需要設計文字樣式。在本範例中，文字框並未套用背景填色顏色。
21. 使用「選取」工具，將文字框置於置入影像的右側。在本範例中，文字框的 X 值設為 357 像素 (距離左側) 、Y 值設為 5136 像素 (距離頂端)。實際位置取決於您套用到文字框的文字內容和格式設定選項。
22. 在選取文字框的狀態下，可以使用「物件 > 後移」選項進行排列，或是在「圖層」面板中加以移動，讓文字框顯示在四個按鈕後方、大矩形上方。
23. 在「捲動效果」面板啟用「動作」核取方塊。拖移 T 控制點或輸入值，設定關鍵位置。在範例網站中，關鍵位置設為 4979 像素，與置入影像 (燈泡圖形) 使用的關鍵位置值相同。
24. 在「初始動作」區段中，將文字框設定為以捲動速率一半 (0.5) 的速率向左移動。將所有其他欄位設為 0。

基本的堆疊選單區段現在已完成。但您還可以新增一個設計元素。這向操作需要在大矩形右下角上方新增數個旋轉的矩形，方法與「滑動選單」範例使用旋轉矩形新增斜紋效果相同。

25. 使用「矩形」工具，繪製數個寬度不一的矩形。以瀏覽器填色套用的同一種背景顏色填滿矩形。如此一來，這些矩形將會隱藏，直到大矩形向右移到它們後方的位置為止。如有需要，您可以將這組傾斜的矩形組成群組，將其視為單一元素使用。

26. 如有需要，可以使用「圖層」面板或選擇「物件 > 移至最後」，將大矩形排列在頁面上所有其他元素的後方。
27. 請務必定期測試您的成果，您可按一下「預視」或在瀏覽器中預視頁面，然後向下捲動，觀看堆疊選單移入定位。完成測試後，返回 Muse。 

若要建立動作背景效果，您可以建立一連串以並排背景影像填色的大矩形，覆蓋整個長頁面。本範例使用「填色」選單的「捲動」標籤 (而非「捲動效果」面板的「動作」標籤) 套用動作設定。

請依照下列步驟操作，以建立類似的動作背景效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 6254 像素。

2. 在頁面頂端，使用「矩形」工具繪製大矩形。在範例網站中，矩形寬 1159 像素、高 1312 像素。使用「選取」工具讓矩形在頁面上置中，且矩形兩側向外延伸超過瀏覽器視窗邊緣。
3. 在仍選取矩形的狀態下，使用「填色」選單設定背景影像。將「符合」選單設定為「並排顯示」以將影像並排顯示。

4. 如有需要，您可以使用「效果」選單設定陰影效果，在矩形周圍建立引人注目的邊框。
5. 在選取填色矩形的狀態下，開啟「填色」選單的「捲動」標籤。啟用「動作」核取方塊，然後按住並拖移 T 控制點，或是在欄位輸入數值，設定關鍵位置。在範例網站中，關鍵位置設為 512 像素。然而，如有需要，您可以收合控制點，讓它與矩形上緣對齊。
6. 在「初始動作」區段，將方向設定為向下再向左移動，然後將兩種速度都設定為以捲動速度 0.2 倍的速率移動。在「最終動作」區段重複相同的設定。 

7. 重複步驟 2 - 6，建立另一個填色的矩形。將新矩形直接置於您建立的第一個矩形下方，才不會使任何瀏覽器填色區域穿透出來，兩個矩形之間也才不會有任何間距。以不同的並排影像背景填色填滿新矩形。
8. 重複步驟 7，建立第三個大矩形，並將其置於第二個矩形的正下方。使用「填色」選單，設定不同的並排背景影像。您不妨使用「檢視」選單縮小顯示，以查看所有矩形，並在頁面上將其垂直對齊。

9. 在選取第二個矩形的狀態下，開啟「填色」選單的「捲動」標籤。更新「初始動作」區段為，以捲動速率 0.3 倍的速率向右移動矩形。在「最終動作」區段套用相同的設定，以捲動速率 0.3 倍的速率向右移動矩形。讓兩個垂直方向欄位都保留 0 的設定。

10. 選取第三個矩形，然後在「填色」選單的「捲動」標籤更新設定。將「初始動作」區段設定為，以捲動速率 0.25 倍的速率向上移動，然後以捲動速率 0.6 倍的速率向左移動。在「最終動作」區段為第三個矩形套用相同的設定。
11. 選擇「檔案 > 在瀏覽器中預視網頁」，測試頁面。捲動頁面到頁面底部為止，您會看到每個並排的矩形看起來就像朝對角線的方向移動。向上捲動時，矩形也會繼續移動。
12. 關閉瀏覽器，並返回 Muse 工作區。

在本範例中，長條圖看起來就像以動畫的方式移入定位。粉紅色箭頭圖形向上延伸，穿梭於圖表長條的上方和後方。雖然圖表中的長條看似是從圖表底部越長越高，但是它們其實是套用了動作捲動效果的實色矩形，以從白色大矩形 (填滿與頁面背景顏色相同的實色白色) 後方顯現出來。

本範例將多種技術搭配捲動效果使用。元素是使用「圖層」面板排列在彼此前後。白色矩形繪製在圖表元素上方。白色矩形覆蓋長條圖時，長條和箭頭都隱藏在視野之外，彷彿被遮蔽一般。白色矩形和圖表在動作捲動效果的設定為 0，頁面捲動時會留在原位不動。堆疊在下方的長條和粉紅色箭頭圖形則套用了動作捲動效果，使其在長條圖組合時上移進入視野。

請依照下列步驟操作，以建立類似的遮色片效果：

1. 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 6076 像素。
2. 將「頁面」和「瀏覽器填色」都設為實色白色 (或是您喜歡的任何顏色，不過稍後得使用相同的顏色填滿遮色片矩形)。
3. 使用「矩形」工具，在頁面上繪製大矩形。範例網站中的矩形寬 804 像素、高 489 像素。
4. 將矩形的填色顏色設為「無」。設定您喜歡的線條顏色。在「線條」選單，將矩形左側和底部設定為顯示寬度 20 的線條，而頂端和右側則設為 0，以隱藏線條。這樣就能建立橫條圖的基礎。
    

5. 在選取矩形的狀態下，開啟「捲動效果」面板的「動作」標籤。設定關鍵位置，然後在全部四個欄位都輸入 0。此設定表示矩形在達到關鍵位置前後都不會移動，這項元素會留在原位。

6. 使用「矩形」工具繪製兩個大矩形。以對齊圖表左側的方式繪製第一個矩形。在範例網站中，矩形寬 657 像素、高 1810 像素。
7. 以對齊圖表下緣的方式，在圖表下方繪製第二個矩形。在範例網站中，矩形寬 1002 像素、高 1541 像素。
8. 將兩個矩形的填色顏色都設定為白色 (或是與瀏覽器填色顏色相同的顏色)，並將線條設為 0。使用「選取」工具將矩形與圖表的兩個邊對齊。
   

9. 在選取矩形的狀態下，以滑鼠右鍵按一下並選擇「物件 > 群組」，將兩個遮色片矩形組成群組。
10. 在選取矩形群組的狀態下，開啟「捲動效果」面板的「動作」標籤。設定關鍵位置 (在範例中是 1516 像素)，然後在全部四個欄位都輸入 0。此設定表示白色矩形群組在達到關鍵位置前後都不會移動。群組會留在原位，就和圖表外面的表格一樣。
11. 使用「圖層」面板來暫時隱藏並鎖定群組。
12. 向下捲動到群組下方的空間，然後使用「矩形」工具繪製共五個寬度相同的矩形。在範例網站中，所有長條都是 74 像素寬，高度各異。由左到右，範例中五個矩形的高度分別是 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：3427 的位置。
17. 在「圖層」面板中，將 PNG 檔案排列在 (從左邊算起) 第一個和第三個長條矩形下方，但在第二個、第四個和第五個長條上方。

18. 在選取箭頭影像的狀態下，開啟「捲動效果」面板的「動作」標籤，然後啟用「動作」核取方塊。設定關鍵位置 (在範例中是 3238 像素)。在「初始動作」區段中，將方向設定為向上再向右，然後在兩個「初始動作」欄位都輸入捲動速率的 0.25 倍。將「最終動作」區段中的兩個欄位都設定為 0。

19. 在「圖層」面板中，顯示並解除鎖定您先前隱藏並鎖定的兩個白色矩形群組。將群組移到其他元素上方，使其顯示於頁面其他內容上方。既然該群組在最上方，就有遮色片的功能，僅顯示出向上移入圖表邊框內的長條和箭頭圖形。
20. 選擇「檔案 > 在瀏覽器中預視網頁」，測試頁面。捲動頁面，觀看長條圖移入定位。兩個遮蔽長條的白色矩形會隱藏長條圖形元素，直到它們移入圖表中為止。
21. 關閉瀏覽器，並返回 Muse 工作區。

請造訪 Demential Lab 網站，以查看捲動效果功能實際運作的情況。