将SWF转化为Canvas动画的方法和装置制造方法及图纸

本发明专利技术涉及一种将SWF转化为Canvas动画的方法和装置。所述方法，包括以下步骤：对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；对所述图形进行压缩处理，导出压缩后的图形数据；对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。上述将SWF转化为Canvas动画的方法和装置，缩减了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令等，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度。

Method and apparatus for converting SWF to Canvas animation

The invention relates to a method and a device for converting SWF into Canvas animation. The method comprises the following steps: parsing the SWF file, the SWF file traversal of the component, the elements include movie clips and graphics, and the element to define the storage element pool; the graphics compress derived graphic data compression after the film clip; compression processing, frame operation instruction derived film editing; frame operation instruction through the graphics data and video application function call script runtime compressed clip, reduced to Canvas animation. The SWF is transformed into Canvas animation method and device, reduce the data size by directly calling the application function script runtime compressed graphics data and frame operation instructions, without conditions, saves computing time and data size for the download section of provincial time, improve the playback fluency.

【技术实现步骤摘要】

本专利技术涉及网络应用技术，特别是涉及一种将SWF转化为Canvas动画的方法和装置。
技术介绍
SWF(ShockWaveFlash)是一种动画设计软件Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计，动画制作等领域，SWF文件通常被成为Flash文件。Canvas动画是在HTML5(HyperTextMark-upLanguage，超文本标记语言)网页上使用画布元素绘制的动画。HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五重大修改。传统的将SWF转化为HTML5动画的方法有Swiffy和Flashcc。其中，swiffy通过解析SWF文件的字节码，分析得到动画中每一帧的信息，并把信息以json(JavaScriptObjectNotation，是一种轻量级的数据交换格式)形式输出，在网页侧，Swiffy通过一个javascript库对json信息做解析，动态生成svg图形，并逐帧变化，最终得到完整的动画。然而，Swiffy的运行库有450KB(千字节)，对于移动网络的智能设备，播放动画需要消耗很长的下载时间，影响播放的流畅性。Flashcc是Flash动画制作工具的cc版本，集成了把SWF转化为Canvas动画的功能，然而，Flascc导出的脚本和运行支持库都较大，前者一般超过100KB，后者接近100KB，在移动网络下播放动画会消耗较长下载时间，影响播放的流畅性。
技术实现思路
基于此，有必要针对传统的将SWF转化为HTML5动画的方法需要消耗较长下载时间导致播放的流畅度低的问题，提供一种能节省下载时间，提高播放流畅度的将SWF转化为Canvas动画的方法。此外，还有必要提供一种能节省下载时间，提高播放流畅度的将SWF转化为Canvas动画的装置。一种将SWF转化为Canvas动画的方法，包括以下步骤：对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；对所述图形进行压缩处理，导出压缩后的图形数据；对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。一种将SWF转化为Canvas动画的装置，包括：遍历存储模块，用于对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；图形导出模块，用于对所述图形进行压缩处理，导出压缩后的图形数据；影片剪辑导出模块，用于对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；还原模块，用于通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。上述将SWF转化为Canvas动画的方法和装置，通过对SWF进行解析，获取各个元件，并将各个元件的定义存储到元件池中，然后对影片剪辑元件进行压缩处理，导出影片剪辑的帧操作指令，对图形元件压缩处理，导出图形数据，因元件池中对同一元件只需记录一次定义，缩减了数据尺寸，对元件进行压缩处理，减小了数据尺寸，通过脚本运行库的应用函数直接调用压缩后的图形数据和帧操作指令，不需条件判断，节省了计算时间，因数据尺寸小节省了下载时间，提高了播放流畅度；对图形数据采用简化处理，减小了数据尺寸；对影片剪辑进行指令抽取和属性变化规律识别，可将原本每帧都有的信息变成关键帧的信息大大减少了重复数据且保证了动画描述的完整性。附图说明图1为一个实施例中将SWF转化为Canvas动画的方法的流程图；图2为SWF文件中的实例名称选择示意图；图3为SWF遍历过程示意图；图4为显示列表机制示意图；图5为一个实施例中将SWF转化为Canvas动画的装置的结构框图；图6为另一个实施例中将SWF转化为Canvas动画的装置的结构框图。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。图1为一个实施例中将SWF转化为Canvas动画的方法的流程图。如图1所示，该将SWF转化为Canvas动画的方法，包括以下步骤：步骤102，对SWF文件进行解析，遍历该SWF文件得到元件，该元件包括影片剪辑和图形，并将该元件定义存储到元件池中。具体的，SWF文件由影片剪辑、图形、按钮组成。一个SWF中最上层的元件是一个影片剪辑，影片剪辑是一个容器，可以包含子影片剪辑、子图形或子按钮。图2为SWF文件中的实例名称选择示意图，图2中实例名称包括影片剪辑、按钮和图形。此外，即使没有打包的色块等，最后导出SWF时，Flash开发环境将同一层的色块同一打包到一个图形中。影片剪辑的时间轴，在每一帧中进行一些操作，称为影片剪辑的标签动作，例如定义新的图形、定义新的影片剪辑放到库中、把库的元件添加到舞台上、把前一帧的元件进行transform操作等。库为存储元件的地方；库元件是由用户进行Flash工程中制作的元件。因在Flash运行时，播放器首先建立一个元件池，用于存储所有元件的定义，然后解析执行每个影片剪辑的标签动作，每一帧标签动作被执行后，Flash将呈现出相应的画面。在定时器驱动之下，播放器不断执行标签动作，会产生帧画面变化，从而显示出动画。所以通过Actionscript3.0解析SWF文件，模拟Flash播放器的运行机制，抓取SWF每一帧的信息，包含全部元件定义和每一帧的标签动作信息，将其转化为更精简的数据。在其他实施例中，也可采用二进制方式读取SWF文件获取每一帧的信息。在一个实施例中，步骤102包括：(1)对SWF文件进行解析，抽离每个元件的定义，从根影片剪辑开始逐帧遍历每个元件，若元件为图形，生成图形数据，存储到元件池中。元件池(ElementPool)用于存储影片剪辑中所有元件定义，包括库元件和影片剪辑中临时建立的图形。建立元件池的目的是为了同样的元件，只输出一份定义数据，以缩减数据大小。图形数据(ShapeData)用于存储图形的graphics信息，该graphics信息包括路径、填充、渐变信息等。(2)若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到元件池中，并遍历该影片剪辑得到该影片剪辑临时数据，再根据元件池中本文档来自技高网...

