教您如何把flash转换为html5
由于Flash被苹果拒之门外，很多开发者在开发产品时都不得不在Flash和HTML5之间做出选择。今天Google发布的一个新工具让天平再次偏向HTML5这边，它就是Swiffy。 Swiffy可以把Flash文件转换成HTML5标准。该项目源于Google移动广告团队，开发动机就是有些设备不支持Adobe的格式，因此无法显示Flash动画。有了这个工具，你只需上传.swf文件，然后就可以将其转化为HTML5标准，显示效果和Flash一样（文件格式为JSON）。 Google称这个转换工具还不支持完全基于Flash的游戏，但是支持向量图形、嵌入式字体、图片、动画等。下面就是一个演示效果截图「上面为Flash动画，下面为经Swiffy转化后的动画」，你可以点击这个链接亲自体验。Swiffy目前只是一个实验项目，但对开发者来说非常有用。与此同时，反Flash的苹果肯定在偷着乐吧。 除了这款Flash转化工具之外，Adobe今年3月份自己也推出一款转化工具Wallaby。Flash 大红大紫的日子已经过去了，浏览器厂商们齐心协力整出了 HTML5 标准，抢 Flash 的饭碗；乔教主坚决不让 iPhone 支持 Flash，Adobe 心都挖凉了。现在 Google 也推出了 Swiffy，免费把 SWF 格式转换为 HTML5 代码，赤裸裸的挖墙脚啊。Google Swiffy 目标用户是网络开发人员，它不能转换 Flash 视频，但对大多数 Action Script 交互型 Flash 支持良好。用户只需将 SWF 文件上传，转换非常快。输出的 HTML 代码会用到一些 SVG 特性，目前只有 webkit 内核浏览器支持；这意味着输出的代码仅仅在 Safari/Chrome 上可用，自然，iOS 自带浏览器也会支持。flashl转html5：&
阅读本文后您有什么感想? 已有
人给出评价!
注：您的评论需要经过审核才会显示出来
Copyright &
PC6下载().All Rights Reserved
备案编号:湘ICP备号到html5格式转化的工具, 可以转化flash 为html5页面或者是coco2dx效果.
/hurry07/flash
中大量的使用动画效果, 随着游戏的发展, 对动画效果的需求更是变得无以复加, 又或者你理解手机游戏就是一堆炫目的动画效果和一点点游戏逻辑的组合. 动画效果在整个游戏的中占用了太多的资源. 我仔细的分析发现了问题的关键: 动画效果多由美术设计, 但需要在游戏中使用编码的方式再现, 对于简单的线性移动和变化等, 问题不大, 但是对于复杂动画效果, 甚至是不规则的动画效果, 例如人物, 工具效果等, 转化就是噩梦一样的存在.
实现上的阻碍进而导致游戏质量的下滑, 如果使用了无法描述的动画效果, 那不如使用简单的动画效果, 甚至使用序列帧来达到同样的目的. 这都不是我想要的.
如果放开实现的难题, 放眼动画效果的制作软件, flash cs系列软件算是一个不错的选择,
1 所有美术对adobe系列工具对有丰富的使用经验. 学习成本几乎没有
2 使用了层, 组件等等设计要素, 结构相对箱单, 提供了丰富的 JSFL API, 使他可以被转化成其他格式动画.
于是我萌生了flash转化为手机动画的想法, 它应该能买足下面的几个需求
1 对于动作动画可以无阻碍的导入.
2 可以同动画中的层或者组件进行交互, 例如替换, 设定触发事件等
3 能够批量处理.
经过简单搜索, 发现了几个.
自己推出的
/doubleclick/studio/swiffy/?
另外还有 adobe公司自己推出的
/cn/products/flash/flash-to-html5.html
以上两个工具都是 flash 转化为 html 神一样的大作, 但对于手机开发来说他们都不适用, swiffy 基于svg, 理念很好, 但可惜现在还未开源, 面对乱码一般的数据文件, 如何同动画对象交互是一个很大的问题. adobe 公司自己的解决方法又太偏重于 html5 平台, 即便在 html5 上它也采用基于canvas的呈现方式, 可能canvas提供的丰富2d api 让迁移工作的难度指数性的下降, 从而放弃尝试google基于svg的更富有拓展性的. 基于canvas, 将导致很难同canvas内部的对象发生交互, 也很难做2次编辑.
另外有刚开源的
/gamedev/gameengine/27.html
开源是这个项目最大的优点. 这个项目完成了我上面对flash工具的需求, 但我对它的实现方式并不满意
1 它太多的借用标签来完成 flash 同外部环境交互的功能, 例如替换一个组件我就需要预先增加一个可能被替换的一个层, 但它的状态是隐藏的, 这本是是对标签的一种误用.
2 它的图像化编辑界面看似是对动画导入的一种辅助, 其实上我理解这是一种折磨. 这个工具把很多事情集中在一起完成, 让用户没有办法提供自己插件来替换部分默认的功能.
总的来说我觉得它能使用, 但是不够简单, 或者说你强大的让我很不喜欢; 你在强迫我按照你的方式去思考.
这让我有了开发一个简单直接的flash动画导入工具的冲动. 并且我也已经完成了原型工程.
目前我的 flash 导出工具没有任何二次编辑的界面, 导出文件的格式同 flash 内部的组织方式几乎一样. 我只是单纯的反应出美术设计人员对此动画效果的理解, 我认为所有二次编辑都应该基于 flash 动画本身, 而不是一个被抽象过的动画描述文件.
目前项目还没有完成, 我期望他将来能够:
1 提供类似 html selector 类似素选择方式, 同flash动画内部发生交互.
2 能够支持 flash 原生的 button 对象.
3 希望能提供对 font 和 shape 的支持, 从而实现使用 flash 来编辑 UI
4 保持友好的, 希望可以出现非 flash 的编辑工具, 支持更丰富的用户自定义组件(tabview, input dialog)
最后, 我想通过 开源结合商业授权和收费服务的方式来维持项目的发展.友情链接:联系人：QQFanvas首页、文档和下载 - 一键把swf转为html5 canvas动画-中国学网-中国IT综合门户网站-提供健康,养生,留学,移民,创业,汽车等信息
Fanvas首页、文档和下载 - 一键把swf转为html5 canvas动画
来源：互联网 更新时间： 20:08:11 责任编辑：李志喜字体：
Fanvas是一个把swf转为html5 canvas动画的系统，由两部分组成：Actionscript实现的解析器、js运行库。Flash做动画是最成熟最高效的方式，但由于终端基本不支持Flash播放，这给终端的动画制作带来了不少麻烦。Fanvas是Flash和Canvas的完美结合，可以把swf（包括矢量和位图）完美地转化为canvas动画，让美术妹子一次制作，到处运行。。。嘿嘿~~~让美术妹子也搭上H5的快车。技术难点：兼容swf的各种格式，主要是各种矢量命令和多种多样的图片格式；实现高效的html5运行库，自主实现了位图缓存、自动脏区识别、脏区重绘等技术。优势：能转化swf为H5动画的工具，除了Fanvas还有大名鼎鼎的google和adobe的产品――swiffy和flashcc。
对比之下，Fanvas有如下优势：从swf文件直接转化为Html5动画（google的swiffy和adobe的flashcc都不支持，两个产品都需要通过fla源文件处理）；精简编排的JSON数据，使swf转化后的js数据文件非常小，普遍比flashcc导出的要小20%到50%；精简的运行库，混淆后只有35k，gzip后只有10k左右。而swiffy和flashcc的运行库混淆后都超过100K;开源，可供使用者二次开发（请保留Fanvas字样或版权声明）。使用方法只需要一键导入swf，转化完成后一键导出canvas动画js。具体请参考bin目录的《使用说明》源代码说明exporter是as3.0实现的swf文件解析器，解析后输出json数据；runtime是js运行库，用于解析json数据，转化为最终canvas动画。DEMO示例
相关文章：
上一篇文章：下一篇文章：
最新添加资讯
24小时热门资讯
Copyright © 2004- All Rights Reserved. 中国学网 版权所有
京ICP备号-1 京公网安备02号[转][HTML5]模仿Flash的帧式动画
请有一定的基础再看这篇文章
另外这篇文章应用了某教程的一个例子，我进行了一下修改和整理
我们想想flash的工作原理吧,flash中最基本的两个东西,一个是帧,一个是精灵(Sprite).下面我们就给我们的动画程序添加这两个概念.
首先是帧,我们通过一个定时器,每隔一段时间就重画一下画布,在这段时间里我们改变画布上的元素的位置,这样就是最基本的帧了.
然后现在问题就是如何控制画布上元素的属性呢?我们把画布上所有要用到的动画元素都抽象出来,每个元素都抽象成一个对象,这个对象拥有位置和大小,速度等信息.然后在每一帧重画画布的时候,我们遍历这些对象,调用它们自己的draw方法,让它们根据自己的属性把自己画到画布上.我们将这些元素统称为Sprite,也就是动画精灵.
现在,我们就可以控制这些动画元素了,因为它们都被抽象成了对象,可以有自己的属性和方法,他们都要实现一个接口.虽然在js中不存在接口的概念,但是我们要自己去衡量在每个扩展的精灵里是否都实现了接口的方法.因为这些方法都是必须的.我们把这个接口定义成如下的样子:
var Sprite = function(){
&& this.speed = {
Sprite.prototype = {
function(){
&& move : function(){
this.x += this.speed.x;
this.y += this.speed.y;
if( this.childs != null &&
this.childs.length & 0 ){
for( var i = 0; i & this.childs. i ++
&&&&&&&&&&&
this.childs[i].speed = this.
&&&&&&&&&&&
this.childs[i].move();
&& a : function( sprite ){
if( this.childs == null ) this.childs = []
this.childs.push( sprite )
&& drawChild : function(){
if( this.childs != null &&
this.childs.length & 0 ){
for( var i = 0; i & this.childs. i ++
&&&&&&&&&&&
this.childs[i].draw();
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
var Canvas = function(){
&& this.begin_interval =
&& this.action_interval =
&& this.timer_interval =
&& //精灵对象数组
&& this.sprites = [];
&& this.timer_ = 0;
&& // 时间间隔 需重写
&& this.interval_num = 25;
&& // 动画持续时间 需重写
&& this.duration = 5;
&& // context对象 需重写
&& this.ctx =
&& //重写！
&& this.x=0;
&& this.y=0;
&& this.width=0;
&& this.height=0;
Canvas.prototype = {
&& begin : function(){
this.timer();
this.begin_interval = setInterval( ( function( param ){
return function(){
&&&&&&&&&&&
param.render();
)( this ), this.interval_num );
&& timer : function(){
this.timer_interval = setInterval( ( function( ts ){
return function(){
&&&&&&&&&&&
if( ( ++ts.timer_ ) &= ts.duration ){
&&&&&&&&&&&&&&
ts.stop();
&&&&&&&&&&&
)( this ), 1000 );
&& render : function(){
//&&& M.trace(
this.sprites.length )
this.ctx.clearRect( this.x, this.x, this.width,this.height );
for( var i in this.sprites ){
if( typeof( this.sprites[i] ) == "function" )
this.sprites[i].draw();
&& action : function(){
this.action_interval = setInterval( ( function( can ){
return function(){
&&&&&&&&&&&
for( var i in can.sprites ){
&&&&&&&&&&&&&&
if( typeof( can.sprites[i] ) == "function" )
&&&&&&&&&&&&&&
can.sprites[i].move()
&&&&&&&&&&&
, this.interval_num );
&& addSprite : function( name,
this.sprites[name] =
&& stop : function(){
clearInterval( this.timer_interval );
clearInterval( this.begin_interval );
clearInterval( this.action_interval );
&& clear : function(){
for( var i in this.sprites ){
if( typeof( this.sprites[i] ) == "function" )
if( this.sprites[i].x & this.x
&& this.sprites[i].y
& this.y ){
&&&&&&&&&&&
delete this.sprites[i]
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}