Adobe Edge動畫教程：製作迷人的幻燈片

在不斷發展的Web設計世界中，吸引觀眾的動態內容至關重要。最有效的方法之一是通過幻燈片，它不僅看起來很棒，而且使信息更易於消化。在本教程中，我們將潛入使用Adobe Edge動畫製作動態，響應式幻燈片，以使您在任何設備上吸引您的觀眾。從設置您的項目到掌握高級動畫，我們都可以為您提供服務。

要記住的要點

• 在Adobe Edge Animate中設置響應文檔。
• 幻燈片的導入和定位圖像。
• 使用Edge動畫時間表創建基本動畫。
• 實現Next和Back按鈕之類的導航控件。
• 與鼠標效應相互作用。
• 了解平滑動畫的寬鬆功能。
• 確保不同瀏覽器和設備之間的兼容性。
• 優化加載時間更快的性能。

從您的邊緣動畫幻燈片開始

設置文檔

創建引人入勝的幻燈片開始，首先要在Adobe Edge Animate中設置文檔。您需要定義舞台大小並確保其響應能力。

要開始，請打開Adobe Edge動畫並創建一個新文件。您可以通過轉到File> new或在Windows上使用快捷方式CTRL+N或Mac上的CMD+N來做到這一點。這打開了一個空白的畫布，準備您開始構建幻燈片。

接下來，設置舞台大小。在左側的屬性面板中，找到階段部分。在這裡，您可以將像素設置為寬度和高度 - 980x300是Web幻燈片的常見選擇，但可以根據需要隨意進行調整。

為了使您的幻燈片響應迅速，請將寬度切換到100％。這樣，您的幻燈片將擴展以適合任何屏幕尺寸。只需單擊寬度字段旁邊的像素圖標，將其更改為一個百分比圖標，然後輸入100％。默認情況下，溢出設置為隱藏，將所有內容整齊地保持在視圖中。

不要忘記儘早且經常保存您的項目。轉到文件>另存為“命名”之類的東西，例如“ slideshow-tut.html”，並註意保存的位置，因為以後重命名HTML文件可能會很棘手。

添加和定位幻燈片和邊緣動畫

導入圖像

設置文檔後，是時候導入圖像了。 Edge Animate支持JPG，PNG和GIF格式。您可以通過將圖像拖動到舞台上，導航到文件>導入或使用庫面板來導入圖像。

導入後，您的圖像將出現在右側的圖書館面板中。從這裡，您可以將它們拖到舞台上。對於最佳組織，請將圖像保存在與項目同一目錄中的文件夾中。

假設您的圖像已準備好適合您的幻燈片，位置和使用屬性面板的位置和尺寸。要將它們集中並避免截止，請將X和Y定位設置為0％，將高度設置為自動，寬度為70％。然後，將樣式調整為轉化原始：50％50％以進行正確查看。您可以通過單擊尺寸旁邊的筆圖標來調整這些設置，該圖標打開了代碼編輯器，您可以將背景大小設置為“自動”，並定位為百分比以獲得更多控制。

重複此過程以在您的演出中添加更多幻燈片。

動畫幻燈片

動畫使您的幻燈片變得活躍起來。 Edge Animate的基於時間軸的系統使您可以創建平滑的過渡和引人入勝的效果。

時間軸位於邊緣動畫接口的底部，顯示了您的動畫幀和控制元素運動。要動畫幻燈片，請在舞台上選擇它，並通過單擊所需框架的撥動引腳圖標在時間軸上創建一個新的密鑰幀。例如，將切換設置為0s，然後在0.75秒以0.75秒設置撥動，以使其平滑流動，尤其是啟用了放鬆選項。

從右側的滑動屏幕上開始，然後使用寬鬆的功能，例如“ subleoutquad” ，以進行較少的機器人滑入。將幻燈片從屏幕的0％開始在0.75秒後在0.75秒內褪色。有了多個幻燈片，您可以通過將它們互相拖動在較低元素欄上，使它們的入口拖延。

