《网页设计与制作》课件第3章网站动画设计与制作

第3章网站动画设计与制作学习目标：了解动画制作的基础知识掌握Flash的操作流程掌握Flash基本动画制作主要内容3.1Flash动画制作基础知识3.2动画制作工具简介3.3创建各类Flash动画实例3.4网站中常见的Flash动画设计3.1Flash动画制作基础知识3.1.1Flash动画的格式

Flash动画源文件格式为*.fla，这种类型的文件只能在Flash软件中打开。可以在Flash软件中打开该类型文件，再导出成Swf格式文件。Swf文件是Flash源文件的压缩版本，可以在浏览器中播放，也可以在Dreamweaver中预览。3.1Flash动画制作基础知识3.1.2舞台和工作区

舞台是绘制图形、编辑图形的矩形区域，也是创建动画的区域。在制作动画的过程中，放置在舞台中的内容将体现在最终的动画效果中。舞台的默认颜色是白色，尺寸为550×400像素。

工作区是环绕舞台周围的灰色区域。在制作动画的过程中，制作者可以放置暂时不参与播放的内容，这并不影响舞台动画的播放内容，当需要播放工作中的内容时，只要将其移入舞台中即可。3.1Flash动画制作基础知识3.1.3元件与实例1．元件与实例

元件是一种存放在库中的可反复取用的图形、动画、按钮和音频。元件的类型有图形、影片、按钮三种。（1）图形。可反复取用的图片，一般只含有一帧静止图片，也可以用来制作小动画，但在场景中播放时必须给与足够帧数。和影片剪辑的区别在于它可以在场景中直接预览，而影片剪辑必须在导出影片中预览。不能对图形元件添加交互行为和声音控制。（2）按钮。用于创建动画的交互控制按钮。经常和影片剪辑搭配使用，做出特效的按钮动画。按钮元件可以响应事件，因此可以给按钮添加交互动作。3.1Flash动画制作基础知识（3）影片剪辑。可以反复取用的一段小动画，能够独立于主时间轴进行播放。可以用ActionScript语言进行控制，实现复杂的动画效果。2．创建元件创建元件的方法比较多，下面介绍常用的三种方法。选中场景中的对象，按F8键转换为元件；按Ctrl+F8创建元件；从“公用库”中选中元件拖动到当前文档的“库”面板中。3.1Flash动画制作基础知识3.1.4帧的类型与状态1．关键帧

添加对象的关键帧在时间轴上是一个黑色实心的圆点。没有添加任何对象的关键帧在时间轴上是一个空心的圆点，又称为空白关键帧。2．普通帧

普通帧的作用是延伸前一个关键帧上的内容。3．过渡帧

在定义了Flash的起始关键帧和终结关键帧之后，在起始和终结关键帧之内的帧被称为过渡帧。当鼠标单击在过渡帧上时，工作区将预览这一帧的动画情况。3.1Flash动画制作基础知识普通帧关键帧过渡帧空白关键帧帧的类型与状态3.1Flash动画制作基础知识3.1.5时间轴时间轴是用于组织不同层和不同帧的面板，水平的时间轴代表动画的不同阶段，连续播放就产生了动画。时间轴上的主要部件有帧、播放头、状态栏和标尺等，如图所示。图层状态栏播放头帧标尺时间轴3.1Flash动画制作基础知识3.1.6图层图层用于有效的组织动画元素，使元素之间避免相互干扰，如图所示。图层类型3.1Flash动画制作基础知识1.图层的分类（1）普通层。（2）引导层。（3）遮罩层。2.图层的操作 （1）插入图层。（2）改变图层的属性。“图层的属性”对话框3.1Flash动画制作基础知识（3）插入图层文件夹。（4）删除图层。（5）图层的显示或隐藏。（6）图层的锁定。主要内容3.1Flash动画制作基础知识3.2动画制作工具简介3.3创建各类Flash动画实例3.4网站中常见的Flash动画设计3.2动画制作工具简介3.2.1Flash的工作界面1．启动界面在启动FlashCS4时，出现“启动”界面，通过“启动”界面用户可以快速完成打开、新建等操作，如图所示。Flash的启动界面3.2动画制作工具简介2．操作界面单击启动界面中“新建”栏中的某一项，将打开Flash主界面并新建一个Flash文档。软件界面如图所示。3.2动画制作工具简介3．工具箱3.2动画制作工具简介3.2.2Flash的基本操作

