swiffy的本地化：在线Flash转HTML5

本文示例swf文件下载

本博客也将追寻乔帮主的步伐，开启去Flash化——其实本身也没啥Flash元素啊。

有的时候看到个比较好玩的Flash动画，想要挂到网站上，但是移动端却很难支持Flash。那就只有想办法将Flash转换成人见人爱花见花开的HTML5了。搜索良久，发现一些所谓的"转换工具"其实就是让你玩那个Flash，然后录制成视频，简直是滑天下之大稽

终于在Google找到了一个工具swiffy，也是老大爷Google开发的，可以用来转换Flash到HTML5.可喜可贺的是这个工具不仅仅提供了Adobe Flash CC的扩展，还提供了一个在线转换工具。悲伤的是这个在线转换工具只支持1M以下的swf文件。

当然了即使网页版够用，想要稳稳的在国内使用这个Flash也是略有难度的，那就让我来一步一步的说教吧！

事先打个小广告，哪位好心人帮我喂喂小仓鼠吧！

---

 

首先需要翻墙（如何翻墙，请参考《[2016-01-22]全平台科学上网[翻墙]工具集合》）

打开Google开发者中心

简单粗暴的界面，点convert，上传本地的swf文件。文件限制1M以下，当然了，Adobe Flash扩展应该没啥限制。有兴趣可以自己去Adobe官网下载安装Flash试用版玩玩。友情提示，是扩展不是插件哦，需要Adobe Extension Manager，不是丢进某个目录就可以的。

这还用说么…简单的不得了。

Upload上传。

之后在view conversion上右键，选择链接另存为。

可以看到有一些警告，也并不是所有swf都能完美的转换成h5的。

直接双击保存的html文件就能看到动画了

但是天真的你以为这就结束了吗？并没有

假如你给没翻墙的人看的话，很大的可能就会一片空白。如果安装了Switchy Omega还会看到有一个资源没加载。

Chrome检查工具同样告诉我们这个文件超时了

gstatic是Google的……so拜祖国伟大的墙所赐呵呵呵  

几乎是完全屏蔽。

没关系，我们手动的对这个HTML文件进行改造。

Chrome检查工具已经告诉我们了那个js没有加载成功，那就用任意文本编辑器打开这个HTML文件

把这个链接复制下来，然后粘贴到浏览器中，很自然的就打开了吧（前提是翻墙了）

 

还想啥啊，快把这个runtime.js另存为了吖。

然后找个支持外链的地方，比如自己的博客，七牛云，阿里百川，这里就拿七牛云做例子了。当然了如果是HTTPS的博客网站的话，为了避免Mix Content而JavaScript的Mix Content是一定会被浏览器拦截的，还是去七牛充个十块钱或者拿自己网站吧……

这里拿七牛做例子……

打开http://www.qiniu.com/，选择一个https默认域名的空间，上传刚刚的那个js文件，然后取得文件的外链，这里的例子是https://o13hhk496.qnssl.com/runtime.js

还用我说嘛…用这个外链替换html文件里的那个js。

嗯就是酱

打开隐身模式看下，游戏尚未结束……说不定这个js又加载了哪些js是吧……

真是人品好，秒开有木有！当然了，如果这个js又加载了其他被墙的js，那就得顺藤摸瓜用检查工具一个调试了……百度分享不就是这么解决的么

到这这个转换就算彻底做完了。

有博客的小伙伴可能会想把这个467KB的HTML文件的全部内容粘贴到博客侧边栏的文本框中，大概就是这样：

实际上我并不推荐这样做，保存下你就会发现一卡一卡的……而且拜伟大的墙所赐，这么大（467KB很大了，真的）的文件加载还是有点慢的……那怎么办呢？

好办，不是有七牛吗，继续把这个HTML文件存到七牛，取得外链，然后文本框这么写就可以了，src自行替换，宽度和高度自己看着摸索吧。

<embed src="https://o13hhk496.qnssl.com/h5hamster.html" width="290" height="230"></embed>

如图所示

<embed> 标签是 HTML 5 中的新标签哦。

这才算结束……还不快跟我一起大吼，H5大法好！

当然了，一些嵌入了比较大HTML源码的页面（比如说这个），我也直接用了embed…

PS，有些主题的404界面插了个Flash游戏，主题对应的404.php可能会对应如下代码

<embed src="http://images.yusi123.com/zhuamao.swf" type="application/x-shockwave-flash" width="600" height="400" align="L"></embed>

甭想了，替换成类似这样的

<embed src="https://o13hhk496.qnssl.com/h5hamster.html" width="290" height="230"></embed>

当然前面可能有必要来几个<br>（换行）

效果图，我还是很满足的。

---