瞭解如何使用在 Edge Animate 建立的動畫及捲動效果來創造多元互動的 Adobe Muse 網站。

註解:

Adobe Muse 不再增加新功能,並將於 2020 年 3 月 26 日停止支援。如需詳細資訊和協助,請參閱 Adobe Muse 終止服務頁面

Adobe Edge Animate 是一套網頁互動設計工具,讓您使用如 HTML5 等網頁標準,將動畫內容帶入網站。您可以用 Animate 中直覺化的時間軸介面,以視覺化的方式建構引人入勝的 HTML5 動畫,在所有現代瀏覽器上播放。

在 Animate 中準備動畫

在您將 Animate 內容新增至 Muse 前,可以進行一些變更來準備 Animate 檔案,以便順暢地嵌入 Muse 內。執行下列動作:

  1. 啟動 Animate。畫面顯示「Get Started」(開始) 視窗。

  2. 按一下「Open File」(開啟檔案),瀏覽至您下載的範例專案檔案並加以選取;其附檔名會是 .an。或者,您也可以選擇開啟您自行製作的 Animate 檔案。

    Adobe Muse 可讓您嵌入 Edge Animate 動畫。
    在「Get Started」(開始) 視窗按一下「Open File」(開啟檔案) 連結。

  3. 按一下「Open」(開啟) 以開啟此 .an 檔案,接著關閉「Open」(開啟) 對話方塊。專案隨即出現在 Animate 工作區。

    顯示專案
    舞台上顯示 Animate 專案。

    使用 Animate 建立的動畫會設定為自動播放 (「autoplay」(自動播放)),或者您必須按一下靜態影像,以在載入時播放動畫。SkyScraper 範例設定為自動播放,不需要使用者採取動作。不過,當自動播放關閉時,頁面會改為顯示靜態影像,直到按下動畫為止。若要檢視非自動播放的動畫範例,請造訪 Animate Showcase。

    註解:

    若要控制動畫是否立即開始播放,請先選取舞台,然後選取或取消選取「Properties」(屬性) 面板的「Autoplay」(自動播放) 核取方塊。

    自動播放選項
    選取「Autoplay」(自動播放) 屬性啟動自動播放。

  4. 按一下背景影像,在舞台上將其選取。在選取狀態下會出現藍色邊界方框,左方的「Properties」(屬性) 面板會顯示該影像的屬性 (此例中名為 Image2)。按「Backspace (Windows)」或「Delete (Mac)」鍵,移除背景影像檔案。

    藍色的邊界方框
    選取背景影像並刪除。

  5. 在仍然選取舞台的狀態下,按一下「Properties」(屬性) 面板中的舞台色卡,並設定透明選項。

    透明選項
    將舞台的背景屬性設為透明。

    註解:

    舞台內容會顯示白色背景;除非您轉存或預視動畫,否則不會看見舞台出現透明背景。

  6. 選取「File > Save」(檔案 > 儲存) 以儲存最近的變更。

  7. 選擇「File > Publish Settings」(檔案 > 發佈設定),開啟「Publish Settings」(發佈設定) 對話方塊。

  8. 在左側的「Publish Target」(發佈目標) 欄中,取消選取「Web」(網頁) 核取方塊,然後選取「Animate Deployment Package」(Animate 部署套件) 選項。

  9. 按一下「Save」(儲存) 以儲存變更,並關閉「Publish Settings」(發佈設定) 對話方塊。

  10. 選擇「File > Publish」(檔案 > 發佈),發佈專案。

  11. 結束 Animate。用 Windows 檔案總管 (或 Mac OS Finder) 在硬碟上找到 Animate 專案檔案夾。發佈專案後,找出名為 Animate Package 的檔案夾。在此檔案夾中的 OAM 檔案用於新增 Animate 內容到您的 Muse 網站。

  12. 拷貝此 .OAM 檔案,並將其儲存至桌上型電腦上的檔案夾中,與網站的所有其他影像及網站資源放在一起。發佈動畫並將檔案儲存至網站檔案夾後,請繼續下一節的步驟,將 Animate 內容置入頁面。

