任务五：Flash的设计与制作

任务五：Flash的设计与制作,计算机部刘冰玲,随着Flash的出现，WEB页面不再是平淡无奇的静态展示。Flash可以为页面添加各种绚丽的动态效果，第一时间抓住用户的眼球，并且为用户带来更好的体验。本章节适用于WEB开发中的用户体验工程师阅读。,任务描述,知识链接,由于HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果，在这种情况下，各种脚本语言应运而生，使得网页设计更加多样化。然而，程序设计总是不能很好地普及，因为它要求一定的编程能力，而人们更需要一种既简单直观又有功能强大的动画设计工具，而Flash的出现正好满足了这种需求。Flash是一个基于矢量的方案，该方案用简单的术语表示的图形信息被存储在数学公式的形式，而不是像素表。矢量信息存储各个像素值会导致Flash文件远远小于其动画图形同行相比，占用较少的空间。除了动画，Flash可以用来做非常复杂的多媒体内容的交互性和声音、下拉滚动菜单、动画按钮、自定义动画光标，甚至可以用Flash制作游戏。,5.1Flash的基础知识,要构建Flash应用程序，通常需要执行下列基本步骤：1.计划应用程序确定应用程序要执行哪些基本任务。2.添加媒体元素创建并导入媒体元素，如图像、视频、声音和文本等。3.排列元素在舞台上和时间轴中排列这些媒体元素，以定义它们在应用程序中显示的时间和显示方式。4.应用特殊效果根据需要应用图形滤镜（如模糊、发光和斜角）、混合和其它特殊效果。5.使用ActionScript控制行为编写ActionScript代码以控制媒体元素的行为方式，包括这些元素对用户交互的响应方式。6.测试并发布应用程序。进行测试以验证应用程序是否按预期工作，查找并修复所遇到的错误。在整个创建过程中应不断测试应用程序。将FLA文件发布为可在网页中显示并可使用FlashPlayer播放的SWF文件。,5.2Flash软件的使用,Flash的主界面如下图所示，分为五大部分：您的图形、视频、按钮等在回放过程中显示在“舞台”面板中。时间轴控制影片中的元素出现在舞台中的时间。您也可以使用时间轴指定图形在舞台中的分层顺序。高层图形显示在低层图形上方。“工具”面板包含一组常用工具，可使用它们选择舞台中的对象和绘制矢量图形。“属性”面板显示有关任何选定对象的可编辑信息。“库”面板用于存储和组织媒体元素和元件。,Flash软件主界面,创建文档导入图像创建元件制作动画使用停止动作阻止时间轴循环发布文件,5,师引导：旅游信息官网提出反馈建议：将上个任务增加动态萤火虫效果，观看类似展示样片动画。师展示动画，提问：在这段动画中，对象在做怎样的运动呢？学生回答：雪花飘落。师生共同分析：一起观察雪花飘落运动。雪花的数量有多少？（100）雪花运动路径是怎样的？（随机）雪花飞舞的频率如何？（12帧/秒）雪花外观怎样？（六角星）师：制作动画“网页动态图片插播动画”。,情景导入,5.2.8酒店外貌展示Flash的制作,任务回顾,SWF文件,知识回顾,动画三步曲之一：做萤火虫-创建元件,上舞台-帧长度,飞起来-写代码,做萤火虫创元件,1,2,3,动画三步曲之二：将萤火虫请上舞台-确定帧的长度,动画三步曲之三：让萤火虫飞起来-创建代新层写代码,ActionScript动画三步曲,ActionScript动画三步曲,动画三步曲之一：做萤火虫-创建元件,1,2,动画三步曲之二：将萤火虫请上舞台-确定帧的长度,3,动画三步曲之三：让萤火虫飞起来-创建代新层写代码,1展示一个学生的作品。师：一起观察XX同学的.swf，同学们对比观察：你在制作萤火虫的范围位置也这么小？萤火虫的数量有多少？萤火虫的频率比这位同学的快或慢？萤火虫状态有什么变化？（大小、形状、透明度等）师：下面我们分ABCD组探索：范围位置、数量、频率、状态（可以对照学习任务单，也可以问老师）2学生探索练习，教师巡回指导。3学生演示，教师点拨。师：分别请每组第一位探索成功的同学展示他的探索成果。（将本组“小组学习评价表”粘贴到时黑板展示）4自主完善设计师：我的动画我作主，请同学们进一步设计完善你的动画网页动态组图翻播动画，锦上添花。,知识拓展,知识拓展：萤火虫的范围位置也这么小？,知识拓展：萤火虫的数量有多少？,知识拓展：萤火虫萤火虫的频率？,知识拓展：萤火虫状态有什么变化？,作品展示、互评,师：哪位同学有勇气把你亲手制作的动画展示给大家？这也是为你们小组赢得上镜率的机会。互评：说说你感觉满意的地方？不理想的地方是哪里？,5.2.9将Flash插入页面中,将文件“swfobject.js”和“expressInstall.swf”拷贝到网站的Scripts目录下。打开酒店查询的页面“Hotel.html”，在ID为“content_right”的Div标签上面，输入以下代码。这段代码的功能是调用swfojbect中的JavaScript语句，把名为showHotels的flash文件加载到ID为“showHotel”的Div中。swfobject.embedSWF(Scripts/showHotels.swf,showHotel,200,210,11.0.0,expressInstall.swf);,5.3产出物任务实训,（1）过程记录：学生分组讨论学习，根据认识了解Flash的设计和制作的学习目标，认真学习相关知识，并将学习的内容（知识要点）进行记录，同时也将学习中存在的问题和意见进行记录，填写在下面的表单里。（2）实践记录：使用AdobeFlash工具，制作一个旅游路线产品展示的flash，并交付SWF成品文件。,课堂小结,1.操作技能：脚本动画三步曲：创建“雪花原件”、明确帧的位置、输入脚本代码：onEnterFrame2.学习方法：集体的力量是无穷的。没有完美的个人，只有完美的团队。这节课同学们做得都不错，获得“最佳展示小组”的是_组，“优秀合作团队”是_组，祝贺他们。（将各组“小组学习评价表”粘贴到时黑板，集体公推）,巩固提升,填空题1、要构建Flash应用程序，通常需要执行下列基本步骤：_、_、排列元素、应用特殊效果、使用ActionScript控制行为、测试并发布应用程序。2、_是一种媒体资源，无需重新创建就可以在文档的任何位置重用。选择题1、Flash中用于存储和组织媒体元素和元件的部分是：（）A.舞台B.库C.工具D.属性2、