【技术保护点】
一种将SWF转化为Canvas动画的方法，包括以下步骤：对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件定义存储到元件池中；对所述图形进行压缩处理，导出压缩后的图形数据；对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指令，还原为Canvas动画。

【技术特征摘要】
1.一种将SWF转化为Canvas动画的方法，包括以下步骤：
对SWF文件进行解析，遍历所述SWF文件得到元件，所述元件包括影片
剪辑和图形，并将所述元件定义存储到元件池中；
对所述图形进行压缩处理，导出压缩后的图形数据；
对所述影片剪辑进行压缩处理，导出影片剪辑的帧操作指令；
通过脚本运行库的应用函数调用压缩后的图形数据和影片剪辑的帧操作指
令，还原为Canvas动画。
2.根据权利要求1所述的方法，其特征在于，所述对SWF文件进行解析，
遍历所述SWF文件得到元件，所述元件包括影片剪辑和图形，并将所述元件的
定义存储到元件池中的步骤包括：
对SWF文件进行解析，抽离每个元件的定义，从根影片剪辑开始逐帧遍历
每个元件，若元件为图形，生成图形数据，存储到元件池中；
若元件为影片剪辑，生成对应的影片剪辑定义，且不填充帧操作，存储到
元件池中，并遍历所述影片剪辑得到所述影片剪辑临时数据，再根据元件池中
的影片剪辑定义逐帧对所述影片剪辑临时数据进行解析，得到帧操作列表信息，
所述帧操作列表信息包括元件名称、定义标识和帧操作信息，将所述帧操作列
表信息填充所述影片剪辑定义，并将所述填充后的影片剪辑定义存储到元件池
中。
3.根据权利要求2所述的方法，其特征在于，在将元件定义存储到元件池
之前，所述方法还包括：
判断所述元件池是否已存在所述元件定义，若是，则跳过，若否，则将所
述元件定义存储到元件池。
4.根据权利要求1所述的方法，其特征在于，所述对所述图形进行压缩处
理的步骤包括：
对所述图形的多种指令分别采用相应的预设字符表示；
将所述图形的路径信息的每个子指令及所对应的坐标数值作为一个单位进
行压缩编码。
5.根据权利要求2所述的方法，其特征在于，所述对所述影片剪辑进行压
缩处理的步骤包括：
对所述影片剪辑临时数据进行指令抽取处理和属性变化规律识别处理。
6.根据权利要求5所述的方法，其特征在于，所述对所述影片剪辑临时数
据进行指令抽取处理和属性变化规律识别处理的步骤包括：
建立一个动态元件数组，记录当前帧中各元件的起始帧索引和每帧的属性
信息；
遍历影片剪辑临时数据得到临时数组，将所述临时数组和动态元件数组进
行比对查找得到元件被添加和移出的节点，生成放置元件指令和移出元件指令，
并更新动态元件数组，且所述放置元件指令是从低层次元件向高层次元件遍历
的顺序输出的，所述移出元件指令优先输出；
在移出元件和影片剪辑帧结尾时处理元件的位置变化信息，从即将移出的
动态元件数组中的元件信息的帧信息数组中找到位置突变的点，在突变点输出
放置元件指令；
在突变点之前有缓动变化或元件帧结尾之前有缓动变化的元件生成缓动元
件指令。
7.根据权利要求5所述的方法，其特征在于，所述对影片剪辑进行压缩处
理还包括：
对默认值不输出；
无变化不输出；
对数...

【专利技术属性】
技术研发人员：郑高强，沈婧，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44