FLASH工作总结

FLASH工作总结（精选8篇）

FLASH工作总结 篇1

本学期工作已结束了，在这一学期中本人担任《flash》课程的教学任务、班主任工作，现将工作做如下总结：

一、在思想政治方面：

本人一如既往的学习马列主义、毛泽东思想、邓小平理论和江泽民的“三个代表”重要思想，胡锦涛总书记的讲话精神。按时参加学校的政治理论的学习。认真学习领会十六届四中全会文件的精神，结合本人实际工作情况，认真进行了自查还写出了心得体会，以实际行动转变观念，转变自身的工作作风，认真的向其他同志学习，学习他们的先进的教育理念。全面贯彻党和国家的教育方针，以国家教育方针和政策去展开教学工作工。

二、具体工作方面：

首先，认真钻研教科书弄清楚本学科的教学目的及能力培养，在此基础上认真备课，做到备学生、备教材、备教法。其次从培养学生对这门课程的兴趣入手，在开学初专门抽出两节课的时间，上了一堂《FLASH》课，通过生动有趣的动画，增强了学习计算机的兴趣，也认识到这门课程的重要性。

教学过程仍中关注学生的学习过程，针对学生的学习情况差异，适时调整教学方法，重技能培养与信息素养养成；中专计算机课程门类较多，本学期共完成《flash》课程的教学任务，针对中专学生学习习惯差，厌学情绪比较重的情况，采用了实例教学与任务驱动的教学模式，使中专学生也学有所得。

由于《flash》是新开设的课程，而且这门课程对学生的实际操作能力要求比较高，所以其教学方法和其他的一些基础性课程不一样，为了能让学生在课堂上多掌握一些操作要领，本人积极学习一些关于计算机教学的先进教学方式方法，采取讲解与联系结合，加强测试。一边讲解理论知识，一边进行实际操作，并采取集体辅导、分组辅导和个别单独辅导相结合。并让操作能力好的同学指导操作理解慢的同学，让他们共同提高。在他们学习枯燥的时候采取分组比赛的方法，调节了课堂气氛，使原来不喜欢学习的同学也变的爱学了，不明白的地点还主动问老师、学生。对这门课的兴趣有了大大的提高。现在，学生的理论知识与操作水平有了明显的提高，学生基本掌握了教材所学内容。

三、技术支持与服务工作

一学期以来，对于学校信息系统及计算机设备使用过程中突发的一些共性问题，采取通过网络信使及时发布相关信息予以提示的方式，为学生正确使用计算机，避免系统故障提供技术支持，同时，协同解决教师在信息技术使用过程中遇到的问题；为学校或教师相关展示活动提供信息环境布置、技术支持与技术服务，一学期以来，为诸如教师节活动、行规校复评、教学专项督导、元旦文艺汇演等学校工作提供了信息技术方面的服务；采集各种照片、视频信息资源超过50G，摄制课堂实录课程10节，在闵行教育信息网上发布视频新闻 条；顺利完成综合素质评价工作。

总之、在教学工作中，由于自身业务水平的限制，有时候有点力不从心。工作中难免有失误和不足之处，要在以后的工作中不断学习，尽量弥补不足。希望在今后的工作中做的更好。当一名合格的、优秀的人民教师。

工作总结

FLASH工作总结 篇2

图1给出FLASH游戏制作的工作流程图。

1 FLASH RPG游戏的制作过程

一个好的RPG游戏必须要多人分工合作、互相协调, 这样才能保证RPG游戏的制作质量和提高工作效率。如:美工负责RPG游戏的整体风格和视觉效果, 而程序员则进行RPG游戏程序的设计等。

在RPG游戏制作过程中应尽量做到:

1) 进行分工合作:一个好的RPG游戏要保证游戏的制作质量和提高工作效率必须要多人分工合作、互相协调。

2) 按游戏进度表进行:事先设计好游戏进度表, 将所有要做的工作进行合理的分配, 然后按进度表去进行制作, 每人每天完成一定量的工作, 这样才不至于到最后关头忙得不可开交, 把大量工作堆在短时间内完成而导致降低作品质量。

3) 多借鉴别人的作品:借鉴不是要抄袭他人的作品, 而是多学习别人有而自己没有的技术, 多注意别人的游戏制作方法, 多比较总结自己出错的原因。总之平时遇到好的作品要养成研究和分析的习惯。

下面来谈FLASH RPG游戏的制作 (这些工作可以适当的进行兼职, 比如策划与程序设计兼职。)

1.1 FLASH RPG游戏策划

首先, 我们要对FLASH RPG游戏制作进行策划指导, RPG游戏策划者就像编剧和导演一样, 可以是同一个人兼职。他是游戏创作工作室的总指挥, 他将负责整个RPG游戏的具体安排工作。

游戏策划者确定游戏的目的、种类、主题, 开发环境, 制定一个工作计划, 安排好工作进度和人员分工, 进行基金设备等合理规划, 制定一个完善的工作流程, 作出一个大概的游戏规划或者方案。制作一款游戏的目的有很多, 这里我们的制作目的是为了吸引用户。制作的游戏类型也有很多, 如动作类游戏 (Actions) 、益智类游戏 (Puzzle) 、射击类游戏 (Shooting) 、角色扮演游戏 (RPG) 等。这里我们制作的游戏类型为RPG类型游戏。RPG类型游戏即角色扮演类游戏, 此类游戏就是由玩家扮演游戏中的主角, 按照游戏中的剧情来进行游戏, 游戏过程中会有一些对白剧情, 解谜或者和敌人战斗的情节, 经典的角色扮演游戏如仙剑奇侠传等, 这里的我们的RPG游戏确定为“三国”。适合开发游戏的计算机语言有很多种, 各种语言都有其各自的优缺点, 基于flash制作游戏的优点这里我们选用FLASH ActionScript 3.0来开发, ActionScript 3.0是一种容易编写、代码维护轻松, 语言支持类型安全的强大的面向对象编程语言。