对于Flash文档编辑和操作主要包括：新建文档、打开文档、保存文档、发布影片等。1．新建文档新建Flash文档有下面几种方法：（1）启动Flash时，在“启动”界面中单击创建新项目中的“Flash文档”选项。（2）执行“文件”|“新建”命令。（3）按Ctrl+N组合键。3.2动画制作工具简介2．打开文档打开Flash文档有下面几种方法：（1）单击启动界面中最近打开项目中的某个文档或“打开”项。（2）执行“文件”|“打开”命令。（3）按Ctrl+O组合键。3．保存文档保存Flash文档有下面几种方法：（1）执行“文件”|“保存”命令。（2）按Ctrl+S组合键。3.2动画制作工具简介4．发布影片发布和测试Flash文档时，常用的方法有以下三种。（1）执行“控制”|“测试影片”命令，自动生成一个与Flash文件同名的影片，文件扩展名为.swf，并且在与Flash文件相同的文件夹。（2）执行“文件”|“导出”|“导出影片”命令，弹出“导出影片”对话框。在对话框中选择存储路径，单击保存类型下拉列表，选择文件格式，命名文件，单击【保存】按钮，如图所示。3.2动画制作工具简介“导出影片”对话框3.2动画制作工具简介“发布设置”对话框（3）执行“文件”|“发布设置”命令，打开“发布设置”对话框，选择发布文件的格式及存储路径，然后单击【发布】按钮，如图所示。主要内容3.1Flash动画制作基础知识3.2动画制作工具简介3.3创建各类Flash动画实例3.4网站中常见的Flash动画设计3.3创建各类Flash动画实例如果把Flash制作动画按方法分类，可以大致分为两大类：一是利用逐帧动画、补间动画等基础动画知识来制作动画；二是利用基础动画知识配合动作脚本来生成动画。制作Flash动画时，通过对同一图层上的帧进行设置，可生成逐帧动画和补间动画两种最基本的动画类型。3.3创建各类Flash动画实例3.3.1创建逐帧动画实例逐帧动画又称为“帧—帧”动画，是指在连续的关键帧上绘制或放置不同的对象，当播放头在各关键帧之间快速移动的时候，利用人眼的“视觉暂留”现象，形成流畅的动画效果。在逐帧动画中，每一帧上的内容都需要用户自己创建或添加对象。逐帧动画适于制作十分细腻的动画，如走路、跑步、打斗、风吹等效果。在制作逐帧动画的时候要灵活应用，可以采取空1帧、空2帧的做法。3.3创建各类Flash动画实例【案例】小树成长（1）进入Flash制作界面后，单击属性面板中【编辑】按钮设置文档属性，这里设置舞台宽550px，高400px，帧频为6FPS，如图所示。文档属对话框3.3创建各类Flash动画实例（2）执行“文件”|“导入”|“导入到舞台”命令，导入主场景中图层1上一张雪景位图，在第50帧处按F5插入普通帧，如图所示。雪景位图3.3创建各类Flash动画实例（3）执行“窗口”|“对齐”命令，打开“对齐”面板，匹配位图和舞台同大小，如图所示。“对齐”面板调整元件大小3.3创建各类Flash动画实例（4）按F8键将图像转换成图形元件“背景”，如图所示。转换为“雪景”图形元件对话框3.3创建各类Flash动画实例（5）单击【确定】按钮后，舞台上的位图变成图形元件形式，如图所示。“背景”图形元件3.3创建各类Flash动画实例（6）用“刷子”工具画出整棵树的矢量图。选择“刷子”的大小、形状和颜色，这里选择褐色（50，0，0），形状和大小灵活应用，如左图所示。绘制完成的效果如右图所示。刷子工具设置绘制小树图3.3创建各类Flash动画实例（7）用“选择”工具选中树干，按F8键，转换成图形元件“小树”，如图所示。转换为“小树”图形元件对话框3.3创建各类Flash动画实例（8）单击【确定】按钮后，舞台上的矢量图变成图形元件形式，如图所示。“小树”图形元件3.3创建各类Flash动画制作实例（9）双击此图形元件，进入元件编辑区。在此图形元件内的图层1上，单击第2帧处，按F6插入关键帧，用橡皮擦草掉树干周围一圈，如图所示。第2帧处的“小树”矢量图形3.3创建各类Flash动画实例（10）在“小树”图形元件编辑区内，单击图层1第3帧处，按F6插入关键帧，用橡皮擦草掉树干周围一圈，如图所示。第3帧处的“小树”矢量图形3.3创建各类Flash动画实例（11）方法同上，直到第15帧处，如图所示。第15帧处的“小树”矢量图形3.3创建各类Flash动画实例（12）单击第1帧，按住shift键，单击第15帧，在选中的关键帧上单击右键，弹出快捷菜单，如图所示，执行“翻转帧”命令，“小树”成长的逐帧动画就完成了。执行“翻转帧”命令的逐帧动画3.3创建各类Flash动画实例（13）按Ctrl+F8创建图形元件“叶子”，如图所示。创建新元件“叶子”对话框3.3创建各类Flash动画实例（14）单击【确定】按钮，进入“叶子”图形元件的编辑区。选择“线条”工具绘制“叶子”图形元件，并用“任意变形”工具移动重心，如图所示。“线条”工具绘制叶子3.3创建各类Flash动画实例（15）在“叶子”图形元件编辑区内，在第2帧处按F6插入关键帧，用“任意变形”工具放大，如图所示。用“任意变形”工具放大3.3创建各类Flash动画实例（16）方法同步骤15，制作叶子发芽，打开“将所有图层显示为轮廓”图标和时间轴状态栏上“绘图纸外观轮廓”图标，如图所示。“叶子”图形元件的轮廓显示3.3创建各类Flash动画实例（17）在主场景中，单击“新建图层”图标建立“图层2”，并在“图层2”名称上双击，给“图层2”重命名为“小树”，单击“小树”层，将“小树”图形元件动画拖入舞台，选中“小树”元件，弹出“属性”面板，向下拖动滚动条，在“循环”选项中选择“播放一次”，第一帧输入“1”，如图所示。将“小树”图形元件拖入舞台并在“属性”面板中设置3.3创建各类Flash动画实例（18）在主场景中，单击“新建图层”图标建立“图层3”，并在“图层3”名称上双击，给“图层3”重命名为“叶子”，在第16帧处按F6插入关键帧，单击第16帧，将“叶子”图形元件动画拖入舞台，选中“叶子”元件，设置如图所示。将“叶子”图形元件拖入舞台并在“属性”面板中进行设置3.3创建各类Flash动画实例（19）在该帧上复制“叶子”图形元件，树干左侧的“叶子”图形元件执行“修改”|“变形”|“水平翻转”命令，并用“任意变形”工具调整各个“叶子”图形元件如图所示。复制“叶子”图形元件并调整位置大小3.3创建各类Flash动画实例（20）执行“控制”|“测试影片”命令，测试影片，如图所示。测试影片3.3创建各类Flash动画实例3.3.2创建运动补间动画实例补间动画这一名称源自这种动画所涉及的动作特点以及动作的创建方式。术语“补间”是“补足区间”的简称。在Flash中只要制作动画对象的起始位置和结束位置，然后让Flash计算该对象的所有补足区间位置，就可以创建起始位置和结束位置之间的平滑动作。补间动画分为动作补间和形状补间动画两种。3.3创建各类Flash动画实例动作补间动画具有以下几个特点：（1） 构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图和组合等，但不能是形状。只有把形状“组合”或者转换成“元件”后，才可以创建动作补间动画。（2） 在两个关键帧之间创建动作补间动画后，两个关键帧之间的背景变为淡紫色，在起始帧和结束帧之间有一个长长的实线箭头。技术要点：补间动画只能在同一图层的两个关键帧之间创建，并且两个关键帧上必须是同一类型的对象。3.3创建各类Flash动画实例【案例】文字移动动画（1） 执行“文件”|“新建”命令，新建一个影片，保存为“文字漂移.fla”文件。（2） 在“属性”面板中设置舞台的宽度为776px，高度为90px。（3） 执行“文件”|“导入”|“导入到库”命令，导入所需的背景图像到库，按F8转换为名称为“背景图像”的图形元件，如图所示。“背景”元件3.3创建各类Flash动画实例（4） 选择“文本”工具，在工作区中输入“承德科技学院”，大小30pt，字母间距2，颜色为#666666，字体楷体。选择文本，按Ctrl+D再制一个文本，颜色改为#ff0066，调整两个对象的位置制作阴影文字效果。最后按F8转换成名称为“文字1”图形元件，如图所示。制作阴影文字3.3创建各类Flash动画实例（5） 在图层面板上，双击“图层1”，给“图层1”重命名为“背景”。把“背景图像”元件拖到场景中，调整好位置，在50帧处按F5插入普通帧，如图所示。“背景”元件拖入“背景”层3.3创建各类Flash动画实例（6） 单击【新建图层】按钮，新建图层2，重命名为“文字1”层。将第（4）步中制作的文字拖动到舞台的左边，在“文字1”层第30帧处插入关键帧，把文字元件移动到舞台中，点右键，在快捷菜单中选择“创建传统补间”，生成文字从场景外移动到场景内的动画，如图所示。“文字1”元件在舞台左边3.3创建各类Flash动画实例“文字1”元件移动到舞台中3.3创建各类Flash动画实例（7） 同样的方法制作后面的文字和logo标志的移动，完整的时间轴如图所示。影片的完整时间轴（8） 测试影片，如图所示。测试影片3.3创建各类Flash动画实例3.3.3创建形状补间动画实例形状补间动画具有以下几个特点：（1） 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，强调的是“形状”变化。（2） 形状补间动画只能针对分散的矢量图形。（3） 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的实线箭头。【案例】文字变形动画（1）执行“文件”|“新建”命令，新建一个影片，保存为“文字变形.fla”文件。（2）同“文字移动”案例中步骤（2）、步骤（3）相同，设置舞台大小，背景元件。3.3创建各类Flash动画实例（3） 单击“新建图层”按钮，新建图层2，重命名为“文字1”层，在第1个关键帧处拖动背景元件到舞台，并按Ctrl+B分离元件，如图所示。分离元件3.3创建各类Flash动画实例（4） 在30帧处按F7插入空白关键帧，用“文本”工具输入“承德科技学院”，并制作阴影文字，方法同上例。选中所有文字，按Ctrl+B分离文字如图所示。分离文字3.3创建各类Flash动画实例（5） 单击“文字1”层第1帧，点击右键，在快捷菜单中选择“补间形状”命令，两个关键帧中间生成带有淡绿色背景的实线箭头，这个由图片变形成文字的形状补间动画就做好了，如图所示。生成形状补间动画3.3创建各类Flash动画实例（6） 用同样的方法制作文字2和logo标志，测试如图所示。完整时间轴和测试影片3.3创建各类Flash动画实例3.3.4创建引导层动画实例路径引导动画能够使对象沿着设置的路径运动形成动画。【案例】飘雪动画（1） 执行“文件”|“新建”命令，新建一个影片，保存为“飘雪.fla”文件。（2） 在“属性”面板中设置舞台的宽度为530px，高度为350px，舞台背景设为黑色。（3） 导入背景图像。执行“文件”|“导入”命令，导入一张雪景的背景图像。3.3创建各类Flash动画实例（4） 执行“窗口”|“对齐”命令，弹出“对齐”面板，单击“相对于舞台”图标，再单击“匹配舞台大小”，最后单击“垂直居中”图标和“水平居中”图标，使雪景图像和舞台大小位置匹配，如图所示。对齐面板3.3创建各类Flash动画实例（5） 选中导入的背景图像，按F8键转换为元件，如图所示。在50帧处按F5插入普通帧。位图转换为“雪景”图形元件3.3创建各类Flash动画实例（6） 绘制雪花元件。选择“椭圆”工具，将轮廓线设置为，填充色设置为白色，在舞台上绘制一个无轮廓的圆。选中圆，并执行“修改”|“形状”|“柔化填充边缘”命令，弹出“柔化填充边缘”对话框，设置参数如图所示。单击【确定】按钮，柔化图像边缘。柔滑填充边缘对话框3.3创建各类Flash动画实例（7） 选中对象，按F8键转换为“雪花”图形元件，如图所示。“雪花”图形元件3.3创建各类Flash动画实例（8） 制作一片雪花飘落动画。按Ctrl+F8新建“一条引导线上的雪花”图形元件，进入元件编辑状态。拖动“雪花”元件到“一条引导线上的雪花”元件中的图层1上，并在该层的第60帧处按F6键插入关键帧，如图所示。“一条引导线上的雪花”元件编辑3.3创建各类Flash动画实例（9） 在“一条引导线上的雪花”元件编辑区中的“图层1”的名称上单击右键，在弹出的快捷菜单中选择“添加传统运动引导层”命令，如图所示。在“图层1”上单击右键弹出快捷菜单3.3创建各类Flash动画实例（10） 在“图层1”上出现一个“引导层”，单击“引导层”，在引导层上用铅笔画一条雪花飘落的轨迹，如图所示。添加引导层3.3创建各类Flash动画实例（11） 选中“雪花”元件，把它的中心点对准轨迹的起点，然后选中“图层1”的第60帧，把“雪花”元件的中心点拖拽到轨迹的终点。在“图层1”第一帧处单击右键，在弹出的快捷菜单中选择“创建传统补间”命令，这样一片雪花飘落的动画就做成了，如图所示。引导层动画3.3创建各类Flash动画实例（12） 制作多个雪花沿相同路径飘落。按Ctrl+F8新建“一条引导线上的多个雪花”图形元件，进入“一条引导线上的多个雪花”的编辑状态。拖动“一条引导线上的雪花”元件到“一条引导线上的多个雪花”元件中，并在该元件编辑区中“图层1”的60帧处按F5插入普通帧，如图所示。拖动“一条引导线上的雪花”元件到“一条引导线上的多个雪花”元件中3.3创建各类Flash动画实例（13） 在“一条引导线上的多个雪花”元件编辑区中，单击“新建图层”按钮，新建“图层2”。按住Alt键，鼠标单击“图层1”的第1帧并拖动到“图层2”第1帧，就可以将“图层1”的第1帧原位复制到“图层2”第1帧上。选择“图层2”上的元件，在属性面板中改变第一帧的起始位置，这里输入12，如图所示。同一时间雪花飘落的位置不同3.3创建各类Flash动画实例（14） 方法同步骤13，建立图层3，图层4，图层5，制作出不同时间落下的雪花，如图所示。同一时间雪花飘落的位置不同3.3创建各类Flash动画实例（15） 制作漫天飞雪动画。按Ctrl+F8组合键，新建“漫天飞雪”图形元件，进入“漫天飞雪”元件编辑状态。库面板中拖动6次“一条引导线上的多个雪花”元件到“漫天飞雪”元件中，并在“漫天飞雪”元件编辑区中图层1上第60帧处，按F5插入普通帧，如图所示。“漫天飞雪”元件编辑区内的图层13.3创建各类Flash动画实例（16） 选择不相邻的“一条引导线上的多个雪花”元件，执行“修改”|“变形”|“水平翻转”命令，改变雪花飘落的方向，使相邻的“雪花”飘落时方向有所不同，如图所示。改变雪花飘落的方向3.3创建各类Flash动画实例（17） 单击“新建图层”按钮，新建“图层2”，按下Alt键，单击“图层1”第1帧，拖动到“图层2”第1帧处，可以原位复制“图层1”到“图层2”，如图所示。原位复制“图层1”上的元件到“图层2”上3.3创建各类Flash动画实例（18） 选中图层2的所有对象，执行“窗口”|“变形”命令，打开“变形”面板，等比例缩小到“80%”,使“图层2”中的对象变得小一些，产生景深效果，如图所示。漫天飞雪3.3创建各类Flash动画实例（19） 建立“图层3”，方法同步骤（17）和步骤（18）。（20） 点击图标，回到主场景中，在“图层1”第60帧处按F5插入普通帧，把“雪花3”拖入场景，测试影片，如图所示。影片测试3.3创建各类Flash动画实例3.3.5创建遮罩层动画实例遮罩就象面具那样，遮罩图层会将在它之下的图层遮盖住，如果要让下面的图层显示出来，必须在遮罩图层上“挖洞”。所谓的“洞”就是指在遮罩层上建立的对象，比如图形、文字、实例等。【案例】卷轴效果（1） 执行“文件”|“新建”命令，新建一个影片，保存为“卷轴效果.fla”文件。（2） 在“属性”面板中设置舞台的宽度为960px，高度为200px，帧频为12FPS。3.3创建各类Flash动画实例（3） 导入“模糊.jpg”图像，按F8转换成图形元件”模糊背景”，并在“图层1”上100帧处插入普通帧，如图所示。在“图层1”上导入“模糊”图像3.3创建各类Flash动画实例（4） 单击【新建图层】按钮，新建“图层2”，方法同上，导入“清晰.jpg”转换成图形元件“清晰背景”，如图所示。在“图层2”上导入“清晰”图像3.3创建各类Flash动画实例（5） 单击“新建图层”按钮，新建“图层3”。选择“矩形”工具，单击“图层3”的第1帧，在舞台的左边绘制一个无轮廓线的蓝色矩形，如图所示。舞台左边绘制蓝色矩形3.3创建各类Flash动画实例（6） 在第100帧处按F6键，插入关键帧。单击选择第100帧，在工具栏上选择“任意变形”工具调整矩形使其完全覆盖“清晰背景”元件，如图所示。矩形遮住“清晰背景”图形元件3.3创建各类Flash动画实例（7） 在“图层3”的第1帧上单击鼠标右键，在弹出的快捷菜单中选择“创建补间形状”命令，在第1帧到第100帧之间创建形状补间动画，如图所示。“创建补间形状”动画3.3创建各类Flash动画实例（8） 在“图层3”的标签上单击右键，在弹出的快捷菜单中选择“遮罩层”命令，如下图所示。图层快捷菜单3.3创建各类Flash动画实例完整的动画时间轴窗口这时，“图层3”立即变成了遮罩层，图层名前的标签也发生了变化，如下图所示。3.3创建各类Flash动画实例拖动元件“清晰背景”到舞台左侧（9） 下面制作卷轴效果。单击“新建图层”按钮，新建“图层4”。从库面板中拖动“清晰背景”元件到舞台左侧，执行“修改”|“变形”|“水平翻转”命令，如图所示。3.3创建各类Flash动画实例（10） 在第100帧处，按F6键，插入关键帧。选择第100帧，将舞台左侧的“清晰背景”元件拖动到舞台右侧，如图所示。移动元件3.3创建各类Flash动画实例（11） 在“图层4”的第1帧上单击鼠标右键，弹出的快捷菜单中选择“创建传统补间”命令，在第1帧到第100帧创建运动补间动画，如图所示。“创建传统补间”动画3.3创建各类Flash动画实例（12） 单击“新建图层”按钮，新建“图层5”。在场景中用“矩形”工具绘制卷轴，并用“颜色”面板中的线性渐变填充。鼠标移动到色条下方，变成“+”号，单击鼠标添加一个色标，三个色标均设置为白色，分别选择两边的色标在“Alpha”中设置透明度为50%，中间的颜色块透明度设为0%。如图所示。利用颜色面板设置渐变色3.3创建各类Flash动画实例（13） 按F8键，将该矩形转换成“卷轴”图形元件，放置在舞台左侧。在100帧处按F6键，插入关键帧。选择第100帧，移动元件到右侧。在第1帧上单击右键，选择“创建传统补间”命令。（14） 在“图层5”的标签上单击右键，在弹出的快捷菜单中选择“遮罩层”。（15） 单击“新建图层”按钮，新建“图层6”。从库面板中拖动“卷轴”元件到舞台左侧，在100帧处按F6键，插入关键帧。单击选择第100帧，移动“卷轴”元件到舞台右侧，在第1帧上单击右键，选择“创建传统补间”命令。3.3创建各类Flash动画实例（16） 至此，影片创建完成，影片的完整时间轴如图所示。完成影片的时间轴（17） 按Ctrl+Enter组合键，测试影片，如图所示。测试影片主要内容3.1Flash动画制作基础知识3.2动画制作工具简介3.3创建各类Flash动画实例3.4网站中常见的Flash动画设计3.4网站中常见的Flash动画设计3.4.1动画按钮设计实例在Flash中，交互很大程度上都是通过按钮来实现的。按钮同样也是Flash元件的一类。通过下面的例子，我们对按钮进行初步的学习，掌握按钮4个状态的含义，使用按钮的一些基本功能。【例子】按钮实例（1）执行“文件”|“新建”新建一个影片，保存为“按钮交互.fla”文件。3.4网站中常见的Flash动画设计创建按钮（2）按Ctrl+F8创建按钮元件，进入按钮编辑区，其中图层1中的四种状态为按钮的四种状态，如图所示。3.4网站中常见的Flash动画设计（3）鼠标单击“弹起”下面的空白关键帧，用文本工具在编辑区输入“Enter”，设置如图所示。按钮的四种状态编辑3.4网站中常见的Flash动画设计（4）鼠标单击“按下”下面的位置，按F6插入关键帧，在该帧上调整文字大小，这里我们缩小文字。（5）返回主场景中，把刚才创建的按钮拖动到舞台上，测试影片，我们就会看到当鼠在这个文字上按下时，文字就会变小。（6）在影片主场景中新建一个层，取名“按钮”层，把做好的按钮拖动到适当的位置，然后选中按钮，在“窗口”菜单中打开“动作”面板，输入如下图所示代码，就可以用按钮控制影片的播放。3.4网站中常见的Flash动画设计按钮控制影片的播放3.4网站中常见的Flash动画设计3.4.2贺卡设计实例贺卡作为一种祝福的方式，已经融入了我们的生活。与单一的文本或静态贺卡不同，利用Flash制作的贺卡可以包括多媒体，从而更生动的体现贺卡的作用。【实例】生日贺卡（1）执行“文件”|“新建”命令，新建一个影片，保存为“生日贺卡.fla”文件。（2）在“属性”面板中设置舞台的宽度为400px，高度为250px。3.4网站中常见的Flash动画设计绘制背景（3）双击“图层1”，给“图层1”重命名为“背景”，并用“矩形”工具绘制背景，用线性渐变填充，如图所示。3.4网站中常见的Flash动画设计（4）单击【新建图层】按钮，新建“图层2”，重命名为“蛋糕”层，在此层中绘制“蛋糕”图形元件，如图所示。绘制“蛋糕”图形元件3.4网站中常见的Flash动画设计（5）单击【新建图层】按钮，新建“图层3”，重命名为“光晕”层，在此层中绘制“白”图形元件，并制作“白光晕”影片剪辑，分别如下图所示。黄色光及光晕制作方法相同。“白”图形元件制作“白光晕”影片剪辑制作3.4网站中常见的Flash动画设计（6）单击【新建图层】按钮，新建“图层4”，重命名为“文字”层，在舞台上用文本工具输入文字，完成贺卡制作，完整时间轴如图所示。贺卡的完整时间轴3.4网站中常见的Flash动画设计（7）测试影片，如图所示。测试影片3.4网站中常见的Flash动画设计3.4.3广告设计实例Flash广告条又成为FlashBanner，是目前商业网站中常用到的Flash动画。使用Flash制作的广告条，比普通静态的广告条有更好的宣传效果，是大部分公司喜欢的宣传方式。【实例】校园宣传（1） 执行“文件”|“新建”命令，新建一个影片，保存为“校园宣传.fla”文件。（2） 在“属性”面板中设置舞台的宽度为776px，高度为90px。3.4网站中常见的Flash动画设计背景图（3） 执行“文件”|“导入”|“导入到舞台”命令，导入所需的背景图像到舞台，并将背景图转换为“背景”元件，如图所示。3.4网站中常见的Flash动画设计（4） 选择“矩形”工具创建图形元件“背景1”，并用线性渐变填充，如图所示。创建背景13.4网站中常见的Flash动画设计（5） 下面创建“光芒背景动画”影片剪辑。用椭圆工具绘制圆，并用放射状填充，按F8转换为“光球”图形元件，如图所示。“光球”图形元件编辑区3.4网站中常见的Flash动画设计（6） 按Ctrl+F8创建影片剪辑元件“光芒背景动画”，单击【确定】按钮，进入影片剪辑编辑区，如图所示。创建影片剪辑“光芒背景对话框”对话框3.4网站中常见的Flash动画设计（7） 在“光芒背景动画”影片剪辑编辑区内，给“图层1”命名为“光球1”。按F6在30帧、60帧和90帧处插入关键帧，让“光球”在不同的帧处移动位置，创建光球移动动画，利用时间轴状态栏上的【绘图纸外观】按钮，效果如图所示。“光球1”图形元件的运动轨迹3.4网站中常见的Flash动画设计（8） 方法相同，新建“光球2”层和“光球3”层，如图所示。“光球1”、“光球2”、“光球3”的运动轨迹3.4网站中常见的Flash动画设计（9） 单击【新建图层】按钮，新建图层重命名为“网格”，用线条工具绘制网格，如下图所示，并将全部网格选中，执行“修改”|“形状”|“将线条转换为填充”命令。绘制“网格”3.4网站中常见的Flash动画设计（10） 在“网格”层名称上单击右键，执行“遮罩”命令，“光芒背景动画”影片剪辑制作成功，如图所示。执行“遮罩”命令技术要点：线条形状不能用来作为遮罩。3.4网站中常见的Flash动画设计（11） 将“光芒背景动画”影片剪辑拖动到场景中，预览如图所示。创建“光芒背景动画”影片剪辑3.4网站中常见的Flash动画设计（12） 创建图形元件“背景光”，在该元件中用线条工具绘制下图中的图形，并用放射状填充，如图所示。创建“背景光”图形元件3.4网站中常见的Flash动画设计（13） 将“背景1”元件拖动到“图层1”，双击“图层1”给“图层1”重命名为“背景1”层。在第1帧处改元件“背景1”的透明度为0，在15帧处插入关键帧，改透明度为100%，在这两个关键帧中创建传统补间动画，在40帧处插入普通帧，如图所示。关键帧处修改透明度3.4网站中常见的Flash动画设计（14） 单击【新建图层】按钮，新建“图层2”，重命名为“光芒”层，将“光芒背景动画”元件拖至光芒图层。（15） 单击【新建图层】按钮，新建“图层3”，重命名为“背景光”层。在15帧处插入关键帧，并拖动“背景光”元件到该帧，在50帧处插入普通帧。（16） 单击【新建图层】按钮，新建“图层4”，重命名为“背景”层。在40帧处插入关键帧，并拖动“背景”元件到该帧，改变元件的透明度为0，在50帧处插入关键帧，透明度改为100%，创建传统补间动画，在90帧插入普通帧，如下图所示。3.4网站中常见的Flash动画设计改变元件透明度3.4网站中常见的Flash动画设计（17） 单击【新建图层】按钮，新建“图层5”，重命名为“人物1”层。在15帧处插入关键帧，并拖动“人物1”图形元件到该帧，改变元件的亮度为100%，在30帧处插入关键帧，去掉亮度样式，如图所示。改变元件亮度3.4网站中常见的Flash动画设计（18） 单击【新建图层】按钮，新建“图层6”，重命名为“文字1”层。在15帧处插入关键帧，并拖动“文字1”图形元件到该帧，放置在舞台的右边，在30帧处插入关键帧，移动文字元件到舞台的中间。在40帧和50处插入关键帧，50帧处的元件透明度改为0，创建传统补间动画，方法同步骤（9）。（19） 单击【新建图层】按钮，新建“图层7”，重命名为“人物2”层。在40帧处插入关键帧，并拖动“人物2”图形元件到该帧，改变元件的亮度为100%，在50帧处插入关键帧，去掉亮度样式，创建传统补间动画，方法同步骤（10）。3.4网站中常见的Flash动画设计（21） 图层的建立如图所示。完整的时间轴（20） 单击【新建图层】按钮，新建“图层8”，重命名为“文字2”层。在50帧处插入关键帧，并拖动“文字2”图形元件到该帧，用“任意变形”工具缩小元件，在60帧处插入关键帧，用“任意变形”工具放大元件，在这两帧间创建传统补间动画。在62帧处缩小元件，64帧处放大元件，以此类推，实现文字的闪动效果。3.4网站中常见的Flash动画设计（22） 测试影片，如图所示。测试影片3.4网站中常见的Flash动画设计3.4.4Flash相册设计实例Flash在其它方面的应用也非常广泛，比如Flash课件、视觉特效等。本实例制