网页制作重点课件

网页制作教师：李金双Email：sy_lijsh@126.com第十六讲flash概述网页制作Flash的工作界面Flash软件易学易用，而且用Flash制作的动画具有生动灵活、体积小巧、表现力丰富、网络功能强大等特点，它能通过声音、文字、动画的结合来综合表现作者的创意，制作出高品质的网页动态效果。Flash界面Flash的菜单10个菜单【文件】：用于文件操作，如创建、打开和保存文件等。【编辑】：用于动画内容的编辑操作，如复制、剪切和粘贴等。【视图】：用于对开发环境进行外观和版式设置，包括放大、缩小、显示网格及辅助线等。【插入】：用于插入性质的操作，如新建元件、插入场景、图层和帧等。【修改】：用于修改动画中的对象、场景甚至动画本身的特性，主要用于修改动画中各种对象的属性，如帧、图层、场景以及动画本身等。【文本】：用于对文本的属性进行设置。【命令】：用于对命令进行管理。【控制】：用于对动画进行播放、控制和测试。【窗口】：用于打开、关闭、组织和切换各种窗口面板。【帮助】：用于快速获得帮助信息。1.绘图工具区【选择】工具：选定舞台中的对象、拖动对象等操作。【部分选取】工具：可以选取对象部分区域。【线条】工具：使用此工具可以绘制各种形式的线条。【套索】工具：选择一个不规则的图形区域，并且还可以处理位图图形。【钢笔】工具：可以使用此工具绘制曲线。【文本】工具：用于添加文本。【椭圆】工具：用于绘制椭圆，也可以绘制正圆。【矩形】工具：用于绘制矩形，也可以绘制正方形。【铅笔】工具：用于绘制折线、直线等。【刷子】工具：用于绘制填充图形。【墨水瓶】工具：用于编辑线条的属性。【颜料桶】工具：用于编辑填充区域的颜色。【滴管】工具：用于将图形的填充颜色或线条属性复制到别的图形线条上，还可以采集位图作为填充内容。【橡皮擦】工具：用于擦除舞台上的内容。Flash的工具箱2.查看区【手形】工具：当舞台上的内容较多时，可以用该工具平移舞台以及各个部分的内容。【缩放】工具：用于缩放舞台中的图形。3.颜色设置区【笔触颜色】工具：用于设置线条的颜色。【填充色】工具：用于设置图形的填充区域。4.选项区选项区的内容是对绘图工具中部分工具的补充，该选项区中的内容会随着当前选择工具的不同而有所变化。Flash的工具箱常用基本概念帧图层场景元件时间轴位图矢量图逐帧动画与补间动画动作脚本帧帧就像电影中的底片，制作动画的大部分操作都是对帧的操作，不同帧的前后顺序将关系到这些帧中的内容在影片播放中的出现顺序。在时间轴窗口中，帧用小矩形的方格表示，一个方格表示1帧。帧是一个广义概念，它包含3种类型，分别是空白关键帧、关键帧和普通帧。1.空白关键帧2.关键帧3.普通帧图层图层就像透明的薄片一样，一层一层地向上叠加。图层可以帮助用户组织文档中的插图，可以在图层上绘制和编辑对象，而不会影响其他图层上的对象。如果一个图层上没有内容，那么就可以透过它看到下面的图层。场景Flash动画在网页上相当于一部小型的电影，在制作过程中需要使用不同的场景。通过场景的不断变化以及一些特效的加入，然后在导演的指挥下各个演员按预定的时间出现在舞台中，最终成为一部小型电影，这就是Flash动画。元件元件是可以重复使用的图像、动画或按钮，它们保存在库中。实例是出现在舞台上或者嵌套在其他元件中的元件。元件的运用可以使影片的编辑更加容易，因为在需要对许多重复的元素进行修改时，只要对元件做出修改，程序就会自动根据修改的内容对所有该元件的实例进行更新。在Flash中元件可分为3类，分别是影片剪辑元件、按钮元件和图形元件。选择【插入】|【新建元件】命令，弹出【创建新元件】对话框。时间轴时间轴用于对层和帧中的影片内容进行组织和控制，使这些内容随着时间相应地变化。时间轴主要由层、帧和播放头组成。位图位图图像使用排列在网格内的彩色点来描述图像，这些颜色点被称为像素。在编辑位图图像时，修改的是像素，而不是直线和曲线。位图图像与分辨率有关，因为描述图像的数据是固定到特定尺寸的网格上的。编辑位图图形可以更改它的外观品质。特别是调整位图图形的大小会使图像的边缘出现锯齿，如图所示是位图放大前后的效果。矢量图矢量图形采用直线和曲线来描述图形，称这些直线和曲线为矢量。每一条直线和曲线都有其属性，它的属性包括直线和曲线的位置信息、颜色信息等。当修改一幅矢量图形时，实际修改的是矢量图形的直线和曲线的属性。可以移动、缩放、变形和改变一幅矢量图形的颜色而不影响矢量图形的质量以及矢量图放大前后的效果，图像仍然保持原有的清晰度和光滑度。矢量图形与分辨率无关，这意味着它们可以显示在各种分辨率的输出设备上，而丝毫不影响其品质。如图所示是矢量图放大前后的效果。逐帧动画与补间动画逐帧动画是更改每一帧中的舞台内容，它最适合于每一帧中的图像都在更改而不是仅仅简单地在舞台中移动的复杂动画。制作逐帧动画的工作量非常大，但是能够表达出复杂的动画。补间动画是创建随时间移动或更改动画的一种有效方法，能最大程度地减小所生成的文件大小。动作脚本动作脚本是一种面向对象的编程语言。面向对象的编程使用对象（或称作数据结构）将控制对象行为和外观的属性和方法组合在一起。使用对象可以组织并重用代码。定义了一个对象后即可通过名称引用该对象，而无需在每次使用它时重新进行定义第十七讲创建简单的动画网页制作设置舞台场景每个场景都有高、宽、背景颜色和帧频属性，因此在编辑动画前，需要设置场景的属性。选择【修改】|【文档】命令，打开【文档属性】对话框，在此对话框中可以修改场景的属性。在【文档属性】对话框中可以进行如下设置。【帧频】：在【帧频】文本框中输入播放速度。【尺寸】：在【宽】和【高】文本框中设置场景的宽度和高度。【背景颜色】：单击后面的颜色框，在弹出的调色板中可以设置场景的背景颜色。【默认】：选中此按钮可以将设置的参数保存为默认参数。修改了默认的参数并且此单选按钮后，以后新建的动画都会使用此默认参数。图形移动动画创建新图形元件创建关键帧补间动画图像颜色渐变设置文档属性778*203导入图片到舞台转换图片为元件插入关键帧设置图片颜色补间动画制作时间轴特效动画阴影文字爆炸效果展开效果模糊效果制作模版动画选择模版创建文档照片幻灯片放映替换模版内容第十八讲绘图基础网页制作线条工具线条工具主要用来绘制各样直线。单击“工具箱”里的“线条工具”，光标变成十字形状，在舞台上按下鼠标左键拖动，绘制一条直线。单击“属性面板”中的“笔触按钮”，在打开的颜色表中，选择用户需要的线条颜色。单击“属性面板”中的“笔触宽度”，通过调整滑块的位置来选择线条的粗细。单击“属性面板”中的“笔触样式”，在打开的下拉列表里选择所需线条的形状。另外，还可以单击“属性面板”中的“自定义”按钮，设置更多线条的形状。铅笔工具铅笔工具可以用来绘制任意形状的线条。单击“工具箱”里的“铅笔工具”，光标会变成一枝铅笔的形状，在舞台上按下鼠标左键拖动，绘制出任意线条。铅笔工具一共有三种模式可供选择：伸直、平滑、墨水，选择“铅笔工具”，单击“选项”里的铅笔模式。钢笔工具钢笔工具可以用来绘制直线，也可以用来绘制精确平滑的曲线。单击“工具箱”里的“钢笔工具”，光标变成钢笔的形状，首先在舞台中单击左键，定位第一个锚记点，光标移动到第二个锚记点的位置，如果是绘制直线直接单击左键即可，如果是绘制曲线，按下鼠标左键拖动，在锚记点上会显示一条切线，通过拖拽切线来控制曲线的弧度和方向，确认后松开鼠标左键，光标移动到下一个锚记点，用同样的方法绘制。椭圆工具和矩形工具椭圆工具可以用来绘制椭圆图形。单击“工具箱”里的“椭圆工具”，光标变成十字形状，在舞台中按下鼠标左键拖动，可以绘制出椭圆图形。如果在绘制的同时按住键盘SHIFT键，可以绘制出正圆图形。矩形工具可以用来绘制直角矩形和圆角矩形。单击“工具箱”里的“矩形工具”，光标变成十字形状，在舞台中按下鼠标左键拖动，可以绘制出直角矩形图形。如果在绘制的同时按住键盘SHIFT键，可以绘制出正方形图形。如果要绘制圆角矩形，选择“矩形工具”后，单击“选项”里的“矩形圆角半径”，打开“矩形设置”对话框，设置所需圆角矩形的边角半径。椭圆工具和矩形工具在“矩形工具”里还包含一个“多角星形工具”，使用“多角星形工具”可以绘制出多种多边形和星形。左键按下矩形工具按钮一会，在打开的菜单里选择“多角星形工具”，单击“属性”栏的“选项”按钮，打开“工具设置”对话框。在对话框里设置好参数，在舞台按下鼠标左键拖动，可以绘制出所需图形。刷子工具刷子工具可以用来绘制各种形状的图形。单击“工具箱”里的“刷子工具”，在“选项”里可以设置刷子的模式、刷子的大小和形状。五种刷子模式（1）在“标准绘画”模式下，刷子经过的地方都会被填充刷子颜色。（2）在“颜料填充”模式下，刷子经过的地方除了线条和图形边框外，都被填充刷子颜色。（3）在“后面绘画”模式下，刷子绘制的形状在所有图形的后面，其他图形没有变化。（4）在“颜料选择”模式下，刷子只能在选定的颜色范围内使用，否则无效。刷子工具五种刷子模式（5）在“内部绘画”模式下，刷子只能在选定的区域范围内使用，否则无效。“刷子工具”在五种模式下的效果如图所示。选择工具选择工具主要是用来选择舞台中的图形。单击“工具箱”中的“选择工具”，鼠标指针移动到要选择的图形上，单击鼠标左键，即可选中图形。也可以将鼠标指针放在图形外面，按下左键拖动，用矩形选取框选中所需图形，这种方法可以选中多个图形，也可以选择图形的一部分。选取工具的使用选择工具也可以用来改变图形的形状。单击“工具箱”中的“选择工具”，鼠标指针移动到要变形的图形轮廓，可以改变图形的角度，也可以改变图形轮廓的弧度。改变角度后的效果改变轮廓弧度后的效果套索工具也是一种选取工具，可以选择任意选区范围，主要用于外部导入的位图编辑。单击“工具箱”中的“套索工具”，光标变成套索的形状，在舞台上按下鼠标左键拖动，选取所要的区域。套索工具任意变形工具可以用来改变图形的大小、形状和角度。选择图形，单击“工具箱”中的“任意变形工具”，在“选项”里有“旋转与倾斜”、“缩放”、“扭曲”和“封套”四种变形方式。任意变形工具选择“旋转与倾斜”方式，光标放在图形四个顶点上的黑色句柄，变成形状，按下鼠标左键拖动即可选转图形。旋转的中心点是图形中间的白色圆圈，位置可以随意移动。如果光标放在图形四条边上的黑色句柄，按下鼠标左键拖动即可倾斜图形。选择“缩放”方式，光标放在图形的任何一个黑色句柄上，变成形状，按下鼠标左键拖动即可改变图形大小。选择“扭曲”方式，光标放在图形的任何一个黑色句柄上，变成形状，按下鼠标左键拖动即可扭曲图形。选择“封套”方式，图形变框上会出现很多黑色圆型节点，在节点上按下鼠标左键拖动即可改变图形形状。文字工具用来输入动画中使用的文字内容。单击“工具箱”中的“文字工具”，光标移动到舞台中文字输入的位置，单击左键可以输入文字。可以创建三种文字静态文字动态文字输入文字文字工具第十九讲创建基本图形元件网页制作

