Flash CS3网站商业设计从入门到精通2.ppt

7.3.1 startDrag()函数和stopDrag()函数,startDrag()函数用来使目标影片剪辑在影片播放过程中可拖动。一次只能拖动一个影片剪辑。执行startDrag()操作后，影片剪辑将保持可拖动状态，直到用stopDrag()停止拖动为止，或直到对其他影片剪辑调用了startDrag()动作为止。其用法为：startDrag(目标,固定,左,顶部,右,底部);,7.3.2 setProperty()函数,setProperty()函数的作用是，当影片剪辑播放时，更改影片剪辑的属性值。其一般用法为：setProperty(目标,属性,值);目标：需要设置其属性的影片剪辑的实例名称的路径。属性：需要设置的属性。值：属性的新值或计算结果为属性新值的等式。,7.3.3 实例制作,本例的关键在于，要根据当前鼠标指针的位置实时指定放大镜内图片的坐标位置。因此，在将图片放置在元件内时，要注意图片的坐标位置与元件中心及其他元素的位置关系。,7.3.3 实例制作,步骤如下:将地图图片缩小为50%将地图转换为图形元件,7.3.3 实例制作,步骤如下:放大镜元件内的舞台显示 设置放大镜位置,7.4 360度展示商品,7.4 360度展示商品,7.4.1 影片剪辑的鼠标事件处理函数,1MovieClip.onPress事件处理函数2MovieClip.onRelease事件处理函数3MovieClip.onReleaseOutside事件处理函数,7.4.2 实例制作,在制作本例之前，首先需要准备好一组图片。这组图片是需要展示的商品在各个角度的照片。注意确保准备的图片在拍摄角度上的连贯性，以及在距离、灯光等拍摄条件上的一致性。最好使用PhotoShop等照片处理软件将照片中的商品单独取出，并制作成背景透明的PNG格式图片。,7.4.2 实例制作,步骤如下:导入图像序列对话框 导入图像序列,7.4.2 实例制作,步骤如下:使用按钮控制相机的显示 使用鼠标拖曳相机的旋转,7.5 鼠标跟随效果（一）,7.5 鼠标跟随效果（一）,7.5.1 获取随机数值,1random()函数:random()函数可用来返回一个随机整数，此整数介于0和指定数字之间（包括0而不包括指定数字）。其用法为：random(数字);2Math.random()方法:random()函数在Flash Player 5之后已不推荐使用了，可以通过使用Math.random()方法来取得随机数值。该方法可用于返回一个伪随机数n，其中0n1。,7.5.2 影片剪辑的复制方法,1duplicateMovieClip()函数和removeMovieClip()函数duplicateMovieClip()函数用于在影片播放时创建一个影片剪辑的实例。无论播放头在原始影片剪辑中处于何位置，在复制的新影片剪辑中，播放头始终从第1帧开始。原始影片剪辑中的变量不会复制到新的影片剪辑中。2MovieClip.duplicateMovieClip()方法和MovieClip.removeMovieClip()方法MovieClip.duplicateMovieClip()方法用于在影片播放时，创建指定影片剪辑的实例。,7.5.3 实例制作,本例的鼠标跟随效果是通过不断地复制出新的圆点实例来实现的。当复制出的圆点实例经过一段时间后将会在舞台上消失，不会再次出现。这时候，就需要将已消失的圆点从影片中删除掉。如果不删除，将会占用大量的系统资源，严重影响影片的正常播放。,7.5.3 实例制作,步骤如下:绘制背景图形 创建白色圆点图形,7.5.3 实例制作,步骤如下:,修改图形的大小位置和透明度 创建补间动画,7.6 鼠标跟随效果（二）,7.6 鼠标跟随效果（二）,7.6 鼠标跟随效果（二）,步骤如下:,绘制背景图形 制作圆圈图形,7.6 鼠标跟随效果（二）,步骤如下:,创建补间动画,7.7 鼠标遮罩,7.7 鼠标遮罩,7.7 鼠标遮罩,步骤如下:,原图片 模糊处理后的图片,绘制遮罩图形 放置遮罩图形,7.7 鼠标遮罩,步骤如下:,放置mask2实例 放置mask1实例,7.8 换装游戏,7.8 换装游戏,7.8.1 交换影片剪辑深度的方法,MovieClip.swapDepths()方法用于交换两个影片剪辑的深度级别，或将影片剪辑放置到指定的深度级别。用法1：MovieClip.swapDepths(目标);用法2：MovieClip.swapDepths(深度);,7.8.2 for语句,for语句的一般形式为：for(初始化表达式;条件表达式;递增表达式)/要在循环内执行的程序,7.8.3 实例制作,实现各种衣饰的随意拖动和摆放是本例制作成功的关键所在。步骤如下:,绘制女孩形象 绘制一件上衣,7.8.3 实例制作,步骤如下:,7.9 动态画板,7.9 动态画板,7.9.1 影片剪辑的创建和附加方法,1MovieClip.createEmptyMovieClip()方法:此方法用来创建一个空影片剪辑作为现有影片剪辑的子级。其行为类似于attachMovie()方法，但是不必为新的影片剪辑提供外部链接标识符。新创建的空影片剪辑的注册点为左上角。2MovieClip.attachMovie()方法:此方法用来从“库”面板中取得一个元件并将其附加到影片剪辑中。使用MovieClip.removeMovieClip()或MovieClip.unloadMovie()方法可以删除通过attachMovie()方法附加的影片内容。,7.9.2 Object()构造函数,Object()构造函数用于创建Object对象，并将对该对象的构造函数方法的引用存储在该对象的构造属性中。,7.9.3 可用于侦测鼠标按键的函数和方法,1MovieClip.onMouseDown事件处理函数2MovieClip.onMouseUp事件处理函数3Mouse.addListener()方法,7.9.4 绘制线条的方法,1MovieClip.moveTo()方法:此方法用来将当前绘画位置移动到指定的位置。2MovieClip.lineTo()方法:此方法用来使用当前线条样式绘制一条从当前绘画位置到指定位置（x，y）的线条；当前绘画位置随后会设置为（x，y）。3MovieClip.lineStyle()方法:此方法用于指定一个线条样式，Flash将用该样式对lineTo()和curveTo()方法进行后续调用。4MovieClip.clear()方法:此方法用于删除使用影片剪辑绘画方法（包括用MovieClip.lineStyle()指定的线条样式）在运行时创建的所有图形。,7.9.5 实例制作,本例中，将通过创建空影片剪辑的方法来创建用于绘制的画板。同时，将会在画板上方添加一层半透明的画布，以实现纸面的纹理效果。在制作时，要注意通过深度的分配来设置画板中各元素的层叠次序。,7.9.5 实例制作,步骤如下:,制作背景 设置链接属性,7.9.5 实例制作,步骤如下:,测试当前画板效果 制作“清除”按钮,7.9.5 实例制作,步骤如下:,放置“清除”按钮,第8章 Flash常用交互技术随机复制,使用ActionScript可以实现许多利用传统时间轴技术不能或不容易实现的动画效果，如随机的雨雪等天气动画效果。这类效果主要是通过随机控制影片中对象的播放，以及随机复制各种对象来实现的。本章将通过几个实例，来向读者提供此类效果的制作方法和思路。,8.1 随机遮罩,8.1 随机遮罩,8.1.1 设置遮罩方法,MovieClip.setMask()方法可以用于将影片剪辑指定为另一个影片剪辑的遮罩。该方法允许具有复杂、多层内容的多帧影片剪辑充当遮罩。在使用遮罩的影片剪辑中包含的设备字体不能被遮罩。同时，不能将影片剪辑设置为其自身的遮罩。,8.1.2 实例制作,本例中，随机出现的15个正方形格将会组成完整的画面。步骤如下:,放置背景图形 绘制遮罩图形,8.1.2 实例制作,步骤如下:,放置mask1实例 放置所有的maskN实例,8.2 水珠特效,8.2 水珠特效,8.2 水珠特效,在编写控制水珠滴落的ActionScript脚本之前，首先需要制作一个逼真的水珠对象，并为水珠制作一个滴落的动画。步骤如下:,放置背景图形 绘制椭圆图形,8.2 水珠特效,步骤如下:,放置隐形按钮 添加“帧”标签,8.3 落雪效果,8.3 落雪效果,8.3.1 数学函数计算方法,1Math.sin()方法 2Math.cos()方法3Math.tan()方法 4Math.asin()方法5Math.acos()方法 6Math.atan()方法7Math.atan2()方法,8.3.2 实例制作,编写本例中ActionScript脚本的关键在于通过各种变量来实时改变每个雪花实例的坐标位置。由于雪花的坐标值改变是由相应的变量值决定的，为相应变量指定不同的初始值，可以很方便地实现各种落雪效果（例如和风细雪或疾风骤雪等）。,8.3.2 实例制作,步骤如下:,绘制背景图形 绘制建筑物,8.3.2 实例制作,步骤如下:,绘制雪花图形 放置snow实例,第9章 Flash常用交互技术数学计算,在制作Flash游戏以及各种应用程序时，会用到大量的数学计算。在制作各类课件时，也会应用到Flash中的数学计算功能。前面章节中已经涉及到了Flash的一些计算功能。本章将提供两个实例，向读者展示运用数学计算来制作一些交互程序的方法和思路。,9.1 简易计算器,9.1 简易计算器,9.1.1 length()函数,length()函数可以用于返回指定字符串或变量的长度。其用法为：length(字符串或变量名);,9.1.2 Number()函数,Number()函数可用于将指定的表达式转换为特定的数字。其用法为：Number(表达式);,9.1.3 实例制作,在本例的ActionScript脚本中，在不同的数据类型之间进行正确地交换，是同时实现计算和显示功能的一个关键所在。,9.1.3 实例制作,步骤如下:,制作计算器面板 制作计算器按键,9.1.3 实例制作,步骤如下:,添加三个动态文本框 添加按键文字,9.2 数学三角形,9.2 数学三角形,9.2.1 绘制填充的方法,1MovieClip.beginFill()方法此方法用来表示新的绘画路径的开始。2MovieClip.endFill()方法对从上一次调用beginFill()或beginGradientFill()之后存在的直线或曲线应用填充。,9.2.2 创建文本字段的方法,1MovieClip.createTextField()方法此方法用来创建一个新的文本字段。其用法为：my_mc.createTextField(实例名称,深度,x,y,宽度,高度);2TextField.multiline属性该属性用于表示文本字段是否为多行文本字段。3TextField.wordWrap属性该属性用于表示文本字段是否自动换行。4TextField.selectable属性该属性用于表示文本字段是否可选。,9.2.2 创建文本字段的方法,5TextField.text属性该属性用于表示文本字段中的当前文本。6TextFormat.color属性该属性用于指示文本的颜色。7TextFormat.underline属性该属性用于指示文本有下划线（true）还是没有下划线（false）。8TextField.setTextFormat()方法该方法用于将指定的文本格式应用于文本字段中的某些文本或全部文本。,9.2.3 数学根幂计算方法,1Math.sqrt()方法此方法用来计算并返回指定数字的平方根。2Math.pow()方法此方法用于计算并返回x的y次幂，即xy。,9.2.4 实例制作,本例中，用于显示坐标位置及长度的动态文本字段需要根据顶点位置的变化随时改变位置。因此应当通过ActionScript编程的方法在影片中建立文本字段，而不是使用工具栏中的文本工具创建。,9.2.4 实例制作,步骤如下:,绘制顶点图形 三角形的3个顶点,第10章 Flash常用交互技术时间日期,对于许多使用Flash制作的游戏或网络应用程序来说，其正常运行往往需要借助于对系统时间的读取和控制。因此，在ActionScript语言中提供了一些可以用于获取系统时间的方法。本章通过几个关于钟表的实例，来向读者展示通过获取时间来实现一些影片交互效果的方法和思路。,10.1 电子表,10.1 电子表,10.1.1 Array()构造函数,Array()构造函数可以用来创建不同类型的数组：空数组、具有特定长度但其中元素具有未定义值的数组或其中元素具有特定值的数组。用法1：my_array=new Array();用法2：my_array=new Array(长度);,10.1.2 获取日期时间的方法,1.Date()构造函数：该构造函数可用于构造一个新的Date对象，以用来保存指定的日期和时间。2Date.getFullYear()方法：此方法用于按照本地时间返回指定的Date对象中的完整年份值（一个4位数，例如2000）。3Date.getMonth()方法：此方法用于按照本地时间返回指定的Date对象中的月份值（0代表一月，1代表二月，依此类推）。4Date.getDay()方法：此方法用于按照本地时间返回指定的Date对象中表示星期几的值（0代表星期日，1代表星期一，依此类推）。,10.1.2 获取日期时间的方法,5Date.getDate()方法：此方法用于按照本地时间返回指定的Date对象中表示月中某天的值（131之间的整数）。6Date.getHours()方法：此方法用于按照本地时间返回指定的Date对象中的小时值（023之间的整数）。7Date.getMinutes()方法：此方法用于按照本地时间返回指定的Date对象中的分钟值（059之间的整数）。8Date.getSeconds()方法：此方法用于按照本地时间返回指定的Date对象中的秒钟值（059之间的整数）。9Date.getMilliseconds()方法：此方法用于按照本地时间返回指定的Date对象中的毫秒数（0999之间的整数）。,10.1.3 实例制作,本例中，在舞台上创建了两个动态文本，一个用来显示当前日期，一个用来显示当前时间。也可以根据需要将这两个文本字段合并为一个，或者分为多个，只需要相应地修改脚本中变量的值即可。,10.1.3 实例制作,步骤如下:,绘制背景图形,10.1.3 实例制作,步骤如下:,添加显示日期的动态文本框 添加显示时间的动态文本框,10.2 时钟,10.2 时钟,10.2 时钟,为了模拟真实钟表的运行效果，在钟表指针下方添加了指针的阴影。因此，除了需要控制指针的旋转外，还要同步控制指针阴影的旋转。,10.2 时钟,步骤如下:,时钟的表盘 时针 时针的阴影,10.2 时钟,步骤如下:,表针阴影的组合 放置表针 放置表针阴影,10.3 计秒表,10.3 计秒表,10.3 计秒表,本例ActionScript编写的难点在于对暂停和继续计时的控制。单击“暂停”按钮后，不管经过多长时间再次单击“开始”按钮时，都应当以暂停时的时间为起点继续计时。,10.3 计秒表,步骤如下:,绘制计秒表的基本外观 制作按钮,10.3 计秒表,步骤如下:,放置表针元件 添加动态文本框,第11章 Flash常用交互技术音频视频控制,一般Flash影片中会包含各种声音和视频文件，因此需要对Flash中包含的音频和视频进行有效的控制。本章将通过一个音频播放器和一个视频播放器的实例制作，具体介绍使用ActionScript语言对影片中声音和视频进行控制的方法。,11.1 音频播放器,11.1 音频播放器,11.1.1 声音的控制方法,1Sound()构造函数：此构造函数可以用来为指定的影片剪辑创建新的Sound对象。2Sound.attachSound方法：方法用于将指定的声音附加到指定的Sound对象。3Sound.start方法：此方法用于从开头开始播放（如果未指定声音的播放开始点）最后附加的声音，或者从指定的声音点处开始播放。4Sound.stop方法：此方法用于停止当前播放的所有声音，或者只停止播放指定的声音。,11.1.1 声音的控制方法,5Sound.setVolume方法：该方法用来设置Sound对象的音量。6Sound.position属性：该属性为声音已播放的毫秒数。7Sound.onSoundComplete处理函数：该函数在声音结束播放时自动调用。,11.1.2 实例制作,由于本例主要讲解ActionScript对音频播放的控制，本例中的MP3音乐是以内置的方式在影片中播放的。这样势必会导致整个影片文件增大，不利于网络传输。因此，这种做法只适用于课件、演示等应用程序。具体到网络应用时，应当以载入流媒体的方式播放MP3音乐。,11.1.2 实例制作,步骤如下:,制作基本界面 添加按钮,11.1.2 实例制作,步骤如下:,从第1帧至第10帧各帧中的频谱柱图形 制作好的播放器外观,11.2 视频播放器,11.2 视频播放器,11.2 视频播放器,与前一节一样，本例中的视频文件也是以内置的方式在播放器中播放的。在具体到网络应用时，应当将视频以流的方式进行加载。,11.2 视频播放器,步骤如下:,制作播放器面板 导入视频 放置视频控制按钮,11.2 视频播放器,步骤如下:,添加进度槽 添加蓝色的loop字样 添加音量调节元件,第12章 网站LOGO的制作,对于一个网站而言，LOGO就是网站的名片，是能够体现网站形象的一个重要元素。一个好的网站LOGO需要能够体现出网站的内涵和特征，能够传达给浏览者一些关于网站的信息和理念。所以，对于一个网站的建设者来说，LOGO的设计与制作是十分重要的。制作网站LOGO的方法有很多种，可以使用的工具软件也很多，Flash软件即是其中之一。本章将通过网站LOGO制作的实例，向读者展示用Flash软件制作LOGO的方法。,12.1 网站LOGO简介,在学习网站LOGO的制作方法之前，首先需要对网站LOGO有一个初步的认识，并了解一些制作LOGO的基本规范。了解了这些基本知识，才能够进一步设计并制作出符合网站要求，同时又能够独具个性，吸引浏览者点击的优秀LOGO作品。,12.1.1 网站 LOGO的定义,LOGO的本意是为了容易、清楚的辨识而设计的名字、标志或商标，是作为标志的语句或标识语。引申到互联网领域，就可以将其解释为一种方便浏览者对网站进行识别的标识。如图所示，这是一些知名网站的LOGO。,12.1.2 网站LOGO的作用,从网站LOGO的定义可以归纳出，网站LOGO具有以下作用。1网站形象体现2链接作用,12.1.3 网站LOGO的设计规范,对于网站LOGO来说，从其表现形式上可以将其分为静态LOGO和动态LOGO两类。针对网站宣传的具体要求的不同，应当根据实际情况选择采用静态LOGO还是动态LOGO。对于静态LOGO来说，其文件格式一般采用GIF图片格式，而对于动态LOGO来说，可以使用GIF格式，也可以采用Flash制作的swf影片文件格式。,12.2 静态LOGO的制作,对于一个网站LOGO来说，图标图形的设计尤其重要。一般LOGO图形由图标和文字组成。精美的图标及易于辨识、与图案协调的文字往往能够在很大程度上提升LOGO图形的美感，从而可以提升浏览者对网站的好感。下面，将会通过一个静态LOGO的制作范例来展现制作LOGO图标的思路。,12.2.1 绘制基本图形,在本范例中，最重要的部分是LOGO中图标图形的绘制。在制作图标之前，首先需要绘制组成图标的各元素图形，然后再通过排列组合及添加特效等操作将制作好的各元素图形整合为图标。,12.2.1 绘制基本图形,步骤如下:,在舞台上绘制一个正圆 添加滑块 填充线条上方色块 删除多余的线条,12.2.1 绘制基本图形,步骤如下:,绘制线条 填充白色 删除线条,12.2.2 制作LOGO图标,制作本范例的LOGO图标所需要的基本图形已经绘制好了，接下来将通过修改实例属性、添加文字和滤镜效果等操作来完成该LOGO的制作。,12.2.2 制作LOGO图标,步骤如下:,修改实例的Alpha值 为实例添加滤镜效果,12.2.2 制作LOGO图标,步骤如下:,在图标下方添加文本 测试影片，观看图形效果,12.3 动态LOGO的制作,对于一个充满动感的网站来说，一个静态的LOGO显然不能满足其需求。一个动态的LOGO，不仅比静态的LOGO更能引起浏览者的注意，而且，可以大大地增强网页的动感和时尚感。接下来，将会通过一个具有动画效果的网站LOGO范例的制作过程，来展示制作动态LOGO的一般思路。,12.3.1 制作LOGO图形,在制作LOGO的动态效果之前，首先要准备好组成该LOGO的所有图形元素，并将这些图形元素以元件的形式保存在库里，方便之后在制作影片时进行调用。,12.3.1 制作LOGO图形,步骤如下:,绘制正圆 绘制圆环,12.3.1 制作LOGO图形,步骤如下:,绘制线条 填充图形 删除线条,12.3.2 制作LOGO动画,网站LOGO的动画要求简洁明快、具有动感，并且动画的时间不宜太长，以使浏览者能够在较短的时间内接受LOGO动画所要传达的信息。在本范例中，将使用几种常见的动画制作方法来完成该LOGO动画的制作。,12.3.2 制作LOGO动画,步骤如下:,修改影片剪辑色调 创建补间动画,12.3.2 制作LOGO动画,步骤如下:,调整第36帧实例形状和颜色样式 放置F影片剪辑元件,12.3.2 制作LOGO动画,步骤如下:,添加文本 创建遮罩图层 试LOGO效果,12.4 给LOGO添加链接,前面已经提到，对于网站LOGO来说，其所具备的一个作用就是链接门户的作用。浏览者通过点击放置在其他网站上的本站LOGO，可以进入本站进行访问。所以，为制作好的LOGO添加网站的链接地址也是一个很重要的工作。,12.4 给LOGO添加链接,步骤如下:,放置图片 测试当前按钮效果,12.4 给LOGO添加链接,步骤如下:,“动作”面板 在脚本编辑窗口为按钮添加动作代码,第13章 网页广告的制作,在许多网站上，都可以看到动感十足的网页广告存在。这些网页广告色彩丰富、节奏明快，刺激着访客的眼球，快速有效地传递着各式各样的信息。广告已经渗透了互联网的每个角落，变得无所不在。从这个意义上说，广告已经成为网页的重要组成部分。而这些广告中，有相当一部分是用Flash制作的。用Flash制作的广告，具有用其他软件制作的广告所不能比拟的优点。本章将通过Flash广告制作的实例，来向读者展示用Flash制作广告的方法。,13.1 Flash网页广告概述,在学习制作Flash广告之前，首先需要了解Flash广告的特点以及常见的表现形式。了解了这些，才能根据实际投放网络广告的需要选择是否用Flash来制作广告，以及应当采用何种广告形式。,13.1.1 Flash广告的特点,由于使用Flash制作的广告具有以下诸多特点，这使得Flash软件成为制作网页广告的首选工具。1适合网络传输2表现形式多样3可以实现交互,13.1.2 Flash广告的常见形式,根据广告在网页上出现位置和出现方式的不同，通常可以将广告区分为以下几种形式，而这些形式，也是Flash广告经常采用的表现形式。,13.1.2 Flash广告的常见形式,1嵌入式,网页上的Banner广告 网页上的Logo广告,13.1.2 Flash广告的常见形式,2浮动式,网页上的浮动广告 网页上的游标广告,13.1.2 Flash广告的常见形式,3弹出式,网页上的弹出式广告,13.1.3 网页广告的常用尺寸,在制作网页中的广告时，无论该广告采用何种形式、位于什么位置，都有一套标准化的尺寸规格可循。,13.1.4 制作网页广告的一般流程,在学习用Flash制作网页广告之前，首先需要了解网页广告的制作流程。使用Flash制作网页广告的流程一般包括以下内容。1确定广告主题2广告构思设计3制作广告4测试并发布,13.2 banner广告的制作,本范例是一个用于宣传软件产品的banner广告，该广告的宣传主体是华禹天元科技开发的软件产品华禹信息即时通讯系统。,13.2.1 制作广告元素,步骤如下:,修改文档属性 在元件内放置图片,勾勒logo图形轮廓 填充logo图形,13.2.1 制作广告元素,步骤如下:,添加文本后的logo图形 添加文本,13.2.1 制作广告元素,步骤如下:,添加问号 调整“问号”实例,4个帧上的“问号”实例,13.2.2 制作补间动画,在本范例的广告中，将会以两个问句来吸引浏览者的注意。这两个问句以迅速渐入的方式出现在舞台上，然后又会以迅速渐出的方式离开舞台。这种表现方式主要通过Flash的补间动画来完成。,13.2.2 制作补间动画,步骤如下:,绘制与舞台同样大小的矩形 线性渐变填充设置 放置txt_0影片剪辑元件,13.2.2 制作补间动画,步骤如下:,txt_0图层时间轴的帧分布,修改第1帧上实例的属性 放置txt_1影片剪辑元件,13.2.2 制作补间动画,步骤如下:,“问号”图层时间轴的帧分布,测试目前影片效果,13.2.3 制作路径引导动画,上一节制作的动画部分完成后，接下来需要制作一段该产品的CD图片沿一定路径飞入舞台的动画。这种动画表现的方式主要通过Flash的运动引导层功能来实现。,13.2.3 制作路径引导动画,步骤如下:,放置cd影片剪辑元件,CD图层时间轴的帧分布,13.2.3 制作路径引导动画,步骤如下:,绘制引导线,调整white影片剪辑属性,13.2.3 制作路径引导动画,步骤如下:,创建补间动画 测试目前影片效果,13.2.4 制作遮罩动画,放置txt_2影片剪辑元件 修改直线的形状,13.2.4 制作遮罩动画,放置遮罩元件 利用遮罩层制作的亮光效果,13.2.5 完成广告,广告影片的主要内容播放完毕后，将会出现产品生产商的有关信息，如标识和客服热线等。同时，在广告播放时，广告受众可以通过单击该广告进入载有该产品信息的网页。接下来将通过添加这些内容，完成该广告的制作。,13.2.5 完成广告,步骤如下:,绘制与舞台同样大小的矩形 调整bg_w影片剪辑的位置,13.2.5 完成广告,步骤如下:,放置btn按钮元件 广告片尾和隐形按钮效果,13.3 弹出式广告的制作,本范例是一个用于旅游业务宣传的弹出式广告，该广告主要利用文字构成的图形组成。通过本范例的学习，读者可以进一步熟悉广告动画的制作流程，并掌握一种利用逐帧动画来制造动感的方法。,13.3 弹出式广告的制作,13.3.1 制作广告元素,由于本范例的广告主要由文字图案组成，故在制作广告前，应当首先将所有的文字图形制作好。另外，在广告中还需要用到一个男人的头像和不断闪动的背景，也应当事先绘制好。,13.3.1 制作广告元素,步骤如下:,绘制轮廓 填充图形 人物图形,13.3.1 制作广告元素,步骤如下:,排列文本 填充颜色 绘制气泡图形,13.3.1 制作广告元素,步骤如下:,balloon_1元件内的文本 balloon_2元件内的文本 balloon_3元件内的文本排列文本,13.3.2 第1阶段动画思考,本范例中，各种文字图形会以一些充满动感的方式出现。本范例的第一部分，即问句“假期去哪里玩？”的弹出动画就是利用了一种简单的逐帧动画制作技术。,13.3.2 第1阶段动画思考,步骤如下:,放置txt_1影片剪辑元件 测试第1阶段动画的效果,13.3.3 第2阶段动画选择,在这一部分中，“假期去哪里玩？”的字样将退出舞台。紧接着，人物的头像出现在舞台上，并以人物思索的形式弹出几种旅游目的地的选择项。,13.3.3 第2阶段动画选择,步骤如下:,放置balloon_1影片剪辑元件 制作三个气泡的弹出动画 测试第2阶段动画的效果,13.3.4 第3阶段动画犹豫,在这一部分中，表示人物想法的三个气泡将退出舞台。紧接着，“我只有一天的时间啊！？”字样将弹出显示在舞台上，并不停地上下晃动，以表现人物犹豫不决的心态。,13.3.4 第3阶段动画犹豫,步骤如下:,制作txt_2_move实例动画 测试3阶段动画的效果,13.3.5 第4阶段动画肯定,在这一部分中，“足够了”三个大字将从舞台左侧快速冲进舞台，并将舞台上的原有内容向右挤出舞台。这一过程在动画中要表现得分量十足些，以表现出可以打消顾虑的肯定感。,13.3.5 第4阶段动画肯定,步骤如下:,放置txt_3影片剪辑实例 测试第4阶段动画的效果,13.3.6 第5阶段动画答案,在这一部分中，“足够了”三个字将迅速缩入舞台中心，继之以“快快报名”字样的弹出显示。在“快快报名”字样的显示过程中，该字样还会出现闪动效果。,13.3.6 第5阶段动画答案,步骤如下:,放置txt_4影片剪辑元件 测试广告动画的效果,第14章 导航菜单的制作,制作网页时，Flash最常用的功能之一就是制作导航菜单。与传统的文字导航和图片导航相比，用Flash制作的导航菜单具有动感强、视觉效果好、交互性高的优点。在网页中适当地加入Flash导航菜单，将会使网页显得生动活跃、具备更强的吸引力，从而增加网站的浏览量。在第4章中介绍了用组件制作动态菜单的方法，但用这种方法制作的菜单无论在外观还是表现形式上都具有一定的局限性，难以适应多层面的需求。本章将会通过几种常见形式导航菜单的制作过程，使读者了解并掌握网页导航菜单的具体制作方法。,14.1 导航菜单的常见形式,导航菜单是为整个网站服务的，根据网站类型的不同，导航菜单也会表现出不同的设计形式。在制作导航菜单之前，首先应当了解该导航菜单所属网站的类型，以及该导航菜单所要实现的功能。然后，根据网站的具体需要选择合适的形式，并完成进一步的设计。,14.1.1 普通导航菜单,这种类型的导航菜单主要由按一定顺序排列的按钮组成。按钮可以是单纯的图片或文字，也可以附加一些简单的动态效果。对于下级链接页面不是特别多、结构也不是很复杂的网站，采用这种形式的导航菜单是比较合理的。,14.1.1 普通导航菜单,效果如下:,鼠标指针经过的按钮与周围按钮在尺寸上形成对比,鼠标指针经过的按钮与周围按钮在色彩显示上形成对比,14.1.2 幻灯片菜单,对于一些以图片为主的网页来说，有时候需要将多幅图片放置在网页中的同一个区域内。当浏览者用鼠标触发相应的导航按钮时，该按钮所对应的图片会显示在该区域内，这种导航菜单一般应用在需要展示多幅尺寸较大的图片，而页面空间有限，同时又不希望增加下级链接页面的网页中。,14.1.2 幻灯片菜单,效果如下:,单击左侧栏中的图片，窗口右侧显示大图片 单击不同的图片，右侧显示的图片也不同,14.1.3 下拉菜单,下拉菜单是网页制作中比较常用的一种导航形式，当浏览者将鼠标指针移动到菜单上时，会显示出隐藏的子菜单。如图14.5和图14.6所示，当鼠标指针移动到主菜单的某一项上时，在该菜单项的下方会出现其子菜单项，浏览者可以直接在子菜单项中选择想要访问的页面。,14.1.3 下拉菜单,网页中的下拉菜单（纵版）,网页中的下拉菜单（横板）,14.1.4 循环滚动菜单,在一些网站上经常可以看到这样的广告在一定区域内，各种产品图片如同走马灯一样不停地循环显示。当浏览者将鼠标指针移动到这个区域内时，所有的产品图片都停止了移动。,14.1.4 循环滚动菜单,不停向右循环滚动的菜单画面,菜单画面停止滚动,14.1.5 与鼠标位置互动的导航菜单,前文的循环滚动菜单，虽然实现了在有限空间内展示大量信息的效果，但是信息循环的主动权并不在浏览者手中。而与鼠标位置互动的导航菜单就可以解决这一问题。如图，当浏览者将鼠标指针移动到导航栏左侧时，图片组会向右侧滑动；而当浏览者将鼠标指针移动到导航栏右侧时，图片组会向左侧滑动。这样，就实现了浏览者对导航菜单的自主控制。,14.1.5 与鼠标位置互动的导航菜单,鼠标指针的位置决定了菜单的移动方向,14.2 普通导航菜单,在网上可以经常看到，有一些网页的导航菜单是一排可爱的卡通形象，不同的卡通形象对应着不同的链接。当鼠标指针移动到这些卡通形象上面时，卡通形象就会放大，或者做出有趣的表情或动作来提示浏览者点击以进入其所链接的页面。如图：,14.2 普通导航菜单,普通导航菜单范例,14.2.1 绘制卡通头像,在制作导航菜单中的按钮之前，首先需要准备好这4个卡通头像的素材，并将其以图形元件的形式保存在库里，以备制作导航按钮时调出使用。,14.2.1 绘制卡通头像,步骤如下:,在舞台上创建一个椭圆 用铅笔工具绘制线条 卡通头像的最终效果,14.2.1 绘制卡通头像,步骤如下:,绘制其他3个卡通头像,14.2.2 制作水晶按钮图形,接下来制作圆角矩形的水晶按钮图形。步骤如下:,绘制圆角矩形 设置渐变填充色,14.2.2 制作水晶按钮图形,步骤如下:,勾勒出高光区域 圆角矩形最终高光效果 圆角矩形最终效果,将“头像1”元件拖到适当的位置 添加HOME文本 文本最终效果,14.2.3 制作第一个按钮,在制作按钮之前，首先需要完善按钮中所需要的各种素材。步骤如下:,进入“按钮_1”按钮元件内部 添加“指针经过”帧的内容,14.2.3 制作第一个按钮,为按钮添加音效,14.2.4 制作其他3个按钮,制作完成“按钮_1”按钮元件后，其他3个按钮的制作就简单了，只要在“按钮_1”元件的基础上进行小范围的改动即可。,修改后的“按钮图_2”图形元件“按钮图_3”和“按钮图_4”,14.2.5 制作导航,按钮全部制作完成后，就可以制作导航菜单了。具体操作步骤如下：,放置好4个按钮 测试影片效果,14.3 幻灯片菜单,幻灯片形式的菜单经常被应用在以展示信息（尤其是图片信息）为主的网页上，下面通过一个展示产品信息的菜单范例来具体讲解这类菜单的制作方法。,14.3 幻灯片菜单,鼠标指针停在GUN按钮上 鼠标指针停在PHONE按钮上,14.3.1 产品图片和说明文字,本范例将通过gotoAndStop动作实现不同产品图片和说明信息的替换，故应当首先将有关产品的图片和说明信息制作成相应的影片剪辑，以实现按钮对相关信息显示的控制。,14.3.1 产品图片和说明文字,在第1帧放置图片1 在第2帧第6帧放置图片,14.3.1 产品图片和说明文字,添加产品1的说明文字 添加说明文字,14.3.2 制作具有动画效果的按钮,当鼠标指针移动到本范例按钮上方时，按钮会出现一个动画效果。为实现这一效果，需要在按钮的“指针经过”状态放置一个影片剪辑，并在该元件内制作需要的动画。这样一来，当鼠标触发该按钮时，按钮“指针经过”状态上的影片剪辑就会自动播放。,14.3.2 制作具有动画效果的按钮,设置色调 修改实例大小 在“按钮_1”按钮元件中放置元素,14.3.2 制作具有动画效果的按钮,绘制按钮的响应区域 添加文本,14.3.3 完成幻灯片菜单,需要用到的元件已经全部制作完成。剩下的工作就是将各个元件放置在舞台上，并进行排列组合。在这一过程中，要考虑到浏览者的操作习惯以及页面整体美观，对页面进行合理布局。,14.3.3 完成幻灯片菜单,放置“产品图片”影片剪辑 放置说明文字 绘制导航栏轮廓,14.3.3 完成幻灯片菜单,放置按钮 测试影片效果,14.4 下拉菜单,下拉菜单是应用比较广泛的导航菜单形式。使用这种形式的导航菜单，可以有效地节约页面空间，同时使网站的结构更加具有层次感。本节将通过一个下拉菜单的制作来展示这种导航菜单的制作思路。,14.4 下拉菜单,下拉菜单范例,14.4.1 制作主菜单,首先制作主菜单的第1格，即“公司简介”菜单项。当鼠标指针经过该格时，在该格背景上弹出一灰色框。同时，“公司简介”字样放大，COMPANY字样变红。具体制作步骤如下：,14.4.1 制作主菜单,绘制背景图形 绘制按钮响应区域 添加COMPANY文本,14.4.1 制作主菜单,设置COMPANY实例色调 放置“