美工不再惧怕HTML5的秘密-Fanvas
Fanvas是可以把FLASH的 SWF（包括矢量和位图）转化为 HTML5 Canvas 动画的开源利器，Flash做动画是成熟高效的方式之一，但很多终端不支持Flash播放，给美工们带来了不少麻烦。借助Fanvas，可以让美工们搭上H5的快车, 一次制作FLASH，即可到处运行。
特色：
1、从swf文件直接转化为Html5动画；
2、精简编排的JSON数据，使swf转化后的js数据文件非常小；
3、精简的运行库，混淆后只有35k，gzip后只有10k左右。
Fanvas使用步骤:
- 启动fanvas.swf程序，具体方法：先打开flashplayer_14_sa_debug.exe，拖入fanvas.swf
- 导入swf，导出data.js。该data.js代表了swf的数据。如果swf中有位图，将导出一个zip包，包含图片和js，不要修改图片名称，把图片部署到html同一层目录或者某个相对路径/绝对路径。
- 在目标网页中建一个canvas标签，设置canvas的宽高（可以跟原swf不一样，fanvas将拉伸显示）。或者直接把导出的文件覆盖到demo目录中，然后打开index即可。
- 引入fanvas-min.js，data.js，等dom完成后，调用fanvas.play即可。
Demo演示：
http://kenkozheng.github.io/fanvas/magicEmotion/demo1/
http://kenkozheng.github.io/fanvas/magicEmotion/demo2/
发表回复