在确定好将要制作的游戏的目的与类型后, 游戏策划者需要编写游戏所需的剧本、设计游戏的背景故事, 规则玩法, 剧情对白, 游戏任务等等。游戏所需的剧本编写可以是自行创作, 也可以拿现成的小说、故事进行改编, 但要标出原作者。这里的RPG游戏“三国”由故事改编。

游戏策划者还负责编写游戏流程, 有流程图才会使游戏的制作工作更加清晰和顺利。比如, RPG游戏需要设计好游戏中的所有可能情节, 并针对这些情况安排好对应的处理方法。图2表现了RPG游戏”三国”中的某一流程图, 由流程图2就可以清楚的了解需要制作的内容以及可能发生的情况。在游戏中, 一开始玩家要确定游戏所选的主角, 接着会随机出现不同难度的关卡, 并进行该关游戏, 然后游戏对是否通关进行判断, 如果玩家胜利了, 就可以通关, 相反则要重玩本关, 接着显示目前玩家的生命, 再询问玩家是否结束游戏, 如果不结束, 则再选择游戏难易, 进行下一轮游戏。

1.2 FLASH RPG游戏资源制作

一个比较好的FLASH RPG游戏必须拥有足够丰富的游戏内容和漂亮的游戏画面, 游戏流程图设计好后, 则需要着手收集和准备游戏中要用到的图片, 声音等各种素材。这里由游戏美工负责RPG游戏的整体风格和视觉效果。

1.2.1 图片素材

1) 人物设计:设计游戏中的人物形象。如, RPG游戏“三国”中的张飞, 关公形象的设计。

2) 场景设计:对游戏中的地图、场景、物品进行设计制作。如RPG游戏“三国”中的战场。

3) 电脑美工:将设计好的所有图片输入电脑。并完成招式设计, 根据剧本设计战斗人员的各种招式、法术。

如何使用电脑进行图形图象的准备?

1) 使用网络资源:我们可以通过上网搜索, 下载网络上的免费图片素材, 修改后使用。

2) DIY自制:可以使用一些专业的图形设计软件来制作自己需要的素材。比如Il-lustrator, Photoshop, Painter, Coreldraw, Studio Max, Poser, Moho和Bryce等都是很方便的工具。

3) 多媒体光盘:到电脑城购买素材光盘或利用手上现有的各类光盘来寻找自己需要的素材, 修改后使用。

1.2.2 音乐及音效

录制游戏中所使用的各种音乐及音效。

1) 提取故事片影碟音效:最佳的音效来源, 可以使用一些流行的播放软件如超级解霸来提取影片中的音效。

2) 提取游戏中的音乐:音效来源的最佳捷径, 一般游戏安装后都会有专门的游戏音乐目录, 比如RPG游戏“三国”完全安装后, 会有一个Sound文件夹, 里面存放了几百种不同的音效, 而且都是循环音效。

3) 网上搜集音效:通过下载音效的网站, 下载打包音效文件, 整理后建立自己的本地音效库, 以方便以后使用。

4) 音乐歌曲提取:从平常听的音乐里找音效, 比如:快节奏Disco的舞曲, 慢一点的Hip-Hop的说唱音乐。好多动漫片的音乐、韩国音乐和港台音乐的电子音效都很不错, 可以使用。

5) DIY自制:可以用一些专业的音乐设计软件来制作自己需要的音效素材。如:Cute MIDI、FL Studio等都是很好用的工具。

1.3 FLASH RPG程序开发

在RPG游戏策划阶段后, 产生技术设计文档, 这一文档将运用于RPG游戏程序开发。

动画设计:设计RPG游戏中的各种动画, 包括片头、片尾等。进行游戏特效制作, 游戏角色在格斗, 或者施放魔法、各种必杀技时, 你都会看见非常绚丽的视觉效果, 这种视觉效果就是游戏特效工作。

程序设计:使用ActionScript 3.0编程知识负责对RPG游戏中的各种程序进行编写。如编码完成键盘控制主角张飞的移动等, 主角张飞与敌人战斗被击中时的生命变化等。

1.4 FLASH RPG游戏测试

对制作好的RPG游戏进行各种测试工作。

游戏制作完成后, 需要进行游戏测试来发现游戏中存在的问题, 使游戏更加完善。

1) 测试执行状况。可以利用FLASH的Control/Test Movie命令来检测动画的执行状况。

2) 找出程序中的问题。进入测试模式后, 接着可以经过监视Objects和Variables的方式找出程序中存在的问题。

下面再给出两个测试建议:1) 要在多台计算机上进行测试。2) 参加测试的人数最好多一点。

1.5 FLASH RPG游戏的推广与更新

对测试完成后的RPG游戏进行宣传、发行、更新工作。这里RPG游戏“三国”测试结束后, 可以把自己的游戏提供给客户、朋友或同学等试玩、使用, 针对试玩过程中发现的新问题还需要及时修改更新。

2 总结

在各种画面精美的网络游戏泛滥成灾之时, FALSH游戏依然吸引了无数的玩家。近年来FLASH游戏仍呈快速发展之势。使用FLASH创作休闲RPG游戏可谓非常简单, 主要的工作流程就是游戏策划、游戏资源制作、程序开发、游戏测试、推广与更新五大阶段, 其次才是对这几大阶段的详细分解。

摘要：随着上网人数的剧增, 越来越多的人利用闲暇的时间, 在计算机网络这个平台上进行游戏娱乐。FLASH游戏也随着其他单机、网络游戏开始走进人们的视野, 由于FLASH制作的游戏具有游戏简单、操作方便、无需安装、文件体积小、绿色无害等独特魅力, 使得更多的接触FLASH游戏的人对其产生好感, 并开始制作FLASH游戏, 为互联网带来巨大的商业价值。该文主要通过Flash工作流程介绍了FLASH RPG游戏的制作过程, 使读者对FLASH RPG游戏制作过程有个全面了解。

关键词：RPG类型,工作流程,游戏策划,ActionScript 3.0

参考文献

