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