登录
  • Even when we go our separate ways, in my heart you'll always stay...
  • 最纯粹、最抽象的设计难题就是设计桥梁。你面对的问题是: 如何用最少的材料, 跨越给定的距离@保罗.格雷汉姆 (知名黑客 硅谷牛人)

swiffy的本地化:在线Flash转HTML5

IT那些事 Benny小土豆 1284次浏览 1976字 2个评论
这篇文章在 2017年10月10日16:03:20 更新了哦~

swiffy下线了

本文示例swf文件下载

Flash已死,请大家转向HTML5……

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

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

终于在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,不是丢进某个目录就可以的。

swiffy的本地化:在线Flash转HTML5

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

swiffy的本地化:在线Flash转HTML5

Upload上传。

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

swiffy的本地化:在线Flash转HTML5

不知道为啥我的Chrome总是蹦不出来保存窗口,于是我换成了小狐狸Firefox。

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

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

swiffy的本地化:在线Flash转HTML5

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

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

swiffy的本地化:在线Flash转HTML5

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

swiffy的本地化:在线Flash转HTML5

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

swiffy的本地化:在线Flash转HTML5

几乎是完全屏蔽。

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

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

swiffy的本地化:在线Flash转HTML5

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

swiffy的本地化:在线Flash转HTML5

 

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

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

这里拿七牛做例子……

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

如果你懒直接用这个也未尝不可,反正我流量也是用不完的用……(什么?免费用户就10G难道你充钱呢?不,青葱创业计划

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

嗯就是酱

swiffy的本地化:在线Flash转HTML5

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

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

swiffy的本地化:在线Flash转HTML5

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

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

swiffy的本地化:在线Flash转HTML5

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

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

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

如图所示

swiffy的本地化:在线Flash转HTML5

<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>(换行)

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

swiffy的本地化:在线Flash转HTML5


文章版权归原作者所有丨本站默认采用CC-BY-NC-SA 4.0协议进行授权|
转载必须包含本声明,并以超链接形式注明原作者和本文原始地址:
https://www.bennythink.com/swiffy-flash2html5.html
喜欢 (4)
分享:-)
Benny小土豆
关于作者:
If you have any further questions, feel free to contact me in English or Chinese.
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

去你妹的实名制!

  • 昵称 (必填)
  • 邮箱 (必填,不要邮件提醒可以随便写)
  • 网址 (选填)
(2)个小伙伴在吐槽
  1. :smile:
    玉蜀黍2016-02-28 12:59 回复
    • Benny小土豆
      :roll:
      Benny笨土豆2016-02-28 14:50 回复