最佳作法 - SWF 應用程式編寫原則

  1. Adobe Animate 使用手冊
  2. Animate 簡介
    1. Animate 的新功能
    2. 視覺詞彙
    3. Animate 系統需求
    4. Animate 鍵盤快速鍵
    5. 在 Animate 中使用多個檔案類型
  3. 動畫
    1. Animate 中的動畫基本概念
    2. 如何在 Animate 中使用影格及關鍵影格
    3. Animate 中的逐格動畫
    4. 如何在 Animate 中使用傳統補間動畫
    5. 筆刷工具
    6. 移動導引線
    7. 移動補間動畫與 ActionScript 3.0
    8. 關於移動補間動畫
    9. 移動補間動畫
    10. 建立移動補間動畫
    11. 使用屬性關鍵影格
    12. 使用補間動畫將位置製成動畫
    13. 如何使用移動編輯器編輯移動補間動畫
    14. 編輯補間動畫的移動路徑
    15. 操作移動補間動畫
    16. 新增自訂加/減速
    17. 建立和套用移動預設效果
    18. 設定動畫補間動畫範圍
    19. 使用儲存為 XML 檔案的移動補間動畫
    20. 移動補間動畫與傳統補間動畫
    21. 形狀補間動畫
    22. 在 Animate 中使用骨塊工具動畫
    23. 在 Animate 進行角色製作
    24. 如何在 Adobe Animate 中使用遮色片圖層
    25. 如何在 Animate 中使用場景
  4. 互動
    1. 如何使用 Animate 建立按鈕
    2. 將 Animate 專案轉換成其他文件類型格式
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 在 Animate 中使用程式碼片段增加互動功能
    5. 建立自訂 HTML5 組件
    6. 在 HTML5 Canvas 中使用組件
    7. 建立自訂組件:範例
    8. 自訂組件的程式碼片段
    9. 最佳作法 - 使用 Animate 做廣告
    10. 虛擬實境編寫和發佈
  5. 工作區和工作流程
    1. 建立和管理繪圖筆刷
    2. 在 HTML5 Canvas 文件中使用 Google 字體
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作區
    6. 在 HTML5 Canvas 文件中使用網頁字體
    7. 時間軸與 ActionScript
    8. 使用多重時間軸
    9. 設定偏好設定
    10. 使用 Animate 編寫面板
    11. 使用 Animate 建立時間軸圖層
    12. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    13. 移動和複製物件
    14. 範本
    15. Animate 中的尋找和取代
    16. 還原、重做和操作記錄面板
    17. 鍵盤快速鍵
    18. 如何在 Animate 中使用時間軸
    19. 建立 HTML 擴充功能
    20. 影像和 GIF 動畫的最佳化選項
    21. 匯出影像和 GIF 的設定
    22. Animate 中的資源面板
  6. 多媒體和視訊
    1. 在 Animate 中變形及結合圖像物件
    2. 在 Animate 中建立並使用元件實體
    3. 影像描圖
    4. 如何在 Adobe Animate 中使用聲音
    5. 匯出 SVG 檔案
    6. 建立要在 Animate 中使用的視訊檔案
    7. 如何在 Animate 增加視訊
    8. 使用視訊提示點
    9. 使用 Animate 繪製及建立物件
    10. 調整線條和形狀
    11. 使用 Animate CC 中的筆畫、填色和漸層
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的色彩面板
    14. 使用 Animate 開啟 Flash CS6 檔案
    15. 在 Animate 中使用傳統文字
    16. 將圖案放入 Animate 中
    17. Animate 中匯入的點陣圖
    18. 3D 圖像
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 繪製線條和形狀
    21. 使用 Animate 中的元件庫
    22. 匯出聲音
    23. 在 Animate CC 中選取物件
    24. 在 Animate 中使用 Illustrator AI 檔案
    25. 使用噴刷工具套用圖樣
    26. 套用混合模式
    27. 排列物件
    28. 使用命令選單自動執行工作
    29. 多國語言文字
    30. 使用 Animate 中的攝影機
    31. 搭配使用 Animate 與 Adobe Scout
    32. 使用 Fireworks 檔案
    33. 圖像濾鏡
    34. 聲音和 ActionScript
    35. 繪圖偏好設定
    36. 使用鋼筆工具繪圖
  7. 平台
    1. 將 Animate 專案轉換成其他文件類型格式
    2. 自訂平台支援
    3. 在 Animate 中建立及發佈 HTML5 Canvas 文件
    4. 建立並發佈 WebGL 文件
    5. 如何封裝 AIR for iOS 的應用程式
    6. 發佈 AIR for Android 應用程式
    7. Adobe AIR for Desktop 的發佈功能
    8. ActionScript 發佈設定
    9. 最佳作法 - 在應用程式中組織 ActionScript
    10. 如何搭配使用 ActionScript 與 Animate
    11. 最佳作法 - 輔助功能原則
    12. Animate 工作區中的輔助功能
    13. 撰寫和管理指令碼
    14. 啟用自訂平台的支援
    15. 自訂平台支援概觀
    16. 建立輔助功能內容
    17. 使用自訂平台支援外掛程式
    18. ActionScript 3.0 的除錯
    19. 啟用自訂平台的支援
  8. 匯出與發佈
    1. 如何從 Animate CC 匯出檔案
    2. OAM 發佈
    3. 匯出 SVG 檔案
    4. 使用 Animate 匯出圖像和視訊
    5. 發佈 AS3 文件
    6. 匯出適用於行動裝置應用程式和遊戲引擎的動畫
    7. 匯出聲音
    8. 匯出 QuickTime 視訊檔
    9. 使用 ActionScript 控制外部視訊播放
    10. 最佳作法 - 建立行動裝置內容的秘訣
    11. 最佳作法 - 視訊慣例
    12. 最佳作法 - SWF 應用程式編寫原則
    13. 最佳作法 - 建構 FLA 檔
    14. 最佳化 Animate 的 FLA 檔案的最佳作法
    15. ActionScript 發佈設定
    16. 指定 Animate 的發佈設定
    17. 匯出放映檔
    18. 匯出影像和 GIF 動畫
    19. HTML 發佈範本
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和發佈您的動畫

