1、,网页设计与制作,第1章 网页设计概述第2章 HTML语言基础第3章 Dream weaver 基础第4章 网页中的基础元素第5章 网页页面布局第6章 网页中的层和时间轴第7章 表单的应用 第8章 在网页中使用行为第9章 CSS样式使用第10章 网页中的多媒体应用第11章 模板和库第12章 站点测试和发布第13章 Flash 简介第14章 Fireworks 简介,$ 知识目标 熟悉Flash 的操作界面掌握动画制作的基本流程掌握各类动画的制作方法 8 能力目标在Flash 中绘制图形、建立元件等基本操作制作各种文字特效的原理和操作制作基本的Flash动画,第13章 Flash 简介,131
2、认识Flash 132 Flash 的基本操作 133 制作Flash动画 本章小结,第13章 Flash 简介,13.1.1 Flash 的操作界面 13.1.2 Flash 的主要术语 13.1.3 文件的基本操作,13.1 认识Flash,Adobe CS4于2008年9月24日正式发布 启动Flash程序，进入Flash cs4的欢迎界面：,13.1.1 Flash的操作界面,13.1 认识Flash,FLASH CS4新建文件选项,Flash文件（ActionScript3.0） 以flash脚本3.0语言为主的文档，里面必须用3.0语言脚本编写 Flash文件（ActionScri
3、pt2.0） 与FLASH 8一样 Flash文件（Adobe AIR) 允许利用现有的web开发技能(包括Flash, Flex, HTML, JavaScript, Ajax)优势,建立和配置跨平台(或跨操作系统)的桌面RIA(Internet Applications)应用。 Flash文件（移动） 用来做手机屏保或是移动设备内容的 flash版本是向上兼容的，比如你用FLASH 8做的文件 CS3 CS4能打开，反过来就打不开,Flash制作的小工具,硕思闪客精灵 Flash转换软件SWF Toolbox Flash相册软件InAlbum Deluxe Flash翻页组件Flippin
4、gBook DVD转换成SWF文件 Sothink SWF Quicker 闪客之锤 flash水波制作器 SWFText:文字动画制作工具 flash加密工具 swishmax文字特效工具 flash右键菜单生成器 。,在开始界面中包括： “打开最近项目”：列出最近使用的文件及“打开”按钮。“创建新项目”：用于创建新的项目。“从模板创建”：用于创建基于己有模板的文档。（FLASH酷：www.51FLA.com 下载 .fla 文件）单击“创建新项目”下的“Flash文档”，就打开了Flash8的工作界面了。网页制作 - 酷素材：http:/ Flash 的操作界面,13.1 认识Flash,
5、13.1.1 Flash cs4的操作界面,FLASH CS4中工具箱的工具名称,13.1.1 Flash8的操作界面,13.1 认识Flash,（一）位图和矢量图1位图。位图是由计算机根据图像中每一点的信息生成的图像。2矢量图。矢量图是用一系列计算机指令来描述和记录的图像。矢量图由包含颜色和位置属性的点、线、面组成，图形的复杂程度直接影响矢量图文件的大小，而矢量图形文件的大小与图形的尺寸无关。位图和矢量图的主要区别有两点。一是位图占用的存储空间比矢量图大得多。二是位图在放大到一定倍数时会出现明显的马赛克劣化，而矢量图无论放大多少倍图像的品质都不会改变。,13.1.2 Flash 的主要术语,
6、13.1 认识Flash,（二）图形对象、文字对象和群组对象1图形对象。使用绘图工具栏中的工具绘制的图形和通过导入命令导入的图像都称为图形对象。2文字对象。使用文字工具输入的文字称为文字对象。3群组对象。将一个或多个图形或文字对象组合起来形成一个对象称为群组对象。,13.1.2 Flash 的主要术语,13.1 认识Flash,（三）Flash中的元件和实例元件是在Flash文档中创建的图像、按钮或影片剪辑，是可以重复使用的动画资源。实例是指位舞台上或嵌套在另一元件中的元件的副本，实例其实是对元件的引用。（四）图层图层就像透明的 胶片，在舞台上一层 层地向上叠加，每一 张又都保持独立。 Fla
7、sh中的图层位于时间轴左侧。,13.1.2 Flash 的主要术语,13.1 认识Flash,（五）帧Flash中的帧有：关键帧、空白关键帧和普通帧三种类型，各种帧在时间轴上如图所示。1关键帧。关键帧是指在动画播放过程中，呈现关键性动作或关键性内容变化的帧。关键帧定义了动画的变化环节，因此动画中的所有对象必须在关键帧中进行编辑。,13.1.2 Flash 的主要术语,13.1 认识Flash,（五）帧2空白关键帧。空白关键帧是没有内容的关键帧，当空白关键帧有内容后会自动转为关键帧。空白关键帧通常用于结束前一个关键帧的内容或分隔两个相连的补间动画。3普通帧。普通帧通常处于关键帧的后方，是系统自动
8、生成，主要用于延长关键帧画面的播放时间。普通帧通常只是作为关键帧之间的过渡，不能独立记录任何变形的信息，在普通帧中也不能对对象进行编辑。,13.1.2 Flash 的主要术语,13.1 认识Flash,（六）补间动画补间动画采用一种独特的过渡变形技术，这种过渡变形技术在动画制作上表现为对某一段动画只需制作出帧序列中的首、尾两个关键帧的画面，然后在起始关键帧设置过渡方式，中间的过渡帧由Flash自动生成。补间动画是创建随时间移动或更改的动画的一种有效方法，它的优点是动画文件小，因为补间动画只保存两个关键帧和帧与帧之间的更改值。Flash可以创建的补间动画有运动补间动画和形状补间动画两种类型。,1
9、3.1.2 Flash 的主要术语,13.1 认识Flash,（一）创建新文档1执行以下操作之一：单击菜单栏中“文件”|“新建”，在打开的对话框中选择“Flash文档”。单击工具栏中的新建按钮 。2新建了一个空白文档,默认尺寸为500400像素。3要调整文档属性，执行以下操作之一：单击菜单栏中“修改”|“文档”。单击属性检查器的“500400”按钮，如图所示。,13.1.3 文件的基本操作,13.1 认识Flash,4打开文档属性对话框，如图所示。5在对话框中调整文档的尺寸、背景颜色和帧频等，调整后单击“确定”按钮，就调整了文档的属性。,13.1.3 文件的基本操作,13.1 认识Flash,
10、（二）保存文件文件编辑后要保存，Flash文件扩展名是.fla。保存文件，可以单击菜单栏中“文件”|“保存”命令，打开另存为对话框，选择文件的保存路径，输入文件名，单击“保存”按钮，即可保存文件。也可以选择“另存为”将文件保存为另外的文件名。,13.1.3 文件的基本操作,13.1 认识Flash,13.2.1 绘制基本图形 13.2.2 文本的编辑 13.2.3 建立元件 13.2.4 导入位图 13.2.5 动画制作流程,13.2 Flash 的基本操作,以绘制图中的站标为例1新建一个Flash文档， 宽260px，高160px，黑色背景。2单击菜单栏中“视图”|“网格”|“显示网格”命令
11、，显示网格辅助线。3选择矩形工具 ，设置笔触颜色为白色，填充色为桔黄色（#FF9900）在舞台上绘制一个矩形。4使用直线工具 在矩形上四分之一处绘制一条与矩形等长的水平直线，使用颜料桶工具 将矩形上部填充为紫色（#663399），再使用选择工具 选择直线，按Delete键将其删除。,13.2.1 绘制基本图形,13.2 Flash 的基本操作,5使用直线工具 在矩形两侧绘制四条对称的直线，使其与矩形的两个边形成两个三角形，使用颜料桶工具 在将三角形的内部填充为绿色（#009933），使用选择工具 分别选择两个三角形与矩形相交的两条直线，按Delete键将其删除。6选择铅笔工具 ，在选项区选择对
12、象绘制 和平滑 ，在矩形桔黄色区域绘制曲线。,13.2.1 绘制基本图形,13.2 Flash 的基本操作,（一）输入文本选择工具箱的文本工具 ，将鼠标移至场景中，当鼠标变为 时，在舞台适当的位置单击鼠标，此时创建了一个文本区域有光标闪烁，表示当前处于文本输入状态，可以输入文本。文本输入后，单击文本域以外的任意空白区域，即可完成文本的输入。要添加文字，只需将指针移动到要添加文字的位置，单击鼠标左键，当指定位置有光标闪烁时即可输入要添加的文字；若要删除不需要的文字，只需选中要删除的文字，然后按Delete键即可完成删除操作。,13.2.2 文本的编辑,13.2 Flash 的基本操作,（二）设置
13、文本属性设置文本属性首先应选择文本，然后在如图所示的“属性检查器”对该文本的属性和段落格式等进行设置。,13.2.2 文本的编辑,13.2 Flash 的基本操作,以在图形上输入文字，达到如 右图所示效果为例1.在文档中，点击新建图层按钮 ，插入一个新图层。2.选择文字工具 ，在“属性检查器”中设置：字体为“华文彩云”，大小为22，文字间距为6，颜色为桔黄色，在舞台紫色矩形的上方输入文字“游在长春”。3.选择文字工具 ，在“属性检查器”中设置：字体为“Calisto MT”，大小为15，文字间距为0，颜色为黑色，在舞台白色曲线内输入文字“”。4.保存文件，最终效果如图所示。,13.2.2 文本
14、的编辑,13.2 Flash 的基本操作,（一）元件的类型1图形元件 。主要用于创建动画中可以反复使用的图形，是组成动画的基本元素之一。2按钮元件 。用于创建响应鼠标点击、滑过或其它动作的交互式按钮。按钮元件包括弹起、指针经过、按下和点击四种状态。3影片剪辑元件 。影片剪辑元件用于创建独立于影片主时间轴播放的可重复使用的动画部分。影片剪辑很像电影中的小电影，它可以包含图形、图形实例、交互控件、声音或者其它的影片剪辑实例。,13.2.3 建立元件,13.2 Flash 的基本操作,（二）创建新元件1单击菜单栏中“插入”|“新建元件”命令。2打开“创建新元件”对话框，如图所示。3在“创建新元件”对
15、话 框中，“名称”文本框中键入 元件名称，“类型”中选择 “图形”，单击“确定”即进 入元件编辑模式，如图所示。,13.2.3 建立元件,13.2 Flash 的基本操作,4在元件编辑模式下，元件的名称将出现在舞台的左上角，十字表明元件的注册点。创建元件内容时，可以结合时间轴和图层，用绘图工具绘制、导入图像或引用实例。5创建元件内容后，可执行以下操作之一返回文档编辑模式。单击舞台上方编辑栏左侧的“返回”按钮。执行“编辑”菜单“编辑文档”命令。单击舞台上方的场景名称。,13.2.3 建立元件,13.2 Flash 的基本操作,（三）将已有对象转为元件1选择要转换的对象。2执行以下操作之一：单击菜
16、单栏中“修改”|“转为建元件”命令。按快捷键F8。3打开“转换为元件”对话框，如图所示。,13.2.3 建立元件,13.2 Flash 的基本操作,（三）将已有对象转为元件4在对话框中，输入元件的名称，选择元件的类型，单击“确定”即将所选图形转换为元件。新元件将显示在“库”面板中。 “库”面板中各按钮的功能如图。,13.2.3 建立元件,13.2 Flash 的基本操作,1单击“文件”|“导入”|“导入到库”命令，打开“导入到库”对话框。2选择导入的文件，单击“打开”按钮，即会导入到文档的库中，如图。,13.2.4 导入位图,13.2 Flash 的基本操作,（一）新建Flash文档。设置舞台
17、尺寸、背景颜色和帧频率等属性。（二）创建动画成员。在工作区中绘制动画对象或导入图形对象，根据动画要求定义所需各类元件，然后按照动画的需要将元件拖到舞台上。（三）设定动画效果。根据帧中对象的不同类型，建立相应的动画，使帧与帧之间更好地衔接。（四）保存文件。动画源文件制作完成后，要对其存储，否则源文件丢失将很难对动画进行修改。（五）输出文件。Flash源文件制作完成并保存后，需要将其输出或发布，以便应用到网页中。,13.2.5 动画制作流程,13.2 Flash 的基本操作,13.3.1 文字特效 13.3.2 逐帧动画 13.3.3 运动补间动画 13.3.4 形状补间动画 13.3.5 引导层
18、动画 13.3.6 遮罩动画 13.3.7 导出和发布动画,13.3 制作Flash动画,以制作图中文字特效为例， 制作文字特效的操作为：1新建一个Flash文档， 宽320px，高200px，黑色背景。2输入文字。选择工具箱中 文本工具 ，在“属性检查器”中设置字体为“Arial Black”，大小为100，颜色为白色，在舞台上输入文字“.com”。3分离文字。选择文字，单击菜单栏中“修改”|“分离文字”命令2次，文字分离为图形。,13.3.1 文字特效,13.3 制作Flash动画,4位图填充。选择工具栏中“颜料桶”工具 ，打开如图所示的“颜色混色器”面板，“类型”下拉列表中选择“位图”，
19、点击“导入”按扭，导入所需位图，如左图。5在面板下方选择要填充的图形，向的舞台上的字母填充位图，如右上图。6选择工具箱中“填充变形”工具 ，可以调整填充，如右下图。,13.3.1 文字特效,13.3 制作Flash动画,7转换元件。按组合键Ctrl+A，全选舞台内容，按快捷键F8将其转换为元件。8制作倒影。将元件拖到舞台文字的下方，单击菜单栏“修改”|“变形”|“垂直翻转”命令，将实例倒置。使用“任意变形”工具 将实例向水平方向扭曲。选择“属性检查器”中颜色下拉列表中Alpha项，将透明度设置为40。9保存文档，按组合键Ctrl+Enter测试影片，观看效果。,13.3.1 文字特效,13.3
20、 制作Flash动画,应用逐帧动画原理，制作如图所示“流光效果”动画。1新建一个Flash文档，宽320px，高200px，帧频12fps，黑色背景。2输入文字。选择工具箱中文本工具 ，在“属性检查器”设置字体为“Arial Black”，大小为120，颜色为红色，在舞台上输入文字“Welcome to ChangChun！”单击菜单栏中“修改”|“分离文字”命令将文字分离成单个文字。,13.3.2 逐帧动画,13.3 制作Flash动画,3插入关键帧。选择图层1的第二帧，连续按19次F6，即添加19个关键帧。4选择图层1的第二个关键帧，将第一个字母W改为淡黄色。再选择第三个关键帧，将第二个字
21、母e改为淡黄色。依次类推，最后将第二十帧的“！”改为淡黄色。5保存文档，按组合键Ctrl+Enter测试影片，观看效果。,13.3.2 逐帧动画,13.3 制作Flash动画,运动补间动画也称移动补间动画、运动渐变动画，是指在一个关键帧定义一个实例、组或文本块的位置、大小和旋转等属性，在另一个关键帧改变这些属性，然后在起始关键帧定义为运动补间的动画形式。运动补间动画可完成对象的移动、缩放、旋转、自定义路径、色彩渐变及变化速度等动画效果。运动补间动画作用的对象是实例、群组对象、文字对象及图形对象。制作图中的文字渐变动画为例，创建运动补间动画的操作为：,13.3.3 运动补间动画,13.3 制作F
22、lash动画,1新建一个Flash文档，宽600px，高200px，帧频15fps，白色背景。2单击菜单栏中“文件”|“导入”|“导入到舞台”命令，将背景图片导入到舞台。3设置背景图片。选择导入的背景图片，在“属性检查器”中设置图像的“宽”和“高”与舞台完全一致，X项为0，Y项为0，图像与舞台完全重合。4输入文字。插入一个新图层，选择文字工具 ，在“属性检查器”中设置适当的字体和大小，在舞台上输入文字“长春欢迎您”。选择“滤镜”面板，为文字添加“发光”和“投影”特效。,13.3.3 运动补间动画,13.3 制作Flash动画,5将文字转换为元件。选择文字，按组合键Ctrl+B将文字打散成为单个
23、文字，分别选择每个字，按快捷键F8将分别转换为元件。6将文字元件分散到各层。使用选择工具 同时选择五个文字实例，单击菜单栏中“修改”|“时间轴”|“分散到图层”命令，五个文字实例被分散至五个新的图层，如图所示。,13.3.3 运动补间动画,13.3 制作Flash动画,7选择图层“长”的第10帧按F6添加一个关键帧，选择该层的第1帧，在“属性检查器”的“补间”选项中选择“动画”，“缓动”选项输入100，如左图所示。8在舞台上选择第1帧中的“长”实例，在“属性检查器”的“颜色”下拉菜单中选择Alpha，设置Alpha值为10%；在“窗口”下打开变形面板，勾选“约束”项，设置宽度为300%。至此，
24、文字“长”的动画制作完毕。,13.3.3 运动补间动画,13.3 制作Flash动画,9选择图层“春”，在第15帧按F6添加一个关键帧，选择该层第1帧，将第1帧拖动到第6帧，重复步骤7、8，制作“迎”字的在第6帧到第15帧的运动补间动画。10同理，分别在图层“欢”、“迎”和“您”三个图层的第11、16和21帧处做运动补间动画。11同时选择所有的图层的第40帧，按F5添加帧，使动画延长至第40帧，完成后时间轴如图所示。,13.3.3 运动补间动画,13.3 制作Flash动画,12保存文档，按组合键Ctrl+Enter测试影片，观看效果。,13.3.3 运动补间动画,13.3 制作Flash动画
25、,又称形状渐变动画,是指在一个关键帧绘制一个形状并指定属性,在后续关键帧中修改形状或绘制另一个形状,然后在起始关键帧定义为形状补间动画形式。形状补间动画可完成图形对象的移动、缩放、形状渐变、色彩渐变及变化速度等动画。形状补间动画作用的对象是图形对象，不能作用于实例、群组对象及文字对象。制作如图所示的“文字变形” 形状补间动画。,13.3.4 形状补间动画,13.3 制作Flash动画,1新建一个Flash文档，宽240px，高120px，帧频为12fps，白色背景。2输入文字“精彩”，设置好字体和大小后，使用“对齐”面板使文字绝对居中舞台。3选择第6帧按F6插入一个关键帧。选择文字，按两次组合
26、键Ctrl+B将文字分离。4选择第11帧按快捷键F7插入一个空白关键帧，在舞台上输入字母“FLASH”，设置字体与大小，将文字绝对居中于舞台，按两次组合键Ctrl+B将文字分离。,13.3.4 形状补间动画,13.3 制作Flash动画,5选择第6帧，在“属性检查器”的“补间”下拉列表项中选择“形状”。6选择第16帧按快捷键F5添加帧，时间轴如图所示7保存文档，按组合键Ctrl+Enter测试影片，观看效果。,13.3.4 形状补间动画,13.3 制作Flash动画,（一）创建运动引导层的方法1添加运动引导层。（1）选择欲添加引导层的图层，执行以下操作之一：在时间轴上，单击“添加运动引导层”
27、按钮。单击鼠标右键，在弹出的快捷菜单中执行“添加引导层”命令。（2）在所选图层上方创建了一个与它链接的运动引导层，二者建立了引导与被引导的关系。要在引导层上画出运行轨迹，并将贴紧至对象。2将己有的层转换为引导层，（1）选择要转换为引导层的图层，执行下列操作之一,13.3.5 引导层动画,13.3 制作Flash动画,选择要转换为引导层的图层，单击鼠标右键，快捷菜单中选择“引导层”命令。双击要转换为引导层的图层图标 ，可以打开如右图所示的“图层属性”对话框，勾选“引导层”选项。（2）所选的层转换为引导层，注意用这种方法建立的引导层没有和其他建立引导链接。 如左图所示.,13.3.5 引导层动画,
28、13.3 制作Flash动画,（二）创建引导层动画制作如图所示的“激光写字”引导层动画的操作为：1新建一个宽550px ，高300px，帧频为12fps，黑色背景的Flash文档。,13.3.5 引导层动画,13.3 制作Flash动画,2制作激光棒元件。插入一个名称为激光棒的图形元件，在元件编辑模式下，选择工具箱中的椭圆工具 ，绘制一个无描边黄色填充的圆。使用选择工具 ，当鼠标变为 时向左上方拖出一束激光。如图所示。3单击 标签，返回到场景中。将激光棒元件拖到舞台上。使用任意变形工具 ，将实例的中心点移至激光棒的顶点。选择第50帧按F5。,13.3.5 引导层动画,13.3 制作Flash动
29、画,4制作空心文字。插入一个新图层（图层2），将其拖至图层1的下方，选择图层2，在舞台上输入文字“Flash”，设置字体和大小，选择文字按组合键Ctrl+B将其分离。单击工具箱中的墨水瓶工具 ，设置笔触颜色为桔黄色，为文字描边（选中单个文字并分离Ctrl+B ）。描边完成后，按Delete键，将文字内部的填色删除，这样就得到了一组中空文字，如图所示。,13.3.5 引导层动画,13.3 制作Flash动画,5添加引导层。选择图层1，单击时间轴左下方的“添加引导图层”按钮 ，添加一个引导层。6在引导层绘制运动轨迹。选择图层2中的第1帧，单击鼠标右键，在快捷菜单中选择“复制帧”命令。选择引导层的第
30、1帧，单击鼠标右键，在快捷菜单中选择“粘贴帧”命令。使用引导层的第1帧与图层2的第1帧完全相同。7使用橡皮擦工具 ，将运动引导层中每个勾画字母的线条都擦出一个缺口，即将空心文字转换为运动轨迹。如图所示。,13.3.5 引导层动画,13.3 制作Flash动画,8分别选择图层1的第10、11、20、21、28、29、35、36、45、46、55帧按F6添加关键帧(因为字母a有两个封闭曲线，所以在22与35帧中多加两个关键帧)。9选择图层1第1帧，将激光棒中心点拖放到字母F断点的起始处，选择第10帧将激光棒端点拖放到字母F断点的终点处，选择第1帧创建运动补间动画。10重复上一步骤，制作激光棒沿其它
31、字母轨迹运动的动画。11选择并解锁图层2，连续按49次F6添加关键帧。,13.3.5 引导层动画,13.3 制作Flash动画,12单击图层2的第1帧，用鼠标框选并删除激光棒指向后面的字母及线条，只保留激光棒指向前的线条。13根据激光棒的运动轨迹，重复上步的操作，在图层2中的每一个关键帧中将多余的线条删除。完成后时间轴如图所示。,13.3.5 引导层动画,13.3 制作Flash动画,遮罩动画也称蒙版动画，是指某个特殊的层作为遮罩层，遮罩层之下的一层被遮罩层遮住，只有遮罩层对象之下的内容是可见，而遮罩层上的对象本身是不可见的。制作如图所示的“光谱文字”遮罩动画的操作为：1新建一个宽350px，
32、高80px，帧频为12fps，黑色背景的Flash文档。2选择图层1第1帧，在舞台上输入文字“This is Flash！”。选择第30帧按F5。,13.3.6 遮罩动画,13.3 制作Flash动画,3点击插入新图按钮 ，插入图层2，将图层2拖至图层1下面。选择图层2，在舞台中绘制一个700像素宽、线性渐变色填充的距形，并将其转换为元件。4分别选择图层2的第15帧和第30帧，按快捷键F6添加关键帧，在第15帧处将实例移至舞台的右侧，分别在第1帧和第15帧做移动渐变动画。5选择图层1，单击鼠标右键，在快捷菜单中选择“遮罩层”命令。时间轴如图所示6保存文档，按组合键Ctrl+Enter测试影片。
33、,13.3.6 遮罩动画,13.3 制作Flash动画,（一）导出动画1打开要导出的Flash文档。2单击菜单栏中“文件”|“导出影片”命令,打开如图所示的“导出影片”对话框3选择保存位置及 文件名，在“保存类型” 下拉列表中选择要保存 的影片类型，单击“保 存”按钮。,13.3.7 导出和发布动画,13.3 制作Flash动画,（二）发布动画1打开要发布的 Flash文档。2单击菜单栏中 “文件”|“发布设置”命令， 打开如图所示的“发布 设置”对话框。,13.3.7 导出和发布动画,13.3 制作Flash动画,3在格式选项卡中， 对一每种要发布的文件 格式设置相应参数。 如图为HTML设置。,13.3.7 导出和发布动画,13.3 制作Flash动画,本章小结,第13章 Flash 简介,全 课 结 束,第 十 三 章 结 束,