[1]李永, 李伟, 贾海涛.FLASH多媒体制作范例导航[M].北京:清华大学出版社, 2006.

[2]刘涛.FLASH 8中文版范例导航[M].北京:清华大学出版社, 2006.

FLASH工作总结 篇3

Flash动画师,就像喜羊羊和灰太狼那样的

职位要求:

①美术基础好,形体意识强;

②有原创动画能力,最好有传统动画原画制作经验;

③有较强的手绘功底,计算机操作熟练,精通Flash、Photoshop等图形、动画制作软件。

热辣点评:

想做动画很容易,但是想把动画做好就难了。所以一般都要求有相应时间的工作经验。

这对于应届毕业生来说似乎很不现实,如果你有校期间就积极地争取兼职的机会,会有很大的帮助。

如果想做动画,首先你要有一定的美术基础。比如你经常临摹动漫作品或创作漫画。

其次要放弃鼠绘的念头,那样自己累不说,既耽误时间,也很难完成好作品。所以你的必备工具就是一个手写板,建议是wacom的,不必太大,6×11英寸的就已经很舒服了,价格大概在2400元左右。手写板绝不能太小,否则用着很不爽!如果你要买国产品牌,要注意手写笔里是不是要安装电池,使用电池会让你很郁闷,用用就知道了有绘画基础的人,用手写笔画和在纸上画感觉几乎是一样的。起初可能会有些不习惯,熟悉一段时间就好了。

想让自己画的形象动起来,这也没有什么捷径。你看到的动画片一般都是每秒24帧,由那些伟大的动画师一笔笔画出来的,这就是所谓的“逐帧”动画。不要妄想只需要画开头和结尾,软件程序就会帮你补出中间过渡的部分。当然也有可以偷懒的做法,比如把你画的人物形象不同的身体部分保存为不同的影片剪辑,做补间动画。动起来就像皮影戏,效果可以想象。

要成为一名优秀的动画师,需要具备很多相关的知识,比如动画原理;还需要做大量的练习,从入门到中级的水平,至少需要1～2年的时间。如果细分的话,在公司里有人专门画背景,有人专门设计人物形象,有人专门制作逐帧的动画,你可以根据喜好选择发展的方向。

互动设计师

制作网络广告和minisite

职位要求:

①美术、设计专业毕业,一年以上网络互动设计经验;

②擅长Flash的动画表现, 把握动画的节奏感,完好体现设计师的表现意图;

③熟练使用Flash、Photoshop、Illustrator等图形软件;

④具备一定的HTML/dHTML和网络浏览器各项功能的全面知识;

⑤有较强的创意思维能力和创新精神。

热辣点评:

互动设计师大部分情况下并不需要手绘和动画的基础和经验,更侧重于平面设计和动态效果的表现(和手绘的逐帧动画不同)。多数负责广告的制作,比较正规的广告公司在制作上会有较细的分工。在你开始制作前,广告或minisite的创意已经有人与客户沟通并确认好了,设计师已经完成了设计(静态的、每一帧画面的设计会在Photoshop中制作好),这就是所谓的Layout。

具体制作、完成网络广告和minisite一般是动画师和程序来配合来完成,这是所有工序的最后一步。完成后,经过沟通修改以及最后的QA测试,就可以上线了。

动画师不一定要有美术和绘画的基础,但要熟悉基本的动画原理,以及了解如何让那些素材动得更好。你要做的就是把psd中的素材保存出来,导入Flash,然后以动画的形式来呈现那些创意。在这个过程中你也可以寻找学习和提高的机会,提高设计能力,争取以后成为设计师。

制作小游戏

职位要求:

①熟练掌握Flash ActionScript(以下简称AS) 3.0,最好也会使用AS 2.0;

②熟悉OOP编程(面向对象编程)方式;

③熟悉Web开发流程,熟悉Flash与Web后台数据交互;

④热爱游戏,熟悉各种家用机游戏、单机游戏、网络游戏。

热辣点评:

对于美术人,这个职位的要求与Flash动画师的要求差不多,只需要按照要求完成相应的动画素材即可。

对于编程人员来说,和制作minisite差不多,也是对编程能力的综合考验。不同的游戏能力需求也不太相同,需要比较好的数学和物理基础,以及了解如何在Flash中运用那些数学和物理知识。

涉及具体的游戏,需要掌握的知识就比较繁杂了,比如:你想做马里奥游戏,就需要了解区块游戏的原理;想做台球要了解一些物理公式和数学公式,例如质量守恒、摩擦以及关于反弹的知识等等;想做比较写实的足球射门游戏要了解如何计算物体在3D环境中的运动;想做2D的类似于马里奥卡丁车的游戏需要了解一个叫做mode7的引擎原理;想做棋牌类的游戏,电脑的AI就是需要重点研究的对象……

为了简化游戏的开发,AS3上也有一些类库和引擎,我们会在本系列随后的文章中介绍。不要以为会做连连看、贪嘴蛇或者俄罗斯方块,就会做Flash游戏了。这样的游戏只是基础中的基础,源代码在网上搜搜到处都可以找到。多看看一些国外收集Flash的游戏网站,目前一些新游戏有很让人吃惊的表现。

Flash程序员

热辣点评:

在广告公司中,Flash程序员的工作主要是配合设计师实现创意,或者配合负责后台的程序员做一些Flash与后台的沟通工作,也会一些与Flash编程相关的其他工作,比如屏保、网页等。

网络广告一般涉及程序并不多,不会有那么多空间让你来发挥。但在minisite中,为了吸引用户的目光来关注产品,很多时候会有很大的发挥空间,需要制作一些很Cool或很前沿的效果,比如在Flash中实时渲染3D模型。这里就要考验你的综合素质了。

有兴趣的读者可以这样尝试一下,在这里http://www.thefwa.com找找你觉得比较炫的网站,然后用Sothink软件反编译这个网站,得到其中的素材。接下来尝试在Flash中使用那些素材,重现一下效果,你就会知道这件事有多难。