關於 SWF 應用程式原則

建立 Animate 應用程式的最佳方式會依據您要建立的應用程式,以及用來建置應用程式的技術而不同。

線上應用程式可讓使用者經由互動而影響網站。例如,應用程式可能會收集使用者的資訊 (例如用於註冊的使用者名稱和密碼),加入網站的資訊 (例如在論壇中),或者使用者可能會和其他網站參訪者即時互動 (例如聊天室或互動式白板)。依據互動,來自伺服器的結果常常會出現在 SWF 檔案中。這些範例是涉及了使用者以及不同類型的伺服器互動的應用程式。然而,不會使用參訪者資訊或資料的網站並不是應用程式 (例如,一則簡介、卡通動畫或靜態資訊網站)。Animate 應用程式會涉及使用者、網路應用程式和伺服器之間的互動程序。基本程序如下:

  1. 使用者將資訊輸入至 SWF 檔案。

  2. 這項資訊會轉換成資料。

  3. 資料經過格式化後傳送到網站伺服器。

  4. 網站伺服器會收集這些資料並傳送到應用程式伺服器 (例如,ColdFusion、PHP 或 ASP)。

  5. 資料會經過處理然後再送回網站伺服器。

  6. 網站伺服器會將結果傳送至 SWF 檔案。

  7. SWF 檔案會接收已格式化的資料。

  8. ActionScript 處理資料,讓應用程式可加以使用。

