swf使用flash的替换方案

原创已于 2022-09-20 18:01:53 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-09-20 18:00:42 首次发布

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种将Flash SWF文件转换为HTML5 Canvas动画的技术方案——Fanvas。Fanvas由腾讯研发，能直接从SWF文件生成HTML5动画，无需FLA源文件。相比其他解决方案，它提供更小的输出文件大小和更轻量级的运行库。

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>