《网页制作ch7学习.pptx》由会员分享，可在线阅读，更多相关《网页制作ch7学习.pptx（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、7.1 案例22“校园风貌图像切换1”动画案例效果“校园风貌图像切换1”动画播放后，在校园风貌背景图像上，另一幅校园风貌图像从左向右水平移动，逐渐将背景图像覆盖。该动画播放中的两幅画面如图7-1所示。所需素材在“案例22素材”文件夹中。通过学习本案例，可以对中文Flash8有一个初步的了解，掌握设置文档属性的方法，了解一些基本操作方法，掌握调整对象大小和位置的方法，以及了解动画制作的基本方法。第1页/共28页7.1 案例22“校园风貌图像切换1”动画相关知识1启动Flash 8和关闭、退出Flash 8（1）启动Flash 8界面：“开始”“程序”MacromediaMacromedia Fl
2、ash 8，Flash 8的工作界面主要由标题栏、菜单栏、工具箱、时间轴窗口、舞台及多个浮动面板几个部分组成。（2）关闭Flash文档窗口：执行“文件”“关闭”命令或单击Flash舞台窗口右上角的“关闭”按钮。如果在此之前没有保存动画文件，会弹出一个提示框，提示是否保存文档，单击“是”按钮，即可保存文档，然后关闭 Flash文档窗口。（3）退出Flash 8：执行“文件”“退出”命令或单击Flash 8窗口右上角的“关闭”按钮。如果在此之前还有没关闭的修改过的Flash文档，则会弹出提示框，提示是否保存文档，单击“是”按钮，即可保存文档，并关闭 Flash文档窗口。关闭所有的Flash文档窗口
3、后，退出Flash 8。第2页/共28页7.1 案例22“校园风貌图像切换1”动画相关知识2新建和保存Flash 8文档（1）新建Flash 8文档的方法有以下两种：执行“文件”“新建”命令，弹出“新建文档（常规）对话框，选择该对话框中的Flash文档类型，再单击“确定”按钮，即可创建一个新的Flash空文档。单击主要工具栏中的“新建”按钮，即可创建一个新的Flash空文档。（2）保存Flash 8文档如果是第一次保存Flash动画，可执行“文件”“保存”或“文件”“另存为”命令，弹出“保存为”对话框。在“保存类型”下拉列表框中选择“Flash 8文档”选项，将动画保存为扩展名是.fla的Fl
4、ash 8文档。如果要再次保存修改后的Flash 8文档，可执行“文件”“保存”命令（或主要工具栏中的“保存”按钮）；如果要以其他名字或其他路径保存当前文档，可执行“文件”“另存为”命令。第3页/共28页7.1 案例22“校园风貌图像切换1”动画相关知识3设置文档属性执行“修改”“文档”命令，弹出“文档属性”对话框，对话框中各选项的作用和设置如下所述。（1）“尺寸”栏：在“宽”和“高”文本框内输入舞台工作区的宽度和高度，默认单位为像素（px）。舞台工作区的大小最小可设置为1像素1像素，最大可设置为2880像素2880像素。（2）“匹配”栏：选中“打印机”单选按钮，可以使舞台工作区与打印机相匹配
5、。选中“内容”单选项（在舞台工作区中有对象后它才有效），可使舞台工作区与影片内容相匹配，使舞台工作区四周具有相同距离。要使影片尺寸最小，可把舞台工作区内的对象尽量向左上角移动，再选中该单选按钮。选中“默认”单选按钮，可按照默认值设置文档属性。（3）“背景颜色”按钮：单击它，可以弹出颜色面板，设置舞台工作区的背景颜色。（4）“帧频”文本框：用来输入影片的播放速度，默认值为12fps，即每秒钟播放12帧画面。（5）“标尺默认值”按钮：单击它后，可使文档属性的设置状态成为默认状态。第4页/共28页7.1 案例22“校园风貌图像切换1”动画相关知识4选取、移动、复制和删除对象（1）单击按下工具箱内的“
6、选择工具”按钮，然后就可以选择对象，方法如下所述。1）选取单一对象：用鼠标单击目标对象即可选中。2）选取多个对象：按住Shift键，同时依次单击各对象；或用鼠标拖动出一个矩形，可将矩形中的所有对象都选中。（2）移动对象：用鼠标拖动选中的对象即可；按住Shift键的同时拖动对象，可以沿45度的整数倍角度方向移动对象。（3）复制对象：在鼠标拖动对象时按住Alt键，则可以复制被拖动的对象；在鼠标拖动对象时按住“Alt+Shift”组合键，则可以沿45度的整数倍角度方向复制对象。（4）删除对象：选中要删除的对象，按Delete键；或执行“编辑”“清除”或单击“编辑”“剪切”命令，即可删除选中的对象。第
7、5页/共28页7.2 案例23“校园风貌图像切换2”动画案例效果“校园风貌图像切换2”动画播放后，一开始的画面与“校园风貌图像切换1”动画一样，当第2幅图像完全将第1幅图像覆盖后，第3幅图像从中间向四击逐渐扩展变大，直至将第2幅图像完全覆盖为止。该动画播放中的两幅画面如图7-9所示。所需素材在“案例23素材”文件夹中。通过学习本案例，可以掌握精确调整对象大小和位置的方法，以及掌握缩放动画的制作方法等。第6页/共28页7.2 案例23“校园风貌图像切换2”动画相关知识1“信息”面板的应用利用“信息”面板可以精确调整对象的位置、大小、颜色和鼠标指针的信息。“信息”面板分为4个区域，左上方显示对象的
8、“宽”和“高”信息。右上方显示对象的X轴和Y轴坐标信息，要显示对象注册点（中心点）的坐标，单击“坐标网格”的中心方框，要显示左上角的坐标，单击“坐标网格”中的左上角方框。左下方显示舞台中鼠标位置处的颜色值和Alpha值。右下方显示当前鼠标指针位置的坐标值。随着鼠标指针的移动，R、G、G、Alpha和鼠标坐标值也会随着改变。第7页/共28页7.2 案例23“校园风貌图像切换2”动画相关知识2利用“属性”面板调整对象的位置与大小“属性”面板可以很容易地访问舞台或时间轴上当前选定项的最常用属性，也可以在面板中更改对象或文档的属性。利用“属性”面板中左下角的“宽”和“高”文本框可以精确调整对象的大小，
9、利用X和Y文本框可以精确调整对象的位置，如图7-12所示。图7-12“属性”面板第8页/共28页7.3 案例24“变色缩放文字”动画案例效果“变色缩放文字”动画播放后的背景画面与“校园风貌图像切换2”动画一样，在图像之上有“校园风貌浏览”文字逐渐由大变小再由小变大，同时由黄色变为红色再由红色变为黄色。通过学习本案例，可以掌握缩放和变色动画的制作方法，初步了解文字的输入文字，掌握改变预览模式的方法，掌握播放Flash动画的几种方法，以及播放动画方式的设置方法等。第9页/共28页7.3 案例24“变色缩放文字”动画相关知识1改变预览模式在“视图”菜单中选择有关图形质量的选项，可以加速显示过程或改善
10、显示效果。选择“视图”“预览模式”，然后从以下选项中进行选择：（1）“轮廓”只显示场景中形状的轮廓，从而使所有线条都显示为细线。这样便于改变图形元素的形状，并加快复杂场景的显示速度。（2）“快速”将关闭消除锯齿功能，并显示绘画的所有颜色和线条样式。（3）“消除锯齿”将打开线条、形状和位图的消除锯齿功能，经它处理过的形状和线条的边沿在屏幕上显示出来会更为平滑，此选项的绘画速度比“快速”选项的绘画速度慢很多。（4）“消除文字锯齿”将平滑所有文本的边缘。此命令处理较大的字体大小时效果最好，如果文本数量太多，则速度会减慢。这是最常用的工作模式。（5）“完整”将完全呈现舞台上的所有内容。此设置可能会降低
11、显示的速度。第10页/共28页7.3 案例24“变色缩放文字”动画相关知识2播放和测试Flash动画（1）播放Flash动画：执行“窗口”“工具栏”“控制器”命令，打开“控制器”面板可播放Flash动画；或者执行“控制”“播放”命令或按Enter键，可在舞台窗口内播放该动画。（2）测试Flash动画：执行“控制”“测试影片”命令或按Ctrl+Enter键，可在播放窗口内播放动画；执行“控制”“测试场景”命令，可循环依次播放各场景。3播放动画方式的设置执行“控制”“循环播放”命令，可使舞台工作区内的动画是循环播放；执行“控制”“播放所有场景”命令，可使舞台工作区内播放的动画是所有场景的动画播放。
12、第11页/共28页7.4 案例25“沿框架四边移动的星星”动画 案例效果“沿框架四边移动的星星”动画播放后，在一个七彩矩形框内，一颗红色星星沿边框顺时针移动，同时另一颗紫色星星沿边框逆时针移动。通过学习本案例，可以掌握在舞台工作区内显示或隐藏网格、标尺和辅助线的方法，掌握绘制矩形和立体星星的方法，了解对齐对象的方法等。第12页/共28页7.4 案例25“沿框架四边移动的星星”动画 相关知识1舞台工作区的网格对于网格的应用主要有“显示网格”、“编辑网格”和“对齐网格”三个功能。执行“视图”“网格”“编辑网格”命令，可以显示或隐藏“网格线”。执行“视图”“网格”“编辑网格”命令，打开编辑“网格”对
13、话框，在对话框中可编辑网格的各种属性，完成“网格”的编辑后，制作一些规范图形将变得很方便，可以提高工作效率。如图7-27所示。第13页/共28页7.4 案例25“沿框架四边移动的星星”动画 相关知识2舞台工作区的标尺和辅助线使用“标尺”来度量对象的大小比例。执行“视图”“标尺”命令，可以显示或隐藏“标尺”。显示在工作区左边的是“垂直标尺”，用来测量对象的高度；显示在工作区上边的是“水平标尺”，用来测量对象的宽度。舞台的左上角为“标尺”的“零起点”。执行“修改”“文档”命令，打开“文档属性”对话框，在“标尺单位”下拉列表框中可选择合适的单位。首先要确认“标尺”处于显示状态，在“水平标尺”或“垂直
14、标尺”上按下鼠标并拖动到舞台上，“水平辅助线”或“垂直辅助线”就被制作出来了，“辅助线”默认的颜色为“绿色”。执行“视图”“辅助线”“编辑辅助线”命令，编辑“辅助线”对话框，如图7-28所示，可以在对话框中编辑“辅助线”的颜色，选择是否“显示辅助线”、“对齐辅助线”和“锁定辅助线”。执行“视图”“辅助线”“锁定辅助线”命令，可以将辅助线锁定。执行“视图”“对齐”“对齐辅助线”命令，可以将辅助线对齐。在“辅助线”对话框的“对齐精确度”中可设置“辅助线”的“对齐精确度”。在“辅助线”处于解锁状态时，选择工具箱中的“选择工具”按钮，拖动“辅助线”可改变辅助线的位置，拖动“辅助线”到舞台外可以删除辅助
15、线，也可以执行“视图”“辅助线”“清除辅助线”命令来删除全部的辅助线。第14页/共28页7.4 案例25“沿框架四边移动的星星”动画 相关知识3贴紧对象（1）与网格贴紧：执行“视图”“网格”，选中“网格”对话框中的“贴紧至网格”复选框，在绘制、调整和移动对象时，可以自动与网格线对齐。“网格”对话框中的“对齐精确度”下拉列表框中的“必须接近”、“一般”、“可以远离”和“总是对齐”4个选项可设置贴紧网格的程度。（2）与辅助线贴紧：在舞台工作区中创建了辅助线后，执行“视图”“辅助线”，选中“辅助线”对话框中的“贴紧至辅助线”复选框，在创建、调整和移动对象时，可以自动与辅助线对齐。（3）与对象贴紧：单
16、击按下工具箱中“选项”栏中的“贴紧至对象”按钮，在创建、调整和移动对象时，可以自动与附近的对像贴紧。如果“贴紧至像素”是选中的，则当视图缩放比率设置为400%或更高的时候，会出现一个像素网格。该像素网格代表将出现单个像素。当创建或移动一个对象时，它会被限定到该像素网格内。如果创建的形状边缘处于像素边界内，则切记“贴紧至像素”是贴紧像素边界，而不是贴紧图形的边缘。第15页/共28页7.5 案例26“渐隐渐现图像切换”动画 案例效果“渐隐渐现图像切换”动画播放后，首先显示白天的校园风貌图像，然后变成天黑的有星星和月亮的校园风貌图像，再逐渐变成白天的校园风貌图像。所需素材在“案例26素材”中。通过学
17、习本案例，可以了解元件的分类，可以初步掌握创建图形和影片剪辑元件的方法，掌握编辑元件和实例的方法等。第16页/共28页7.5 案例26“渐隐渐现图像切换”动画 相关知识1元件类型Flash中的元件类型包括三种，即“图形”、“影片剪辑”和“按钮”。（1）创建图形元件图形元件一般是静止的图形。它可由多层构成，但只有一帧。图形不能捕获鼠标消息，也不能完成Action动作和声音控制。能创建“图形元件”的元素可以是导入的位图图像、矢量图形、文本对象以及用Flash工具创建的线条、色块等。（2）创建影片剪辑影片剪辑可以插入Action语言进行控制，但不能捕获鼠标消息。影片剪辑有自己的时间轴、工作舞台和层。
18、将影片剪辑调入场景中后，影片剪辑仍将按照自己的时间轴进行播放。可以把舞台上任何看得到的对象，甚至整个“时间轴”内容创建为一个影片剪辑，也可以把一个影片剪辑放置到另一个影片剪辑中。（3）创建按钮元件按钮元件是用于响应鼠标事件的元件，它可以按照响应显示不同的图像状态。在按钮中可以放置图形元件或影片剪辑元件，但不能在一个按钮中放入另外一个按钮元件。按钮元件由4个关键帧组成，因而有4种不同的状态。1）弹起帧：代表鼠标指针不在按钮上时的状态。如果不定义点击帧，该状态下的对象就会被作为鼠标响应区域。2）指针经过帧：代表鼠标指针在按钮上时的状态。3）按下帧：代表鼠标单击按钮时的状态。4）单击帧：定义鼠标响应
19、的区域，该帧的状态在影片中是看不见的。如果不需要定义响应区域，可以不定义该帧。第17页/共28页7.5 案例26“渐隐渐现图像切换”动画 相关知识2创建元件创建元件的方法有以下几种。所生成的元件都会复制并保存在当前场景的库面板中。（1）对象转化为元件。从舞台上选取对象来创建元件，在“库”中生成相应的“元件”，在舞台上，元素变成了“元件的一个实例”。选择舞台上需要转换的对象，执行“修改”“转换为元件”（或按F8键），弹出“转换为符号”对话框，在“名称”文本框中输入元件的名称，在“行为”中选择元件类型，注册定位点，单击“确定”按钮，被选择的图形对象就成为元件，并复制到库中。（2）创建新元件在确定舞
20、台上没有任何对象被选取的情况下执行“插入”“新建元件”命令（或按快捷键Ctrl+F8），可打开“创建新元件”对话框，在“名称”文本框中可输入元件的名称，选择元件的类型，确定定位点，单击“确定”按钮，即可进入新元件编辑模式。（3）从共享库中选取。Flash自带的例子以及常用元件都能从通用元件库中找到。执行“窗口”“其他面板”“公用库”命令，然后在子菜单中寻找可用的实例即可。第18页/共28页7.5 案例26“渐隐渐现图像切换”动画 相关知识3编辑元件元件的编辑可以在以下几种环境中进行。（1）在元件编辑模式下的工作区中编辑元件：单击选中当前编辑目标的实例，然后执行“编辑”“编辑元件”命令；或者右击
21、该实例，在弹出的快捷菜单中选择“编辑”命令；或者在元件“库”面板中双击该元件，单击在时间细尾部附近的元件编辑按钮，从弹出的快捷菜单中选择，都可以进入该编辑模式。（2）在新建窗口中编辑元件：右击工作区中的编辑目标实例，在弹出的快捷菜单中选择“在新窗口中编辑”命令，进入该模式。（3）在当前位置编辑元件：右击当前工作区中待编辑元件的实例，并从弹出的快捷菜单中选择“在当前位置编辑”命令；或者在工作区中双击该实例，都可进入该编辑环境。第19页/共28页7.6 案例27“快乐的跑”动画 案例效果“快乐的跑”动画播放后，在一组草地图像背景之上，有两个娃娃朝相对和相反的方向奔跑。所需素材在“案例27素材”文件
22、夹中。通过学习本案例，可以了解库和使用“库”面板，掌握使用元件和复制元件的方法，进一步掌握将对象转换为元件的方法和编辑实例等。第20页/共28页7.6 案例27“快乐的跑”动画 相关知识1库库有两种，一种是用户库，也叫“库”面板，用来存放用户创建Flash动画中的元件；另一种是Flash 8系统提供的“公用库”，用来存放Flash 8系统提供的元件，根据存放元件的种类，“公用库”分为三种，一种是“按钮”库，第二种是“学习交互”库，第三种是“类”库。用户库和公用库存放元素的方法是一样的。如执行“窗口”“库”命令，可以打开“库”面板，执行“窗口”“公用库”“按钮”命令，可以打开按钮公用库面板。“库
23、”面板的窗口内列出了库中的所有元素的图标和名称等，可以看出不同的图标，表示不同的类型。“库”面板中的“新建元件”按钮表示单击它将弹出“创建新元件”对话框；“新建文件夹”按钮表示单击它可在“库”面板中创建一个新文件夹；“属性”按钮表示选中“库”面板中的一个元件，再单击它可打开“元件属性”对话框，利用该对话框可以更改选中元件的属性；“删除”按钮表示单击该按钮，可删除“库”面板中选中的元素。第21页/共28页7.6 案例27“快乐的跑”动画 相关知识2使用元件元件的使用就是完成对元件的实例化以及对实例的属性进行设置的过程。设置主要包括实例的颜色、透明度、亮度、色调、大小、元件行为属性、动画播放方式、
24、Action控制等。在“库”中创建元件，是为了可以将其拖到场景或者其他元件中使用。3复制元件在“库”面板中，由一个元件复制出另一个相同的元件有如下两种方法。（1）元件复制为元件的方法：右击“库”面板中的一个元件，弹出该元件的快捷菜单。单击该菜单中的“直接复制”命令，弹出“直接复制元件”对话框，在对话框中选择元件类型和输入名称，再单击该对话框中的“确定”按钮即可。（2）实例复制为元件的方法：单击选中舞台工作区内的一个元件实例，执行“修改”“元件”“直接复制元件”命令，可打开“直接复制元件”对话框，在对话框中选择元件类型和输入名称，再单击该对话框中的“确定”按钮即可。复制元件后，双击“库”面板内复
25、制的元件，进入该元件的编辑状态，修改该元件的属性，即可获得一个新的元件。第22页/共28页7.6 案例27“快乐的跑”动画 相关知识4编辑实例实例创建完成后，可能要对其属性进行修改，这些修改都在“属性”面板中进行。要对实例的属性进行设置，首先在舞台上选择一个实例，并执行“窗口”“属性”命令，打开“属性”面板。（1）实例的“类型”为“影片剪辑”的面板如图7-43所示。（2）实例的“类型”为“图形”的面板中有较多的参数，如图7-44所示，下面是对这些参数的说明。1）“选项”：“循环”表示重复播放；“播放一次”表示只播放一次；“单帧”表示只显示第1帧；2）“第一帧”：指定动画从哪一帧开始播放。（3）
26、实例的“类型”为“按钮”的面板如图所示，有较多的参数，如图7-45所示。下面是对这些参数的说明。1）“选项”：“当作按钮”方式表示当按钮元件被按下时，画面上的其他物体不再对鼠标操作有反应；“当作菜单项”方式表示当按钮元件被按下时，其他的实例还会对鼠标有反应。2）“颜色”：包括“无”、“亮度”、“Alpha（透明度）”和“高级”选项。第23页/共28页7.6 案例27“快乐的跑”动画第24页/共28页7.7 案例28“校园风貌图像切换3”动画 案例效果“校园风貌图像切换3”动画播放后的效果与“案例23校园风貌图像切换2”动画的播放效果一样。通过学习本案例，可以初步掌握增加场景、切换场景、复制场景
27、、场景更名的方法，了解“场景”面板的使用等。第25页/共28页7.7 案例28“校园风貌图像切换3”动画 相关知识1增加场景与切换场景在Flash电影中，演出的舞台只有一个，但是在演出的过程中，可以更换不同的场景。所有的场景都具有相同的时间轴，使用场景可以将电影的时间轴划分为几个帧部分。（1）增加场景：执行“插入”“场景”命令，即可增加一个场景，并进入该场景的编辑窗口。在编辑栏的左边会显示出当前场影的名称。（2）切换场景：执行“窗口”“其他面板”“场景”命令或单击编辑栏右边的“编辑场景”按钮，则会调出“场景”面板，在场景列表中显示了当前电影中所有的场景名称，单击该菜单中的场景名称，可以切换到相
28、应的场景中；或者执行“视图”“转到”命令，可打开其子菜单，利用该菜单，也可以完成场景的切换。第26页/共28页7.7 案例28“校园风貌图像切换3”动画 相关知识2场景面板的使用执行“窗口”“其他面板”“场景”命令，可以打开“场景”面板。利用该面板，可以显示、新建、复制、删除场景，以及给场景更名和改变场景的顺序等。在“场景”面板右下角有三个按钮，从左到右分别是“复制场景”按钮、“添加场景”按钮和“删除场景”按钮。双击“场景”面板内的一个场景名称后，即可给场景更名。用鼠标上下拖动“场景”面板内的场景图标，可以改变场景的前后次序，也就改变了场景的播放顺序。第27页/共28页感谢您的观看！第28页/共28页