要控制幻燈片過渡，請插入觸發器以添加停止點。選擇插入扳機，然後停止。有關其他幻燈片，請使用重複選項（D鍵）創建副本，然後調整名稱，圖像和定位。請記住，目標是讓每個幻燈片平穩滑入和流出時間。

其他提示

在處理起點和停止點時，複製先驗版本可以解決許多問題。之所以起作用，是因為動畫設置在元素範圍內，從而使其可以在無奇數編碼要求的情況下共存。另外，一旦設置了放鬆功能，就不需要重新申請新版本。

如何使用Adobe Edge動畫進行動態幻燈片

創建幻燈片的分步指南

1. 設置您的文檔：
   • 開放邊緣動畫。
   • 
   • 創建一個新文件。
   • 設置舞台大小（例如980x300像素）。
   • 通過將寬度設置為100％來確保響應能力。
   • 保存您的文件。
2. 導入圖像：
   • 將圖像拖放到舞台上，或通過文件>導入導入。
   • 位置和尺寸圖像適當。
3. 動畫幻燈片：
   • 在每個幻燈片的時間軸上創建密鑰幀。
   • 添加過渡以進行平滑進入和退出。
   • 應用寬鬆功能以增強動畫。
4. 實施導航：
   • 使用符號添加下一個和背面按鈕。
   • 將JavaScript操作附加到按鈕進行導航。
5. 測試和優化：
   • 在不同的瀏覽器中預覽幻燈片。
   • 優化圖像以更快地加載。
   • 確保跨設備的響應能力。

使用Adobe Edge動畫的優點

優點

• 基於時間軸的動畫：使創建複雜的動畫變得容易。
• HTML5支持：創建與現代Web瀏覽器兼容的內容。
• 交互式元素：允許添加按鈕，翻轉和表單。
• 無代碼設計：設計師可以在不編寫代碼的情況下創建動畫。

缺點

• 中止支持：Adobe不再支持Edge Animate。
• 有限的功能：可能沒有現代動畫工具的所有功能。
• 性能問題：動畫可能是資源密集的，導致了性能問題。
• 陡峭的學習曲線：初學者很難學習。

常問問題

什麼是Adobe Edge動畫？

Adobe Edge Animate是一種網絡設計工具，用於使用HTML5，JavaScript和CSS3創建交互式和動畫內容。它對於沒有閃光燈的動畫，橫幅和幻燈片特別有用。

Adobe Edge動畫仍然支持嗎？

不，自2015年以來，不再支持Adobe Edge動畫。但是，它仍然用於舊版項目或喜歡其特定動畫功能的設計師。現代替代方案包括Adobe Animate CC和其他HTML5動畫工具。

Adobe Edge動畫的替代方案是什麼？

現代替代方案包括Adobe Animate CC，Google Web Designer，Tumult Hype，Greensock（GSAP）和CreateJS，所有這些都具有強大的HTML5動畫功能。

如何使我的邊緣動畫幻燈片響應能力？

為了使您的幻燈片響應迅速，請將主要階段寬度設置為100％，並使用百分比值來定位和尺寸元素。跨設備和瀏覽器測試以確保響應能力。

相關問題

如何在更快的加載時間中優化幻燈片？

要優化幻燈片以進行更快的加載，請考慮圖像壓縮，代碼縮小，瀏覽器緩存，使用CDN以及實現懶惰的加載技術。

我可以將交互式元素添加到我的邊緣動畫幻燈片上嗎？

是的，您可以使用Edge Animate中的JavaScript操作添加交互式元素，例如按鈕，翻轉，表單和外部鏈接。

如何確保Edge Animate幻燈片的跨瀏覽器兼容性？

通過在不同的瀏覽器和設備上進行測試，遵守Web標準，使用CSS的供應商前綴，並使用JavaScript框架來處理差異來確保跨瀏覽器的兼容性。

如何在網站上嵌入Edge動畫幻燈片？

要嵌入幻燈片，請在網頁中包括生成的HTML，CSS和JavaScript文件。複製代碼並將其粘貼到您網站的HTML中，以確保您的CSS和JavaScript文件的路徑正確。