建置應用程式時,您必須選取用來傳輸資料的通訊協定。當傳送或接收資料時,通訊協定會告知應用程式,該資料是以哪種格式來傳輸,以及如何處理伺服器的回應。在 SWF 檔案收到資料後,就會處理並格式化資料。如果您使用通訊協定,就不需擔心資料並非您所預期的格式。當您使用名稱/值配對來傳輸資料時,可以檢查資料的格式化方式。請檢查資料是否已正確格式化,如此才不會收到 XML 格式的資料,而且 SWF 檔也才知道預期要接收哪種資料並加以處理。

收集與格式化資料

應用程式會依賴使用者和 SWF 檔案之間的互動。它通常會依靠使用者將資料輸入表單做為互動。Animate 可提供多種方式,讓您在 Animate 應用程式中輸入及格式化資料。之所以會有這個彈性,是因為您具有處理動畫的能力以及對於介面的創意控制,並可以使用 ActionScript 來執行錯誤檢查與驗證。

使用 Animate 建置表單以收集資料的優點包括如下:

  • 更佳的設計控制能力。

  • 減少重新整理頁面的次數或根本不需要。

  • 可重複使用常用的資源。

    秘訣:若要儲存從使用者處收集到的資訊,請在該使用者的電腦中,將它儲存在共享物件內。共享物件可讓您在使用者電腦上儲存資料,類似於使用 cookie 的方式。如需有關「共用」物件的詳細資訊,請參閱「ActionScript 2.0 語言參考」或「Adobe® Flash® Professional CS5 的 ActionScript® 3.0 參考」中的 sharedObject 類別。

傳送及處理資料

一般來說,將資訊傳送至伺服器之前,您必須先處理資訊,所以是以一種伺服器瞭解的方式來格式化資訊。當伺服器收到資料時,會以數種方式來處理資料,並以可以接受的格式送回 SWF 檔案,這個格式從名稱/值配對到複雜的物件都有可能。

註解:

您的應用程式伺服器必須具有 MIME 類別,其輸出設定為 application/x-www-urlform-encoded。如果缺少該 MIME 類型,當結果到達 Animate 時通常無法使用。

下表會顯示數個選項,在使用 Animate 將資料傳送到伺服器以及接收資料時可加以利用:

傳送資料

說明

LoadVars.sendLoadVars.sendAndLoad

將名稱/值配對傳送到伺服器端的指令碼以進行處理。LoadVars.send 將變數傳送到遠端指令碼並忽略任何回應。LoadVar.sendAndLoad 將名稱/值配對傳送到伺服器,並將回應載入或解析至目標 LoadVars 物件。

XML.sendXML.sendAndLoad

類似 LoadVars,但 XML.sendXML.sendAndLoad 是傳送 XML 封包,而不是傳送名稱/值配對。

getURL

使用 getURL() 函數或 MovieClip.getURL 方法時,可以將變數從 Animate 傳送到某個影格或彈出式視窗。

遠端

可讓您在 Animate 以及 ColdFusion、ASP.NET、Java 等之間輕易地交換複雜的資訊。您也可以利用 Animate Remoting 來使用網路服務。

網路服務

Adobe Animate 包含了 WebServiceConnector 組件,能讓您連線到遠端網路服務、傳送及接收資料,以及將結果繫結至組件。這可讓 Animate 開發人員快速建立「多樣化網際網路應用程式」(RIA),而不需編寫任何一行 ActionScript。

您可使用 WebServiceClasses 來使用遠端網路服務,這可能需要撰寫複雜的 ActionScript。

加入資料載入與驗證

請先驗證您所擷取的任何資訊,再將該資料傳送到伺服器。這樣可以減輕遠端伺服器的負擔,因為如果使用者沒有填寫必要的欄位,伺服器就不會處理這些要求。永遠不要只依賴任何應用程式中的用戶端驗證,您也必須進行伺服器端驗證。