將使用 Animate 建立的動畫置入至 Muse 網頁

請依下列步驟操作,將動畫加入您的 Muse 網站頁面:

  1. 啟動 Adobe Muse 並開啟您要編輯的網站。

  2. 在「規劃」視圖下,按兩下您要加入動畫的頁面名稱。

  3. 選擇「檔案 > 置入...」,接著瀏覽至您的網站檔案夾,選取該 .OAM 檔案。

  4. 在頁面按一下將動畫置入。

    註解:

    與置入影像時不同,置入 Animate 動畫時無法透過按住並拖移來調整其大小。若您要以不同大小置入內容,請更新 Edge 專案並重新發佈 .OAM 檔案。

  5. 使用「選取」工具將動畫移至頁面合適位置。請注意,雖然此時在 Muse 所見的動畫背景為不透明,但是預視或發佈頁面時,背景會是透明的。

  6. 選擇「檔案 > 在瀏覽器中預視網頁」以確認動畫如預期顯示。若仍要做其他修改,請返回 Muse 重新放置頁面元素。若您查看「資源」面板,會發現 .OAM 檔案現已列為資源。使用 Edge Animate 建立的動畫與其他所有網站資源相同,可以重複連結與更新。

    例如,若您返回 Animate,您可以開啟專案進行變更。稍後,當您重新發佈 OAM 檔案並取代您網站檔案夾中的版本時,「資源」面板會顯示過期的連結圖示。這代表自從將資源置入頁面之後,編輯過的原始檔案。

    若要更新您置入的檔案,請以滑鼠右鍵按一下「資源」面板中的 .OAM 檔案名稱,並選擇「重新連結」。

    重新連結」選項會將置入的資源更新,符合已編輯的來源檔案。相較於手動刪除並取代檔案,這是較容易快速更新動畫的方式。

  7. 按一下「控制」面板中的「發佈」連結。選擇要使用的選項,然後按一下「確定」以發佈網站更新。

若要瞭解有關使用 Adobe Edge Animate 建置 HTML5 網頁內容與動畫的詳細資訊,請參閱 Adobe Edge Animate 資源。如需更多關於使用 Muse 的秘訣,請務必造訪 Muse 說明和教學課程頁面的教學文章,或 Muse 活動頁面的即時網路研討會和教學課程影片。

嵌入多媒體內容以新增動畫至網站

  1. 在「規劃」視圖中,按兩下 MasterFlash 縮圖來將其開啟,以在「設計」檢視畫面中進行編輯。請注意,因為您之前已複製「A-主版」頁面,所以靜態標誌影像仍在原處。使用靜態影像來對應動畫矩形的位置很有幫助。但是在嵌入多媒體元素之後,請確定刪除靜態置入標誌影像。

  2. 選擇「檔案 > 置入」。在「讀入」對話方塊中,在 Kevins_Koffee_Kart 檔案夾內瀏覽,並選取名為 logo.swf 的檔案。

  3. 將 SWF 檔案置入左上角,使其與現有標誌影像檔案的位置相符。

  4. 將您剛剛置入的新 SWF 視窗與舊靜態標誌對齊之後,請選取靜態標誌並按下 Delete 鍵以將其刪除。

  5. 若要檢閱「首頁」套用全新變更之後整個網站所顯示的樣子,請選擇「檔案 > 在瀏覽器中預視網站」來測試標誌在各頁面上的顯示。在未發佈網站的情況下,您可以在電腦上本機工作,然後在瀏覽器中預視網站,並按一下網站導覽中的各個頁面進行瀏覽。請注意,動畫 (SWF 檔案) 在「首頁」上顯示一次後就會停止。如果您按一下其他頁面,只會顯示靜態標誌。

    註解:

    如果您選擇「檔案 > 在瀏覽器中預視網頁」,新的瀏覽器視窗將會更快速地載入以顯示「Home」(首頁) 頁面,但此功能只可預視作用中的 (「Home」(首頁)) 頁面。如果您要檢查網站的一個頁面而不是整個網站,請選擇此選項。

