中文FlashCS网页动画设计教程.pptx

会计学1中文中文Flash CS网页网页(wn y)动画设计教程动画设计教程第一页，共25页。21.1 Flash与动画与动画n nFlash CS6Flash CS6是是AdobeAdobe公司目前推出的公司目前推出的FlashFlash官方最新版本，是官方最新版本，是动画制作与特效制作最优秀的软件，使用该软件可以创建动画制作与特效制作最优秀的软件，使用该软件可以创建从简单的动画到复杂的交互式从简单的动画到复杂的交互式WebWeb应用程序之间的任何作应用程序之间的任何作品。品。n n用户可以使用用户可以使用FlashFlash软件，将零散软件，将零散(ln(ln s s n)n)的图片、声音和的图片、声音和视频等元素组合在一起，为其添加各种丰富多彩的特效，视频等元素组合在一起，为其添加各种丰富多彩的特效，制作出属于自己的制作出属于自己的FlashFlash动画。动画。第1页/共25页第二页，共25页。3简介简介(jin ji)n nAdobe Flash Professional CS6Adobe Flash Professional CS6为创建数字动画、交互式为创建数字动画、交互式WebWeb站点、桌面应用程序以及手机应用程序提站点、桌面应用程序以及手机应用程序提供了功能全面的创作和编辑环境。可以在供了功能全面的创作和编辑环境。可以在FlashFlash中创建原始内容或者从其他中创建原始内容或者从其他AdobeAdobe应用程序应用程序(如如PhotoshopPhotoshop或或Illustrator)Illustrator)导入素材，快速设计简单的动画，以及使用导入素材，快速设计简单的动画，以及使用Adobe AcitonScript 3.0Adobe AcitonScript 3.0开发高级的开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的内容。容。FlashFlash可以制作简单的动画、视频内容、复杂的演示文稿和应用程序以及介于它们之间的任何可以制作简单的动画、视频内容、复杂的演示文稿和应用程序以及介于它们之间的任何内容。通常，使用内容。通常，使用FlashFlash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画片断，创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画片断，也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的FlashFlash应用程序。应用程序。n nFlashFlash特别适合创建通过特别适合创建通过InternetInternet提供的内容，因为它的文件提供的内容，因为它的文件(wnjin)(wnjin)非常小。非常小。FlashFlash是通过广泛使用是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。一组单独的数据来表示。n n要在要在FlashFlash中构建应用程序，可以使用中构建应用程序，可以使用FlashFlash绘图工具创建图形，并将其他媒体元素导入绘图工具创建图形，并将其他媒体元素导入FlashFlash文档。文档。然后定义如何以及何时使用各个元素来创建设想中的应用程序。然后定义如何以及何时使用各个元素来创建设想中的应用程序。n nFlashFlash是一个非常优秀的矢量动画制作软件，它以流式控制技术和矢量技术为核心，制作的动画具是一个非常优秀的矢量动画制作软件，它以流式控制技术和矢量技术为核心，制作的动画具有短小精悍的特点，所以被广泛应用于网页动画的设计中，成为当前网页动画设计最为流行的软有短小精悍的特点，所以被广泛应用于网页动画的设计中，成为当前网页动画设计最为流行的软件之一。件之一。第2页/共25页第三页，共25页。4动画简介动画简介(jin ji)n n传统的动画是通过把人或物的表情传统的动画是通过把人或物的表情(bi(bi oqng)oqng)、动作等分段画成许多、动作等分段画成许多幅画，再用摄影机连续拍摄成一系列画面，然后连续播放这些画面就幅画，再用摄影机连续拍摄成一系列画面，然后连续播放这些画面就形成了动画。形成了动画。n n用用FlashFlash等软件制作的动画属于二维动画，如七龙珠、灌篮高手等软件制作的动画属于二维动画，如七龙珠、灌篮高手、小鲤鱼历险记、喜洋洋与灰太狼等；而三维动画通常是、小鲤鱼历险记、喜洋洋与灰太狼等；而三维动画通常是用用MayaMaya或或3ds max3ds max制作而成的，如功夫熊猫、玩具总动员、制作而成的，如功夫熊猫、玩具总动员、海底总动员、玩具之家、秦时明月、魔比斯环等。海底总动员、玩具之家、秦时明月、魔比斯环等。n n电脑动画由于应用领域的不同，其动画文件的存储格式也不同，其中电脑动画由于应用领域的不同，其动画文件的存储格式也不同，其中GIFGIF和和SWFSWF是最常用到的动画文件格式。下面介绍这两种常用格式。是最常用到的动画文件格式。下面介绍这两种常用格式。n nGIFGIF动画格式。动画格式。n nSWF SWF 动画格式。动画格式。第3页/共25页第四页，共25页。51.2 Flash的功能的功能(gngnng)和特和特点点n n在在FlashFlash诞生之前，因特网上使用的大多是诞生之前，因特网上使用的大多是GIFGIF动画或动画或JavaJava动画。动画。GIFGIF动动画文件的尺寸较大，画文件的尺寸较大，JavaJava动画则要求制作者具有较高的编程能力。而动画则要求制作者具有较高的编程能力。而AdobeAdobe公司推出的公司推出的FlashFlash软件则提供了创作网络动画的新途径。软件则提供了创作网络动画的新途径。n n目前目前(mqin)(mqin)，许多网站都采用，许多网站都采用FlashFlash技术来制作网页动画，许多电视技术来制作网页动画，许多电视广告、电脑游戏的片头和片尾也都使用广告、电脑游戏的片头和片尾也都使用FlashFlash软件来制作。软件来制作。FlashFlash软件还软件还广泛应用于交互式软件开发、产品展示以及教学等方面。广泛应用于交互式软件开发、产品展示以及教学等方面。n nFlashFlash软件可以直接输出软件可以直接输出WindowsWindows可执行文件可执行文件(.exe(.exe格式格式)，还可以制作，还可以制作出精致的出精致的FlashFlash游戏。使用游戏。使用FlashFlash插件，能把插件，能把FlashFlash动画直接嵌入动画直接嵌入Visual Visual BasicBasic、Visual C+Visual C+所生成的所生成的WindowsWindows可执行文件中。在专业的多媒体可执行文件中。在专业的多媒体制作软件制作软件AuthorwareAuthorware和和DirectorDirector中，也可以导入中，也可以导入FlashFlash动画。动画。第4页/共25页第五页，共25页。6的优点的优点(yudin)n nFlash是一款非常优秀的矢量动画制作软件，之所以被许多人广泛使用，是由于其具有以下(yxi)优点。n n(1)文件体积小。n n(2)Flash动画是一种流式动画。n n(3)支持插件播放。n n(4)支持事件响应和交互功能。n n(5)可以输出多种格式的文件。n n(6)创建和编辑Flash动画的方法简单易学。第5页/共25页第六页，共25页。7的新增功能的新增功能(gngnng)n nFlash CS6 Flash CS6 主要的新增功能如下。主要的新增功能如下。n n(1)(1)设计出充满表现力的内容。设计出充满表现力的内容。n n(2)HTML(2)HTML 的新支持。的新支持。n n(3)(3)生成生成 Sprite Sprite 表单。表单。n n(4)(4)锁定锁定 3D 3D 场景。场景。n n(5)(5)高级绘制工具。高级绘制工具。n n(6)(6)行业领先的动画工具。行业领先的动画工具。n n(7)(7)高级文本引擎。高级文本引擎。n n(8)Creative Suite(8)Creative Suite 集成。集成。n n(9)(9)专业视频工具。专业视频工具。n n(10)(10)滤镜和混合效果。滤镜和混合效果。n n(11)(11)基于对象的动画。基于对象的动画。n n(12)3D(12)3D 转换。转换。n n(13)(13)创建一次，即可随处部署创建一次，即可随处部署(b sh(b sh)。n n(14)(14)广泛的平台和设备支持。广泛的平台和设备支持。n n(15)(15)高效的移动设备开发流程。高效的移动设备开发流程。n n(16)(16)创建预先封装的创建预先封装的 Adobe AIR Adobe AIR 应用程序。应用程序。n n(17)(17)在调整舞台大小时缩放内容。在调整舞台大小时缩放内容。第6页/共25页第七页，共25页。81.3 Flash动画的学习动画的学习(xux)方法方法n n在学习在学习FlashFlash动画的制作过程中，有很多人都认为动画的制作过程中，有很多人都认为FlashFlash动画很不好学，其实，动画很不好学，其实，FlashFlash属于一款简单易学的动画设计软件，任何人都可以轻松上手，只是很多属于一款简单易学的动画设计软件，任何人都可以轻松上手，只是很多人在学习的时候没有掌握好要领。在这里，为大家推荐一套学习人在学习的时候没有掌握好要领。在这里，为大家推荐一套学习FlashFlash动画的动画的方法。方法。n n(1)(1)首先首先(sh(sh uxin)uxin)认识认识FlashFlash动画的应用范围，确定自己学习动画的应用范围，确定自己学习FlashFlash动画的方动画的方向。向。n n(2)(2)掌握绘制与编辑图形的方法。掌握绘制与编辑图形的方法。n n(3)(3)系统掌握与系统掌握与FlashFlash有关的基础知识。有关的基础知识。n n(4)(4)掌握各类掌握各类FlashFlash动画的制作原理。动画的制作原理。n n(5)(5)多看、多练、多思考。多看一些别人制作好的作品，再自己实际动手做多看、多练、多思考。多看一些别人制作好的作品，再自己实际动手做一做。一做。n n另外，还需要掌握一些美术与音频、视频处理的相关知识。另外，还需要掌握一些美术与音频、视频处理的相关知识。第7页/共25页第八页，共25页。91.4 熟悉熟悉Flash CS6的工作的工作(gngzu)界面界面n n成功启动成功启动Flash CS6Flash CS6后便会进入初后便会进入初始用户界面，如图始用户界面，如图1-11-1所示。在所示。在“开始页开始页”界面可以打开最近使用界面可以打开最近使用过的项目或者打开保存在本地磁过的项目或者打开保存在本地磁盘盘(c pn)(c pn)等地的项目，也可以创等地的项目，也可以创建新的项目。另外，建新的项目。另外，Flash CS6Flash CS6还还提供了非常多的模板，可以通过提供了非常多的模板，可以通过模板创建项目。如图模板创建项目。如图1-21-2所示为所示为Flash CS6Flash CS6的工作界面，主要包括的工作界面，主要包括标题栏、菜单栏、主工具栏、工标题栏、菜单栏、主工具栏、工具箱、场景和舞台、时间轴面板、具箱、场景和舞台、时间轴面板、属性面板及多个控制面板。属性面板及多个控制面板。第8页/共25页第九页，共25页。10标题栏标题栏n nFlash CS6Flash CS6的标题栏右侧有的标题栏右侧有“搜索搜索”栏及最小化、栏及最小化、还原还原 最大化、关闭按钮，如图最大化、关闭按钮，如图1-31-3所示。所示。n n在在“搜索搜索”栏可以输入要搜索的文件栏可以输入要搜索的文件(wnjin)(wnjin)，使用最小化、还原，使用最小化、还原 最大化、关闭按钮可最大化、关闭按钮可以实现窗口的最小化、还原以实现窗口的最小化、还原 最大化、关闭最大化、关闭操作。操作。第9页/共25页第十页，共25页。11菜单栏菜单栏n nFlash CS6的菜单栏中包括11项菜单，它们是文件菜单、编辑(binj)菜单、视图菜单、插入菜单、修改菜单、文本菜单、命令菜单、控制菜单、调试菜单、窗口菜单和帮助菜单，如图1-4所示。n n这些菜单集中了制作Flash动画的大部分操作命令。第10页/共25页第十一页，共25页。12主工具栏主工具栏n nFlash将一些常用菜单命令以图标按钮的形式组织在一起，放置在主工具栏中。当鼠标指向某个图标按钮时，在其下方会出现该按钮的功能说明，通过单击按钮即可执行相应的命令，如图1-5所示。主工具栏通常位于界面(jimin)顶部，可以通过选择“窗口”|“工具栏”|“主工具栏”菜单来显示或隐藏，还可以通过拖动按钮外的空白区域来改变主工具栏的位置。n n如图1-5所示。第11页/共25页第十二页，共25页。13工具箱工具箱n n在默认状态下，工具箱位于在默认状态下，工具箱位于Flash CS6Flash CS6工作界面工作界面的左侧，可以使用的左侧，可以使用(sh(sh yng)yng)鼠标拖动来改变鼠标拖动来改变它的位置。如图它的位置。如图1-61-6所示，工具箱中的工具又所示，工具箱中的工具又可分为以下可分为以下4 4部分。部分。n n“工具工具”区域：包含绘图、填充、编辑工具。区域：包含绘图、填充、编辑工具。n n“查看查看”区域：包含区域：包含“缩放缩放”和和“手形手形”工具，工具，它们是在应用程序窗口内进行缩放和移动的工它们是在应用程序窗口内进行缩放和移动的工具。具。n n“颜色颜色”区域：用于设置笔触颜色和填充颜色。区域：用于设置笔触颜色和填充颜色。n n“选项选项”区域：显示当前所选工具的功能和属区域：显示当前所选工具的功能和属性。性。第12页/共25页第十三页，共25页。14时间轴面板时间轴面板(min bn)n n时间轴面板包括两部分，即图层区域和时间线区域，如图1-7所示，用于管理动画中的图层和帧。通过选择“窗口”|“时间轴”菜单，可以显示(xinsh)或隐藏时间轴面板。第13页/共25页第十四页，共25页。15场景场景(chng jng)与舞台与舞台n n在当前界面中，用于设置动画内容的整个区域(qy)称为“场景”。但最终动画会显示场景中矩形区域(qy)内的内容，这个区域(qy)被称为“舞台”。舞台之外的灰色区域(qy)则称为“工作区”。场景是对影片中各对象进行编辑、修改的场所。第14页/共25页第十五页，共25页。16属性属性(shxng)面板面板n n属性面板根据当前选定内容的不同，属性面板根据当前选定内容的不同，可以显示当前文档、文本、元件、形可以显示当前文档、文本、元件、形状、位图、视频、群组、帧或工具的状、位图、视频、群组、帧或工具的信息和设置。当选定了两个或多个不信息和设置。当选定了两个或多个不同类型的对象时，它会显示选定对象同类型的对象时，它会显示选定对象的总数。属性面板会根据用户选择对的总数。属性面板会根据用户选择对象的不同而变化，以反映当前对象的象的不同而变化，以反映当前对象的各种属性，如图各种属性，如图1-81-8所示。所示。n n可以查看舞台或时间轴上当前选定项可以查看舞台或时间轴上当前选定项的常用属性，并对对象的相应属性进的常用属性，并对对象的相应属性进行设置。通过行设置。通过“窗口窗口”|“”|“属性属性”菜菜单单(ci dn)(ci dn)可以实现属性面板的显示可以实现属性面板的显示或隐藏操作。或隐藏操作。第15页/共25页第十六页，共25页。17浮动浮动(fdng)控制面板控制面板n n浮动控制面板位于工作界面的右侧，它们可以单独拖动出浮动控制面板位于工作界面的右侧，它们可以单独拖动出来，还可以收缩起来，以节省屏幕的空间。来，还可以收缩起来，以节省屏幕的空间。n n浮动控制面板可以帮助用户预览、组织和改变文档中的元浮动控制面板可以帮助用户预览、组织和改变文档中的元素，利用面板中的可用选项可控制元件、实例素，利用面板中的可用选项可控制元件、实例(shl)(shl)、颜色、文字、帧及其他元素的特征。通过颜色、文字、帧及其他元素的特征。通过“窗口窗口”菜单的菜单的下拉列表中可以显示或隐藏需要的面板。下拉列表中可以显示或隐藏需要的面板。第16页/共25页第十七页，共25页。181.5 Flash 文档文档n n在Flash中，可以创建新文档或打开以前保存的文档，并可以使用“属性”面板或在“文档属性”对话框中来设置新文档或现有文档的大小、帧频(zhn pn)、背景颜色和其他属性。第17页/共25页第十八页，共25页。19创建创建(chungjin)Flash文档文档n n创建(chungjin)文档的方式有以下几种。n n使用“开始”页创建(chungjin)新文档。n n使用“文件”|“新建”菜单命令，打开“新建文档”对话框，在“常规”选项卡上选择各种不同的Flash文档类型，然后单击“确定”按钮。n n单击主工具栏中的“新建”按钮，可以创建(chungjin)新的Flash文档。第18页/共25页第十九页，共25页。20打开打开(d ki)Flash文档文档n n打开打开FlashFlash文档的方式有以下几种文档的方式有以下几种(j(j zh zh n n)。n n使用使用“开始开始”页打开页打开FlashFlash文档。文档。n n使用使用“文件文件”|“”|“打开打开”菜单命令，打开菜单命令，打开“打开打开”对话框，在打开对话框中定位文件所对话框，在打开对话框中定位文件所在的路径并选择文件，然后单击在的路径并选择文件，然后单击“打开打开”按按钮。钮。n n单击主工具栏中的单击主工具栏中的“打开打开”按钮，打开按钮，打开“打打开开”对话框，在打开对话框中定位文件所在对话框，在打开对话框中定位文件所在的路径并选择文件，然后单击的路径并选择文件，然后单击“打开打开”按钮。按钮。第19页/共25页第二十页，共25页。21设置设置(shzh)文档属性文档属性n n创建新文档或打开现有文档后，可以根据需要设置或修改文档的相关属性。文档的属性包括大小(尺寸)、背景颜色、帧频等。n n设置文档属性的方式如下。n n使用(shyng)“属性”面板设置文档属性。n n右击舞台或工作区，在弹出的快捷菜单中设置文档属性。第20页/共25页第二十一页，共25页。22保存保存(bocn)Flash文档文档nFlash文档创建完成后，就可以将它保存(bocn)，通过“文件”|“保存(bocn)”菜单命令或者“文件”|“另存为”菜单命令都可以进行保存(bocn)。第21页/共25页第二十二页，共25页。231.6 1.6 本章实例本章实例本章实例本章实例(shl)(shl)新建名为新建名为新建名为新建名为“第一章示例第一章示例第一章示例第一章示例”的的的的FlashFlash文档文档文档文档n n1 1主要目的主要目的n n练习新建练习新建FlashFlash文档，并更改文档属性设置，最后完成文文档，并更改文档属性设置，最后完成文档的保存档的保存(b(b ocn)ocn)操作。本例新建操作。本例新建“第一章示例第一章示例”文档，文档，将其文档大小设置为将其文档大小设置为300300像素像素100100像素，背景颜色设置像素，背景颜色设置为红色。为红色。n n2 2上机准备上机准备n n(1)(1)熟练掌握新建熟练掌握新建FlashFlash文档的操作。文档的操作。n n(2)(2)掌握文档属性的设置方法。掌握文档属性的设置方法。n n(3)(3)掌握文档的保存掌握文档的保存(b(b ocn)ocn)方法。方法。第22页/共25页第二十三页，共25页。241.6 1.6 本章实例本章实例本章实例本章实例(shl)(shl)新建名为新建名为新建名为新建名为“第一章示例第一章示例第一章示例第一章示例”的的的的FlashFlash文档文档文档文档n n3操作步骤n n最终(zu zhn)的效果如图1-22所示。第23页/共25页第二十四页，共25页。251.7 课课 后后 练练 习习n1.选择题n2.填空题n3.上机操作题n参见(cnjin)教材P16第24页/共25页第二十五页，共25页。