即使您建立了簡單的註冊或登入表單,也要檢查使用者已經輸入他們的名稱和密碼。請先執行這項驗證,然後才將要求傳送到遠端伺服器端指令碼,並等候結果。不要只依賴伺服器端驗證。如果使用者只輸入使用者名稱,伺服器端指令碼就必須接收要求、驗證傳送來的資料,然後將錯誤訊息傳回至 Animate 應用程式,指出它不只需要使用者名稱還需要密碼。同樣地,如果只在用戶端執行驗證 (在 SWF 檔案內),使用者就有可能修改 SWF 檔案、略過驗證,並將資料傳送到伺服器,以企圖貼入惡意的資料。

用戶端驗證可以很簡單,例如只需確認在表單欄位中輸入的資料至少有一個字元的長度,或者是確認使用者輸入的是數字而不是字串。例如,若要驗證電子郵件地址,請檢查 Animate 中的文字欄位不是空白,而且至少包含小老鼠符號 (@) 和點 (.) 字元。如果是伺服器端驗證,請加入比較複雜的驗證,並檢查電子郵件地址是屬於有效的網域。

您必須撰寫 ActionScript 來處理從伺服器載入至 SWF 檔案的資料。將資料載入至 SWF 檔案後,就可以從該位置存取這項資料。請使用 ActionScript 來檢查資料是否已完全載入。您可以使用回呼函數或偵聽程式來傳送訊號,表示資料已經載入至文件。

當您載入資料時,可以將資料以下列方式格式化:

  • 您可以載入 XML,在這種情況下,就必須使用 XML 類別方法和屬性來解析資料才能加以使用。如果您是使用名稱/值配對,這些配對會轉換成變數,如此您就可以將它們當成變數來處理。

  • 您可以接收來自網路服務或來自 Animate Remoting 的資料。

在這兩種情況下,都可能會接收必須適當地解析及繫結的複雜資料結構,例如陣列、物件或資料集。

使用錯誤處理與偵錯

應用程式必須要夠穩固,以便能夠預測到某些錯誤,繼而進行處理。

在 ActionScript 2.0 中,要執行錯誤處理的其中一個最佳方式是使用 try-catch-finally 區塊,讓您擲出及捕捉自訂錯誤。經由建立自訂錯誤類別,您可以在應用程式中重複使用程式碼,而不需重新撰寫錯誤處理程式碼。如需擲出自訂錯誤的詳細資訊,請參閱「ActionScript 2.0 語言參考」中的 Error 類別。如需 try-catch-finally 區塊的詳細資訊,請參閱 try..catch..finally (位於「ActionScript 2.0 語言參考」)。

在 ActionScript 3.0 中,請使用 flash.errors 類別來捕捉錯誤。

如需詳細資訊,請參閱「ActionScript 3.0 程式設計」中的「處理應用程式中的同步錯誤」。

組織檔案與儲存程式碼

在您開始組織檔案及儲存程式碼時,請考慮下列原則:

  • 您是否將 SWF 檔案分割成多個 SWF 檔案?如果是,它們應該如何互動?

  • 各個 SWF 檔案之間可以共用哪些資源?

  • 您會以動態方式載入哪些檔案?

  • 您要如何儲存 ActionScript?要儲存在哪裡?

    當您開發應用程式時,請將伺服器端程式碼和檔案存放在具邏輯性的目錄結構中,如同 ActionScript 套件中的檔案一般。以這個方式來整理程式碼,以便讓它保有良好的組織,並減輕程式碼遭到覆寫的風險。

    如果是較大型的應用程式,請將用戶端/伺服器通訊與服務包裝在類別中。當您使用類別時,可以獲得下列益處:

  • 您可以在多個 SWF 檔案中重複使用程式碼。

  • 您可以在同一個位置編輯程式碼,然後經由重新發佈來更新所有 SWF 檔案。

  • 您可以建立單一 API 來處理不同的 UI 元素或其他執行類似功能的資源。

使用 MVC 設計模式

MVC 設計模式是用來區分應用程式中的資訊、輸出與資料處理。應用程式可分割成三個元素:模型、檢視和控制器,其中每一個元素都負責處理程序的不同部分。

模式