当然,大部分时候因为广告的排期比较紧,广告公司不会给自己制造麻烦,所以一般不会让你去挑战高难度的程序。如果因为一些原因导致网站不能按时上线,那你的罪过可就大了!

Flash高级程序员最好有.Net、Java,或C#等的编程经验。Flash服务器端的程序与那些平台类似,做的事情也是类似的。相对来说,写Java或C#的人转向AS3更容易因为FMS(Flash Media Server)、SFS(Smart Fox Server)和red5的存在,使得用Flash开发多人联机游戏的门槛降低了很多。我周围有很多个人开发者,都曾经声称或者正在开发联机的游戏。

网上有人整理了“Flash平台开发者技能树”,差不多囊括了在这个平台上工作所需要掌握的一切。当然谁也不是全才,术业有专攻嘛。

果果点酱

看穿职位要求,成为Flash大牛

红烧肉怎么做?不同的菜谱说法不一,比如炒糖色就有先后之分,总之,目标就是要做出一盘香喷喷的肥而不腻的红烧肉!在Flash这桌大宴上,几道诱人的主菜烹制奥妙何在?如何才能成为最棒的厨师?

flash大赛活动总结 篇4

为了活跃同学们的学习气氛，提高同学们的学习兴趣，加深同学们对Flash学科的认识。同时也为同学们提供一个‘闪烁自我’的舞台！不断提高大、学生的科技创新意识，动手实践能力，以及吸引和鼓励同学在课余时间自我创作，踊跃参加课外科技活动，发觉优秀人才为初中，浓厚我校科技创新氛围。

活动中同学们勇于创新，充分发挥想象力，结合实际创作出很多优秀作品。无论在内容和技术上都给评委留下深刻印象。本着公平公正的原则，最终确定了获奖名单。

名单如下：

一等奖：市政 《保护环境关爱家园》

二等奖：外国语 《高山流水鸟语花香》艺术《蚂蚁 蚂蚁》

三等奖：土木《抗震记》 管理《真人版贪吃蛇》 电子《美好青春》

技术创新奖：市政《保护环境关爱家园》 外国语《高山流水鸟语花香》

最佳创意奖：土木《抗震记》 电气《美好青春》

管院《真人版贪吃蛇》

这次“校园flash创意设计大赛”能取得圆满成功与各个班级的密切配合是分不开，作品整体水平也达到了一定的档次，但普遍存在着视频与音效结合不紧密，表现手法单一等缺点。校方想通过这次活动让同学们对flash制作有一个全新的认识，真正提高学生们对flash创作的热情，丰富学生课余生活。

计算机维护协会

FLASH工作总结 篇5

一、绘图工具（工具使用三步：1工具箱选择工具2设置属性3工作舞台绘图）

1直线

2、椭圆

3、橡皮擦

4、变形（窗口-变形 ctr+t）

5、颜料桶（注意选项中“封闭中等空隙）

6、设置渐变色（混色器面板：窗口-混色器 shift +f9）

7、箭头

8、组合对象（ctr+g）

9、圆角矩形（选项里有圆角矩形半径设置）

10、任意变形工具

二、动画原理

逐帧动画制作

1、设置文档尺寸

2、不同的帧里的元素如何精确对齐 属性：x y值设置（插入关键帧、插入空白关键帧）

三、提高绘图效率的技术

1、图形元件 转换元件 编辑元件（绘制好后在库中调用）影片剪辑元件把多个帧的动画打包成一个对象

2、补间动画

形状补间（要彻底分离，如文字。分离ctr+b）

动作补间要组合渐隐效果 对象一定要是元件，这样属性才有颜色 alpha值，alpha值为0%表示完全透明。

四、动画技术

1、多图层 形状补间动画和动作补间动画同时进行（注意图层的层叠次序）

引导层 指定轨迹运动（FLASH动画操作顺序：选择图层——操作帧——工作舞台）

2、插入声音

按钮里插入声音 如青蛙按钮（素材先导入到库，在库里调用素材）

插入动画背景音乐（声音占单独一个图层，添加好声音后可在属性面板中设置声音效果）

3、动画作品发布 动画作品的扩展名（即文件类型）.swf

五、命令设置

选择好某一帧或某一帧上的某个对象，点动作 在图层*：*写命令 掌握两个命令：

1、帧停止命令stop()

2、按钮控制命令意思是：鼠标按下（press）到第n帧播放On(press)

