將SWF轉化為Canvas動畫的方法和裝置的制造方法
【技術領域】
[0001] 本發明涉及網絡應用技術，特別是涉及一種將SWF轉化為Canvas動畫的方法和裝 置。
【背景技術】
[0002] SWF (Shock Wave Flash)是一種動畫設計軟件Flash的專用格式，是一種支持矢量 和點陣圖形的動畫文件格式，被廣泛應用于網頁設計，動畫制作等領域，SWF文件通常被成 為Flash文件。
[0003] Canvas 動畫是在 HTML5 (Hyper Text Mark-up Language，超文本標記語言）網頁 上使用畫布元素繪制的動畫。HTML5是萬維網的核心語言、標準通用標記語言下的一個應用 超文本標記語言的第五重大修改。
[0004] 傳統的將SWF轉化為HTML5動畫的方法有Swiffy和Flashcc。其中，swiffy通 過解析SWF文件的字節碼，分析得到動畫中每一幀的信息，并把信息以json(JavaScript Object Notation,是一種輕量級的數據交換格式）形式輸出，在網頁側，Swiffy通過一個 javascript庫對json信息做解析，動態生成svg圖形，并逐幀變化，最終得到完整的動畫。 然而，Swiffy的運行庫有450KB (千字節），對于移動網絡的智能設備，播放動畫需要消耗很 長的下載時間，影響播放的流暢性。Flashcc是Flash動畫制作工具的cc版本，集成了把 SWF轉化為Canvas動畫的功能，然而，Flascc導出的腳本和運行支持庫都較大，前者一般超 過100KB，后者接近100KB，在移動網絡下播放動畫會消耗較長下載時間，影響播放的流暢 性。
【發明內容】
[0005] 基于此，有必要針對傳統的將SWF轉化為HTML5動畫的方法需要消耗較長下載時 間導致播放的流暢度低的問題，提供一種能節省下載時間，提高播放流暢度的將SWF轉化 為Canvas動畫的方法。
[0006] 此外，還有必要提供一種能節省下載時間，提高播放流暢度的將SWF轉化為 Canvas動畫的裝置。
[0007] -種將SWF轉化為Canvas動畫的方法，包括以下步驟：
[0008] 對SWF文件進行解析，遍歷所述SWF文件得到元件，所述元件包括影片剪輯和圖 形，并將所述元件定義存儲到元件池中；
[0009] 對所述圖形進行壓縮處理，導出壓縮后的圖形數據；
[0010] 對所述影片剪輯進行壓縮處理，導出影片剪輯的幀操作指令；
[0011] 通過腳本運行庫的應用函數調用壓縮后的圖形數據和影片剪輯的幀操作指令，還 原為Canvas動畫。
[0012] 一種將SWF轉化為Canvas動畫的裝置，包括：
[0013] 遍歷存儲模塊，用于對SWF文件進行解析，遍歷所述SWF文件得到元件，所述元件 包括影片剪輯和圖形，并將所述元件定義存儲到元件池中；
[0014] 圖形導出模塊，用于對所述圖形進行壓縮處理，導出壓縮后的圖形數據；
[0015] 影片剪輯導出模塊，用于對所述影片剪輯進行壓縮處理，導出影片剪輯的幀操作 指令；
[0016] 還原模塊，用于通過腳本運行庫的應用函數調用壓縮后的圖形數據和影片剪輯的 中貞操作指令，還原為Canvas動畫。
[0017] 上述將SWF轉化為Canvas動畫的方法和裝置，通過對SWF進行解析，獲取各個元 件，并將各個元件的定義存儲到元件池中，然后對影片剪輯元件進行壓縮處理，導出影片剪 輯的幀操作指令，對圖形元件壓縮處理，導出圖形數據，因元件池中對同一元件只需記錄一 次定義，縮減了數據尺寸，對元件進行壓縮處理，減小了數據尺寸，通過腳本運行庫的應用 函數直接調用壓縮后的圖形數據和幀操作指令，不需條件判斷，節省了計算時間，因數據尺 寸小節省了下載時間，提高了播放流暢度；對圖形數據采用簡化處理，減小了數據尺寸；對 影片剪輯進行指令抽取和屬性變化規律識別，可將原本每幀都有的信息變成關鍵幀的信息 大大減少了重復數據且保證了動畫描述的完整性。
【附圖說明】
[0018] 圖1為一個實施例中將SWF轉化為Canvas動畫的方法的流程圖；
[0019] 圖2為SWF文件中的實例名稱選擇示意圖；
[0020] 圖3為SWF遍歷過程不意圖；
[0021] 圖4為顯示列表機制示意圖；
[0022] 圖5為一個實施例中將SWF轉化為Canvas動畫的裝置的結構框圖；
[0023] 圖6為另一個實施例中將SWF轉化為Canvas動畫的裝置的結構框圖。
【具體實施方式】
[0024] 為了使本發明的目的、技術方案及優點更加清楚明白，以下結合附圖及實施例，對 本發明進行進一步詳細說明。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，并 不用于限定本發明。
[0025] 圖1為一個實施例中將SWF轉化為Canvas動畫的方法的流程圖。如圖1所示，該 將SWF轉化為Canvas動畫的方法，包括以下步驟：
[0026] 步驟102,對SWF文件進行解析，遍歷該SWF文件得到元件，該元件包括影片剪輯和 圖形，并將該元件定義存儲到元件池中。
[0027] 具體的，SWF文件由影片剪輯、圖形、按鈕組成。一個SWF中最上層的元件是一個 影片剪輯，影片剪輯是一個容器，可以包含子影片剪輯、子圖形或子按鈕。圖2為SWF文件 中的實例名稱選擇示意圖，圖2中實例名稱包括影片剪輯、按鈕和圖形。此外，即使沒有打 包的色塊等，最后導出SWF時，Flash開發環境將同一層的色塊同一打包到一個圖形中。
[0028] 影片剪輯的時間軸，在每一幀中進行一些操作，稱為影片剪輯的標簽動作，例如定 義新的圖形、定義新的影片剪輯放到庫中、把庫的元件添加到舞臺上、把前一幀的元件進行 transform操作等。庫為存儲元件的地方；庫元件是由用戶進行Flash工程中制作的元件。
[0029] 因在Flash運行時，播放器首先建立一個元件池，用于存儲所有元件的定義，然后 解析執行每個影片剪輯的標簽動作，每一幀標簽動作被執行后，Flash將呈現出相應的畫 面。在定時器驅動之下，播放器不斷執行標簽動作，會產生幀畫面變化，從而顯示出動畫。所 以通過Actionscript3. 0解析SWF文件，模擬Flash播放器的運行機制，抓取SWF每一幀的 信息，包含全部元件定義和每一幀的標簽動作信息，將其轉化為更精簡的數據。在其他實施 例中，也可采用二進制方式讀取SWF文件獲取每一幀的信息。
[0030] 在一個實施例中，步驟102包括：
[0031] (1)對SWF文件進行解析，抽離每個元件的定義，從根影片剪輯開始逐幀遍歷每個 元件，若元件為圖形，生成圖形數據，存儲到元件池中。
[0032] 元件池 （Element Pool)用于存儲影片剪輯中所有元件定義，包括庫元件和影片剪 輯中臨時建立的圖形。建立元件池的目的是為了同樣的元件，只輸出一份定義數據，以縮減 數據大小。
[0033] 圖形數據（Shape Data)用于存儲圖形的graphics信息，該graphics信息包括路 徑、填充、漸變信息等。
[0034] (2)若元件為影片剪輯，生成對應的影片剪輯定義，且不填充幀操作，存儲到元件 池中，并遍歷該影片剪輯得到該影片剪輯臨時數據，再根據元件池中的影片剪輯定義逐幀 對該影片剪輯臨時數據進行解析，得到幀操作列表信息，該幀操作列表信息包括元件名稱、 定義標識和幀操作信息，將該幀操作列表信息填充該影片剪輯定義，并將該填充后的影片 剪輯定義存儲到元件池中。
[0035] Movie Clip Data (影片剪輯數據）用于存儲影片剪輯信息，主要是Frame Action List (幀操作列表）記錄每幀的動作，即每幀的標簽動作。
[0036] Frame Action(幀操作）用于存儲一個操作指令，包括圖形定義、把庫中的元件添 加到舞臺上、設置透明度、設置濾鏡、設置形變位移旋轉等。
[0037] 元件名稱（name)用于判斷元件是否跨幀存在，定義標識（definition Id)用于在 元件池中取出影片剪輯的定義，再補充Frame Action信息。
[0038] 在一個實施例中，在將元件定義存儲到元件池之前，該將SWF轉化為Canvas動畫 的方法還包括：判斷該元件池是否已存在該元件定義，若是，則跳過，若否，則將該元件定義 存儲到元件池。
[0039] 圖3為SWF遍歷過程示意圖。如圖3所示，通過影片剪輯（Movie Clip)解析器讀 取影片剪輯遍歷每幀每個元件，若元件為圖形（Shape)，則由圖形解析器解析得到圖形定義 數據（Shape Data),存儲到元件池 （Element Pool)中；若元件為影片剪輯，則先生成影片 剪輯定義，且該影片剪輯定義中不填充任何幀操作（Frame Action)，直接存儲到元件池中， 同時記錄當前影片剪輯每一幀每個子元件的元件名稱、