第五章 Flash 动画设计.ppt
《第五章 Flash 动画设计.ppt》由会员分享,可在线阅读,更多相关《第五章 Flash 动画设计.ppt(62页珍藏版)》请在沃文网上搜索。
1、第五章第五章 Flash Flash 动画设计动画设计第第第第5 5 5 5章章章章Flash Flash Flash Flash 动画设计动画设计动画设计动画设计第五章第五章 FlashFlash动画设计动画设计本章教学目的 掌握Flash 的基本操作 掌握Flash 基础绘图 熟练掌握元件和实例创建和编辑方法 熟练掌握简单动画的创建方法 掌握交互动画的创建方法第五章第五章 FlashFlash动画设计动画设计目录第一讲 Flash 概述与基础绘图第二讲 Flash简单动画制作第三讲 Flash交互动画制作 第五章第五章 FlashFlash动画设计动画设计第一讲Flash概述与基础绘图教学
2、内容教学内容5.1.1 Flash 8简介5.1.2 开始页5.1.3 Flash 8的工作窗口5.2.1 基础绘图5.2.2 时间轴5.2.3 元件与库5.2.4 创建文本与导入素材教学重点和难点教学重点和难点线条与图形的绘制与属性设置、时间轴的操作、元件的创建与实例化、文本的创建、导入素材第五章第五章 FlashFlash动画设计动画设计5.1Flash概述5.1.1 5.1.1 Flash 8Flash 8简介简介5.1.2 5.1.2 开始页开始页5.1.3 5.1.3 Flash 8Flash 8的工作窗口的工作窗口第五章第五章 FlashFlash动画设计动画设计 Flash 8是
3、由美国是由美国Macromedia公司于公司于2005年推出的一年推出的一款交互式矢量动画制作软件。可使用它来创建包含图形、动款交互式矢量动画制作软件。可使用它来创建包含图形、动画、声音、视频、演示文稿和包含丰富媒体的交互式矢量动画、声音、视频、演示文稿和包含丰富媒体的交互式矢量动画,这种文件占用存储空间非常小,便于网上传播。画,这种文件占用存储空间非常小,便于网上传播。Flash可以制作出一种扩展名为可以制作出一种扩展名为.SWf的动画文件,它可以的动画文件,它可以插入到网页中,也可以单独成为网页。插入到网页中,也可以单独成为网页。Flash与与Dreamweaver、Fireworks等软
4、件配合使用,可以快速制作等软件配合使用,可以快速制作精彩的网页、创建出有特色的网站。精彩的网页、创建出有特色的网站。Flash采用采用“流流”的播的播放形式,可以边下载边观看。这些都是它迅速广泛流行的重放形式,可以边下载边观看。这些都是它迅速广泛流行的重要原因。要原因。Flash制作的动画在安装了制作的动画在安装了Flash Player插件的浏插件的浏览器中才可以播放。览器中才可以播放。Flash可以在使用很小内存的情况下,可以在使用很小内存的情况下,实现高质量的矢量图形和交互式动画的制作实现高质量的矢量图形和交互式动画的制作。5.1.1Flash8简介第五章第五章 FlashFlash动画
5、设计动画设计5.1.2开始页列出了Flash最近打开过的项目,单击其中任何一个项目名称,即可快速调出相应的Flash文档。列出了可以创建的项目,单击“Flash文档”项目,即可新建一个普通的Flash文档,进入Flash8的工作环境。列出了一些Flash8提供的模板类型,单击其中一个模板类型的图标按钮或名称,即可弹出“从模板新建”对话框第五章第五章 FlashFlash动画设计动画设计5.1.3Flash8的工作窗口标题栏标题栏主工具栏主工具栏文档选项卡文档选项卡工具箱工具箱舞台工作区舞台工作区“动作动作”面板面板“属属性性”面面板板时间轴时间轴菜单栏菜单栏“库库”面面板板面板面板第五章第五章
6、 FlashFlash动画设计动画设计5.1.3Flash8的工作窗口1 1主工具栏主工具栏主工具栏主工具栏主工具栏有15个按钮,如图所示。主工具栏中各按钮的作用如表所示。将鼠标指针移到各按钮之上,会显示该按钮的中文名称。新建打开打印复制撤消对齐对象缩放重做平滑旋转与倾斜对齐保存剪切粘贴伸直2 2工具箱工具箱工具箱工具箱工具箱提供了用于图形绘制和图形编辑的各种工具。将鼠标指针移到各按钮之上,会显示该按钮的中文名称。其中各工具按钮的名称与作用如下表所示。第五章第五章 FlashFlash动画设计动画设计5.1.3Flash8的工作窗口第五章第五章 FlashFlash动画设计动画设计5.1.3F
7、lash8的工作窗口3 3舞台工作区舞台工作区舞台工作区舞台工作区在创建或编辑一段Flash影片时离不开舞台,像导演指挥演员演戏一样,要给演员一个排练演出的场所,这在Flash中被称为舞台。新建一个Flash文档时,窗口中有一个白色的矩形区域,就是舞台工作区,只有在舞台工作区内的对象才能够作为影片输出和打印。舞台工作区是绘制图形和输入文字、编辑图形、文字和图像等对象的矩形区域,也是创建动画的区域。图形、文字、图像画面和动画等对象的展示也可以在舞台工作区中进行。第五章第五章 FlashFlash动画设计动画设计【任务5-1-1】新建文档与舞台属性的设置【操作要求】在D:rootunit5文件夹中
8、新建文件夹,名称为y5-01。新建一个帧频为20fps,影片大小为400像素300像素,背景色为黄色(FFFF00)的影片源文件,以y5-01.fla为文件名保存到D:rootunit5y5-01文件夹下。第五章第五章 FlashFlash动画设计动画设计5.2Flash的基本操作5.2.1 基础绘图5.2.2 时间轴5.2.3 元件与库5.2.4 创建文本与导入素材5.2.5 动作补间动画5.2.6 形状补间动画5.2.7 路径动画第五章第五章 FlashFlash动画设计动画设计5.2.1 基础绘图基础绘图Flash除了具备优秀的动画处理功能外,它还具备出色的矢量绘图功能。1 1绘制线条绘
9、制线条绘制线条绘制线条绘制线条可以使用“线条工具”按钮、“钢笔工具”按钮、“铅笔工具”按钮等。第五章第五章 FlashFlash动画设计动画设计【任务5-1-2】绘制线条【操作要求】在D:rootunit5y5-01文件夹下的y5-01.fla文件的舞台工作区中绘制一条直线,一条曲线。直线要求水平,长度为175像素、笔触颜色为黑色(000000)、笔触样式为“极细”;曲线为上弦弧线,线粗为2个像素。第五章第五章 FlashFlash动画设计动画设计5.2.1 基础绘图基础绘图2 2绘制图形绘制图形绘制图形绘制图形通常在使用椭圆、矩形和多角星形工具绘图前应先设置笔触属性。使用铅笔和线条工具绘制出
10、的是一个对象,而用椭圆、矩形和多角星形工具绘制出的有填充的图形由两个对象组成:一个是轮廓线,另一个是填充。这两个对象是独立的,可以分离,分别操作。例如画完一个多边形图形后,单击工具箱中的“选择工具”按钮,再将鼠标指针移到椭圆内,单击选中填充后拖动鼠标,即可把填充移开,如图所示。在对象绘制模式下绘制的图形,自动组合成一个整体,不会出现上述现象,当选中对象时,对象的四周出现一个蓝色的框。在工具箱的选项栏中单击“对象绘制”按钮如右图所示,即可进入对象绘制模式。对象绘制模式对象绘制模式第五章第五章 FlashFlash动画设计动画设计【任务5-1-3】绘制基本图形【操作要求】在D:rootunit5y
11、5-01文件夹下y5-01.fla文件的舞台工作区中添加如图5-2-9所示图形,并以原文件名进行保存。第五章第五章 FlashFlash动画设计动画设计5.2.2 时间轴时间轴时间轴又称时间线,用来贯穿和组织每个影片内容,而使之成为一个完整流畅的动画。与电影中的胶片一样,Flash影片播放的基本单位叫做帧。一帧就是一幅画面,一帧帧画面按一定的速率播放,就形成动画。影片中的图层就像很多层叠在一起包含图像的透明玻璃一样,每个图层都包含一个或多个显示在舞台中的不同图像,而一部复杂的Flash影片可以包含各种功能不同的图层。时间轴的具体工作就是将这些层和层中的帧进行有机的组合,进而控制影片的正常播放。
12、帧频在Flash动画中用来衡量动画播放的速度,通常以每秒播放的帧数为单位(fps,帧/秒)。Flash8的默认帧率是12帧/秒。第五章第五章 FlashFlash动画设计动画设计【任务5-2-1】图层操作【操作要求】在D:rootunit5文件夹中新建文件夹,名称为y5-02。新建一个帧频为20fps,影片大小为400像素300像素,背景色为白色(FFFFFF)的影片源文件,在时间轴中添加3个图层,从上到下分别命名为“按钮”、“小球”、“背景”,并将“背景”层进行锁定,“小球”层进行隐藏,以y5-02.fla为文件名保存到D:rootunit5y5-02文件夹下。第五章第五章 FlashFla
13、sh动画设计动画设计5.2.3 元件与库元件与库使用Flash制作动画影片的一般流程是先制作动画中所需的各种元件,然后在场景中引用元件实例,并对实例化的元件进行适当的组织和编排,最终完成影片的制作。库用于存放元件,从外部导入的各种资源。合理地使用元件和库可以提高影片的制作效率。元件有三种,影片剪辑元件、图形元件、按钮元件。图形元件通常用来制作电影中的静态图形,也可制作动画,不具有交互性。影片剪辑元件用来制作独立于主时间轴的动画,具有交互性;影片剪辑实例在主时间轴只需一个关键帧就可以播放动画,而图形实例在主时间轴需要足够的帧才可以播放动画。按钮元件可以制作在影片中需要的按钮,按钮实例可以分配事件
14、和触发动作。第五章第五章 FlashFlash动画设计动画设计【任务5-2-2】制作元件【操作要求】在D:rootunit5y5-02文件夹下的y5-02.fla文件的舞台工作区中创建一个球形按钮和一个球状图形元件实例。按钮的“弹起”状态要求设置白色到墨绿色到淡绿色的放射状填充,在按钮的“指针经过”状态给球添加颜色为(FFFF00)、笔触样式为“极细”的轮廓线,在按钮的“按下”状态给球添加颜色为(FF0000)、笔触样式为“极细”的轮廓线。球状图形元件要求设置白色到橙色到淡黄色的放射状填充。第五章第五章 FlashFlash动画设计动画设计5.2.4 创建文本与导入素材创建文本与导入素材文字也
15、是影片中很重要的组成部分,一个完整而精彩的动画或多或少需要一定的文字来修饰,合理使用文本工具,可以增加Flash动画的整体完美效果,使动画显得更加丰富多彩。利用“文本工具”可以在Flash影片中添加各种文字,并肯还可以激活和交互。在Flash中创建的文本包括静态文本、动态文本、输入文本。第五章第五章 FlashFlash动画设计动画设计【任务5-3-1】创建文本【操作要求】在D:rootunit5文件夹中新建文件夹,名称为y5-03。建立如图5-2-35所示的界面,上面的两个白色的矩形框中可以输入加数,当点击“=”按钮后,可以在下面的矩形框得到结果。以y5-03.fla为文件名保存到D:roo
16、tunit5y5-03文件夹下。第五章第五章 FlashFlash动画设计动画设计【任务5-2-3】导入素材【操作要求】为D:rootunit5y5-02文件夹下的y5-02.fla文件添加背景图片“back.bmp”,为“按钮”的“指针经过”、“按下”帧分别添加音效“PlasticButton.wav”“PlasticClick.wav”第五章第五章 FlashFlash动画设计动画设计本讲小结5.1.1 Flash 8简介简介5.1.2 开始页开始页5.1.3 Flash 8的工作窗口的工作窗口5.2.1 基础绘图基础绘图5.2.2 时间轴时间轴5.2.3 元件与库元件与库5.2.4 创建
17、文本与导入素材创建文本与导入素材第五章第五章 FlashFlash动画设计动画设计上机作业1.【实战训练一】第13步骤2.【实战训练二】第12步骤第五章第五章 FlashFlash动画设计动画设计第二讲Flash简单动画制作教学内容教学内容5.2.5 动作补间动画5.2.6 形状补间动画5.2.7 路径动画教学重点和难点教学重点和难点动作补间动画的创建方法、形状补间动画的创建方法、路径动画的创建与控制方法第五章第五章 FlashFlash动画设计动画设计5.2.5 动作补间动画动作补间动画Flash具备非常强大的动画制作功能,用户只需通过更改时间轴每一帧中的内容,就可以在舞台中创作出移动对象、
18、旋转、更改颜色、淡入淡出或更改对象形状的效果。这些更改方式即可以单独进行,也可以相互协调,结合使用。动画可以分成逐帧动画和补间动画两类。逐帧动画也叫“帧-帧动画”,它需要定义每一帧的内容,以完成动画的创建。在补间动画中,用户只需要创建起始帧和终止帧的内容,中间的帧由计算机来创建。在Flash中,补间动画又分为动作补间动画和形状补间动画。第五章第五章 FlashFlash动画设计动画设计【任务5-2-4】制作动作补间动画【操作要求】在D:rootunit5y5-02文件夹下的y5-02.fla中,制作“动画”影片剪辑元件,该元件的动画方式为,橙色小球从右往左运动,且运动速度逐渐减慢。第五章第五章
19、 FlashFlash动画设计动画设计5.2.6 形状补间动画形状补间动画通过形状补间可以实现一幅图形变为另一幅图形的效果。形状补间和运动补间主要区别在于,形状补间不能应用到实例、群组等组合的对象上,必须是被打散的形状图形之间才能产生补间。第五章第五章 FlashFlash动画设计动画设计【任务5-4】创建形状补间动画【操作要求】在D:rootunit5文件夹中新建文件夹,名称为y5-04。创建文字的变形动画,背景图上一个白色的文本“FLASH”,红色的文字在变形,“F”逐渐变为“L”,“L”逐渐变为“A”,“A”逐渐变为“S”,“S”逐渐变为“H”,效果截图如图5-2-42所示。制作完成后以
20、y5-04.fla为文件名保存到D:rootunit5y5-04文件夹下。第五章第五章 FlashFlash动画设计动画设计5.2.7 路径动画路径动画运动引导层是Flash中的一种特殊图层。在运动引导层中,用户可以绘制一条线作为路径,引导对象沿路径运动。第五章第五章 FlashFlash动画设计动画设计【任务5-2-5】制作路径动画【操作要求】打开D:rootunit5y5-02文件夹下的y5-02.fla文件,给“动画”影片剪辑元件中的小球添加一条棱形路径,使小球沿棱形路径做顺时针运动。第五章第五章 FlashFlash动画设计动画设计本讲小结5.2.5 动作补间动画动作补间动画5.2.6
21、 形状补间动画形状补间动画5.2.7 路径动画路径动画第五章第五章 FlashFlash动画设计动画设计上机作业1.【实战训练一】完成余下步骤2.【实战训练二】完成余下步骤3.【拓展实战一】动作补间动画的制作14.【拓展实战一】动作补间动画的制作2第五章第五章 FlashFlash动画设计动画设计第三讲Flash交互动画制作教学内容教学内容5.3.1 事件与动作5.3.2 基本语法与层次结构5.3.3 常用函数5.4 导出影片教学重点和难点教学重点和难点事件与动作的概念、帧,按钮,影片剪辑的事件与动作、常用函数的功能与用法、基本语法与层次结构、交互动画的制作方法、导出影片的方法第五章第五章 F
22、lashFlash动画设计动画设计5.3Flash交互界面开发交互界面开发5.3.1 5.3.1 事件与动作事件与动作5.3.2 5.3.2 基本语法与层次结构基本语法与层次结构5.3.3 5.3.3 常用函数常用函数第五章第五章 FlashFlash动画设计动画设计 交互式动画的一个行为包含了两个内容,一个是事件,交互式动画的一个行为包含了两个内容,一个是事件,一个是事件产生时所执行的动作。事件是触发动作的信号,一个是事件产生时所执行的动作。事件是触发动作的信号,动作是事件的结果。在动作是事件的结果。在Flash 8中,播放指针到达某个定的中,播放指针到达某个定的关键帧、用户单击按钮或影片剪
23、辑元件、用户按下了键盘按关键帧、用户单击按钮或影片剪辑元件、用户按下了键盘按键等操作,都可以触发事件。键等操作,都可以触发事件。动作可以有很多,可由读者发挥创造。可以认为动作是由一动作可以有很多,可由读者发挥创造。可以认为动作是由一系列的语句组成的程序。最简单的动作是使播放的动画停止系列的语句组成的程序。最简单的动作是使播放的动画停止播放,使停止播放的动画重新播放等播放,使停止播放的动画重新播放等。事件的设置与动作的设计是通过事件的设置与动作的设计是通过“动作动作”面板来完成的面板来完成的。5.3.1事件与动作第五章第五章 FlashFlash动画设计动画设计5.3.1事件与动作1 1帧的事件
24、与动作帧的事件与动作帧的事件与动作帧的事件与动作帧事件就是当影片或影片剪辑播放到某一帧时的事件。第五章第五章 FlashFlash动画设计动画设计5.3.1事件与动作2 2按钮和按键的事件与动作按钮和按键的事件与动作按钮和按键的事件与动作按钮和按键的事件与动作按钮和按键事件(“on”句柄)可以设置以下8种不同的事件:(1)press(按):当鼠标指针移到按钮之上,并单击鼠标左键时触发事件。(2)release(释放):当鼠标指针移到按钮之上,单击鼠标左键,松开鼠标左键时触发事件。(3)releaseOutside(外部释放):当鼠标指针移到按钮之上,并单击鼠标左键,不松开鼠标左键,将鼠标指针拖
- 1.请仔细阅读文档,确保文档完整性,对于不预览、不比对内容而直接下载带来的问题本站不予受理。
- 2.下载的文档,不会出现我们的网址水印。
- 3、该文档所得收入(下载+内容+预览)归上传者、原创作者;如果您是本文档原作者,请点此认领!既往收益都归您。
下载文档到电脑,查找使用更方便
免费下载 | 加入VIP,下载更划算! |
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第五章 Flash 动画设计 第五