{

Gotoandplay(n)

FLASH工作总结 篇6

2.4 Flash形象网站应用案例分析

这里通过典型案例分析当前Flash形象网站应用状况和部分应用具体细节设计，作为Flash城市形象网站的研究参考。

2.4.1 案例1电影《孔子》官网宣传站

图2.1《孔子》电影官方网站截图

电影《孔子》官方网站由新浪娱乐支持建立，作为宣传网站使用了以Flash页面为主的版面设计，宽度适应1024*768分辨率显示的1000*650dpi，内容图文结合，动态元素适度，整体风格淡雅古朴，配乐幽远清雅，互动切换节奏平和，普通家用宽带网络环境下载较快，播放流畅。

开头动画使用了节奏极为舒缓的简单动画形式，长度也较短，包含文件体积不大，播放时间能够顺利载入主导航页面，使整个页面浏览过程连接紧密流畅。

主导航页面设计风格淡雅古朴，图像体积维持较小，但不影响视觉感受，辅助图形元素采用传统图案衬托主题，雪花飘落的背景衬托了整个画面的节奏，与同节奏的互动按钮统一，整体气氛浓厚，在软件技术应用上不存在高难技术。

二级页面构成纯Flash部分的结构基本相同，文字部分以卷轴图衬托，初始显示时包含打开动画，使整个站点视觉感受强烈，风格统一。

在网站主导航包含了外部连接页面，风格与主界面一致，其中有一互动游戏页面，包含了四个简易植入商业广告的Flash游戏，拼图、填字、问答、速记四个内容，均无数据库，以ActionScript编写。

FLASH工作总结 篇7

从1996年到今天,Flash经历了十个版本并已经发展成为一个成熟通用的多媒体平台,为Web应用提供了丰富的多媒体、视频和交互能力,现在几乎所有在线的个人计算机都安装了Flash播放器[1],但以浏览器插件形式存在的Flash运行时的安全性和性能一直广受争议[2],以至于在某些设备(如Apple iPad)上甚至禁止使用Flash。

HTML5[3]作为下一代互联网技术标准,为Web应用提供了丰富的API和特性,例如Canvas绘图、音频和视频播放、离线存储等等。这些新增的API和特性可以代替大部分Flash的功能,又不需要安装额外的浏览器插件,开放的HTML5标准社区,以及依赖于更加安全的JavaScript沙盒和同源规则[4],使得HTML 5可以看作是Flash潜在的替代者。

尽管HTML5标准非常优秀,但是相对Flash,HTML5缺乏有经验的开发者和易用的集成开发环境,从Flash立刻转向HTML5会极大地增加开发成本。为了解决这个问题,我们使用HTML5的技术实现Flash运行时来代替原来的浏览器插件。这样既可以让原来的Flash的开发者继续使用Flash集成开发环境,又可以避免在浏览器上运行不安全的私有插件,只要浏览器支持HTML5就可以运行Flash动画。

Gordon是Tobias Schneider在Github上一个开源项目[5],它实现了对编译后的Flash文件(SWF)的解析以及一个基于SVG[6]的渲染器,能够运行Flash的基本的功能,例如渲染形状、文本构成的动画。但是SVG作为一个独立的标准不仅本身非常复杂,而且还拥有多种扩展标准,浏览器对SVG的兼容性差别很大[7]。而Canvas作为HTML5标准的一部分,只需要最基本的接口即可完成几乎任何2D渲染,兼容性较好[8],在网页游戏引擎[9]、网页动画[10]和传统桌面应用[11]中被广泛地采用,因此用Canvas实现Flash的渲染引擎更有实用价值。

本文研究了基于HTML5的Flash的运行时架构,称为H5-Flash运行时,在Gordon开源项目的基础上,用HTML5 Canvas重新实现了渲染器,并分析了Canvas和SVG两种渲染器对H5-Flash运行时性能的影响。本文相关的代码已全部开源放在GitHub上[12]。

1 Flash运行时研究

1.1 传统的Flash运行时

定义和角色是Flash中的两个基本概念[13]。定义用于描述一个形状、位图、字体等,有一个唯一的ID。角色由一个定义和场景中的深度、颜色变换、坐标表变换等属性组成。

从Flash的源代码到在目标平台上运行,主要经过三个阶段:编译、解析和渲染。分别由编译器(Compiler)、解析器(Parser)和渲染器(Renderer)完成,其中编译器一般在开发工具中集成,解析器和渲染器构成了传统的Flash运行时。图1显示了传统运行时的架构,解析器首先读入一个编译后的Flash文件(SWF),解析得到文件中的定义和角色,把所有定义保存在字典中,把当前场景中的角色保存在显示列表中。显示列表在渲染过程中会动态地增加、替换或删除其中的角色,这些行为由解析得到的Place/Remove类型的控制标签决定。当解析到另一种ShowFrame控制标签时,则意味着显示列表中已经包含了当前帧的全部角色,可以立刻进行渲染。

1.2 H5-Flash运行时

H5-Flash运行时需要使用JavaScript和HTML5 Canvas实现解析器和渲染器,性能与使用本地代码实现的传统运行时本身就有一定的差距,而且传统运行时可以方便地为解析器和渲染器创建独立的线程,使解析和渲染并行化,在渲染当前帧的同时解析下一帧。

H5-Flash需要在传统架构的基础上进行一些调整,例如选择是否采用解析器以及解析和渲染并行化的问题,使H5-Flash运行时在性能与可用性之间达到平衡。

1.2.1 是否采用解析器

H5-Flash运行时在架构上可以选择无解析器或有解析器两种方案。

在无解析器的方案中,不存在图 1中的解析器,因此不能直接支持现有的SWF文件,而是修改编译器使其直接生成JavaScript代码用于表示显示列表和字典,运行时跳过解析阶段,只需简单地控制渲染器渲染即可。这种方案的优点是省去了解析的时间,但缺点是要重写Flash编译器,还要把Flash源代码重新编译后才能使用,对于大量已经编译好的Flash则无法直接支持。Adobe官方提供的FLA到HTML5的转换工具Wallaby就采用了这一种方案[14]。

在有解析器的方案中,架构与传统运行时完全相同,解析器需要花费一定时间下载和解析编译后的SWF文件。而这种方案的优点是可以兼容已有的大量Flash应用。其中,Smokescreen.us[15]和Gordon开源项目使用的是这一种方案。

是否需要采用解析器主要取决于解析时间与总运行时间的比例,若比例过高则采用解析器会影响运行时的性能。实际上,我们在实验中发现,帧数超过60帧(2秒～3秒)的动画,其解析时间远小于渲染时间(见第3节性能和分析),而一般的Flash动画都要比我们的测试用例更加复杂,故使用解析器更具有实用性上的优势。因此,H5-Flash运行时保留解析器,并直接使用Gordon解析器的实现,而将重点放在渲染引擎的实现上。

1.2.2 解析和渲染的并行化

在使用解析器的方案中,解析和渲染的并行化可以减少由于解析带来的性能损失。在HTML5标准出现之前,JavaScript的执行是单线程的,用来实现Flash运行时的话,解析和渲染只能串行执行。而HTML5标准中的Web Worker[16]提供了一种并行化的能力,使解析和渲染分别在独立的线程内并行执行。但是Web Worker线程不能访问浏览器原来线程内的任何对象,例如DOM树,而只能通过互相发送消息的机制与之通信。由于渲染器需要频繁访问浏览器的DOM树,出于性能考虑,渲染器应运行在浏览器原来的线程内,解析器则运行在Web Worker内,解析后的内容通过消息发送给渲染器渲染,这样可以做到解析和渲染的并行化执行。

2 H5-Flash的渲染器的实现

在渲染Flash时,每一帧上所有的角色都储存在数组形式的显示列表中,每个角色一般由一个定义、一个深度值和一个变换矩阵组成。角色的定义描述了角色种类和渲染方法,一般的角色定义都是普通的形状或一段文字。角色的深度值(depth)在显示列表中是唯一的,深度值高的角色覆盖在深度值低的角色上面。另外,某些角色可以设置成“遮罩”,这些遮罩角色不被渲染,只计算它的轮廓,但遮罩所处深度之上的若干角色将被裁减,只有轮廓内的部分会渲染出来。角色的变换矩阵决定了在根据角色定义渲染时采用什么样的2D变换矩阵[17],变换矩阵由三组参数组成,分别表示对X和Y坐标的缩放、旋转和位移。

用Canvas渲染Flash的基本流程(如图2所示)就是按照深度从低到高的顺序绘制显示列表中的角色。Canvas把当前的变换矩阵、剪裁区域、填充样式等称为绘制状态,绘图时根据当前的绘制状态进行计算和渲染。为了避免角色的变换矩阵、填充样式等受到其他角色的影响,在渲染角色前必须保存当前的绘制状态,在渲染结束再恢复上次保存的绘制状态。对于遮罩,可以通过设置Canvas的剪裁区域来实现,与渲染角色相似,在绘制遮罩前先保存当前的绘制状态,但不同的是遮罩层结束后不会立刻恢复绘制状态,而是等受到遮罩层影响的那几个深度的对象渲染完成,才恢复以前的绘制状态。

角色的渲染主要解决两个问题:绘制角色的轮廓和实现各种填充方式。由于大多数角色定义都是形状和文字,为了便于研究,我们只实现了形状和文字的渲染。另外,对多媒体和用户交互的支持,会在将来的工作中实现,不在本文的讨论范围内。

2.1 绘制形状和文本的轮廓

2.1.1 形状

形状是Flash定义中最基本的一种元素,由一系列的边(Edge)、线条样式(Line Style)和填充样式(Fill Style)组成。边分为两种:一种是线段,用起止点的坐标描述,另一种是弧线,是一种二次贝塞尔曲线,使用两个端点和一个线外的锚点描述。线条样式用来表示线段的颜色和宽度。填充样式描述形状使用的填充方式。

在Canvas中可以使用路径(Path)实现边,Canvas的路径由一系列的线段和曲线组成,用moveTo控制路径绘制点的移动,用lineTo绘制线段,用quadraticCurveTo绘制二次贝塞尔曲线。用Canvas的lineWidth和strokeStyle的属性控制边的宽度和颜色。用Canvas的fillStyle控制填充样式。

2.1.2 文本

Flash的文本由两个定义组成:文本定义和字体定义。文本定义表示字符内容,而字体定义表明使用何种方式和字体渲染文本。Flash的字体分为设备字体(Device Font)和字形字体(Glyph Font),前者直接使用Flash运行平台的字体渲染,在不同平台上得到的渲染效果可能不同,后者是将字形定义嵌入SWF文件中,使用Flash标准的渲染图形的方法渲染,在不同平台上得到相同的渲染效果。字形字体的定义与形状相似,但只包含边的定义,每个字都定义在一个1024×1024的EM方格内,渲染时需要根据字体大小进行适当的缩放。

使用设备字体的文本,可以通过直接设置Canvas的font属性为字体名称,然后调用fillText渲染。字形字体的渲染则可以使用两种方式:Web Font[18]和直接渲染。使用Web Font渲染首先要把字体定义先转换成对应的SVG字体定义,通过CSS添加一个@font-face的规则,然后把font属性赋值为新的字体,最后调用fillText渲染文本。另一种方法就是直接渲染,渲染方法与渲染普通形状相似,字体大小通过修改变换矩阵来实现。Web Font方法需要浏览器对SVG格式的Web Font的支持,而且必须在字体加载成功后才能渲染,实现起来难以控制,因此我们采用直接渲染的方式。

2.1.3 填充方式的实现

Flash有两种填充方式:渐变色填充和图像填充。

其中渐变色分为线性渐变和放射性渐变,渐变色的坐标定义在一个方形的渐变空间上(如图3所示),填充时,用一个变换矩阵把渐变空间映射到被填充的对象的坐标上,再进行填充。Canvas也支持这两种渐变形式,坐标系的映射可以通过改变Canvas的变换矩阵来实现。

另一种填充方式是用图像填充,Flash有两种图像格式:一种是直接使用标准图像格式的二进制表示(比如JPEG、PNG),另一种是用图像的像素点颜色的数组表示。Canvas可以使用填充模式(Pattern)把一个Image或Canvas对象作为图片填充到封闭区域内,因此实现填充的主要的问题是把Flash的图像表示转换成Canvas可以用来填充的对象。

我们根据不同的图像格式,可以有效地把这两种格式的图像分别转换成Image或Canvas,转换方法如下:

• 标准格式表示的图像 把二进制表示直接转换成base64编码的Data URI[19],赋值给Image对象的src属性;

• 像素信息表示图像 逐个像素绘制到空白的Canvas上,最终使用这个Canvas对象填充。

3 性能和分析

性能测试平台是Intel Core 2 Duo E6750,4GB内存,Ubuntu 10.10 (Linux 2.6.32-22),Chrome 浏览器稳定版(版本9.0.597.98),测试用例来自Gordon项目,测试用例的基本信息如表 1所示。我们针对实现的HTML5的Flash运行时做了两个性能测试,分别用于比较Canvas和SVG的渲染效率和场景大小对渲染效率的影响。

测试一中,我们把每个测试用例在512×512的场景中重复运行20秒,统计使用Canvas和SVG渲染器各自的平均渲染和解析时间。结果显示(表1),Canvas和SVG都能在测试平台均能以高于规定帧率的速度正确渲染完成,因此完全可以代替Flash插件渲染基本的Flash动画。在相同分辨率下,Canvas实现的引擎的实际帧率都低于SVG的实现,在我们的测试用例中,这个差距可以达到约13倍。分别统计解析时间和渲染时间(如图4、图5所示),我们发现对于帧数都比较多的Flash动画,无论Canvas还是SVG作为渲染器,解析时间占全部运行时间的比例都不高。例如Blue,有109帧,其解析时间占总运行时间的17.0%(Canvas)到27.6%(SVG),而且由于渲染器要保持固定的帧率,渲染时帧与帧之间总有些空闲时间,因此解析时间实际所占的比率更小,而大多数的Flash动画都要在几十帧以上,因此H5-Flash运行时的性能瓶颈主要在于渲染器。

在测试二中,把测试用例依次缩放到不同大小的场景中运行20秒,记录Canvas和SVG做渲染器的平均帧率的变化。结果显示,在我们测试用例中,Canvas的渲染性能还受到场景的大小影响,相同的动画,场景的面积越大,渲染性能越低(如图6所示),例如,Gradient测试用例的帧率变化达到17.8倍,而相同情况下SVG测试的帧率的变化只有1.0到1.3倍(如图7所示),SVG渲染器的引擎几乎没有受到场景大小的影响。

4 结论和未来工作

我们研究了基于HTML5的Flash运行时的架构,在Gordon的基础上实现了一个使用Canvas的渲染器,并测试了Canvas和SVG分别作为渲染器的渲染性能。结果显示,H5-Flash运行时可以代替原有Flash插件运行基本的Flash功能。其中,渲染器的性能是H5-Flash运行时性能的主要瓶颈。不考虑兼容方面的劣势,当前基于SVG实现的渲染器性能仍然好于基于Canvas的实现,但后者存在多种优化空间。另外,在我们的测试用例中,Canvas的渲染性能还受到场景大小的影响,越小的场景Canvas渲染得越快,而场景大小对SVG几乎没有任何影响。

未来的工作将集中于改进简单的擦除重绘算法以提升Canvas实现的渲染器的性能,以及对更多功能特性的支持,如用户交互的支持和利用HTML5音视频标签实现多媒体等。

摘要：Flash已被大量用于互联网的应用中,而作为一个封闭的开发平台逐渐显现出其安全和性能的问题。另一方面,HTML5技术为创建互联网应用提供了另一种选择,但目前缺乏资深的开发者和易用的集成开发环境。因此把Flash应用转换成HTML5变成了一个热门话题。研究使用HTML5技术运行Flash的架构,称为H5-F lash运行时,并利用HTML5 Canvas重新实现了基于Gordon运行时的渲染引擎,测试并分析了影响其性能的因素。结果显示H5-Flash运行时足以代替原来的F lash插件的基本功能,其性能主要取决于渲染引擎的实现,未来的工作重点将放在优化渲染引擎的性能上。

初恋Flash 点燃财富火炬 篇8

今年26岁的李欣桐是安徽阜阳人，2004年大学毕业后，进入合肥市一家著名广告公司，成为一名办公室文员。大公司虽然待遇不错，但是竞争也很激烈。有的时候，为了做成一个项目，设计部、文案策划部的人几乎都是通宵达旦地干活。而她这个小文员也只得随时帮他们打印、整理各种文件。一时间，女孩反而成了公司最忙的人。

每天，李欣桐下班回家都几乎累得瘫倒在床上，连吃饭的力气都拿不出来。好不容易盼星星盼月亮等到星期天，却又经常被那“烦死人”的加班电话整得无可奈何。原本在学校时非常喜欢运动的她，渐渐也就很少有时间参加锻炼了。就这样超负荷运转了一年之后，她明显感觉到自己的体质越来越差，同时脖子也经常出现发僵、发硬和疼痛的症状。经医生检查，她得了十分麻烦的颈椎病!

即便如此，老板并不领情。一次，因工作中出现一点小小的失误，当着众多同事的面，狠狠地把李欣桐训斥了一顿。那一刻，没人关爱，没人疼惜的感觉刺痛了女孩的心t委屈的泪水盈满眼眶。晚上躺在床上，她又想起了过去男友对自己的种种呵护和关爱，如果不是他到英国留学，然后两人分了手，说不定他们早就组建了幸福的小家庭!

有一天，为了排除心中的郁闷，李欣桐与网友聊起了天，向他倾诉初恋的甜蜜和遗憾，对方主动提出帮她设计动漫F1ash，里面镶入男友的照片，仿佛初恋重现!这倒比保存照片还意义深远。很快，他发来了制作成功的动漫画：黄昏的城市上空，忽现带翅膀的小天使，小天使射出一支小箭，射中飘浮的云朵。云儿散开掉下一张照片，它坠落过程中有横幅打出小字：“你生活得幸福吗?我想你!”背景音乐恰如其分响起笛子奏乐《真的好想你》。

女孩顿时热泪盈眶，没想到初恋记忆的抽象由动漫具体诠释，却能深深打动当事人。创业的灵感由此产生，她想谁没有初恋呢?如果结合男女初恋记忆做Flash，供他们欣赏、珍藏和怀念，既满足了对方的怀旧情绪，又能帮自己赚钱，这岂不是一举两得!

有了这种想法，李欣桐业余时间几乎全花在了研究Flash动画上。网友发电子邮件给她寄来了Flash，说可以用这支“笔”来作“画”。

网友说它是由全球著名的互动多媒体产品开发商开发的一个多媒体制作软件，可以用来制作各种动画、漫画以及视频音乐作品等，网友还鼓励她去买一些相关的书籍。因对学习制作网络动画兴趣十足。女孩乖乖地照他说的做了。

在自学完《Flash6》和《Actionscript》等教材后，在网上一些电脑高手的帮助下，李欣桐学会了制作flash动画。

妙趣横生，就这样把你征服

2006年1月，李欣桐在望江花园旁租间小屋，开起了合肥市首家“初恋动漫创作室”。虽然这个创意很好，可合肥毕竟是经济欠发达的内陆城市，人们对时尚的敏感度远远无法和上海、深圳等前卫城市相比，所以，刚开业时小店几乎无人光顾。苦撑一阵后，就连李欣桐都在怀疑，当初自己贸然辞职是否过于冲动了。

两个月后，就在女孩心灰意冷准备将小店转让时，却迎来了生命中的一个“贵人”。这是一位穿着时尚的优雅女子，她说自己从小喜欢画画，一个偶然的机会，她认识了比自己大8岁的画家。这位孙小姐是相信一见钟情的，他的成熟洒脱，风趣幽默，他对艺术的感觉以及他的一切，让2l岁的她觉得自己已经沦陷了。

她开始一次次地往画家住的宾馆里面跑，而每一次，这个看似腼腆的女孩，总有一堆的理由，绘画艺术上的请教或是对爱情的讨论。但忽然有一天，画家遭遇了车祸，而且没有留下一句话就去世了。对于心上人的突然离去，女孩仿佛觉得天塌了。整整半年，她沉浸在刻骨的相思中无法自拔。

好在时间总是最好的良药，如今这一切已变成了凄美回忆。根据他们一次到大别山深处的旅游经历，李欣桐为孙小姐制作了这样一个有趣的Flash动漫作品：一个长相如同《三毛流浪记》主角的大男孩，拖着一个如百合仙子般清纯可爱的小公主，在森林里捉蝴蝶。忽然，一条吐着红信子的毒蛇从草丛里窜出。小女孩当时就吓得脸色苍白、浑身发抖。紧急关头，“三毛”抱起她撒腿便跑，因为速度太快，身后竟卷起一股旋风，再看他脸上的汗，如雨点般向四周飞浅，那表情令人忍俊不禁。再后来，当他逃离险境将女孩轻轻放在草地上时，却发现由于惊吓过度，她已经昏了过去。

他急坏了，又是唤她的名字又是掐人中，公主渐渐苏醒了，当她说出第一句话时，那位可爱的三毛哥哥竟兴奋得一下跳到了月球上——看完这一切，孙小姐激动得哭了。她说：“太像了，像我们的一切，他就是这么可爱!”除付了800元制作费外，临走时她还对李欣桐一个劲地道谢。后来。她把这个初恋动漫放到网上，没想到点击率奇高，许多网友都被憨憨的“三毛”哥哥逗得大笑不止。

李欣桐的“初恋动漫创作室”也由此出名，因为这种记录爱情的方式不仅新颖独特，而且妙趣横生，一下就引起了人们的浓厚兴趣。不少穿着时髦的年轻人纷纷光顾。李欣桐的生意也渐渐好起来。到2006年7月，她每月的收入已达到8000元。

不久，通过朋友的介绍，就连一些中年人也慕名来到这里。印象最深的是一位30多岁的老板，因平时忙于生意冷落了妻子。导致对方与他分居并准备离婚。听说李欣桐可以为人量身订做初恋故事Flash，他决定试一试。生日这天，当妻子看到自己和丈夫的初恋Flash后，一下就回想起当初他对自己的种种关爱。为让她住上花园别墅，丈夫从机关单位辞职下海，负债经营起一家小公司，多年来不懈打拼才有了今天的好日子……真情让她幡然醒悟，最终，妻子又和丈夫重归于好了。

让人人拥有一部自己的“动画片”

当然，其间也有人提意见，认为李欣桐制作的初恋动漫内容太少，时间最长的也不过三四分钟。如果像真正的动画片那样，长达半小时甚至45分钟就过瘾了!

其实，制作这样的动漫是很复杂的，要写剧本，设计相关背景，还要请专业人员配音。同时，Flash动画制作也是一件非常费力耗时的事。可是从另一个角度讲，谁不渴望拥有一部属于自己的爱情动画片呢，哪怕收费高些。

2007年3月，一位60多岁的老台商找到李欣桐，就提出制作一部长达40分钟的初恋动画片。他的爱情经历颇具传奇色彩。20岁那年，张先生到南太平洋岛国萨摩亚经商，在那里他认识了身材修长、有着一双宝石般晶亮大眼睛的当地女孩莱梅。她带着他驾着独木舟到深水区打鱼，回到岸上，铺上一层厚厚的干柴，先把一堆拳头大的石头烧红，熄火后把大蟹、龙虾和海鱼等用芭蕉叶包好，埋在石堆中烤。等到烤熟后把树叶剥掉，顿时香味扑鼻。张先生说，那是他吃过的世界上最鲜美的食物!

一次，在密林中亲吻着女孩长长的睫毛，张先生向她示爱。这位异国美女尽管十分害羞，还是点头答应了。小伙子惊喜异常，第二天就带着厚礼到她家里求婚。没想到由于宗教信仰不同，女孩的父母断然拒绝了。后来因无法阻止二人相爱，族人甚至焚烧了张先生的商店，还把他打成重伤。面对非他不嫁的恋人，张先生决定带她逃走。

哪知在驾船逃跑途中又遭遇风暴，小船被巨浪打得粉碎，他和心上人挣扎着爬上一个小岛，过起了鲁宾逊式的野人生活。直到半年后被一艘经过这里的英国货轮救走，才算死里逃生拣了条命。

这个爱情故事太感人了!整整一个晚上，李欣桐都在兴奋地对其中的几个片断进行构思，再加上制作手法别具一格，两周后，当这对满头银发的老夫妻看到这部专门为他们制作的初恋动画片时，触景生情，一时竟激动得泪眼朦胧。不久，这部动画片在网上传播开来，引起了台湾一家影视公司的关注，他们还准备投巨资将它拍摄成一部15集电视连续剧呢!

随着“初恋记忆创作室”的知名度不断提高，找李欣桐制作爱情动画片的人越来越多，这些业务靠她一个人根本无法完成。2008年初，除重金聘请两名专业动漫设计师加盟外，她还邀请了一批在校大学生兼职做帮手。现在，李欣桐已经有了60多万元的资金，成了名符其实的老板。