啟動 Animate。畫面顯示「Get Started」(開始) 視窗。
瞭解如何使用在 Edge Animate 建立的動畫及捲動效果來創造多元互動的 Adobe Muse 網站。
Adobe Edge Animate 是一套網頁互動設計工具,讓您使用如 HTML5 等網頁標準,將動畫內容帶入網站。您可以用 Animate 中直覺化的時間軸介面,以視覺化的方式建構引人入勝的 HTML5 動畫,在所有現代瀏覽器上播放。
在您將 Animate 內容新增至 Muse 前,可以進行一些變更來準備 Animate 檔案,以便順暢地嵌入 Muse 內。執行下列動作:
啟動 Animate。畫面顯示「Get Started」(開始) 視窗。
按一下「Open File」(開啟檔案),瀏覽至您下載的範例專案檔案並加以選取;其附檔名會是 .an。或者,您也可以選擇開啟您自行製作的 Animate 檔案。
按一下「Open」(開啟) 以開啟此 .an 檔案,接著關閉「Open」(開啟) 對話方塊。專案隨即出現在 Animate 工作區。
使用 Animate 建立的動畫會設定為自動播放 (「autoplay」(自動播放)),或者您必須按一下靜態影像,以在載入時播放動畫。SkyScraper 範例設定為自動播放,不需要使用者採取動作。不過,當自動播放關閉時,頁面會改為顯示靜態影像,直到按下動畫為止。若要檢視非自動播放的動畫範例,請造訪 Animate Showcase。
若要控制動畫是否立即開始播放,請先選取舞台,然後選取或取消選取「Properties」(屬性) 面板的「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 內容置入頁面。
請依下列步驟操作,將動畫加入您的 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「捲動效果」的詳細資訊,請參閱捲動效果。
請依照下列步驟使用「捲動效果」面板的「幻燈片展示」標籤:
在上方影像中,關鍵位置設為 700 像素。您可以拖移 T 型控制點,或是在「關鍵位置」欄位輸入不同的值加以調整。
設定關鍵位置後,您可以使用兩個選項控制動畫播放:
「捲動效果」設定不會影響與 Animate 排版中的主時間軸巢狀或連結的動畫物件。因此,您可以選擇使用靜態背景,或是無論訪客捲動頁面的行為為何,都持續重複播放不斷移動的巢狀元素。
本範例示範了如何使用捲動效果,控制從 Adobe Edge Animate 轉存的 OAM 檔案。在本範例中,頁面是以垂直漸層填色,從淺藍綠色轉變成深藍色。您可以從 ScrollEffects.com 下載範例檔案。
透過「動作」和「Edge Animate」標籤套用的設定組合,可建立出這個動畫效果。
三個相同 OAM 檔案的執行個體以水平方式並排,建立出一列動畫指南針。在瀏覽器檢視範例網站時,全部三個指南針都會向上移入視野,然後留在原位。三個指南針旋轉的速率各不相同 > 但導致指南針以不同速度旋轉的是「捲動效果」面板中的設定,不是 Edge Animate 檔案的建構。
請依照下列步驟,以三個置入的 OAM 檔案建立類似的效果:
如果您使用瀏覽器預視樣本,就會看到全部三個 OAM 元素一起跳起來,然後彷彿被固定般排成一列。
兩側的指南針都設為重複播放時間軸動畫,而且頁面每向下捲動 350 像素就切換到下一個影格。
您可以依頁面捲動速度變化多個置入的 Edge Animate 動畫速度,建立有趣的動畫效果。例如,您可以新增多個相同 OAM 檔案的反覆項目,並將其套用不同的捲動效果設定,以建立魚群、飄著浮雲的天空,或是其他效果。
登入您的帳戶