元件是制作FLASH动画的主要工具之一，特别是制作动作补间动画。元件类型有影片剪辑、按钮和图形三种。元件存放在FLASH动画的“库”中。任何一个元件都可以在舞台或其它元件里多次调用，每次调用就相当于创建了一个该元件的实例。由于一个元件可以创建多个实例，每个实例可以有不同的属性，这样就可以大幅减小动画的体积，便于网络中浏览和传播。元件和实例

库面板一个元件的三个实例单击“插入”菜单，选择“新建元件”，打开“创建新元件”对话框。在对话框里选择元件类型，输入名称，单击“确定”按钮，创建新元件。创建元件在元件中可以包含图形、文字和外部导入的图像、声音和动画等。在舞台左上角显示编辑元件的名称，创建新的元件后，在“库”面板中就会显示元件的记录。编辑元件单击“窗口”菜单，选择“库”，打开库面板，在库面板里显示当前动画包含的所有元件，左键双击要修改的元件就可以进入元件编辑状态。创建实例在舞台中元件的属性，在颜色中可以更改元件的亮度、色调、alpha（透明度）和高级属性。创建影片剪辑元件创建影片剪辑元件的具体操作步骤如下(1)选择【插入】|【新建元件】命令，弹出【创建新元件】对话框。(2)在对话框中的【名称】文本框中输入元件的名称，在【类型】列表中选中【影片剪辑】单选按钮，单击【确定】按钮，切换到影片剪辑编辑窗口。(3)根据需要，用户可以在影片剪辑编辑窗口中进行编辑。(4)完成元件内容制作以后，选择【编辑】|【编辑文档】命令，返回场景窗口。创建按钮元件按钮是元件的一种，它可以根据可能出现的每一种状态显示不同的图像、响应鼠标动作和执行指定的行为。按钮有特殊的编辑环境，通过在4帧时间轴上创建关键帧，指定不同的按钮状态。【弹起帧】：表示鼠标指针不在按钮上时的状态。【指针经过帧】：代表鼠标指针在按钮上时的状态。【按下帧】：表示鼠标单击按钮时的状态。【单击帧】：定义对鼠标单击做出反应的区域，这个反应区域在影片中是看不见的。第二十讲创建基本动画网页制作插入帧帧的删除、移动、复制、转换与清除设置帧频帧的使用与编辑图层面板位于时间轴的左侧。在层面板里用户可以进行以下操作：创建层和层文件夹、更改层的名称、移动层、删除层、隐藏和锁定层。创建层和层文件夹：在创建一个新的flash文件时，默认只有一个图层，对于效果比较复杂的动画，是远远不够的，这就需要插入新的图层。单击层面板里的，可以插入新的图层。对于有关联的图层，我们可以创建层文件夹组织管理，单击层面板里的，将有关联的层放在层文件夹里。图层图层面板创建层和层文件夹更改层的名称：当动画中含有多个图层，用户可以为图层设定便于区别的名称，在层面板中左键双击层的名称，就可以更改。单击层面板上的对应小黑点，可以隐藏图层，图层里所包含的图形就从舞台中消失，再单击就可以取消隐藏；单击层面板上的对应小黑点，可以锁定图层，图层里的图形还显示在舞台上，但是不可以选中或编辑，这样避免调整其他图形时对该物体进行误操作，再单击可以取消锁定。更改层的名称

