啟動 Animate。畫面顯示「Get Started」(開始) 視窗。
上次更新時間
Apr 29, 2021 11:03:09 AM GMT
瞭解如何使用在 Edge Animate 建立的動畫及捲動效果來創造多元互動的 Adobe Muse 網站。
Adobe Edge Animate 是一套網頁互動設計工具，讓您使用如 HTML5 等網頁標準，將動畫內容帶入網站。您可以用 Animate 中直覺化的時間軸介面，以視覺化的方式建構引人入勝的 HTML5 動畫，在所有現代瀏覽器上播放。
在 Animate 中準備動畫
在您將 Animate 內容新增至 Muse 前，可以進行一些變更來準備 Animate 檔案，以便順暢地嵌入 Muse 內。執行下列動作:
-
-
按一下「Open File」(開啟檔案)，瀏覽至您下載的範例專案檔案並加以選取；其附檔名會是 .an。或者，您也可以選擇開啟您自行製作的 Animate 檔案。
在「Get Started」(開始) 視窗按一下「Open File」(開啟檔案) 連結。 -
按一下「Open」(開啟) 以開啟此 .an 檔案，接著關閉「Open」(開啟) 對話方塊。專案隨即出現在 Animate 工作區。
舞台上顯示 Animate 專案。 使用 Animate 建立的動畫會設定為自動播放 (「autoplay」(自動播放))，或者您必須按一下靜態影像，以在載入時播放動畫。SkyScraper 範例設定為自動播放，不需要使用者採取動作。不過，當自動播放關閉時，頁面會改為顯示靜態影像，直到按下動畫為止。若要檢視非自動播放的動畫範例，請造訪 Animate Showcase。
註解：若要控制動畫是否立即開始播放，請先選取舞台，然後選取或取消選取「Properties」(屬性) 面板的「Autoplay」(自動播放) 核取方塊。
選取「Autoplay」(自動播放) 屬性啟動自動播放。 -
按一下背景影像，在舞台上將其選取。在選取狀態下會出現藍色邊界方框，左方的「Properties」(屬性) 面板會顯示該影像的屬性 (此例中名為 Image2)。按「Backspace (Windows)」或「Delete (Mac)」鍵，移除背景影像檔案。
選取背景影像並刪除。 -
在仍然選取舞台的狀態下，按一下「Properties」(屬性) 面板中的舞台色卡，並設定透明選項。
將舞台的背景屬性設為透明。 註解：舞台內容會顯示白色背景；除非您轉存或預視動畫，否則不會看見舞台出現透明背景。
-
選取「File > Save」(檔案 > 儲存) 以儲存最近的變更。
-
選擇「File > Publish Settings」(檔案 > 發佈設定)，開啟「Publish Settings」(發佈設定) 對話方塊。
-
在左側的「Publish Target」(發佈目標) 欄中，取消選取「Web」(網頁) 核取方塊，然後選取「Animate Deployment Package」(Animate 部署套件) 選項。
-
按一下「Save」(儲存) 以儲存變更，並關閉「Publish Settings」(發佈設定) 對話方塊。
-
選擇「File > Publish」(檔案 > 發佈)，發佈專案。
-
結束 Animate。用 Windows 檔案總管 (或 Mac OS Finder) 在硬碟上找到 Animate 專案檔案夾。發佈專案後，找出名為 Animate Package 的檔案夾。在此檔案夾中的 OAM 檔案用於新增 Animate 內容到您的 Muse 網站。
-
拷貝此 .OAM 檔案，並將其儲存至桌上型電腦上的檔案夾中，與網站的所有其他影像及網站資源放在一起。發佈動畫並將檔案儲存至網站檔案夾後，請繼續下一節的步驟，將 Animate 內容置入頁面。
將使用 Animate 建立的動畫置入至 Muse 網頁
請依下列步驟操作，將動畫加入您的 Muse 網站頁面：
-
啟動 Adobe Muse 並開啟您要編輯的網站。
-
在「規劃」視圖下，按兩下您要加入動畫的頁面名稱。
-
選擇「檔案 > 置入...」，接著瀏覽至您的網站檔案夾，選取該 .OAM 檔案。
-
在頁面按一下將動畫置入。
註解：與置入影像時不同，置入 Animate 動畫時無法透過按住並拖移來調整其大小。若您要以不同大小置入內容，請更新 Edge 專案並重新發佈 .OAM 檔案。
-
使用「選取」工具將動畫移至頁面合適位置。請注意，雖然此時在 Muse 所見的動畫背景為不透明，但是預視或發佈頁面時，背景會是透明的。
-
選擇「檔案 > 在瀏覽器中預視網頁」以確認動畫如預期顯示。若仍要做其他修改，請返回 Muse 重新放置頁面元素。若您查看「資源」面板，會發現 .OAM 檔案現已列為資源。使用 Edge Animate 建立的動畫與其他所有網站資源相同，可以重複連結與更新。
例如，若您返回 Animate，您可以開啟專案進行變更。稍後，當您重新發佈 OAM 檔案並取代您網站檔案夾中的版本時，「資源」面板會顯示過期的連結圖示。這代表自從將資源置入頁面之後，編輯過的原始檔案。
若要更新您置入的檔案，請以滑鼠右鍵按一下「資源」面板中的 .OAM 檔案名稱，並選擇「重新連結」。
「重新連結」選項會將置入的資源更新，符合已編輯的來源檔案。相較於手動刪除並取代檔案，這是較容易快速更新動畫的方式。
-
按一下「控制」面板中的「發佈」連結。選擇要使用的選項，然後按一下「確定」以發佈網站更新。
若要瞭解有關使用 Adobe Edge Animate 建置 HTML5 網頁內容與動畫的詳細資訊，請參閱 Adobe Edge Animate 資源。如需更多關於使用 Muse 的秘訣，請務必造訪 Muse 說明和教學課程頁面的教學文章，或 Muse 活動頁面的即時網路研討會和教學課程影片。
嵌入多媒體內容以新增動畫至網站
-
在「規劃」視圖中，按兩下 MasterFlash 縮圖來將其開啟，以在「設計」檢視畫面中進行編輯。請注意，因為您之前已複製「A-主版」頁面，所以靜態標誌影像仍在原處。使用靜態影像來對應動畫矩形的位置很有幫助。但是在嵌入多媒體元素之後，請確定刪除靜態置入標誌影像。
-
選擇「檔案 > 置入」。在「讀入」對話方塊中，在 Kevins_Koffee_Kart 檔案夾內瀏覽，並選取名為 logo.swf 的檔案。
-
將 SWF 檔案置入左上角，使其與現有標誌影像檔案的位置相符。
-
將您剛剛置入的新 SWF 視窗與舊靜態標誌對齊之後，請選取靜態標誌並按下 Delete 鍵以將其刪除。
-
若要檢閱「首頁」套用全新變更之後整個網站所顯示的樣子，請選擇「檔案 > 在瀏覽器中預視網站」來測試標誌在各頁面上的顯示。在未發佈網站的情況下，您可以在電腦上本機工作，然後在瀏覽器中預視網站，並按一下網站導覽中的各個頁面進行瀏覽。請注意，動畫 (SWF 檔案) 在「首頁」上顯示一次後就會停止。如果您按一下其他頁面，只會顯示靜態標誌。
註解：如果您選擇「檔案 > 在瀏覽器中預視網頁」，新的瀏覽器視窗將會更快速地載入以顯示「Home」(首頁) 頁面，但此功能只可預視作用中的 (「Home」(首頁)) 頁面。如果您要檢查網站的一個頁面而不是整個網站，請選擇此選項。
將捲動效果新增至動畫
Adobe Muse 可讓您將 Adobe Edge Animate 建立的動畫新增至網頁。使用 Adobe Edge Animate 捲動效果功能的第一個步驟，就是特別為此用途建立動畫。
Adobe Muse 可讓您將捲動效果新增至 OAM 檔案，以影響放置在主時間軸上的動畫。您可策略性地設計動畫，只讓您要在頁面捲動時移動的項目位於主時間軸上，以便建立出互動式動畫。毫無疑問的，剩下的元素必須置入巢狀時間軸內。訪客捲動頁面時，捲動效果設定只會控制主時間軸上動畫元素的播放。
如需 Adobe Muse「捲動效果」的詳細資訊，請參閱捲動效果。
請依照下列步驟使用「捲動效果」面板的「幻燈片展示」標籤：
- 從 Animate 轉存 OAM 檔案到您的網站檔案夾。如需從 Animate 轉存 OAM 檔案的相關資訊，請參閱在 Adobe Muse 中置入動畫。
- 啟動 Muse，然後按兩下頁面，在「設計」視圖中將其開啟。在「頁面屬性」對話方塊中更新最小高度設定，以確保頁面具有足夠的長度可供捲動。
- 選擇「檔案 > 置入」，然後從網站檔案夾中瀏覽至 OAM 檔案並加以選取。
- 開啟「捲動效果」面板。按一下「Adobe Edge Animate」標籤 (從左邊數來第四個標籤)，檢閱這個區段的設定。
- 在選取 OAM 檔案的狀態下，選取「Edge Animate」核取方塊。
在上方影像中，關鍵位置設為 700 像素。您可以拖移 T 型控制點，或是在「關鍵位置」欄位輸入不同的值加以調整。
設定關鍵位置後，您可以使用兩個選項控制動畫播放：
- 自動播放：選取這個選項時，只要瀏覽器捲動到關鍵位置，無論主時間軸中有多少影格，主時間軸中的動畫都會開始播放。動畫會持續播放，直到頁面捲動超過關鍵位置。
- 切換影格間隔：選取這個選項時，每當頁面捲動超過特定像素數，主時間軸動畫就會前進一個影格。例如，如果您建立高度 3000 像素的頁面，然後輸入 10 這個數字，主時間軸動畫就會以頁面捲動每 10 像素 1 個影格的速率播放。如果訪客加快向下捲動頁面的速度，動畫播放速率就會增加。
註解：
「捲動效果」設定不會影響與 Animate 排版中的主時間軸巢狀或連結的動畫物件。因此，您可以選擇使用靜態背景，或是無論訪客捲動頁面的行為為何，都持續重複播放不斷移動的巢狀元素。
- 在「捲動效果」面板的「Edge Animate」標籤選擇設定後，選擇「檔案 > 在瀏覽器中預視網頁 (或按一下「預視」按鈕)。上下捲動，查看 (新增到主時間軸的) Edge Animate 動畫內容播放，測試頁面。
- 如果您需要進行任何變更，請返回 Muse (或按一下「設計」按鈕) 並在「捲動效果」面板中更新設定。
範例
本範例示範了如何使用捲動效果，控制從 Adobe Edge Animate 轉存的 OAM 檔案。在本範例中，頁面是以垂直漸層填色，從淺藍綠色轉變成深藍色。您可以從 ScrollEffects.com 下載範例檔案。
透過「動作」和「Edge Animate」標籤套用的設定組合，可建立出這個動畫效果。
三個相同 OAM 檔案的執行個體以水平方式並排，建立出一列動畫指南針。在瀏覽器檢視範例網站時，全部三個指南針都會向上移入視野，然後留在原位。三個指南針旋轉的速率各不相同 > 但導致指南針以不同速度旋轉的是「捲動效果」面板中的設定，不是 Edge Animate 檔案的建構。
請依照下列步驟，以三個置入的 OAM 檔案建立類似的效果：
- 在「設計」視圖中，選擇「頁面 > 頁面屬性」。將「最小高度」欄位設定為較大的值。在網站範例中，頁面的最小高度設為 7465 像素。
- 選取頁面上全部三個指南針的執行個體。在「捲動效果」面板的「動作」標籤中，您可以看到，全部三個 OAM 檔案都有相同的關鍵位置和動作設定，因為所有值都顯示出來了。
如果您使用瀏覽器預視樣本，就會看到全部三個 OAM 元素一起跳起來，然後彷彿被固定般排成一列。
- 按一下指南針以外的地方，取消選取全部三個指南針，然後只選取左邊的指南針。按住 Shift 鍵並選取右邊的指南針，同時選取兩者。開啟「捲動效果」面板的「Edge Animate」標籤，檢閱設定。
兩側的指南針都設為重複播放時間軸動畫，而且頁面每向下捲動 350 像素就切換到下一個影格。
- 取消選取兩個靠外面的指南針。選取中間的指南針，然後再次檢查「Edge Animate」標籤，會看到「切換影格間隔」欄位是設為 400 像素。此設定會使中間動畫的移動速度比兩個靠外面的指南針慢。
您可以依頁面捲動速度變化多個置入的 Edge Animate 動畫速度，建立有趣的動畫效果。例如，您可以新增多個相同 OAM 檔案的反覆項目，並將其套用不同的捲動效果設定，以建立魚群、飄著浮雲的天空，或是其他效果。
登入您的帳戶