將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及網(wǎng)絡(luò)應(yīng)用技術(shù)，特別是涉及一種將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法和裝 置。
【背景技術(shù)】
[0002] SWF (Shock Wave Flash)是一種動(dòng)畫設(shè)計(jì)軟件Flash的專用格式，是一種支持矢量 和點(diǎn)陣圖形的動(dòng)畫文件格式，被廣泛應(yīng)用于網(wǎng)頁設(shè)計(jì)，動(dòng)畫制作等領(lǐng)域，SWF文件通常被成 為Flash文件。
[0003] Canvas 動(dòng)畫是在 HTML5 (Hyper Text Mark-up Language，超文本標(biāo)記語言）網(wǎng)頁 上使用畫布元素繪制的動(dòng)畫。HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用 超文本標(biāo)記語言的第五重大修改。
[0004] 傳統(tǒng)的將SWF轉(zhuǎn)化為HTML5動(dòng)畫的方法有Swiffy和Flashcc。其中，swiffy通 過解析SWF文件的字節(jié)碼，分析得到動(dòng)畫中每一幀的信息，并把信息以json(JavaScript Object Notation,是一種輕量級的數(shù)據(jù)交換格式）形式輸出，在網(wǎng)頁側(cè)，Swiffy通過一個(gè) javascript庫對json信息做解析，動(dòng)態(tài)生成svg圖形，并逐幀變化，最終得到完整的動(dòng)畫。 然而，Swiffy的運(yùn)行庫有450KB (千字節(jié)），對于移動(dòng)網(wǎng)絡(luò)的智能設(shè)備，播放動(dòng)畫需要消耗很 長的下載時(shí)間，影響播放的流暢性。Flashcc是Flash動(dòng)畫制作工具的cc版本，集成了把 SWF轉(zhuǎn)化為Canvas動(dòng)畫的功能，然而，F(xiàn)lascc導(dǎo)出的腳本和運(yùn)行支持庫都較大，前者一般超 過100KB，后者接近100KB，在移動(dòng)網(wǎng)絡(luò)下播放動(dòng)畫會消耗較長下載時(shí)間，影響播放的流暢 性。

【發(fā)明內(nèi)容】

[0005] 基于此，有必要針對傳統(tǒng)的將SWF轉(zhuǎn)化為HTML5動(dòng)畫的方法需要消耗較長下載時(shí) 間導(dǎo)致播放的流暢度低的問題，提供一種能節(jié)省下載時(shí)間，提高播放流暢度的將SWF轉(zhuǎn)化 為Canvas動(dòng)畫的方法。
[0006] 此外，還有必要提供一種能節(jié)省下載時(shí)間，提高播放流暢度的將SWF轉(zhuǎn)化為 Canvas動(dòng)畫的裝置。
[0007] -種將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法，包括以下步驟：
[0008] 對SWF文件進(jìn)行解析，遍歷所述SWF文件得到元件，所述元件包括影片剪輯和圖 形，并將所述元件定義存儲到元件池中；
[0009] 對所述圖形進(jìn)行壓縮處理，導(dǎo)出壓縮后的圖形數(shù)據(jù)；
[0010] 對所述影片剪輯進(jìn)行壓縮處理，導(dǎo)出影片剪輯的幀操作指令；
[0011] 通過腳本運(yùn)行庫的應(yīng)用函數(shù)調(diào)用壓縮后的圖形數(shù)據(jù)和影片剪輯的幀操作指令，還 原為Canvas動(dòng)畫。
[0012] 一種將SWF轉(zhuǎn)化為Canvas動(dòng)畫的裝置，包括：
[0013] 遍歷存儲模塊，用于對SWF文件進(jìn)行解析，遍歷所述SWF文件得到元件，所述元件 包括影片剪輯和圖形，并將所述元件定義存儲到元件池中；
[0014] 圖形導(dǎo)出模塊，用于對所述圖形進(jìn)行壓縮處理，導(dǎo)出壓縮后的圖形數(shù)據(jù)；
[0015] 影片剪輯導(dǎo)出模塊，用于對所述影片剪輯進(jìn)行壓縮處理，導(dǎo)出影片剪輯的幀操作 指令；
[0016] 還原模塊，用于通過腳本運(yùn)行庫的應(yīng)用函數(shù)調(diào)用壓縮后的圖形數(shù)據(jù)和影片剪輯的 中貞操作指令，還原為Canvas動(dòng)畫。
[0017] 上述將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法和裝置，通過對SWF進(jìn)行解析，獲取各個(gè)元 件，并將各個(gè)元件的定義存儲到元件池中，然后對影片剪輯元件進(jìn)行壓縮處理，導(dǎo)出影片剪 輯的幀操作指令，對圖形元件壓縮處理，導(dǎo)出圖形數(shù)據(jù)，因元件池中對同一元件只需記錄一 次定義，縮減了數(shù)據(jù)尺寸，對元件進(jìn)行壓縮處理，減小了數(shù)據(jù)尺寸，通過腳本運(yùn)行庫的應(yīng)用 函數(shù)直接調(diào)用壓縮后的圖形數(shù)據(jù)和幀操作指令，不需條件判斷，節(jié)省了計(jì)算時(shí)間，因數(shù)據(jù)尺 寸小節(jié)省了下載時(shí)間，提高了播放流暢度；對圖形數(shù)據(jù)采用簡化處理，減小了數(shù)據(jù)尺寸；對 影片剪輯進(jìn)行指令抽取和屬性變化規(guī)律識別，可將原本每幀都有的信息變成關(guān)鍵幀的信息 大大減少了重復(fù)數(shù)據(jù)且保證了動(dòng)畫描述的完整性。
【附圖說明】
[0018] 圖1為一個(gè)實(shí)施例中將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法的流程圖；
[0019] 圖2為SWF文件中的實(shí)例名稱選擇示意圖；
[0020] 圖3為SWF遍歷過程不意圖；
[0021] 圖4為顯示列表機(jī)制示意圖；
[0022] 圖5為一個(gè)實(shí)施例中將SWF轉(zhuǎn)化為Canvas動(dòng)畫的裝置的結(jié)構(gòu)框圖；
[0023] 圖6為另一個(gè)實(shí)施例中將SWF轉(zhuǎn)化為Canvas動(dòng)畫的裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0024] 為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對 本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并 不用于限定本發(fā)明。
[0025] 圖1為一個(gè)實(shí)施例中將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法的流程圖。如圖1所示，該 將SWF轉(zhuǎn)化為Canvas動(dòng)畫的方法，包括以下步驟：
[0026] 步驟102,對SWF文件進(jìn)行解析，遍歷該SWF文件得到元件，該元件包括影片剪輯和 圖形，并將該元件定義存儲到元件池中。
[0027] 具體的，SWF文件由影片剪輯、圖形、按鈕組成。一個(gè)SWF中最上層的元件是一個(gè) 影片剪輯，影片剪輯是一個(gè)容器，可以包含子影片剪輯、子圖形或子按鈕。圖2為SWF文件 中的實(shí)例名稱選擇示意圖，圖2中實(shí)例名稱包括影片剪輯、按鈕和圖形。此外，即使沒有打 包的色塊等，最后導(dǎo)出SWF時(shí)，F(xiàn)lash開發(fā)環(huán)境將同一層的色塊同一打包到一個(gè)圖形中。
[0028] 影片剪輯的時(shí)間軸，在每一幀中進(jìn)行一些操作，稱為影片剪輯的標(biāo)簽動(dòng)作，例如定 義新的圖形、定義新的影片剪輯放到庫中、把庫的元件添加到舞臺上、把前一幀的元件進(jìn)行 transform操作等。庫為存儲元件的地方；庫元件是由用戶進(jìn)行Flash工程中制作的元件。
[0029] 因在Flash運(yùn)行時(shí)，播放器首先建立一個(gè)元件池，用于存儲所有元件的定義，然后 解析執(zhí)行每個(gè)影片剪輯的標(biāo)簽動(dòng)作，每一幀標(biāo)簽動(dòng)作被執(zhí)行后，F(xiàn)lash將呈現(xiàn)出相應(yīng)的畫 面。在定時(shí)器驅(qū)動(dòng)之下，播放器不斷執(zhí)行標(biāo)簽動(dòng)作，會產(chǎn)生幀畫面變化，從而顯示出動(dòng)畫。所 以通過Actionscript3. 0解析SWF文件，模擬Flash播放器的運(yùn)行機(jī)制，抓取SWF每一幀的 信息，包含全部元件定義和每一幀的標(biāo)簽動(dòng)作信息，將其轉(zhuǎn)化為更精簡的數(shù)據(jù)。在其他實(shí)施 例中，也可采用二進(jìn)制方式讀取SWF文件獲取每一幀的信息。
[0030] 在一個(gè)實(shí)施例中，步驟102包括：
[0031] (1)對SWF文件進(jìn)行解析，抽離每個(gè)元件的定義，從根影片剪輯開始逐幀遍歷每個(gè) 元件，若元件為圖形，生成圖形數(shù)據(jù)，存儲到元件池中。
[0032] 元件池 （Element Pool)用于存儲影片剪輯中所有元件定義，包括庫元件和影片剪 輯中臨時(shí)建立的圖形。建立元件池的目的是為了同樣的元件，只輸出一份定義數(shù)據(jù)，以縮減 數(shù)據(jù)大小。
[0033] 圖形數(shù)據(jù)（Shape Data)用于存儲圖形的graphics信息，該graphics信息包括路 徑、填充、漸變信息等。
[0034] (2)若元件為影片剪輯，生成對應(yīng)的影片剪輯定義，且不填充幀操作，存儲到元件 池中，并遍歷該影片剪輯得到該影片剪輯臨時(shí)數(shù)據(jù)，再根據(jù)元件池中的影片剪輯定義逐幀 對該影片剪輯臨時(shí)數(shù)據(jù)進(jìn)行解析，得到幀操作列表信息，該幀操作列表信息包括元件名稱、 定義標(biāo)識和幀操作信息，將該幀操作列表信息填充該影片剪輯定義，并將該填充后的影片 剪輯定義存儲到元件池中。
[0035] Movie Clip Data (影片剪輯數(shù)據(jù)）用于存儲影片剪輯信息，主要是Frame Action List (幀操作列表）記錄每幀的動(dòng)作，即每幀的標(biāo)簽動(dòng)作。
[0036] Frame Action(幀操作）用于存儲一個(gè)操作指令，包括圖形定義、把庫中的元件添 加到舞臺上、設(shè)置透明度、設(shè)置濾鏡、設(shè)置形變位移旋轉(zhuǎn)等。
[0037] 元件名稱（name)用于判斷元件是否跨幀存在，定義標(biāo)識（definition Id)用于在 元件池中取出影片剪輯的定義，再補(bǔ)充Frame Action信息。
[0038] 在一個(gè)實(shí)施例中，在將元件定義存儲到元件池之前，該將SWF轉(zhuǎn)化為Canvas動(dòng)畫 的方法還包括：判斷該元件池是否已存在該元件定義，若是，則跳過，若否，則將該元件定義 存儲到元件池。
[0039] 圖3為SWF遍歷過程示意圖。如圖3所示，通過影片剪輯（Movie Clip)解析器讀 取影片剪輯遍歷每幀每個(gè)元件，若元件為圖形（Shape)，則由圖形解析器解析得到圖形定義 數(shù)據(jù)（Shape Data),存儲到元件池 （Element Pool)中；若元件為影片剪輯，則先生成影片 剪輯定義，且該影片剪輯定義中不填充任何幀操作（Frame Action)，直接存儲到元件池中， 同時(shí)記錄當(dāng)前影片剪輯每一幀每個(gè)子元件的元件名稱、