合併資料及應用程式規則。應用程式大部分的處理程序都發生在設計模式的這一部分。此外,模型還包含了任何組件 (例如 CFC、EJB 和網路服務) 以及資料庫。在這部分的處理程序中,傳回的資料不會針對應用程式的介面 (或前端) 來格式化。這表示傳回的資料可以用於不同的介面 (或檢視)。

檢視

處理應用程式的前端 (與使用者互動的介面) 並呈現模式的內容。此介面會指定模型的資料要如何呈現並輸出檢視供使用者使用,讓使用者能夠存取或處理應用程式的資料。如果模型經過變更,檢視就會經由推送或擷取資料 (傳送或要求資料) 來進行更新,以反映這些變更。如果您要建立一個混合的網路應用程式 (例如,在頁面上包含了和其他應用程式互動的 Animate),可以考慮在設計模式中使用多個介面作為檢視的一部分。MVC 設計模式可以支援處理各式各樣的檢視。

控制器

負責處理模型和檢視的需求以便處理及顯示資料,其中通常包含很多程式碼。依據來自介面 (或檢視) 的使用者要求,它會呼叫模型的任何部分,並包含應用程式專屬的程式碼。因為程式碼是專屬於應用程式,所以通常無法重複使用。不過,設計模式中的其他組件卻可以重複使用。控制器不會處理或輸出任何資料,但它會接收使用者的要求,然後決定需要呼叫的模型或檢視組件部分,並判斷要將資料傳送到哪裡,以及套用到傳回的資料格式。控制器可確保檢視能夠存取它必須顯示的模型資料部分。控制器一般會傳輸及回應涉及模型和檢視的變更。

在整個處理程序中,模型的每一個部分都是建立成獨立的組件。如果您變更了模型的某一部分 (例如,可能是重做介面),會因為程序的其他部分通常都不需要修改,而減少了很多問題。如果設計模式建立正確,您不需重做模型或控制器,就可以變更檢視。如果應用程式不是使用 MVC,在任何一個地方進行變更都可能會對全部程式碼造成漣漪效果,而比使用特定設計模式需要進行更多的變更。

其中一個使用 MVC 模式的重要原因,是要將資料與邏輯和使用者介面做個區分。經由區分這些程序部分,您可以擁有數種不同的圖形介面,使用相同的模型與未經格式化的資料。這表示您可以搭配不同的 Animate 介面來使用應用程式,例如網路介面、Pocket PC 介面、行動電話的介面,或者是完全不使用 Animate 的 HTML 介面。將資料和這些應用程式部分做區分可以大大減少用於開發及測試的時間,甚至可以減少更新多個用戶端介面的時間。同樣地,如果已經有現有的模型可用,替相同的應用程式增加新的前端也會比較容易。

只在建立大型或複雜的應用程式 (例如,電子商務網站或數位教學應用程式) 時,才使用 MVC。使用此架構需要規劃與了解 Animate 和這個設計模式的運作方式。請仔細思考各個不同部分是如何進行互動,這通常會涉及到測試與偵錯。相較於一般的 Animate 應用程式,使用 MVC 的測試與偵錯會佔更高的比率,也更加困難。如果您要建立格外複雜的應用程式,請考慮使用 MVC 來組織您的工作。

建立安全的應用程式

無論您是建立小型入口網站讓使用者登入並閱讀文章,或者是大型的電子商務購物商店,都會有一些惡意使用者企圖要侵入應用程式。基於此原因,請考慮下列步驟來保護您的應用程式。

  • 將需要保護的資料貼入 HTTPS。將 Animate 中的值傳送到遠端伺服器進行處理前,請先進行加密。

    注意:絕對不要在 SWF 檔案中存放您不想讓使用者看到的任何資訊或程式碼,因為使用協力廠商軟體來分解 SWF 檔案並檢視檔案內容是很容易的。

  • 新增跨網域的原則,可防止未經授權的網路存取您的資源。

 

Adobe 標誌

登入您的帳戶