隐藏和锁定图层逐帧动画逐帧动画就是将动画的动作效果分解，逐步实现，动画中的每一帧都是关键帧。这种动画制作方法复杂，过程繁琐，最后生成的动画文件也相当庞大。但是这种动画可以用来描述动作比较复杂、效果比较细腻的动画，这种动画可以很好的模拟三维效果，在FLASH动画中也是比较常用的一种方式。当我们导入外部动画时，外部动画都会被导入为逐帧动画。形状补间动画主要用于制作图形变形的动画，是FLASH中一种重要的动画表现方式。在动画中，用户可以调整图形的形状、位置和颜色以达到动画效果。形状补间动画只可以使用在图形，文字、元件和外部导入的图像都要转换为图形后才可以制作动画效果。形状补间动画动作补间动画动作补间动画是FLASH动画中最主要的动画表现方式。动作补间动画的构成元素是之前提到的元件，并且不同属性、动画效果的元件要摆放在不同的图层内。在动画里，可以通过更改元件的坐标、大小、旋转和透明度实现动画效果。动作补间动画的变化很多，熟练使用可以制作出很多绚丽的动画作品，甚至可以模仿出逼真的三维效果。遮罩效果在FLASH动画中的应用可谓是变幻莫测，是一种重要的动画表现方式。制作遮罩动画需要使用到遮罩图层，在遮罩图层里可以插入任何物体，最常用的就是图形和文字，也可以给物体制作各类动画。在遮罩图层里的物体不论是什么颜色都是完全透明的，通过这些透明物体可以看到下方图层内容，其它地方的内容就被遮罩层完全覆盖。遮罩动画引导线动画移动动画是动画效果里的一个基本元素，前面我们介绍的移动动画不论如何调整属性，都是进行的直线运动，但实际生活中有很多的运动不是以直线为轨迹的了，当运动路径为任意曲线的时候，我们就需要使用到引导线功能。在动画中使用引导线，需要先创建引导层。在引导层中的内容可以是使用钢笔、铅笔、线条、椭圆工具或矩形工具等绘制出的线段，绘制线段时尽量使路径圆滑，否则很可能导致线段断开，引导线功能不成功。第二十一讲创建有声动画网页制作声音的导入和使用Flash中不能自行创建或录制声音，编辑动画所使用的声音素材都要从脚本外部以文件的形式导入到Flash中。Flash将音频文件存放在库中，在编辑动画过程中，如果要反复用到同一个声音文件，可以只保留一个声音文件的副本，然后在动画中以不同的方式使用。导入声音通过将声音文件导入当前文档的库，可以把声音文件加入到Flash中。Flash提供多种控制音频的方法，可以让声音独立于时间轴循环播放，也可以专为动画配上一段音乐，或是为按钮添加某种声音，还可以让声音渐入渐出，造成余音绕梁的效果。用户可以将以下声音文件格式导入到Flash中：WAV，AIFF和MP3。使用声音一般在Flash动画中声音主要用于两个方面，分别是按钮和主时间轴。下面具体介绍怎样向这两个对象添加声音效果。1.为按钮添加声音2.向主时间轴添加声音网上大部分的动画都有自身的背景音乐，这个背景音乐往往就是在影片的主时间轴中添加的声音文件，这个声音将贯穿整个动画。声音的属性设置选中声音所在的帧，在【属性】面板中可以选择声音文件、改变播放效果和播放类型等。音效的设置设置声音重复的次数音效的设置【效果】选项用来设置声音的音效，其下拉列表中有以下几个选项。【无】：表示对声音元件不加任何效果，选择该项可取消以前设定的效果。【左声道】和【右声道】：分别表示只在左声道或者右声道播放声音。【从左到右淡出】和【从右到左淡出】：分别表示声音的播放从左声道移到右声道，或者从右声道移到左声道。【淡入】：表示在声音播放期间逐渐增大音量。【淡出】：表示在声音播放期间逐渐减小音量。【自定义】：允许创建自己的声音效果，可以从【编辑封套】对话框中进行编辑。设置声音重复的次数单击选定声音帧，然后在【属性】面板的【重复】文本框中输入需要重复的次数，输入2表示循环2次播放。再次单击时间轴上的声音帧或按Enter键，时间轴上已经复制出2个波形。声音的压缩选中【库】面板中需要压缩的声音文件，右击，在弹出的快捷菜单中选择【属性】命令，弹出【声音属性】对话框。在【声音属性】对话框中可以进行如下设置。【更新】：对声音进行更新。【导入】：单击此按钮，可以重新导入一个声音文件。【测试】：单击此按钮，可以测试声音效果。【停止】：单击此按钮，可以停止声音测试。【压缩】：单击此按钮，可以设置声音输出格式。在其右侧的下拉列表中选择声音的输出格式。导入视频在Flash中，用户可以导入QuickTime或Windows播放器支持的标准媒体文件夹。对于导入的视频对象，可以进行缩放、旋转、扭曲和遮罩处理，也可以通过编写脚本来创建视频对象动画。导入视频对象的具体操作步骤如下。(1)新建一个空白文档，选择【文件】|【导入】|【导入视频】命令，弹出【导入视频】对话框，单击【浏览】按钮，弹出【打开】对话框，在对话框中选择导入的视频，单击【打开】按钮，将视频路径添加到【文件路径】后面的文本框中。(2)单击【下一个】按钮，弹出部署界面。(3)选中【从Web服务器渐进式下载】单选按钮，单击【下一个】按钮，进入编码界面。(4)单击【下一个】按钮，进入外观界面。(5)单击【下一个】按钮，进入完成视频导入界面。(6)单击【完成】按钮，弹出【另存为】对话框，在对话框中选择视频文件保存的路径。(7)单击【保存】按钮，添加视频。(8)选择【控制】|【测试影片】命令，测试动画。第二十二讲创建交互式动画网页制作概述前面我们制作的动画在进行播放时是按顺序播放，用户不可以人为干预，无法控制动画的播放进程。在交互式动画中，我们可以通过键盘或鼠标使影片按预先的设置进行播放，这就需要使用到动作脚本。ActionScript编辑环境动作面板是Flash提供的进行ActionScript编程的专用环境，在开始向动画中添加ActionScript脚本之前，首先来熟悉一下动作面板。动作面板的一个典型状态如图所示。1.动作工具箱2.程序添加对象3.动作编辑区4.工具栏ActionScript语法1.点语法2.斜杠语法3.大括号4.小括号5.关键字6.注释7.分号和常量变量在脚本程序中，变量是一个重要的概念，就象是一个容器，可以在里面装各种各样的数据。1.变量的命名变量的命名主要遵循以下3条规则：变量必须是以字母或者下划线开头，其中可以包括$、数字、字母或者下划线，如_myAge、_x2。变量不能和关键字同名，并且不能是true或者false。变量在自己的有效区域里必须唯一。2.变量的作用域变量只能在其作用域中被引用。在脚本程序中可将变量分为全局变量和局部变量。一个全局变量可以在所有的时间轴中共享，而一个局部变量仅在它所属的代码块内可用。在程序中局部变量被大量地使用，因为使用局部变量可以有效地防止名称的冲突，并且在函数内部使用局部变量将会使函数成为可重用的独立代码段。但在有些情况下只能使用全局变量，例如，要在一个代码块中引用另一个代码块中的变量，或者要在整个动画中传递某个变量的值。3.变量声明声明全局变量，可以使用“setvariables”动作或赋值操作符；声明局部变量，可以在函数体内部使用“var”语句来实现，局部变量的作用域被限定在所处的代码块中，并在块结束处终结。如果没有在块的内部被声明的局部量将在其脚本结束处终结。4.变量的赋值数据类型数据类型描述了一个变量或者元素能够存放何种类型的数据信息。ActionScript的数据类型分为基本数据类型和引用数据类型。基本数据类型都有一个不变的值，如字符串、数字和布尔数等，可以保存它所表示元素的实际值。引用数据类型的值可以改变，所以它们所包含的是对元素实际值的引用，如电影片段和对象。运算符在ActionScript中，运算符用于指定表达式中的值将如何被联合、比较或者是改变，操作符的动作对象称为操作数。动作工具箱中的“运算符”工具夹中包含了ActionScript的各种操作符，如图22.6所示。1.数值运算符2.比较运算符3.逻辑运算符4.位运算符5.赋值运算符6.相等运算符添加ActionScript在Flash中可以在以下几个对象中插入ActionScript。为帧添加动作为按钮添加动作为影片剪辑添加动作为帧添加动作在默认情况下，Flash制作的影片播放