Flash CS3网站商业设计从入门到精通PPT教学课件（第二部分）.ppt

第9章Flash常用交互技术数学计算,在制作Flash游戏以及各种应用程序时，会用到大量的数学计算。在制作各类课件时，也会应用到Flash中的数学计算功能。前面章节中已经涉及到了Flash的一些计算功能。本章将提供两个实例，向读者展示运用数学计算来制作一些交互程序的方法和思路。,9.1简易计算器,9.1简易计算器,9.1.1length()函数,length()函数可以用于返回指定字符串或变量的长度。其用法为：length(字符串或变量名);,9.1.2Number()函数,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.1Array()构造函数,Array()构造函数可以用来创建不同类型的数组：空数组、具有特定长度但其中元素具有未定义值的数组或其中元素具有特定值的数组。用法1：my_array=newArray();用法2：my_array=newArray(长度);,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.1Flash网页广告概述,在学习制作Flash广告之前，首先需要了解Flash广告的特点以及常见的表现形式。了解了这些，才能根据实际投放网络广告的需要选择是否用Flash来制作广告，以及应当采用何种广告形式。,13.1.1Flash广告的特点,由于使用Flash制作的广告具有以下诸多特点，这使得Flash软件成为制作网页广告的首选工具。1适合网络传输2表现形式多样3可以实现交互,13.1.2Flash广告的常见形式,根据广告在网页上出现位置和出现方式的不同，通常可以将广告区分为以下几种形式，而这些形式，也是Flash广告经常采用的表现形式。,13.1.2Flash广告的常见形式,1嵌入式,网页上的Banner广告网页上的Logo广告,13.1.2Flash广告的常见形式,2浮动式,网页上的浮动广告网页上的游标广告,13.1.2Flash广告的常见形式,3弹出式,网页上的弹出式广告,13.1.3网页广告的常用尺寸,在制作网页中的广告时，无论该广告采用何种形式、位于什么位置，都有一套标准化的尺寸规格可循。,13.1.4制作网页广告的一般流程,在学习用Flash制作网页广告之前，首先需要了解网页广告的制作流程。使用Flash制作网页广告的流程一般包括以下内容。1确定广告主题2广告构思设计3制作广告4测试并发布,13.2banner广告的制作,本范例是一个用于宣传软件产品的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实例色调放置“响应区域”按钮“公司简介”项制作完成,14.4.2制作子菜单,本范例中，当鼠标指针经过主菜单时，在主菜单栏的下方即背景的红色区域会弹出子菜单栏，子菜单上的文字随之落下。,在bar图形元件内绘制圆角矩形在line图形元件内绘制矩形,14.4.2制作子菜单,绘制遮罩图形在sub1图层上放置sub1影片剪辑元件,14.4.3制作下拉菜单,主菜单的“公司简介”一项已经制作完成，同时，该菜单的下属子菜单也准备好了。接下来的工作，是通过一些简单的ActionScript语句将“公司简介”项的主菜单和子菜单组合在一起，完成“公司简介”项下拉菜单的制作。然后，按照同样的方法继续完成其他菜单项的制作。,14.4.3制作下拉菜单,“公司简介”菜单项的下拉菜单效果,测试影片效果,14.5循环滚动菜单,循环滚动菜单一般多用于大量图片和多行文字的展示。这种菜单的优点是可以在有限的空间内实现大量信息的发布。下面以一个产品促销广告的范例来具体讲解这类菜单的制作方法。,循环滚动菜单范例,14.5.1制作滚动图片,在制作这类菜单时，滚动图片的制作十分重要。在制作滚动图片的过程中，要精确设计好每张图片的尺寸，以及各图片之间的间隔距离。必要的时候不妨将这些数值记下来，以备在编写ActionScript程序时用到。,14.5.1制作滚动图片,将图片1拖入shoe_1元件内在“指针经过”帧绘制矩形边框,14.5.1制作滚动图片,将其他按钮元件置于allshoes影片剪辑内在allshoes_u影片剪辑内放置两个allshoes影片剪辑,14.5.2制作循环滚动菜单,在本范例中，菜单的循环滚动要通过相应的ActionScript代码来实现。,在图层bg上放置背景元素菜单左侧出现空白,14.5.2制作循环滚动菜单,图片8出现在图片1的左侧测试影片效果,14.6与鼠标位置互动的导航菜单,与鼠标位置互动，顾名思义，就是导航菜单的显示方式与鼠标指针在菜单页面中的位置有关。这种类型的菜单，不但可以加强网页的互动性，而且可以为浏览过程添加不少趣味。下面将通过两个范例来展示一下这种菜单的制作思路。,14.6与鼠标位置互动的导航菜单,与鼠标位置互动的菜单范例一与鼠标位置互动的菜单范例二,14.6.1制作随鼠标位置左右滑动的菜单,第一个范例也是由一系列图片组成的，这里依然以8款篮球鞋产品的图片作为菜单项。与上一节的操作方法一样，首先需要将这些图片整合成一个影片剪辑。,14.6.1制作随鼠标位置左右滑动的菜单,绘制边框图形影片的滑动方向和滑动速度取决于鼠标的位置,14.6.2制作菜单中的提示语,仅有图片的导航菜单未免太过单一，适当地加入一些关于产品的说明性文字是必要的。,鼠标指针变成了针对该产品的文字说明气泡,导航菜单中的提示语,14.6.2制作菜单中的提示语,在allshoes影片剪辑内放置cue1实例测试说明气泡的效果,14.6.3制作随鼠标位置滑出显示的幻灯片菜单,第二个范例是一个幻灯片式的导航菜单，与前面制作的幻灯片菜单不同，该范例会判断鼠标在屏幕上的位置，然后动态地将菜单画面定位到相应的图片。,在slide影片剪辑里放置图片绘制矩形响应区域,14.6.3制作随鼠标位置滑出显示的幻灯片菜单,为images影片剪辑添加动作测试当前菜单效果,14.6.4增加控制按钮和滑动方向,目前完成的菜单在形式上还比较单调，而且只能在X坐标方向上实现滑动显示。接下来将为该菜单添加一些可以控制图片显示的按钮，并实现菜单在Y坐标方向上的位置改变。,放置其他3张图片在btn按钮元件中绘制矩形,14.6.4增加控制按钮和滑动方向,测试菜单的最终效果,第15章新闻公告和网页相册,对于许多网站来说，一般都有一个用于发布新闻和公告的版块。这个版块几乎是一个网站上更新最频繁的部分。如何能更加方便快捷地对这一版块进行更新操作，是网站建设者在制作该版块时需要首先考虑的问题。同样，对于一些需要经常发布图片信息的网站来说，网页上图片信息的更新操作也是一件非常重要的事情。用Flash制作这类版块时，就需要考虑到该版块中信息的发布和更新问题。本章将通过两个实例Flash新闻板和网页相册的制作，来向读者展示一种动态更新网页信息的方法。,15.1在Flash中读取外部文件,对于需要经常更新内容的Flash文件来说，一个较好的解决办法就是将Flash文件和需要更新的内容分开制作。这里，举个制作Flash网页公告的例子来解释一下。如果将公告的文字内容放在Flash文件内，那么每次更新公告时，都需要在该公告的Flash源文件中进行修改。在Flash中读取外部文件的方法有很多种，本节将讲解Flash调用外部文本文件和图像文件的方法。读者需要掌握这两种方法，为后面两个实例的制作做好铺垫。,15.1.1制作天气预报公告栏,在用Flash制作类似网站公告等需要经常更换少量文字信息的网页版块时，通常可以将文字信息保存为一个单独的文本文件（*.txt）。,天气预报公告栏,15.1.1制作天气预报公告栏,在BG元件内绘制矩形调整矩形的线形填充放置BG图形元件,15.1.1制作天气预报公告栏,放置按钮元件测试当前影片效果,15.1.2在Flash中读取文本文件,要使Flash能够准确读取外部文件中的内容，除了需要在Flash中进行相关的操作外，还需要将所有Flash需要读取的内容按照一定的格式进行书写和保存。,创建一个date.txt文本文件输入文本内容,15.1.2在Flash中读取文本文件,为按钮添加动作显示其他城市的天气预报,15.1.3在Flash中读取图像文件,当然，Flash除了可以读取外部的文本文件外，也可以调用外部的图像文件。接下来，将通过制作一个简单的调用外部图像的范例，来具体讲解如何实现Flash对外部图像文件的读取。,15.1.3在Flash中读取图像文件,将图片hills.jpg放置在同一文件夹中测试读取外部图片的效果,15.2制作新闻板,对于一个新闻板来说，需要经常更新的项目包括：新闻条目、各条目所对应的链接以及新闻的时间等。如何能够方便地对这些项目进行更新，是在使用Flash制作新闻板时需要首先考虑的问题。前面已经讲解了在Flash中读取外部文本文件的方法，接下来，读者可以通过本节的学习，巩固所学习的知识，并加以提高。,15.2制作新闻板,Flash新闻板,15.2.1制作新闻板页面,本范例的新闻板是一个显示“每日国际要闻”的版块。由于内容比较正规，故在外观设计上不宜太过随意、个性，而应给人一种严谨又不失活泼的感觉。,绘制圆角矩形再绘制一个圆角矩形,15.2.1制作新闻板页面,绘制矩形调整线性渐变填充色,15.2.1制作新闻板页面,修改图层顺序测试新闻板外观效果,15.2.2制作循环滚动的新闻栏,由于本范例的新闻板需要显示的新闻条目比较多，而页面空间又比较有限，故应实现新闻栏的循环滚动显示以解决这一问题。同时，还要实现当鼠标指针移动到新闻条目上方时，新闻栏停止滚动的效果，以方便浏览者的阅读。,绘制矩形放置9个btn按钮元件,15.2.2制作循环滚动的新闻栏,测试新闻栏的循环滚动效果,15.2.3在新闻栏中显示新闻条目,在本范例的新闻板表格栏中，一共可以同时显示9条新闻。有关这些新闻的信息全部保存在外部的文本文件中。接下来的工作，就是使该Flash新闻板能够从外部的文本文件中读取到需要显示的内容。,创建动态文本框创建一个data.txt文本文件,15.2.3在新闻栏中显示新闻条目,修改文本内容测试当前影片效果,15.2.4为新闻条目添加链接,实现对新闻板的内容更新，不仅需要更新新闻栏里的新闻条目和新闻日期，还需要更新各新闻条目对应的网页链接。这样，当浏览者点击新闻条目时，才能正确地进入载有该新闻的网页。与新闻条目和新闻日期一样，所有的新闻链接都放置在外部的文本文件中。接下来，将实现Flash对这些链接地址信息的读取。,修改文本内容为按钮添加动作,15.2.4为新闻条目添加链接,测试新闻板的最终效果,15.3制作网页相册,一个好的网页相册，仅仅拥有显示图片的功能和绚丽的图片切换效果是不够的。在设计网页相册时，应当考虑到该相册的可持续使用性，即应当可以方便地更新相册的内容。需要更新的内容不仅包括图片，而且包括对图片的说明性文字，以及相册内可显示图片的数量等。,15.3制作网页相册,15.3.1制作相册元素,在实现相册的功能之前，首先需要制作好相册中的各种元素。本范例的相册除了显示图片外，还需要显示图片集的名称以及各图片的序号。,放置pic空影片剪辑绘制白色矩形,15.3.1制作相册元素,添加提示文字测试当前影片效果,15.3.2实现相册功能,接下来，将实现本范例中网页相册的功能。该相册的功能主要包括：读取外部图片和文字信息；实现对图片数目的管理、实现相册的浏览功能。,创建images文件夹放置外部图片和文本文件,15.3.2实现相册功能,测试网页相册,15.3.3更新相册内容,由于需要经常更新相册的内容，并且相册中所包含图片的数量也会经常发生变化，所以，了解如何对相册的内容进行维护是必要的。这里，假设需要在原有图片集中添加一张图片，总图片数变为7张。则更新相册的具体步骤如下：,添加图片文件修改文本内容,15.3.3更新相册内容,更新后的相册,第16章Flash游戏制作,Flash最令人称道的特点之一就是其所具有的交互功能。而用Flash制作的游戏正是这种交互功能的综合体现。许多网站、网络广告经常将Flash游戏作为招揽人气的一种手段，而Flash游戏在这方面的表现也确实不负所望。一个好的Flash游戏，不仅能体现制作者的良好Flash功底，而且可以吸引更多的浏览者，并能够提升游戏发布方的形象。用Flash制做游戏，不仅需要制作者具有较好的美术功底和编程能力，而且要求制作者懂得如何把握游戏的趣味性。本章将通过三个Flash小游戏实例的制作，从几方面入手，综合讲解如何使用Flash制作游戏。,16.1Flash游戏概述,在学习制作Flash游戏之前，需要先对Flash游戏的特点、游戏的常见类型以及游戏的制作流程有所了解。然后，根据游戏情节的需要，选择合适的表现手段，并规划合理的游戏制作流程。,16.1.1Flash游戏的特点,使用Flash制作游戏具有许多优点，这些优点使得越来越多的游戏制作者倾向于选择Flash作为制作游戏的首选工具。1适合网络发布和传播2制作简单方便3视觉效果突出,16.1.2Flash游戏的常见类型,实际上，使用Flash软件可以制作出任何一种可以想到的游戏类型。但针对网络应用来说，一般在Flash游戏设计中常用到如下几种游戏类型。1益智类游戏2射击类游戏3动作类游戏4角色扮演类游戏5体育运动类游戏,16.1.3Flash游戏的制作流程,使用Flash制作游戏要遵循游戏制作的一般流程。这样，才能够事半功倍，更有效率地工作。1游戏构思及框架设计2制作游戏场景和角色3编写动作脚本4测试优化并发布,16.2迷宫游戏制作,本范例是一个迷宫游戏，玩家可以使用键盘方向键，控制一个叫“小强”的角色在迷宫中行走，游戏的胜利条件是让小强找到迷宫尽头的汉堡包。读者通过本节的学习，可以掌握这几种常用的编程方法，并对用Flash制作游戏的方法和游戏制作流程有一个初步的了解。,16.2迷宫游戏制作,迷宫游戏“QIANG”,16.2.1制作游戏中的元素,制作游戏，首先当然要准备好游戏中的各种素材。本范例是一个迷宫游戏，迷宫地图和迷宫中的主角自然是少不了的。同时，根据游戏构思中的需要，还需要准备好一些辅助性的游戏元素。,绘制游戏背景绘制迷宫图,16.2.1制作游戏中的元素,绘制汉堡包绘制主角正面绘制主角背面,16.2.1制作游戏中的元素,放置qiang_walk_side元件放置并翻转qiang_walk_side元件,16.2.2用键盘控制主角的行走,主角制作完成后，接下来要实现对其行走的控制。在Flash游戏中，行走一般有两种控制方法，即用鼠标控制行走和用键盘控制行走。本范例中主角的行走将通过键盘的4个方向键来控制。,放置qiang元件为实例添加动作,16.2.2用键盘控制主角的行走,为qiang_stand实例添加动作测试行走效果,16.2.3利用碰撞检测实现主角在迷宫中的冒险,当主角“小强”在迷宫中行走时，它不能够穿越迷宫的墙壁，而只能在迷宫的通道上行走。如果它能像崂山道士一样穿墙行走的话迷宫就变得毫无意义了。要实现墙壁的效果就要用到碰撞检测。通过实时的碰撞检测来限定主角移动的范围，使主角在试图穿越墙壁时会出现碰壁的现象。,放置walls影片剪辑元件放置hamburger影片剪辑元件,16.2.3利用碰撞检测实现主角在迷宫中的冒险,主角可以走到迷宫中的任何一个角落,16.2.4增加游戏的可玩性,目前的游戏相对来说显得非常单调，缺少一些可以增加玩家兴趣的东西。如何在主体游戏的基础上添加一些新的元素，从而增加游戏的可玩性，这是每个游戏制作者都必须认真考虑的问题。,绘制虚线创建补间动画,16.2.4增加游戏的可玩性,提示性路线,16.2.5完成全部游戏,游戏制作完成了，最后还需要加入游戏标题界面和游戏结束画面。当然，其中的游戏介绍页面也是不可或缺的。,游戏标题界面游戏说明页面,16.3猜拳游戏制作,本范例是一个猜拳游戏。玩家可以通过选择一个角色（皮皮狗和嘻嘻猫），与电脑控制的角色进行猜拳比赛，,猜拳游戏MORRA,16.3.1制作游戏中的主角,在制作本范例游戏之前，需要首先准备好猜拳双方角色的各种动态图形。这两个角色分别叫“皮皮狗”和“嘻嘻猫”。需要为这两个角色准备的动态图形主要有猜拳前的常态和猜拳时的动作两种。,皮皮狗的身体各部分,皮皮狗在胜利和失败时的不同表情,16.3.1制作游戏中的主角,调整第15帧上各实例的位置调整第20帧上各实例的位置,16.3.1制作游戏中的主角,调整第15帧上各实例的位置调整第20帧上各实例的位置,阴影图形,16.3.2制作猜拳控制台,制作游戏之前，除了需要准备好两个角色的图形外，还需要制作好游戏的界面、游戏中的控制操作元素以及游戏中的提示性图形、文字等。其中，本范例游戏中的控制操作元素，即猜拳控制台的具体制作过程如下：,绘制“剪子”、“包袱”和“锤头”三种手势创建补间动画,16.3.3制作提示性图形和游戏背景,现在，只剩下游戏背景和游戏中的提示性图形了。本范例游戏中的提示性图形，不仅包括每轮猜拳胜负的提示性文字图形，而且包括对生命值的实时提示。,绘制draw！图形元件绘制骨头图形绘制游戏背景,16.3.4制作游戏中的画面,本范例游戏的主场景时间轴主要包括4帧。第1帧是游戏的开始画面；第2帧是游戏的说明画面，同时，玩家需要在这一画面中选择所控制的角色；第3帧为游戏的主画面；第4帧则是游戏的结束画面，在该画面中将显示游戏最终的胜方信息。在制作游戏之前，先将游戏各帧画面准备好，以方便接下来游戏程序的编写。,16.3.4制作游戏中的画面,绘制背景图形添加标题和按钮第4帧的游戏结束画面,16.3.5为游戏添加程序,现在万事俱备，只欠东风了。游戏舞台上的各个元素已经安置妥当，接下来只要为游戏中的各个元素添加上程序代码，游戏就可以运行了。,为dog_head实例添加动作为dog_hand_act实例添加动作,16.3.6更改游戏中的鼠标,至此，游戏已经可以玩了。但是仍存在一个不太令人满意的地方，那就是鼠标。如果使用系统鼠标来操控游戏，显得与游戏风格不够融合。接下来，将把游戏中的鼠标改成自定义的样式，并且，鼠标会根据玩家角色的选择而更改样式。具体操作步骤如下：,16.3.6更改游戏中的鼠标,放置hand_1元件放置dog_sc