1、1,第13章 Flash特效制作,内容概述- 本章主要讲述了用Flash制作特殊动画效果和Flash配合其他技术实现网页交互功能（动态网页）两个方面的内容。Flash软件一个相当重要的应用领域是网页交互，使用Flash可以制作出各种实用的网页交互效果且使用Flash制作出的交互网页特效外观华丽，配合ASP、JavaScrip等技术可以在网页制作领域发挥强大功能。本章介绍的作品涉及的内容大都是网上使用较多且比较实用的，希望读者通过本章的学习，激发创作灵感，创作出更为优秀的Flash作品。,2,教学目标,1掌握利用Flash制作网页特效的方法。 2了解利用Flash制作网页下拉菜单的方法。 3了解
2、Flash的网络交互功能。,3,13.1 网页特效 13.2 菜单 13.3 网络交互 本章小结 13.4 练习题,4,13.1 网页特效,目前Flash动画在因特网上的应用以几何级数增长，因为其效果是传统网页所不可比拟的，所以掌握和学习些Flash网页特效的操作是必需的。 13.1.1 网页时间动态显示的制作 13.1.2 动态文本的制作 13.1.3 Logo制作,5,13.1.1 网页时间动态显示的制作,在网页中插入一个漂亮的电子时钟，可以使网页即看起来美观又为浏览者提供方便。Flash中提供的简单实用的Data类可以动态显示当前的时间，来达到这一目的。 这里的实例是用一个动态文本来显示
3、时间。既然要动态地显示当前的时间，自然就要有一个定时机制不断地更新当前的时间，而影片剪辑的EnterFrame事件就很合适。 制作步骤： 【步骤1】创建一个影片剪辑元件，把它的一个实例拖入舞台场景中。,6,【步骤2】在舞台中放置一个动态文本，赋予其实例名为MyText。 【步骤3】在影片剪辑实例上捆绑下面的脚本. 【步骤4】在舞台上选择动态文本，然后在“属性”面板中单击“嵌入”按钮，在弹出的“字符选项”对话框中选中“指定范围”，并在“包含这些字符”文本框中输入“年月日时分秒0123456789”。这样做的目的是嵌入这几个字符的字体轮廓，从而可以以抗锯齿方式在动态文本中显示这些字符 【步骤5】测
4、试影片，可以看到这只电子钟的工作情况,7,13.1.2 动态文本的制作,动态文本是一种交互式的文本对象，文本会根据文本服务器的输入不断更新，如天气预报、股票价格等。它允许用户随时更新动态文本中消息，即使在作品完成后也可以改变其中的信息。,8,13.1.3 Logo制作,预载画面的原理是简单的，就是通过建立关键帧，第一个关键帧是动画帧，用于放置预载动画、已经读入的百分比计算等，第二个关键帧用于循环，使影片在没有完全读取之前，不进入正式的画面。 这里先介绍要用到的两个重要命令：getBytesLoaded()：得到已经读取的字节数。getBytesTotal()：得到需要读取的字节数总数。,9,操
5、作步骤： 【步骤1】新建文件：新建一个电影文件，命名为“PreLoader.fla”。 【步骤2】制作进度条：将“图层1”命名为“Bar”，在第一帧中，使用“矩形”工具，绘制一个宽200像素、高20像素的矩形，再绘制其外框。同样使用“矩形工具”绘制一个矩形，设置其笔触高度为3，删除中间的填充颜色，使用“任意变形”工具修改其大小，绘制的进度条最终形态， 选中该进度条的主体（不带边框），按F8快捷键，将进度条图片转化为影片剪辑元件。在弹出的“转化为元件”对话框中将元件名称设置为“MyBar”，注意“注册”的选择，将基点定在左边的中间， 单击“确定”按钮完成设置。 为“MyBar”影片剪辑设置实例名
6、称，这样Action Script语句就可以使用实例名称来控制进度条的宽度。选中“MyBar”影片剪辑，按Ctrl F3组合键调出属性面板，填写实例名称“progress Bar”，把“宽度”改为1.0像素， 【步骤3】制作百分比文本框：在舞台上需要用一个动态文本框来显示已经读取内容的百分比，以及读取多少字节等动态信息。使用“文本工具”添加一个文本框，放置在进度条的正下方。 将“文本类型”设置为“动态文本”，在这里尤其要注意的是将“变量”选项设置为“Load Date”（Data是保留字，不能作为变量名）。在线条类型下拉列表框中选择“多行”选项，以便输入多行文字，单击“多行”右边第二个按钮，
7、将文本呈现为HTML语句。,10,【步骤4】导入电影内容：新建图层，命名为“Content”在该图层第3帧按F7插入一个空白关键帧，导入一张图片，在该图层第30帧处按F5增加帧。 【步骤5】输入Action Script代码。可以用getBytesLoaded()函数得到已经读取的字节数，而用getBytesTotal()得到总共有的字节数，利用这两个数字就可以计算得到一个百分比，已经确定了使用第二帧作为循环，不断扫描第一帧的Action Script，这样百分比放在第一帧就可以计算一些所需要的数据。新建一个图层“Action”，在第2帧和第3帧插入空白关键帧。选中“Action”层的第1帧，
8、然后按F9，在弹出的窗口中，输入代码. 注意：测试时按Ctrl+Enter是看不出效果的，因为该文件已经保存在硬盘中，并不需要从网上下载；连续两次按Ctrl+Enter才能模拟网站上浏览的情形，实现预载的效果。连续两次按Ctrl+Enter组合键以后，查看播放器中“视图”菜单，其中有一个“下载设置”子菜单. “下载设置”子菜单有多种下载设置可供选择。一般情况下选择56k，这样就完成了预载画面的制作。,11,13.2 菜单,可以利用Flash的交互功能制作模拟菜单,12,下拉菜单的制作 【步骤1】运行Flash 8，新建一个Flash文档。 【步骤2】选择“文件”/“导入”/“导入到舞台”命令，
9、在弹出的“导入”对话框中选择一个图形文件并将其导入到舞台中， 【步骤3】选择菜单中的“插入”/“新建元件”命令，弹出“创建新元件”对话框。在该对话框的“名称”文本框中输入“标题”，类型选择“按钮”选项。 【步骤4】单击“确定”按钮，进入“元件”编辑模式。选择“矩形”工具，笔触颜色设置为褐色，填充颜色为绿色，然后再绘制矩形， 【步骤5】选中“指针经过”帧按F6键插入关键帧，选择“矩形”工具，笔触颜色设置为浅绿色，填充颜色为无色，然后再绘制矩形。 【步骤6】选择菜单栏中的“插入”/“新建元件”命令，如【步骤3】新建一个按钮元件，命名为“菜单”。 【步骤7】单击“确定”按钮，进入元件编辑模式。定位在
10、“弹起”帧上，选择“矩形”工具，笔触颜色设置为褐色，填充颜色为浅灰色，然后再绘制矩形。,13,【步骤8】选中绘制的矩形，然后删除矩形的上下2条边线， 【步骤9】选中“指针经过”帧按F6插入关键帧，选择“矩形”工具，笔触颜色设置为浅绿色，填充颜色设置为浅黄色，然后再绘制矩形， 【步骤10】单击“场景1”按钮，返回到主场景中。单击“插入图层”按钮，在“图层1”的上面添加“图层2”，将“库”面板中的“标题”元件拖入到舞台，然后继续拖动2次“标题”元件到舞台中 【步骤11】分别在“图层1”和“图层2”的第15帧按F5键插入帧。在“图层2” 上面添加一个“图层3”，在“图层3”的第5帧按F6插入关键帧，
11、然后将“库”面板中的 “菜单”元件拖动到舞台， 【步骤12】按住Alt建的同时拖动“菜单”元件，将其复制到“标题”元件的正下方，对齐位置，同样复制出多个“菜单”元件，用作不同的菜单项， 【步骤13】在“图层3”的第10帧、第15帧上分别按F6键插入关键帧，然后将“菜单”元件移动到相应“标题”元件的下面，并对齐位置。 【步骤14】在“图层3”上面新建“图层4”，选择文本工具，在舞台上输入文本“环保标准”、“环保知识”和“生态园林”，并调整文本的大小及位置，分别位于第1个、第2个和第3个“标题”元件的上面， 【步骤15】在“图层4”的第5帧上按F6插入关键帧，使用文本工具在所有的“菜单”元件上输入
12、文本，,14,【步骤16】在“图层4”的第10帧和第15帧上按F6分别插入关键帧，使用“文本”工具在所有的“菜单”元件上输入文本， 【步骤17】在“图层2”的第1帧、第5帧、第10帧和第15帧按F6插入关键帧，选择菜单中的“窗口” /“动作”命令，打开“动作”面板，分别添加命令行Stop();用来控制动画的播放。 【步骤18】选中“图层2”的第1帧的第1个“菜单”元件，在“动作”面板中输入如下脚本代码：On (Release) GotoAndPlay (5) ; 【步骤19】选中“图层2”的第1帧的第2个“菜单”元件，在“动作”面板中输入如下脚本代码：On (Release) GotoAndP
13、lay (10) ; 【步骤20】选中“图层2”的第1帧的第3个“菜单”元件，在“动作”面板中输入如下脚本代码：On (Release) GotoAndPlay (15) ; 【步骤21】插入新建元件，命名为“返回”，类型为“按钮”。 【步骤22】单击“确定”按钮，进入元件编辑模式。选择矩形工具，笔触颜色为无色，填充颜色为任意颜色，然后绘制矩形，并将矩形的透明度改为0， 【步骤23】在“图层1”上面新建“图层5”。在“图层5”的第5帧插入关键帧，从“库”面板中将“返回”元件拖动到当前第5帧的舞台中，调整整个元件的大小和位置，使它与整个菜单重合并比菜单大些 【步骤24】选中“返回”元件，在“动作
14、”面板中输入程序代码： on(rollOver)gotoAndPlay(1);， 【步骤25】按CtrlEnter可预览效果，,15,13.3 网络交互,13.3.1 Flash网络交互功能简介,Flash脚本编程指的就是利用Flash内建的ActionScript语句进行程序设计。ActionScript语言自形成以来已经发展了多年。Flash Profesional 8引入的一些新的语言元件而且更彻底地实现了面向对象编程。高级的Flash编程可以实现复杂的交互游戏，根据用户的操作响应不同的电影，与后台数据库及各种程序进行交流，如ASP、PHP、SQL Server等。庞大的数据库系统及各种
15、程序与Flash内置的编程语句相结合，可以制作出很多人机交互的网页、游戏以及在线商务系统。,16,13.3.2 JS与Flash实现交互,1从Flash到JavaScrip的通信 一个HTML页面中的Flash电影，能把消息发送到位于同一HTML页面中的JavaScript程序的原理，是因为当Flash电影调用fscommand函数时，位于同一HTML页面中的一个名为movieName_DoFSCommand的JavaScript函数会被自动调用，而在fscommand函数中指定的参数会被movieName_DoFSCommand函数截获，从而实现通信。 在这里，movieName_DoFSC
16、ommand中的movie Name是在EMBED标签的NAME属性或OBJECT标签的ID属性中指定Flash Player的名字。例如，如果Flash Player被指派了名字myFlash，那么调用的JavaScript函数将是myFlash_DoFSCommand。 fscommand函数的使用格式如下：fscommand (“command”, “parameter”) 在这里，如果消息是要被发送到JavaScript程序，那么command就应该是你自定义的命令，这个自定义的命令实际上是一个字符串，这个字符串会被作为参数传递给movieName_DoFSCommand函数，而par
17、ameter是你为command命令指定的值，parameter也是一个字符串，也将被作为参数传递给movieName_DoFSCommand函数；如果消息是要被发送到播放该Flash电影的Flash Player从而对Flash Player进行一些控制，则command就应该是预定义的一些“命令”，而parameter相应的也应该是针对这些预定义的可用的值。,17,2从JavaScrip到Flash的通信,一个HTML页面中的JavaScrip程序能把消息发送到位于同一HTML页面中的Flash电影的原理是：因为你可以从JavaScrip程序调用Flash JavaScrip函数，这些函数
18、调用可以被Flash Player截获和理解，因此，这些特殊的JavaScrip函数也被成为Flash Player方法。,18,13.3.3 ASP基本知识,ASP是微软公司推出的一种用于产生动态页面的技术，ASP不是一种编程语言。实际上，ASP是一个运行在Web服务器中能够解释多种语言的脚本解释器，用其他语言编写的脚本可以被ASP解释和执行。并且，ASP只能用于Windows系统。尽管我们经常会扩展名为.asp的文件称为“ASP程序”，但实际上，一个ASP文件并不是一个程序，而只是一个页面，只不过这个页面内被嵌入了几段脚本（用来标注），ASP是Active Serve Pages(活动服务
19、器页面)的缩写。,19,ASP的工作过程是这样的：当客户机通过浏览器请求Web服务器上的某个ASP页面时，Web服务器就启动ASP的一个新进程，开始对该ASP页面 进行处理，Web服务器仍然处理一般的HTML标记，当遇到ASP脚本开始标记时，Web服务器就知道下面的内容是该由ASP解释器处理的脚本，因此，Web服务器就将处理权交给ASP解释器，ASP 解释器会执行这段脚本直到碰到ASP脚本结束标志，并把执行的结果返回给Web服务器，同时处理权也交给Web服务器，如此这般直至整个ASP页面被处理完。最后由静态的HTML标记和脚本执行的结果共同组成的页面就由Web服务器发送回客户机浏览器。,20,
20、ASP技术较之传统的CGI（公共网关接口的缩写，是最早建立的一种用于创建动态网页内容的约定，至今已有10年历史）有3个优势： 1ASP是直接内建与Web服务器（IIS）中，并且是作为Web服务器的一个服务来运行的，因此，对ASP页面的处理和执行都是在Web服务器内部完成的。这与CGI情况下Web服务器必须通过CGI协议才能与外部的CGI程序传递数据自然要快得多。 2ASP支持多线程。对于每一个ASP页面的请求，服务器只需一个ASP的新线程，创建一个线程的开销要比创建一个进程小得多，因为所有的线程都运行在同一个进程中，所有线程共享操作系统分配给该进程的资源。而请求CGI程序时是启动一个新进程，操
21、作系统需要做一些诸如为这个新进程分配存储空间这样的事情，这些都需要花费比启动新线程更多的时间，也会占用更多资源。这对于那些访问量很大的网站是不能接受的。 3ASP与HTML可以更好的结合。因为ASP脚本是直接嵌入到HTML页面中的，你可以像平常编写一个HTML页面时一样来编写ASP页面，只在需要呈现动态内容的地方插入所需的脚本即可。这使得用ASP开发应用变得很迅速，因为你可以很轻松地就安排好动态内容在HTML页面中出现的位置，而通过编写CGI程序来产生漂亮的HTML页面所花费的时间要长得多。 4Flash 与ASP的交互.,21,13.3.4 IIS服务器的配置,你只需要安装一个Web服务器即
22、可。目前最流行的两大Web服务器软件是IIS（Internet Information Services-Internet信息服务）和Apache。Apace更加稳定也更加安全，但Apache 的安装相当复杂，而IIS尽管不稳定也不安全，但IIS的安装更加的简单，更适合初学者，况且对于本地调试来说，谈不上安全问题，因为只有你自己访问你的Web站点,22,13.3.5 IIS的安装,基于Windows操作系统的不同，安装IIS的过程会有所不同。 1对于Windows 2000/XP系统 选择“开始”/“设置”/“控制面板”，在打开的窗口中双击“添加/删除程序”，在弹出 的对话框中选择“添加/删除
23、Windows组件”，在出现的“Windows组件向导”中选择“Internet信息服务（IIS）”，然后单击“下一步”按钮，之后根据屏幕提示完成安装即可。 2对于Windows Server 2003系统 选择“开始”/“控制面板”/“添加或删除程序”，在弹出的对话框中选择“添加/删除Windows组件”，在出现的“Windows组件向导”中选择“应用程序服务器”，然后单击“详细信息”按钮，在出现的“应用程序服务器”对话框中选择“Internet信息服务（IIS）”，然后单击“确定”按钮，在 “Windows组件向导”中单击“下一步”按钮，之后根据屏幕提示完成安装即可。 3对于Windows
24、 98系统在Windows 98中没有完整的IIS，只有IIS的一个简化版，即PWS(Personal Web Server个人Web服务器)，不过PWS对于调试我们的CGI程序已经足够了。你可以在Windows 98光盘的add-onspws文件夹中找到它，直接双击Setup.exe即可。安装时选择“典型”即可。,23,13.3.6 IIS的配置,1对于Windows2000/xp系统 【步骤1】打开“控制面板”，双击“管理工具”，然后双击“Internet服务管理器”，在弹出的对话框中单击你的计算机名前面的折叠按钮，将看到“默认Web站点”。 【步骤2】在“默认Web站点”上单击鼠标右键，
25、选择“属性”命令，在弹出的对话框选择“主目录”选项卡，在“连接到此资源时，内容应该来自于”选项组中选中“此计算机上的目录”单选按钮，然后单击“本地路径”右边的“浏览”按钮，导航并选择My Web文件夹，单击“确定”按钮。默认网站现在已经指向了你的My Web文件夹。 【步骤3】因为通常一个网站的首页名默认为index.htm，而Windows 2000/xp系统中的IIS默认只把名为Default.htm的HTML首页识别为首页。因此，我们应该让IIS也能识别index.htm。在“默认Web站点属性”对话框中选择“文档”选项卡。 【步骤1】单击“添加”按钮，在弹出的对话框中输入“index.
26、htm”。单击“确定”按钮。 【步骤2】在“默认Web站点属性”对话框中单击“确定”按钮。 【步骤3】关闭“Internet服务管理器”。,24,2对于Windows2003 Serve系统 【步骤1】选择“开始”/“管理工具”/ “Internet信息服务（IIS）管理器”，单击你的计算机名前面的折叠按钮，然后选择“网站”/“默认网站”。 【步骤2】在“默认网站”上单击鼠标右键，选择“属性”命令，选择“主目录”选项卡，在“此资源的内容来自”选项组中，选中“此计算机上的目录”单选按钮，然后单击“本地路径”右边的“浏览”按钮，导航并选择My Web文件夹，单击“确定”按钮。 【步骤3】在“默认网
27、站属性”对话框中选择“确定”按钮。默认网站现在已经指向了你的My Web文件夹。 【步骤4】关闭“Internet服务管理器”。 对于Win-98系统，因为目前使用不多，这里不再赘述。,25,13.3.7 实例操作 实例1：留言板的制作 1. 服务器端CGI程序的编写 2客户端Flash程序的编写 实例2：MP3播放器的制作 实例3：雷达特效的制作 实例4：动态字幕的制作,26,本章小结 通过本章的几个实例，我们接触到了Flash在网页制作中常用的技术，其中主要制作了一些动画效果和网页交互效果（也称为动态网页），从中可以看出Flash软件在多媒体制作领域和网页制作领域的强大功能。其中涉及的FlashAction语句可能对于初学者难度过高。这里，我们只要求读者通过操作，对Flash的交互功能有初步的了解。当然，要对Flash的交互功能有更深入的了解，还需要读者参考其他详细介绍FlahsAction的书籍，从最基本的语句学起，打下良好的基础。,
