论文flash（共8篇）
学习Flash的心路历程
在《计算机动画设计》的课程中，我们学习了Flash软件的使用、操作以及作品的制作。在刚开始的时候，Flash给我带来的更多的是好奇和兴趣。而后，Flash让我感觉到了困难和疑惑。但是最终，Flash让我收获到的不仅仅是一门学科的知识，一项软件的技能，更让人乐在其中，学习并快乐着。
在还没有接触计算机动画设计的时候，我们学习过计算机平面设计的软件Photoshop和计算机编程语言如C++和Java。但是Photoshop做出的更多是图片，而编程语言编写的程序界面又不是那么吸引人的眼球。FLASH的出现，让我们眼前一亮。
Flash的应用以及作品，在我们平时上网之中，有过一些接触，如Flash的网站，Flash动画，Flash的MV，以及Flash游戏。我一直觉得Flash很吸引人，但是似乎很难。在第一次上课时，老师给我们播放了用Flash做的歌曲《黄昏》的MV，是那样感人、动人，而又吸引人，接着老师又给我们看了Flash网站，我们惊讶、赞叹，给人带来了全新的感受。要学习这门课程，那么我们将不再是做观众就可以，而是要学着揣摩、分析一个作品运用的技巧。
在之后的实验课中，我们先学习了汽车相关类静态动画图形的绘制。本来以为静态图形很好画，无非就是点、线、面，可是在自己画了几个不伦不类的图形后，看看别人的，却是那么逼真而又立体，原来Flash是如此神奇，敷衍了事是不行的。于是立即修改重画，也算做出了几个像模像样的汽车零件。
Flash当然不仅仅是要做出静态图形，既然是动画设计，那就要动起来。通过插入关键帧，移动起始和终点的位置，创建补间动画，汽车就运动起来了。当然还要注意轮胎的转动，这样才显得真实。而后还有引导线和遮罩层的学习，引导线是动画里物体的运动轨迹，可以让物体沿着所绘制的任意曲线运动；遮罩在汽车动画中的运用则让观众能看到车窗外的风景如真实般后移，于是出现了汽车前行的视觉效果。
在课程的最后，每人要做出自己的Flash作品，是歌曲《黄昏》的MV，这对我们通过学习掌握的知识是个很好的考验同时也是个不小的挑战。平时的作业中只有几个元件，几个图层，现在那成堆的元件仅仅制作和收集就已经让我很手足无措，还需要大量的切换场景，这是个不小的工作量。但是在经过一系列分析、构思后，开始着手绘画、收集整理素材，进而使用Flash制作、修改、细化等一系列步骤后的作品，付出的大量时间和精力，终于做出了自己的作品。
课程虽然靠一段落了，但是并不意味着Flash的学习结束了。Flash是奇妙万变的，学习也是无止境的。需要坚持，真正耐心，用心，而且要多练习，才能巩固自己掌握的知识，同时探究更多的技巧，进而更熟练、多变地使用flash的功能。Flash始终会是自己喜欢的一个软件，一门技术，我将保持一颗学习求知的心，继续探究，并持之以恒，不断练习，使自己的flash能力和水平有所提高。
FLASH是由美国公司Macromedia开发的一个软件.(现Macromedia已经被AdobeE收购,Adobe便是开发Photoshop的那个公司,合作后可算是强强联合.所以FLASH的前景是无可限量的...).相信你已经接触过很多FLASH方面的东西了.如今会用FLASH已经成为一种很基本的技能,应用FLASH,可以自己当导演创作作品,还可以用于装饰我们的博客(现在流行DIY嘛),甚至是当作一个技能可以为自己赚点零花钱..FLASH的用处还很多就不一一阐述了.下面就让我们一起进入FLASH的世界吧...
二:FLASH扫盲班
(1)帧
简单的说FLASH就是一种动画,原理和传统的手工动画相似.动画是以帧的形式连续播放形成的连续性的动作,所以FLASH里面我们最常接触到的就是帧.帧这一说法初次听来很抽象,但是你可以理解为一帧就是一幅画,而FLASH要作的就是把许多帧(许多幅画)连续的播放,那么自然就形成动画了.我们在做动画时可以设置动画的频率,频率一般是一秒钟24帧也就是一秒钟的时间会播放24副画.24帧的频率是符合人的视觉感受的,看上去会比较真实,当然也可以根据自己的要求来设置不同的播放速度.帧又分为关键帧,空白帧后面会介绍到.
(2)图层
很多人都不是很清楚图层这个概念,其实很简单.我们可以想象.每个故事会分为很多的场景,而在一个场景里面,故事往往是在一个背景下发生的.设置图层的好处就是可以让某些一直固定的背景元素保持不变.每一帧都可以分为很多个图层.举个例子.我们要做一个男孩在草地中奔跑的情景.那么草地便是这个故事的背景.而草地是没有什么动作的,我们就可以把草地放在最底部的图层上.而男孩就放在草地的上面.这样两个元素就互不干扰了,这种处理方法是很方便的.
(3)元件
在FLASH软件里面,我们有一个后台,里面放置着各种元件.我们随时都可以新建元件.建立元件的好处在于.比如说我们要画一辆汽车,但是汽车有两个轮子.于是我们便可以建一个名叫“轮子”的元件,只需要一个就够了,然后将这个元件复制两个就可以了.可能你要问为什么不直接画一个轮子直接复制一定要将它建成元件,那是因为建成元件之后方便我们修改.如果你对轮子不满意可以直接修改这个元件,那么修改之后两个轮子都会自动的更新.如果不是元件那么这两个轮子就没有任何的关系,到需要修改的时候只有一个一个的修改,会很繁琐.
(3)补间
不是所有的动画都需要我们一帧一帧的绘制.有些有一定规定的动作,我们可以设置补间,FLASH软件会自动的生成动画.举个例子.我们要画一个圆,要让他从小变大.那么我们就不需要依此绘出中间的形态,只需要设置两个关键帧分别放置最小和最大是的样子,然后设置补间,那么就会自动的由小到大了.
好了,说了那么多,大概最重要的就介绍到这里.在以后的学习中我们还会慢慢的接触. [next]
三.FLASH的类型.
［友情提示］看不到动画的朋友请去这里观看：bbs.jcwcn.com/thread-143406-1-1.html
类型一:逐帧动画
逐帧动画就是动画的形式是需要我们一帧一帧来设定. 比如走路,火的燃烧,小鸟飞这些都是逐帧动画. 如下面的这个动画,花儿吃蝴蝶.无论是花的展开还是蝴碟的飞都是一帧帧画出来的.这是典型的逐帧. 这个例子我们会在后面向大家一步步的讲述.
篇3：论文flash设计技术是贯穿于整个Flash动画制作的基本能力,从课程教学的内容上看,学生需要能够熟练地利用工具来编辑图形、熟练地掌握库元件的用法、较好地掌握动作脚步Action⁃Script的编辑等等。一般来讲,在教学中,各种技术的教学都是独立分开来开展,但对于Flash设计大赛而言,它是一个结果的呈现,一个成品的展示,至于其中融合运用了哪几种技术,那就是制作者本人的能力体现,因此,教师可以尝试将Flash设计大赛进行分节分点,因为我们知道Flash动画的制作是有一个过程的,各个过程的重难点也是不尽相同。比如教师可以带领学生关注于Flash设计大赛进行过程中关于逐帧动画的制作,在这一个节点上,教师就要提醒学生按照“逐帧动画应用范围的圈定→动画制作中各个形状图形的理解与组合→合理地发挥元件在逐帧动画中的作用价值→运用多种方法和常用技巧来创建逐帧动画”,可以看出,这是一个步骤践行与前进的过程,不论是学生准备Flash设计大赛,还是在制作Flash动画,它都是一个循序渐进,按部就班的过程,抓住这两者的共同之处,作为两者相互融通的契机,如此一来,学生可以在受到Flash设计大赛压力的激励下更踏实地运用好Flash动画制作课程中所教导的各种能力。2 动画内容——主题思想动画内容是整个Flash动画制作的主要元素,我们经常可以看到Flash设计大赛所指定的某一个主题下,会有很多不同的Flash动画内容,比如学校举办的一个围绕“军训”这一主题的Flash大赛中,有的学生选择突出军训中的某一次训练事件,有的学生选择将所有在军训中所学习到的军姿、动作等都展现出来,有的学生选择以人物采访的形式来搜集伙伴们对于军训的回忆与感受等,所有这一些同一个主题所延伸出来的不同思想都会直接决定了Flash中不同的动画内容,而这又必然会决定了学生在学习与制作时所关注的不同元素点。比如以人物访谈为主要动画内容的,那么学生就会在声音的编辑中运用得更多,包括声音获取的方式,如何在动画中添加声音,如何更好地编辑声音,如何根据需要来选择声音同步设置等。可以看出,Flash设计大赛实际上是给学生设定了一个主题场景,在这个场景中,学生可以自由发挥与选择。与单纯地进行Flash动画制作课程讲解对比起来,在“场景式”应用中,学生可以结合Flash大赛的具体要求来灵活地由理论知识过渡到实践运用,从而更好地掌握动画制作的技能。3 画面画风——审美品位画风画面是整个Flash动画成本呈现出来的感官性效果,它彰显与折射的其实是制作者本人的一种审美品位,比如,有的学生会运用很多的动画技术来渲染题材,融入进古典元素,使得整部动画具有强烈的古典特色。有的学生则倾向于以明亮、跳动、组合式的元件来营造一种欢快的基调。有的学生则喜欢走煽情动人的路线,用唯美的画面感来打动欣赏者的内容。还有的学生思维比较跳脱与活跃的,则喜欢用夸张的动画效果来营造一种兼带讽刺的戏剧动画效果等等,所有的这一些在Flash动画制作课程都中都是以章节内容的形式来掌握学习的,比如组合图形的应用,特别是制作简单卡通图形时的编辑技巧。比如形状补间动画的制作方法和技巧。比如移动补间动画的制作和技巧。比如引导层动画的创建、编辑、引导等等。当学生在课堂上学习Flash动画制作课时,可能就是单纯地吸收知识,但是在参与Flash设计大赛时,由于它是一种技能性的竞赛,不论是内容、主题、还是画面、画风,都是竞赛的一种较量,在这种背景下,学生就会更多地去思考技术本身的一种选择与利用。对于计算机专业的学生来讲,审美品位这一能力的培养也会直接决定着他/她所制作出来的动画的一种立意格调。4 立意格调——价值定位立意格调指的是整个Flash动画它的设计初衷、传递思想与使用走向,它实际上就是一个价值定位的体现。Flash动画本身就是一种实践性的技能,学生毕业后会更多地将这种技能运用在商业领域上,比如制作一些类似与广告动画等等。因此,将Flash设计大赛与Flash动画制作课程相互融通时,教师可以借助前者来促进后者的“变现”,比如关于一般广告条的动画效果,教师在Flash设计大赛中,可以鼓励学生选择某一类行业,如快消行业中的食品等,让学生为其制作一则广告条,使其具有一定的可视性与商业性。那么在这个比赛中,“商业性”就是非常重要的一个价值定位,也许在以往一般的Flash动画制作课程教学中,教师更多的只是关注于技术层面的指导教学,但是在引入进Flash设计大赛后,教师还需要关注于大赛背后所提醒的关于Flash动画制作用途,在这一背景中,不论是教师还是学生,在教与学的过程中,都会更多地结合商业社会的一种实际需要来制作出能够吸引消费者的,能够突出广告主产品诉求的广告与动画,这种价值定位的意义在于让计算机专业的学生能够在毕业之后,尽量地将学习到的Flash动画制作技能运用到岗位需求中,因此,在这一过程中,Flash设计大赛更多地就好像一个模拟商业环境一样。借此,教师本身的教学活动也将更符合人才的培养目标。5 小结《Flash动画制作》这一课程包括了对于舞台对象的创建、编辑、调整,对动画图层的操作、应用、交互控制、优化发布等等,从计算机专业的角度来讲,其目的在于促使学生能够熟练地掌握基于网站广告运用等商业使用价值的Flash使用技巧。为此,教师可以充分地将Flash动画制作课程与Flash设计大赛进行相互融通,从设计技术、动画内容、画面画风、立意格调这四大方面来连接这两者的契点,是学生能够学有所用、用中复学,交互穿插,在实践运用中扎实地提高Flash动画的制作能力。摘要：《Flash动画制作》是计算机网络技术专业学生的一门职业技术课程,从内容分配上看,理论课程与实践课程大约比例为5:5,这也突出了Flash动画制作的极强实践性。为了能够更好地培养学生的制作能力,同时也为了能够帮助学生在适应社会要求、符合社会主流趋势的基础上,有效地提高设计效率,结合学院组织的学生技能大赛,教师可以巧妙地将其与Flash动画制作课程进行融通互促。本文就是基于这一背景,从教师的角度,就如何在Flash动画制作课程的教学中结合Flash设计大赛提出了几点教学策略建议,以期抛砖引玉,为该门课程的教学带来具有指导意义的教学参考。关键词：Flash,动画制作,融通参考文献[1]雷芸芸.网页设计中Flash动画的视觉应用[J].新媒体研究,2016(3).[2]曹芳,李培培.《FLASH动画制作》课程教学改革的探索与研究[J].科技视界,2016(2).[3]周秀芳.Flash动画制作课程建设方案探究——以高职计算机应用专业为例[J].当代职业教育,2015(12).篇4：论文flashFlash动画师,就像喜羊羊和灰太狼那样的职位要求:①美术基础好,形体意识强;②有原创动画能力,最好有传统动画原画制作经验;③有较强的手绘功底,计算机操作熟练,精通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这桌大宴上,几道诱人的主菜烹制奥妙何在?如何才能成为最棒的厨师?篇5：flash学习感想Flash学习感想对flash的接触是在中学开始的，当时还不懂什么叫插入关键帧，只知道，只要按F6就能把蝴蝶变动翅膀，多变几帧蝴蝶就能想飞起来一样。所以，flash给我的最初印象就是把静态的几点连贯起来就能形成动态的动画。现在，已经学习了8周的flash，发现以前的观念是片面的，flash可以创造很多有趣的动态动画。但从对flash工具的认识上就发现，flash的工具使用十分方便，很符合现代传媒业对高速、快捷的工作效率的要求，但简便的工具并不代表制作的动画效果简陋。Flash的滤镜、时间轴特效等独特的功能赋予了flash强大的特技功能，脱离了Photoshop等工具要一步一步的进行图片特技处理的麻烦。所以，flash对我们这些初步接触简易动画的人来学，省去了许多步骤，便可以做出意想不到的效果。基于对flash工具与功能的渐进学习，我渐渐可以制作出动画的小片段。如果能再充分运用图层与元件，便可以制作出不错的动画片段，包括转场、镜头的变化、景别的变化、运动的物体、场景的效果等许多电影的元素。作为一名广播电视编导的学生，学习一些flash的制作技巧，有利于创造力的培养。比如说，我用flash的颜色渐变滤镜做了挂在架子上的上衣，衣服的颜色与上边的花的颜色一直变换，组合成各种不同的样色组合，特别有趣。虽然只是一个小小的动画，也没有情节，但这是摄像机所无法表现的，十分有创造性。Flash的简单方便给广大有兴趣的普通人提供了一个用动画展示个人兴趣的强大工具，而网络则使这些工具联络成网，形成集制作—发布—浏览—相互传播的快捷平台。但随着网络传媒技术的发展，flash更倾向与网页制作的方向发展。当我快要做完flash的考试作业时，我发现，我已经能较熟练的制作出动画来了，虽然我没有任何的美术功底，没办法画出一些想要的图画，但简单的几笔，也可以制作出不错的动画效果。十分有趣。看着自己画的小猪边眨着眼边迈着小步伐跑着时，感觉十分有趣。篇6：学Flash有感一个学期下来，说真的，让我学到了很多，至少有稍微的接触了并认识Flash界面。以前打开flash 界面都不知道是干嘛的，鼠标乱点，如今总有一点点收获。从刚开始的时候我一个图都不会画，连拉弧都不会。十个作业中第一个我花了好久的时间去摸索，终于在第三个的时候学会了。说真的，这一个学期是我碰电脑最多的一个学期，也是到鼎新楼最多的。慢慢的学了一些，虽然不擅长，但至少会做一点，能知道一点也是好的。篇7：FLASH培训教案Flash动画制作之（一）教学目标：熟悉Flash软件的操作界面； 运用Flash软件绘制七巧板 教学重点：绘制七巧板教学难点：如何选用合适的工具正确绘制七巧板 教学方法：讲授法，演示法 教学过程：一：打开Flash 软件“开始”菜单―――“程序”―――Flash MX 2004 Flash可以用来制作静态图像和可互动的动画，可以任意缩放不失真，文件体积不大，适宜网络图形和动画的制作。二：认识Flash 8操作环境 1．菜单栏 2．工具栏 3．面板属性 三：绘制七巧板 操作步骤：1．绘制一蓝色边框，红色填充色的矩形。选择矩形绘图工具，调整好边框及填充颜色，按住Shift键绘制正方形。2．使用线条工具，按住Shift键绘制正方形的两条对角线。参照书本p84图绘制其余线条，可画辅助线。多余线条擦除方法：选用箭头工具，点击多余线条，按键盘上Delete键进行删除。3．填充颜色。使用颜料桶工具，对七巧板的七歌板块进行颜色填充。4．使用橡皮擦工具（注：选用“擦除线段”状态），擦除所有的线条。5．用箭头工具将七巧板的每个板块小心的移开。（注：移动过程中避免色块的重叠）四：构建运动造型使用绘制完成的七巧板，构建运动造型。借助箭头工具来移动，定位板块； 使用任意变形工具旋转板块。使用菜单命令进行水平及垂直翻转。五：实践绘制七巧板，并使用已绘制的七巧板，构建运动造型。六：教学反思初次接触Flash软件，学生对如何正确使用工具栏的工具还存在一些问题。绘制 七巧板的过程中，绘制直线时，直线与直线没有正确相交，出现相邻板块同色问 题，经指导修改完成。Flash动画制作之（二）教学目标：1：将原来静态的跑步姿态的图形加工为动态的跑步造型；2：熟悉FLASH制作中的几个关键性的概念：图层、时间轴、帧等；3：熟悉FLASH制作中的两种重要动画形式：形状渐变动画和运动渐变动画。教学重点：将原来静态的跑步姿态的图形加工为动态的跑步造型 教学难点：1：理解帧的概念；2：了解两种重要动画形式：形状渐变动画和运动渐变动画分别用于何种情况教学方法：讲授法，演示法，实践法 教学过程：一、操作步骤1： 1：打开Flash 软件“开始”菜单―――“程序”―――Flash MX 2004 2：文件——打开上次绘制的七巧板，并在第20帧处插入关键帧 方法：右键单击第20帧选关键帧3：学生上台演示，在第20帧处将七巧板构建成跑步造型（复习上节课内容）4：构建动画，选中图层1第一帧，设置动画中间为“形状”二、讲解场景属性设置，时间轴作用，帧，关键帧以及动画形式形状渐变动画的含义三、操作步骤2：1：插入一图层，默认名为“图层2”，并讲解图层含义 2：在图层2第一帧处输入文本“跑步”，讲解FLASH工具箱中文本工具的使用3：在图层2第20帧处插入关键帧，并将文字“跑步”拖动一个位置，与第一帧位置不同4：构建动画，选中图层2第一帧，设置动画中间为“动作”四、讲解形状渐变动画和运动渐变动画的区别五、通过菜单栏中“控制”——“播放”，观看效果。实践：使用已绘制的七巧板，加工为动态的跑步造型，并添加文字的运动变化。六、教学反思：由于是第一次接触动画的制作，对于FLASH中的一些关键性的概念学生理解起来比较困难，如关键帧、图层等。对于动画的两种基本形式，形状和运动渐变动画，能在老师的指导下完成，但是形状渐变动画和运动渐变动画分别用于何种情况，还不是很清楚。Flash动画制作之（三）——奥运五环的制作教学目标：1：熟悉FLASH制作中的关键性概念：元件； 2：完成奥运五环的制作以及文字的制作； 3：巩固FLASH制作中的重要动画形式：运动渐变动画。教学重点：奥运五环的制作； 教学难点：理解元件的概念； 教学方法：讲授法，演示法，实践法 教学过程：一、操作步骤1： 1：打开Flash 软件“开始”菜单―――“程序”―――Flash MX 2004 2：元件的新建在菜单栏中插入——新建元件，选择图形元件，并命名为wh1，这里要制作奥运五环中的一 个环，其他的四个通过复制粘贴完成方法：选择椭圆工具，并设置其线条颜色和填充颜色 注意：线条颜色根据五环的颜色设置，填充颜色设置为“无” 另外还可以设置线条粗细3：元件的复制第一个五环完成后，用选择工具将其选中，然后再次通过插入——新建元件，命名为wh2，将复制的wh1粘贴其中，并根据奥运五环颜色改变它的线条颜色 4：用同样的方法完成其他三个圆环5：元件的新建（制作文字），命名为wz 选择文字工具，设置其大小，字体，颜色等后在元件中输入“心系奥运放飞梦想”技巧：阴影文字的制作 选中该文字，按住CTRL的同时，拖动鼠标，将该文字复制，并将复制的文字换一颜色，利用方向键将文字微调，实现阴影效果。至此，元件制作完毕。二、操作步骤2：讲解元件的功能三、操作步骤3： 回到场景中 1：五环的运动（1）在图层1第一帧处，将五环wh1,wh2,wh3,wh4,wh5依次拖入场景中，并根据奥运五 环的造型构件好，此时，五个环是五个独立的个体，将五环全部选中，通过修改——组合，将其组合成一个统一的整体。（2）在图层1的30帧处，插入一关键帧，并将五环移动至某一位置（不同于第一帧）（3）构建动画，选中图层1第一帧，设置动画中间为“形状”（4）实现奥运五环从高处落下运动。2：文字的运动（1）新建图层2，在图层2第一帧处，将制作好的元件wz拖入（2）在图层2的30帧处，插入一关键帧（3）在图层2第一帧处，将文字通过任意变形工具进行缩放，旋转（4）构建动画，选中图层1第一帧，设置动画中间为“形状”（5）实现文字旋转出现在场景中。四、操作步骤4 通过菜单栏中“控制”——“播放”，观看效果 实践：完成奥运五环以及文字的运动动画五、教学反思在上节课构建七巧板动画的基础上，引入了元件的概念，制作了奥运五环的动画。学生的完成情况较好，但是对于如何正确使用元件，如：何时何处使用元件，学生了解的还不是十分深刻，大部分只是在单纯的模仿教师的演示。Flash动画制作之（四）——镂空文字教学目标：通过应用文本工具和创建遮罩层，当使用遮罩层，可透过文字看到被遮罩的动态效果。教学重点：理解遮罩层的含义。教学难点：理解遮罩层的含义。教学方法：讲授法，演示法，实践法 教学过程：一、操作步骤1： 1：打开Flash 软件 “开始”菜单―――“程序”―――Flash MX 2004 2：新建文档 3：新建元件插入——新建元件。输入名称，行为选为“影片剪辑”。二、操作步骤2：讲解元件影片剪辑与图形的区别。三、操作步骤3： 在元件影片剪辑中操作在图层1第一帧处，选择工具箱中文本工具，在编辑区输入文字“心系奥运放飞梦想”四、操作步骤4：（1）新建图层2，并将图层2拖到图层1的下面；（2）在图层2第一帧处，绘制一个矩形，矩形大小可通过工具箱中任意变形工具改变，并将其放在文字的左侧；（3）在图层1的30帧处，插入帧，延长时间轴到第30帧；（4）在图层2的30帧处，插入关键帧，并用选择工具将文字拖到文字的右侧；（5）构建动画，选中图层2第一帧，设置动画中间为“形状”五、操作步骤5：右击图层1的层名处，在快捷菜单中选择“遮罩层”六、操作步骤6： 回到场景中 从库中将该影片剪辑元件拖到场景中七、操作步骤7 通过菜单栏中“控制”——“测试影片”，观看效果八、操作步骤8 讲解遮罩层含义实践：制作“镂空文字”动画效果。九、教学反思：遮罩层是FLASH图层中非常重要的图层，由于遮罩层的效果与实际对于“遮罩”两字的理解正好相反，所以在讲解“遮罩层”概念时比较困难，通过对作品的制作来逐步理解这个概 念。理解这个概念非常重要，只有理解透彻，才能举一反三。Flash 制作之（五）——引导层的使用教学目标：通过制作小球曲线运动的动画，学会正确使用引导层 教学重点：通过引导层引导小球进行运动 教学难点：引导层的正确使用 教学方法：讲授法，演示法 教学过程： 引入：播一段小球曲线运动的动画。前一次课上，我们讲了遮罩层的使用，今天我们再来研究一下怎样使用运动引导层，让小球进行曲线运动。一：制作小球元件1．使用新建元件工具，新建一个图形元件，命名为“小球 1”。在小球 1的编辑界面，2．使用椭圆工具画一小球。3．再插入一个图形元件“小球 2”，制作方法与小球1相同。二：制作路径元件1．插入一影片剪辑元件，命名为“路径”，为两个小球创建运动路径。2．将小球1元件拖到“路径”元件的图层1第一帧的地方。3．添加运动引导层，在引导层的第一帧处，使用铅笔工具，为小球添加一条曲线运动路径。并在30帧处插入一普通帧。4．为小球1构建动画。在30帧处插入关键帧，创建补间动画。并在开始帧与结束帧处将小球的中心点置与路径的两个端点。5．在图层1处插入一新的图层，将小球2拖到新图层的第一帧处，并为小球2构建动画，使其运动的方向与小球1相反。三：测试动画 回到“场景”中，将制作完成的路径元件拖到场景中，通过“控制”菜单的“测试影片”测试所做动画。四：实践尝试制作两个小球相对运动的动画，注意正确使用引导层。五：教学反思引导层也是FLASH中非常重要的图层，在以前制作的动画中，无论是运动渐变还是形状渐变，动画都是无规则的动画效果，而有了引导层，制作动画时，动画就会朝着制作者设定的路径进行运动，有利于制作出符合一定效果的动画。Flash 制作之（六）――――按钮元件的使用 教学目标：学会在动画制作中正确使用按钮元件 教学重点：制作按钮元件教学难点：在按钮元件中编辑添加动画 教学方法：讲授法，演示法 教学过程： 引入：动画展示：用按钮来控制一段动画的播放。在前面我们所做的动画的基础上，我们可以考虑加上一个按钮，简单的来控制一下它的播放，今天我们就来讲讲有关按钮元件的制作。一：制作按钮1．使用新建元件工具，新建一个元件，类型为“按钮”。2．进入到按钮元件的编辑界面，对按钮的四个状态进行编辑：在“弹起”状态使用椭圆工具画上一个圆填充色为红色，在“指针经过”状态将按钮的填充色变为绿色，“按下”状态时改为七彩色。3．将按钮元件拖到场景中进行测试，按钮在指针经过及按下的不同状态呈现不同的颜色。二：使用按钮控制动画播放6．双击库中的按钮元件图标，回到按钮元件的编辑界面。7．添加一个新的图层，在按钮的“指针经过”状态，插入一个关键帧，然后把库中已经做好的一个影片剪辑类型的元件拖到这一帧中。此影片剪辑类型的元件为一段简单的文字变幻的动画。三：测试动画回到场景中，将按钮元件拖到场景中，通过测试影片，在指针经过按钮的时候，相 应的动画就会进行播放。指针离开按钮，动画就停止播放。四：实践利用上节课所学知识先制作一个影片剪辑类型的元件，内容为一段简单的动画。然后新建一按钮元件，使用按钮来控制此段动画的播放。五：教学反思篇8：论文flash 从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插件的基本功能,其性能主要取决于渲染引擎的实现,未来的工作重点将放在优化渲染引擎的性能上。 本文来自 360文秘网(www.360wenmi.com)，转载请保留网址和出处【论文flash】相关文章：flash论文题目05-02flash论文范文05-13flash论文提纲11-15flash游戏论文提纲11-15Flash教学方法论文04-21flash毕业论文题目05-02flash游戏毕业论文05-14Flash技术网站建设论文04-27FLASH动画网页设计论文04-29Flash教学方法论文提纲11-15
设计技术是贯穿于整个Flash动画制作的基本能力,从课程教学的内容上看,学生需要能够熟练地利用工具来编辑图形、熟练地掌握库元件的用法、较好地掌握动作脚步Action⁃Script的编辑等等。一般来讲,在教学中,各种技术的教学都是独立分开来开展,但对于Flash设计大赛而言,它是一个结果的呈现,一个成品的展示,至于其中融合运用了哪几种技术,那就是制作者本人的能力体现,因此,教师可以尝试将Flash设计大赛进行分节分点,因为我们知道Flash动画的制作是有一个过程的,各个过程的重难点也是不尽相同。比如教师可以带领学生关注于Flash设计大赛进行过程中关于逐帧动画的制作,在这一个节点上,教师就要提醒学生按照“逐帧动画应用范围的圈定→动画制作中各个形状图形的理解与组合→合理地发挥元件在逐帧动画中的作用价值→运用多种方法和常用技巧来创建逐帧动画”,可以看出,这是一个步骤践行与前进的过程,不论是学生准备Flash设计大赛,还是在制作Flash动画,它都是一个循序渐进,按部就班的过程,抓住这两者的共同之处,作为两者相互融通的契机,如此一来,学生可以在受到Flash设计大赛压力的激励下更踏实地运用好Flash动画制作课程中所教导的各种能力。
2 动画内容——主题思想
动画内容是整个Flash动画制作的主要元素,我们经常可以看到Flash设计大赛所指定的某一个主题下,会有很多不同的Flash动画内容,比如学校举办的一个围绕“军训”这一主题的Flash大赛中,有的学生选择突出军训中的某一次训练事件,有的学生选择将所有在军训中所学习到的军姿、动作等都展现出来,有的学生选择以人物采访的形式来搜集伙伴们对于军训的回忆与感受等,所有这一些同一个主题所延伸出来的不同思想都会直接决定了Flash中不同的动画内容,而这又必然会决定了学生在学习与制作时所关注的不同元素点。比如以人物访谈为主要动画内容的,那么学生就会在声音的编辑中运用得更多,包括声音获取的方式,如何在动画中添加声音,如何更好地编辑声音,如何根据需要来选择声音同步设置等。可以看出,Flash设计大赛实际上是给学生设定了一个主题场景,在这个场景中,学生可以自由发挥与选择。与单纯地进行Flash动画制作课程讲解对比起来,在“场景式”应用中,学生可以结合Flash大赛的具体要求来灵活地由理论知识过渡到实践运用,从而更好地掌握动画制作的技能。
3 画面画风——审美品位
画风画面是整个Flash动画成本呈现出来的感官性效果,它彰显与折射的其实是制作者本人的一种审美品位,比如,有的学生会运用很多的动画技术来渲染题材,融入进古典元素,使得整部动画具有强烈的古典特色。有的学生则倾向于以明亮、跳动、组合式的元件来营造一种欢快的基调。有的学生则喜欢走煽情动人的路线,用唯美的画面感来打动欣赏者的内容。还有的学生思维比较跳脱与活跃的,则喜欢用夸张的动画效果来营造一种兼带讽刺的戏剧动画效果等等,所有的这一些在Flash动画制作课程都中都是以章节内容的形式来掌握学习的,比如组合图形的应用,特别是制作简单卡通图形时的编辑技巧。比如形状补间动画的制作方法和技巧。比如移动补间动画的制作和技巧。比如引导层动画的创建、编辑、引导等等。当学生在课堂上学习Flash动画制作课时,可能就是单纯地吸收知识,但是在参与Flash设计大赛时,由于它是一种技能性的竞赛,不论是内容、主题、还是画面、画风,都是竞赛的一种较量,在这种背景下,学生就会更多地去思考技术本身的一种选择与利用。对于计算机专业的学生来讲,审美品位这一能力的培养也会直接决定着他/她所制作出来的动画的一种立意格调。
4 立意格调——价值定位
立意格调指的是整个Flash动画它的设计初衷、传递思想与使用走向,它实际上就是一个价值定位的体现。Flash动画本身就是一种实践性的技能,学生毕业后会更多地将这种技能运用在商业领域上,比如制作一些类似与广告动画等等。因此,将Flash设计大赛与Flash动画制作课程相互融通时,教师可以借助前者来促进后者的“变现”,比如关于一般广告条的动画效果,教师在Flash设计大赛中,可以鼓励学生选择某一类行业,如快消行业中的食品等,让学生为其制作一则广告条,使其具有一定的可视性与商业性。那么在这个比赛中,“商业性”就是非常重要的一个价值定位,也许在以往一般的Flash动画制作课程教学中,教师更多的只是关注于技术层面的指导教学,但是在引入进Flash设计大赛后,教师还需要关注于大赛背后所提醒的关于Flash动画制作用途,在这一背景中,不论是教师还是学生,在教与学的过程中,都会更多地结合商业社会的一种实际需要来制作出能够吸引消费者的,能够突出广告主产品诉求的广告与动画,这种价值定位的意义在于让计算机专业的学生能够在毕业之后,尽量地将学习到的Flash动画制作技能运用到岗位需求中,因此,在这一过程中,Flash设计大赛更多地就好像一个模拟商业环境一样。借此,教师本身的教学活动也将更符合人才的培养目标。
5 小结
《Flash动画制作》这一课程包括了对于舞台对象的创建、编辑、调整,对动画图层的操作、应用、交互控制、优化发布等等,从计算机专业的角度来讲,其目的在于促使学生能够熟练地掌握基于网站广告运用等商业使用价值的Flash使用技巧。为此,教师可以充分地将Flash动画制作课程与Flash设计大赛进行相互融通,从设计技术、动画内容、画面画风、立意格调这四大方面来连接这两者的契点,是学生能够学有所用、用中复学,交互穿插,在实践运用中扎实地提高Flash动画的制作能力。
摘要：《Flash动画制作》是计算机网络技术专业学生的一门职业技术课程,从内容分配上看,理论课程与实践课程大约比例为5:5,这也突出了Flash动画制作的极强实践性。为了能够更好地培养学生的制作能力,同时也为了能够帮助学生在适应社会要求、符合社会主流趋势的基础上,有效地提高设计效率,结合学院组织的学生技能大赛,教师可以巧妙地将其与Flash动画制作课程进行融通互促。本文就是基于这一背景,从教师的角度,就如何在Flash动画制作课程的教学中结合Flash设计大赛提出了几点教学策略建议,以期抛砖引玉,为该门课程的教学带来具有指导意义的教学参考。
关键词：Flash,动画制作,融通
参考文献
[1]雷芸芸.网页设计中Flash动画的视觉应用[J].新媒体研究,2016(3).
[2]曹芳,李培培.《FLASH动画制作》课程教学改革的探索与研究[J].科技视界,2016(2).
[3]周秀芳.Flash动画制作课程建设方案探究——以高职计算机应用专业为例[J].当代职业教育,2015(12).
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学习感想
对flash的接触是在中学开始的，当时还不懂什么叫插入关键帧，只知道，只要按F6就能把蝴蝶变动翅膀，多变几帧蝴蝶就能想飞起来一样。所以，flash给我的最初印象就是把静态的几点连贯起来就能形成动态的动画。现在，已经学习了8周的flash，发现以前的观念是片面的，flash可以创造很多有趣的动态动画。
但从对flash工具的认识上就发现，flash的工具使用十分方便，很符合现代传媒业对高速、快捷的工作效率的要求，但简便的工具并不代表制作的动画效果简陋。Flash的滤镜、时间轴特效等独特的功能赋予了flash强大的特技功能，脱离了Photoshop等工具要一步一步的进行图片特技处理的麻烦。所以，flash对我们这些初步接触简易动画的人来学，省去了许多步骤，便可以做出意想不到的效果。
基于对flash工具与功能的渐进学习，我渐渐可以制作出动画的小片段。如果能再充分运用图层与元件，便可以制作出不错的动画片段，包括转场、镜头的变化、景别的变化、运动的物体、场景的效果等许多电影的元素。作为一名广播电视编导的学生，学习一些flash的制作技巧，有利于创造力的培养。比如说，我用flash的颜色渐变滤镜做了挂在架子上的上衣，衣服的颜色与上边的花的颜色一直变换，组合成各种不同的样色组合，特别有趣。虽然只是一个小小的动画，也没有情节，但这是摄像机所无法表现的，十分有创造性。
Flash的简单方便给广大有兴趣的普通人提供了一个用动画展示个人兴趣的强大工具，而网络则使这些工具联络成网，形成集制作—发布—浏览—相互传播的快捷平台。但随着网络传媒技术的发展，flash更倾向与网页制作的方向发展。当我快要做完flash的考试作业时，我发现，我已经能较熟练的制作出动画来了，虽然我没有任何的美术功底，没办法画出一些想要的图画，但简单的几笔，也可以制作出不错的动画效果。十分有趣。看着自己画的小猪边眨着眼边迈着小步伐跑着时，感觉十分有趣。
一个学期下来，说真的，让我学到了很多，至少有稍微的接触了并认识Flash界面。以前打开flash 界面都不知道是干嘛的，鼠标乱点，如今总有一点点收获。
从刚开始的时候我一个图都不会画，连拉弧都不会。十个作业中第一个我花了好久的时间去摸索，终于在第三个的时候学会了。说真的，这一个学期是我碰电脑最多的一个学期，也是到鼎新楼最多的。慢慢的学了一些，虽然不擅长，但至少会做一点，能知道一点也是好的。
Flash动画制作之
（一）教学目标：熟悉Flash软件的操作界面； 运用Flash软件绘制七巧板 教学重点：绘制七巧板
教学难点：如何选用合适的工具正确绘制七巧板 教学方法：讲授法，演示法 教学过程：
一：打开Flash 软件
“开始”菜单―――“程序”―――Flash MX 2004 Flash可以用来制作静态图像和可互动的动画，可以任意缩放不失真，文件体
积不大，适宜网络图形和动画的制作。
二：认识Flash 8操作环境 1．
菜单栏 2．
工具栏 3．
面板属性 三：绘制七巧板 操作步骤：
1．绘制一蓝色边框，红色填充色的矩形。选择矩形绘图工具，调整好边框及填充颜色，按住Shift键绘制正方形。
2．使用线条工具，按住Shift键绘制正方形的两条对角线。参照书本p84图绘制其余线条，可画辅助线。多余线条擦除方法：选用箭头工具，点击多余线条，按键盘上Delete键进行删除。
3．填充颜色。使用颜料桶工具，对七巧板的七歌板块进行颜色填充。
4．使用橡皮擦工具（注：选用“擦除线段”状态），擦除所有的线条。
5．用箭头工具将七巧板的每个板块小心的移开。（注：移动过程中避免色块的重叠）
四：构建运动造型
使用绘制完成的七巧板，构建运动造型。借助箭头工具来移动，定位板块； 使用任意变形工具旋转板块。使用菜单命令进行水平及垂直翻转。五：实践
绘制七巧板，并使用已绘制的七巧板，构建运动造型。六：教学反思
初次接触Flash软件，学生对如何正确使用工具栏的工具还存在一些问题。绘制 七巧板的过程中，绘制直线时，直线与直线没有正确相交，出现相邻板块同色问 题，经指导修改完成。
（二）教学目标：1：将原来静态的跑步姿态的图形加工为动态的跑步造型；
2：熟悉FLASH制作中的几个关键性的概念：图层、时间轴、帧等；
3：熟悉FLASH制作中的两种重要动画形式：形状渐变动画和运动渐变动画。
教学重点：将原来静态的跑步姿态的图形加工为动态的跑步造型 教学难点：1：理解帧的概念；
2：了解两种重要动画形式：形状渐变动画和运动渐变动画分别用于何种情况
教学方法：讲授法，演示法，实践法 教学过程：
一、操作步骤1： 1：打开Flash 软件
“开始”菜单―――“程序”―――Flash MX 2004 2：文件——打开上次绘制的七巧板，并在第20帧处插入关键帧 方法：右键单击第20帧选关键帧
3：学生上台演示，在第20帧处将七巧板构建成跑步造型（复习上节课内容）
4：构建动画，选中图层1第一帧，设置动画中间为“形状”
二、讲解场景属性设置，时间轴作用，帧，关键帧以及动画形式形状渐变动画的含义
三、操作步骤2：
1：插入一图层，默认名为“图层2”，并讲解图层含义 2：在图层2第一帧处输入文本“跑步”，讲解FLASH工具箱中文本工具的使用
3：在图层2第20帧处插入关键帧，并将文字“跑步”拖动一个位置，与第一帧位置不同
4：构建动画，选中图层2第一帧，设置动画中间为“动作”
四、讲解形状渐变动画和运动渐变动画的区别
五、通过菜单栏中“控制”——“播放”，观看效果。实践：使用已绘制的七巧板，加工为动态的跑步造型，并添加文字的运动变化。
六、教学反思：
由于是第一次接触动画的制作，对于FLASH中的一些关键性的概念学生理解起来比较困难，如关键帧、图层等。对于动画的两种基本形式，形状和运动渐变动画，能在老师的指导下完
成，但是形状渐变动画和运动渐变动画分别用于何种情况，还不是很清楚。
（三）——奥运五环的制作
教学目标：1：熟悉FLASH制作中的关键性概念：元件； 2：完成奥运五环的制作以及文字的制作； 3：巩固FLASH制作中的重要动画形式：运动渐变动画。教学重点：奥运五环的制作； 教学难点：理解元件的概念； 教学方法：讲授法，演示法，实践法 教学过程：
“开始”菜单―――“程序”―――Flash MX 2004 2：元件的新建
在菜单栏中插入——新建元件，选择图形元件，并命名为wh1，这里要制作奥运五环中的一 个环，其他的四个通过复制粘贴完成
方法：选择椭圆工具，并设置其线条颜色和填充颜色 注意：线条颜色根据五环的颜色设置，填充颜色设置为“无” 另外还可以设置线条粗细
3：元件的复制
第一个五环完成后，用选择工具将其选中，然后再次通过插入——新建元件，命名为wh2，将复制的wh1粘贴其中，并根据奥运五环颜色改变它的线条颜色 4：用同样的方法完成其他三个圆环
5：元件的新建（制作文字），命名为wz 选择文字工具，设置其大小，字体，颜色等后在元件中输入“心系奥运放飞梦想”
技巧：阴影文字的制作 选中该文字，按住CTRL的同时，拖动鼠标，将该文字复制，并将复制的文字换一颜色，利用方向键将文字微调，实现阴影效果。至此，元件制作完毕。
二、操作步骤2：讲解元件的功能
三、操作步骤3： 回到场景中 1：五环的运动
（1）在图层1第一帧处，将五环wh1,wh2,wh3,wh4,wh5依次拖入场景中，并根据奥运五 环的造型构件好，此时，五个环是五个独立的个体，将五环全部选中，通过修改——
组合，将其组合成一个统一的整体。
（2）在图层1的30帧处，插入一关键帧，并将五环移动至某一位置（不同于第一帧）
（3）构建动画，选中图层1第一帧，设置动画中间为“形状”（4）实现奥运五环从高处落下运动。2：文字的运动
（1）新建图层2，在图层2第一帧处，将制作好的元件wz拖入
（2）在图层2的30帧处，插入一关键帧
（3）在图层2第一帧处，将文字通过任意变形工具进行缩放，旋转
（4）构建动画，选中图层1第一帧，设置动画中间为“形状”（5）实现文字旋转出现在场景中。
四、操作步骤4 通过菜单栏中“控制”——“播放”，观看效果 实践：完成奥运五环以及文字的运动动画
五、教学反思
在上节课构建七巧板动画的基础上，引入了元件的概念，制作了奥运五环的动画。学生的完
成情况较好，但是对于如何正确使用元件，如：何时何处使用元件，学生了解的还不是十分
深刻，大部分只是在单纯的模仿教师的演示。
（四）——镂空文字
教学目标：通过应用文本工具和创建遮罩层，当使用遮罩层，可透过文字看到被遮罩的动态效果。
教学重点：理解遮罩层的含义。教学难点：理解遮罩层的含义。教学方法：讲授法，演示法，实践法 教学过程：
一、操作步骤1： 1：打开Flash 软件 “开始”菜单―――“程序”―――Flash MX 2004 2：新建文档 3：新建元件
插入——新建元件。输入名称，行为选为“影片剪辑”。
二、操作步骤2：
讲解元件影片剪辑与图形的区别。
三、操作步骤3： 在元件影片剪辑中操作
在图层1第一帧处，选择工具箱中文本工具，在编辑区输入文字“心系奥运放飞梦想”
四、操作步骤4：
（1）新建图层2，并将图层2拖到图层1的下面；
（2）在图层2第一帧处，绘制一个矩形，矩形大小可通过工具箱中任意变形工具改变，并将其放在文字的左侧；
（3）在图层1的30帧处，插入帧，延长时间轴到第30帧；（4）在图层2的30帧处，插入关键帧，并用选择工具将文字拖到文字的右侧；
（5）构建动画，选中图层2第一帧，设置动画中间为“形状”
五、操作步骤5：
右击图层1的层名处，在快捷菜单中选择“遮罩层”
六、操作步骤6： 回到场景中 从库中将该影片剪辑元件拖到场景中
七、操作步骤7 通过菜单栏中“控制”——“测试影片”，观看效果
八、操作步骤8 讲解遮罩层含义
实践：制作“镂空文字”动画效果。
九、教学反思：
遮罩层是FLASH图层中非常重要的图层，由于遮罩层的效果与实际对于“遮罩”两字的理
解正好相反，所以在讲解“遮罩层”概念时比较困难，通过对作品的制作来逐步理解这个概 念。理解这个概念非常重要，只有理解透彻，才能举一反三。
Flash 制作之
（五）——引导层的使用
教学目标：通过制作小球曲线运动的动画，学会正确使用引导层 教学重点：通过引导层引导小球进行运动 教学难点：引导层的正确使用 教学方法：讲授法，演示法 教学过程： 引入：
播一段小球曲线运动的动画。前一次课上，我们讲了遮罩层的使用，今天我们再来研究一下怎样使用运动引导层，让
小球进行曲线运动。一：制作小球元件
1．使用新建元件工具，新建一个图形元件，命名为“小球 1”。在小球 1的编辑界面，2．
使用椭圆工具画一小球。
3．再插入一个图形元件“小球 2”，制作方法与小球1相同。二：制作路径元件
1．插入一影片剪辑元件，命名为“路径”，为两个小球创建运动路径。
2．将小球1元件拖到“路径”元件的图层1第一帧的地方。3．
添加运动引导层，在引导层的第一帧处，使用铅笔工具，为小球添加一条曲线运动
路径。并在30帧处插入一普通帧。
4．为小球1构建动画。在30帧处插入关键帧，创建补间动画。并在开始帧与结束帧
处将小球的中心点置与路径的两个端点。
5．在图层1处插入一新的图层，将小球2拖到新图层的第一帧处，并为小球2构建动
画，使其运动的方向与小球1相反。三：测试动画 回到“场景”中，将制作完成的路径元件拖到场景中，通过“控制”菜单的“测试影片”
测试所做动画。四：实践
尝试制作两个小球相对运动的动画，注意正确使用引导层。五：教学反思
引导层也是FLASH中非常重要的图层，在以前制作的动画中，无论是运动渐变还是
形状渐变，动画都是无规则的动画效果，而有了引导层，制作动画时，动画就会朝着
制作者设定的路径进行运动，有利于制作出符合一定效果的动画。
（六）――――按钮元件的使用 教学目标：学会在动画制作中正确使用按钮元件 教学重点：制作按钮元件
教学难点：在按钮元件中编辑添加动画 教学方法：讲授法，演示法 教学过程： 引入：
动画展示：用按钮来控制一段动画的播放。在前面我们所做的动画的基础上，我们可以考虑加上一个按钮，简单的来控制一下它的
播放，今天我们就来讲讲有关按钮元件的制作。一：制作按钮
1．使用新建元件工具，新建一个元件，类型为“按钮”。2．进入到按钮元件的编辑界面，对按钮的四个状态进行编辑：在“弹起”状态使用椭
圆工具画上一个圆填充色为红色，在“指针经过”状态将按钮的填充色变为绿色，“按下”
状态时改为七彩色。
3．将按钮元件拖到场景中进行测试，按钮在指针经过及按下的不同状态呈现不同的颜色。
二：使用按钮控制动画播放
6．双击库中的按钮元件图标，回到按钮元件的编辑界面。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】相关文章：
flash论文题目05-02
flash论文范文05-13
flash论文提纲11-15
flash游戏论文提纲11-15
Flash教学方法论文04-21
flash毕业论文题目05-02
flash游戏毕业论文05-14
Flash技术网站建设论文04-27
FLASH动画网页设计论文04-29
Flash教学方法论文提纲11-15
上一篇：运动会比赛加油稿下一篇：浅谈如何做好新时期基层职工思想政治工作
