swf使用flash的替换方案

业务背景

公司一些老应用中使用到flash来播放一些swf的动画，但是目前大多浏览器已经不再支持flash了。于是找寻flash的替代品

腾讯产品 Fanvas

Fanvas是一个把swf转为html5 canvas动画的系统，由两部分组成：Actionscript实现的解析器、js运行库。

github地址： https://github.com/Tencent/Fanvas/

Fanvas的优势？

1、从swf文件直接转化为Html5动画（google的swiffy和adobe的flashcc都不支持，两个产品都需要通过fla源文件处理）；

2、精简编排的JSON数据，使swf转化后的js数据文件非常小，普遍比flashcc导出的要小20%到50%；

3、精简的运行库，混淆后只有35k，gzip后只有10k左右。而swiffy和flashcc的运行库混淆后都超过100K;

使用

首先下载Fanvas项目

1.启动fanvas.swf程序，具体方法：先打开flashplayer_14_sa_debug.exe，拖入fanvas.swf
2.导入swf，导出data.js。该data.js代表了swf的数据。如果swf中有位图，将导出一个zip包，包含图片和js，不要修改图片名称，把图片部署到html同一层目录或者某个相对路径/绝对路径。
3.在目标网页中建一个canvas标签，设置canvas的宽高（可以跟原swf不一样，fanvas将拉伸显示）。或者直接把导出的文件覆盖到demo目录中，然后4.打开index即可。
引入fanvas-min.js，data.js，等dom完成后，调用fanvas.play即可。

demo

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> New Document </TITLE></HEAD><BODY onload="init();">
<canvas width="992" height="567" id="testCanvas"></canvas>
<script type='text/javascript' src='./js_images/fanvas3-min.js'></script>
<script type='text/javascript' src='./js_images/swfData.js'></script>
<script>function init() {fanvas.play("testCanvas", swfData, {cache: false, autoPlay: true,onFrame: function (index) {//                    console.log("onFrame", index);
//                    if(index == 10){//                        fanvas.pause("testCanvas");
//                        setTimeout(function(){                            fanvas.resume("testCanvas");
//                            fanvas.replay("testCanvas");
//                        }, 2000);
//                    }},imagePath: "./"});}
</script>
</BODY>
</HTML>