將捲動效果新增至動畫

Adobe Muse 可讓您將 Adobe Edge Animate 建立的動畫新增至網頁。使用 Adobe Edge Animate 捲動效果功能的第一個步驟,就是特別為此用途建立動畫。

Adobe Muse 可讓您將捲動效果新增至 OAM 檔案,以影響放置在主時間軸上的動畫。您可策略性地設計動畫,只讓您要在頁面捲動時移動的項目位於主時間軸上,以便建立出互動式動畫。毫無疑問的,剩下的元素必須置入巢狀時間軸內。訪客捲動頁面時,捲動效果設定只會控制主時間軸上動畫元素的播放。

如需 Adobe Muse「捲動效果」的詳細資訊,請參閱捲動效果

請依照下列步驟使用「捲動效果」面板的「幻燈片展示」標籤:

  1. 從 Animate 轉存 OAM 檔案到您的網站檔案夾。如需從 Animate 轉存 OAM 檔案的相關資訊,請參閱在 Adobe Muse 中置入動畫
  2. 啟動 Muse,然後按兩下頁面,在「設計」視圖中將其開啟。在「頁面屬性」對話方塊中更新最小高度設定,以確保頁面具有足夠的長度可供捲動。
  3. 選擇「檔案 > 置入」,然後從網站檔案夾中瀏覽至 OAM 檔案並加以選取。
  4. 開啟「捲動效果」面板。按一下「Adobe Edge Animate」標籤 (從左邊數來第四個標籤),檢閱這個區段的設定。
  5. 在選取 OAM 檔案的狀態下,選取「Edge Animate」核取方塊。
「捲動效果」面板
設定 Edge Animate 動畫,使其在頁面捲動到特定位置時開始播放,或是每當頁面向下捲動特定距離時 (單位為像素) 切換影格。

在上方影像中,關鍵位置設為 700 像素。您可以拖移 T 型控制點,或是在「關鍵位置」欄位輸入不同的值加以調整。

設定關鍵位置後,您可以使用兩個選項控制動畫播放:

  • 自動播放:選取這個選項時,只要瀏覽器捲動到關鍵位置,無論主時間軸中有多少影格,主時間軸中的動畫都會開始播放。動畫會持續播放,直到頁面捲動超過關鍵位置。
  • 切換影格間隔:選取這個選項時,每當頁面捲動超過特定像素數,主時間軸動畫就會前進一個影格。例如,如果您建立高度 3000 像素的頁面,然後輸入 10 這個數字,主時間軸動畫就會以頁面捲動每 10 像素 1 個影格的速率播放。如果訪客加快向下捲動頁面的速度,動畫播放速率就會增加。

註解:

「捲動效果」設定不會影響與 Animate 排版中的主時間軸巢狀或連結的動畫物件。因此,您可以選擇使用靜態背景,或是無論訪客捲動頁面的行為為何,都持續重複播放不斷移動的巢狀元素。

  1. 在「捲動效果」面板的「Edge Animate」標籤選擇設定後,選擇「檔案 > 在瀏覽器中預視網頁 (或按一下「預視」按鈕)。上下捲動,查看 (新增到主時間軸的) Edge Animate 動畫內容播放,測試頁面。
  2. 如果您需要進行任何變更,請返回 Muse (或按一下「設計」按鈕) 並在「捲動效果」面板中更新設定。

範例

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

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

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

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

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

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

  1. 按一下指南針以外的地方,取消選取全部三個指南針,然後只選取左邊的指南針。按住 Shift 鍵並選取右邊的指南針,同時選取兩者。開啟「捲動效果」面板的「Edge Animate」標籤,檢閱設定。
每隔 350 像素切換影格
兩側的指南針都設為每隔 350 像素切換影格。

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

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

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

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策