留言板的制作

1、实例1：留言板的制作我们的这个留言板由服务器端和客户端两部分构成。其工作过程是这样的：用户在Flash电影的第1帧中的输入文本中输入“姓名”、“留言内容”等，然后单击“发送”按钮发送留言，随后，在服务器端的CGI程序完成向数据库中追加；留言的处理后，用户会被带入到Flash电影的第2帧，在该帧中Flash会调用另一个CGI程序显示用户本次的留言和之前所有其它人的留言。下面我们分别完成服务器端CGI程序和客户端Flash的开发。1. 服务器端CGI程序的编写 服务器端有3个文件：一个用于把有Flash发来的留言内容写入文本数据库的CGI程序-leaveword.pl，一个用于把文本数据库中的所有

2、留言发送回Flash的CGI程序-leaveworddisplay.pl，以及一个用于保存留言的文本数据库文件-leaveword.log。 在这个留言板中，我们将收集用户的“姓名”、“来自地区”、“电子邮箱”、“个人网址”、“留言内容”5个信息。这些信息文本在文本数据库中的存储格式如下所示： 陈冰:青岛:icefall:这是一个测试。 我们将用:分割每个字段。因此，我们应该在把用户的留言内容提交的数据库之前，从所有5个信息中剔除可能存在的“:”以免让用户无意的输入给我们的数据库造成破坏。首先，我们来看leaveword.pl的代码：#!/usr/local/bin/perl#调用readpa

3、rse子程序对由Flash发送来的URL编码数据进行解码。&readparse;print Content-type: text/htmlnn;open(LOGFILE, cgi-bin/leaveword.log); #把所有留言读取到entries数组中。#数组中的每个元素就是数据库中的一条记录，即一次留言信息。entries=;close LOGFILE;$arraylength=entries;#以追加方式打开leaveword.log，为把新的留言写入数据库做好准备。open (LOGFILE, cgi-bin/leaveword.log); #因为在我们的文本数据库中是用:来作为字

4、段分隔符的，因此需要将留言中所有的:都剔除。#value数组中保存着已被解码的可用数据。$value0= s/:/g;$value0= s/|/g;#如果用户的某项信息没有输入内容，就用默认的“未填写”来代替。if ($value0 eq ) $value0=未填写;$value1= s/:/g;$value1= s/|/g;if ($value1 eq ) $value1=未填写;$value2= s/:/g;$value2= s/|/g;if ($value2 eq ) $value2=未填写;$value3= s/http:/g;$value3= s/:/g;$value3= s/|/g

5、;if ($value3 eq ) $value3=未填写;else $value3=http:/$value3;$value4= s/:/g;$value4= s/n/g;$value4= s/|/g;#如果有人恶意（或无意中）输入了大量的连续的英文、数字或符号，以致会破坏留言系统的格式化，那么就将这些东西剔除。#这种!-!-!-处理机制主要是用于在HTML页面中显示内容时防止数据库格式被恶意破坏的。$value4= s/!-!-/g;if ($value4 eq ) $value4=未填写;#用:来把数组中所有元素连接成一个字符串，再把这个字符串赋给变量newline。$newline=j

6、oin(:,value);#得到用户提交留言的时间。($sec, $min, $hour, $mday, $mon, $year, $wday, $ydat, $isdst) = gmtime();$mon+;#处理千年问题。$year=$year+1900;#从gmtime()函数中得到的是格林威治时间，因此需要计算出北京时间（北京在时区上位于东八区）。if ($hour=0 & $hour=15) $hour=$hour+8;else $hour=($hour+8)-24;$mday=$mday+1;if ($mon10) $mon=0$mon;if ($mday0) $user_stri

7、ng=$ENVQUERY_STRING;$user_string = s/+/ /g;name_value_pairs = split(/&/,$user_string);foreach $name_value_pair (name_value_pairs) ($keyword,$value) = split(/=/,$name_value_pair);$value = s/%(a-fA-F0-9a-fA-F0-9)/pack(C,hex($1)/ge;push(value, $value);$user_data$keyword = $value;if ($value=/!-#exec/) p

8、rint Content-type: text/htmlnnNo SSI permitted;exit;再来看看leaveworddisplay.pl的内容：#!/usr/local/bin/perlprint Content-type: text/htmlnn;open(LOGFILE, cgi-bin/leaveword.log); #把所有留言都读取到entries数组中。entries=;close LOGFILE;$arraylength=entries;#颠倒entries数组，以便最新的留言能够显示在最前面。reverseentries=reverse(entries);$con

9、tent=;foreach $line(reverseentries)fields=split(/|/,$line);#以哈希方式处理留言。$fieldshash$fields1=$fields0;eachitem=split(/:/,$fieldshash$fields1);#对读取到的时间分别提取出年、月、日。$thisyear=int($eachitem0/10000);$thismonth=int($eachitem0-$thisyear*10000)/100);$thisday=$eachitem0-$thisyear*10000-$thismonth*100;#把所有的留言连接成一

10、个长长的字符串。$content=$content $thisyear年$thismonth月$thisday日$eachitem1 $eachitem2 $eachitem3 $eachitem4 $eachitem5 $eachitem6n;#把这个长长的字符串以变量/值对的形式返回给客户端的Flash。print LWcontent=$content;你不需要创建文本数据库leaveword.log,它会由leaveword.pl程序自动创建的，现在把leaveword.pl和leaveworddisplay.pl保存到cgi-bin文件夹中。至此，我们的服务器端的工作就完成了。下面，我

11、们继续完成客户端Flash的开发。2客户端Flash程序的编写在客户端的Flash中，这里是通过一个LoadVar对象来发送数据的。用LoadVar对象来发送数据时实际上发送的是LoadVar对象的自定义属性的值。因此，必须把要发送的数据先赋值给LoadVar对象的一些自定义的属性，然后在调用LoadVar对象的sendAndLoad()方法来发送这些数据。sendAndLoad()方法不仅会发送数据，而且还期待着把服务器端脚本返回的数据装入一个事先准备好的LoadVar对象，因此，需要事先创建另外一个LoadVar对象来装载调用sendAndLoad()方法时由CGI程序返回的数据。下面是制

12、作过程：【步骤1】新建一个Flash文档，在时间线第1帧的舞台中，布局留言板的表单，如图13-3-2所示。图13-3-2布局留言板的表单输入5个文本的实例名，从上到下分别为：username，userArea，userEmail，userWebsite，userLeaveword。【步骤2】在时间线的第1帧中捆绑下面的脚本：/创建两个LoadVar对象myLVS用来发送数据，myLVL用来接收数据。myLVS=new LoadVars();myLVL=new LoadVars();/因为服务器端的Perl CGI程序默认会以操作系统的传统代码页来编码字符，/这会导致保存到文本数据库文件中的字符

13、是以操作系统的传统代码页来编码的，/因此，在Flash程序中读取时也必须以操作系统的传统代码页来进行解释。System.useCodepage=true;/点击“发送”按钮前始终停留在第1帧。stop();【步骤3】为“发送”按钮捆绑下面的脚本：on(release)/把各个输入文本中的内容依次赋给myLVS的各个自定义属性。myLVS.userLeaveword=userLeaveword.text;myLVS.userWebsite=userWebsite.text;myLVS.userEmail=userEmail.text;myLVS.userArea=userArea.text;my

14、LVS.userName=userName.text;/把数据发送给leaveword.pl程序。myLVS.sendAndLoad(cgi-bin/leaveword.pl,myLVL,POST);myLVL.onLoad=function()/前进到第2帧。gotoAndPlay(2);【步骤4】这里，将使用一个TextArea组件来显示leaveworddisplay.pl程序返回的留言。在时间线的第2帧处，插入一个关键帧，从 “组件”面板中把一个TextArea组件的实例拖入到舞台中，用“自由”变形工具适当地所放它，在属性面板中为该实例赋予实例名myTextArea，如图13-3-3所

15、示。图13-3-3为实例赋予实例名【步骤5】在根时间线的第2帧中绑定下面的脚本：/指定TextArea组件myTextArea有能够自动出现的垂直滚动条。myTextArea.vScrollPolicy=auto;/调用leaveworddisplay.pl程序，/返回的数据会被作为myLVL对象的自定义属性装载到myLVL对象中。myLVL.load(cgi-bin/leaveworddisplay.pl);/在数据完全装载后在myTextArea中显示留言。myLVL.onLoad=function()myTextArea.text=myLVL.LWcontent;stop();【步骤6】

16、将该文档保存在MyWeb文件夹中，命名为leaveword.fla，并发布为leaveword.swf。开发工作完成！现在，让我们测试一下这个留言板的效果。在浏览器中访问http:/127.0.0/ leaveword.swf,将看到发送页面。输入一些信息，单击“发送”按钮，你将看到你的留言在TextArea组件中得到显示。实例2：MP3播放器的制作如今多媒体的应用越来越普及，热门经常在网上享受更多的视听效果。Flash本身就是为了多媒体开发的，因此使用Flash可以制作出丰富的多媒体作品，例如网站上的MP3播放器，聊天室中视频聊天等。【步骤1】新建一个fla文件，命名为Mp3player.f

17、la。【步骤2】设置播放器外观：在设计播放器外观时，可以参照下面的设计图样，如图13-3-4所示。图13-3-4播放器外观 下面依照图1讲解一下播放器的功能。在声音没有导入前，除了Load按钮，所有的部件都是无法使用的。按下Load按钮，载入“光良-第一次.mp3”，载入的同时，按钮右边的进度条和文本框会报告载入的进度。在100载入以后，3个按钮和拖动条才能使用，Volume用来控制音量，Pan控制左右声道的播放，transform下面的4个拖动条用来实现声音特效，mp3 progress显示音乐播放的进度。具体的界面请读者自己制作。【步骤3】编写代码：在主舞台（_root）的“Action”

18、中编写如下代码，以实现上述功能。function set Enable(disenabled) llHead_mc.enabled = disenabled;lrHead_mc.enabled = disenabled;rlHead_mc.enabled = disenabled;rrHead_mc.enabled = disenabled;volumeHead_mc.enabled = disenabled;panHead_mc.enabled = disenabled;playHead_mc.enabled = disenabled;play_btn.enabled = disenable

19、d;stop_btn.enabled = disenabled;pause_btn.enabled = disenabled;_root.onLoad = function() play_sound = new Sound();soundTransformObj = new Object();soundTransformObj.ll = 100;volumeHead_mc._x += 200;llHead_mc._x += 200;soundTransformObj.lr = 0;soundTransformObj.rl = 0;soundTransformObj.rr = 100;rrHea

20、d_mc._x += 200;play_sound.setTransform(soundTransformObj);play_sound.setPan(0);panHead_mc._x += 100;sound Playing = false;set Enable(false);playedPos = 0;soundLoading = false;progressBar_mc._visible = false;this.load_btn.onRelease = function() play_sound.loadSound(光良 - 第一次.mp3, false);soundLoading =

21、 true;progressBar_mc._visible = true;load_btn.enabled = false;this.play_btn.onRelease = function() play_sound.start(playedPos);sound Playing = true;this.pause_btn.onRelease = function() playedPos = play_sound.position/1000;play_sound.stop();this.stop_btn.onRelease = function() playedPos = 0;play_sou

22、nd.stop();playHead_mc._x = playHead_Pos;sound Playing = false;_root.onEnterFrame = function() if (soundLoading) var per:Number = play_sound.getBytesLoaded()/play_sound.getBytesTotal();if (isFinite(per) percent_txt.text = Math. Floor (per*100) +%;progressBar_mc._width = per*100;If (per = 1) Set

23、 Enable (true);SoundLoading = false;以上是该实例的主代码。从这些代码基本上就可以知道声音控制是如何实现的，在每个拖动块上都有代码，其内容是基本相似的，在这里只介绍volumeHead_mc._x上的代码：onClipEvent(load) Dragged=false; Sorgos=thisd;on(presss) Dragged=true;onClipEvent(mouseMove)if(Dragged) if(_parent.xmouseorgPos+200)this._x=orgPos+200;else this._x=parent._xmouse;

24、_parent.player_sound.setVolume(this._x-sorgos)/2;on(release,releaseOutside) Dragged=false;其它几个拖动块中的代码基本相同，只是在修改声音的设定上有一些变动。实例3：雷达特效的制作【步骤1】新建一个Flash文档。【步骤2】按ctrlF8，新建一个图形元件命名为overview，如图13-3-5所示。 图13-3-5 “创建新元件”对话框 图 13-3-6 正圆【步骤3】单击“确定”按钮进入元件编辑模式，用“椭圆”工具在舞台上画一正圆。【步骤4】选中该圆复制出一个副本（图13-3-6）将复制出的圆用“任意变

25、形”工具放大并调节位置，如图13-3-7所示。【步骤5】重复步骤4，再复制出一个圆并对齐。选择“窗口”/“混色器”命令打开“混色器”面板。在“混色器”面板中设置一种渐变色，如图13-3-7所示。 图13-3-7 混色器 图13-3-8 颜料桶工具应用【步骤6】选择颜料桶工具，单击舞台中最外部的两个圆之间的区域，如图13-3-8所示。【步骤7】新建一个元件命名为“overview2”使用椭圆工具和铅笔工具绘制一个表盘，如图13-3-9所示。 图13-3-9 表盘 图13-3-10 直线【步骤8】新建一个元件命名为line，使用“直线”工具绘制一条水平直线，如图13-3-10所示。【步骤9】回主场

26、景，单击“椭圆”工具在“属性”面板中将其边框色设置为无，填充为黑色，在舞台上绘制一正圆，选择“视图”/“标尺”命令，在舞台上拖动出一条水平和一条垂直的辅助线，如图13-3-11所示。图13-3-11 画辅助线 图13-3-12 对齐线条 图13-3-13 截取图形 图13-3-14 混色器面板 图13-3-15 元件【步骤10】选中该圆，单击“任意变形”工具，圆的中心将出在舞台上。用鼠标将圆的中心和辅助线的交点对齐，如图13-3-12所示。【步骤11】单击“索套”工具，在选项栏中单击“多边形模式”，在舞台上截取1/4圆如图13-3-13所示。【步骤12】选中其余的3/4圆，按F8将其转化为元件

27、，命名为“3/4圆”。【步骤13】在“混色器”面板中制定一种黑色和白色的线性渐变，如图13-3-14所示。【步骤14】使用“颜料填充”工具将渐变色应用到1/4圆上，将其转化为元件，如图13-3-15所示。【步骤15】回主场景，将“图层1”改名为“背景”，并将舞台上所有的对象删除。将overview1和overview2元件拖入舞台，并调整其位置，如图13-3-16所示。 图13-3-16 效果图(1) 图13-3-17效果图(2)【步骤16】将“背景”图层锁定，新建图层并将其命名为“指针”，将line、1/4圆、3/4圆元件拖入舞台，调整其位置并将其并组如图13-3-17所示。【步骤17】选中

28、“指针”图层第18帧，按F6插入关键帧。在两个关键帧中创建补间动画。选中补间动画中任意一帧，在“属性”面板将“旋转”设置为“顺时针”，旋转次数设置为1次，如图13-3-18所示。图13-3-18 属性面板【步骤18】单击舞台空白处，在“属性”面板中将背景色设置为黑色，选中“背景”层，将该图层延续到第18帧，如图13-3-19所示。图13-3-19 场景【步骤19】测试电影，效果如图13-3-20所示。图13-3-20 测试效果图实例四：动态字幕的制作1制作原理：在制作之前，先分析一下，动画文字的跳动，很明显的出现了一个压缩变形的效果，这就让我们想到了“任意变形”工具，文字的跳动是有时间间隔的，

29、这也就是播放时间的控制。2制作步骤：【步骤1】首先，打开Flash 8，按快捷键：Ctrl+J，先设置一下文档属性，给动画设置一个合适的舞台尺寸和帧频。具体的设置如图所示，把帧频设为24，这样，动画的播放会较流畅，具有真实感一些。如图13-3-21所示。图13-3-21 文档属性设置【步骤2】根据需要，进行文字的制作。这里，我们一共要制作四个文字，性质为“影片剪辑”，分别为“与”，“时”，“俱”，“进”四个字。按快捷键Ctrl+F8，新建元件“与”，选“影片剪辑”，如图13-3-22所示。图13-3-22 “与” 元件【步骤】点击确定，进入“与”元件的编辑界面，我们要制作的目标是：为文字加上一

30、定的立体效果，使之更美观些。选择“绘图工具栏”中的“文本工具”（快捷键T），按快捷键Ctrl+F3，打开属性面板，对文字进行属性设置，如图13-3-23所示。图13-3-23 文字属性设置在具体操作上，大家可以根据自己的情况，选择自己喜欢的字体，字号，颜色。要记住的是：我们要学的是方法，这是最重要的。当然，原则上，立体感的体现，颜色上要前浅后深。所以大家尽量选择一个较深的颜色。【步骤4】在舞台中输入文字“与”，现在，为文字加上立体效果。选择文字，按快捷键Ctrl+B,对文字进行“分离”操作。当需要对文字进行形状渐变动画的制作，或是要改变文字的某一部份颜色时，就要对文字进行“分离”操作，把文字转

31、成矢量形状。对文字进行“分离”操作后，保持文字的选中状态，按快捷键Ctrl+C,进行复制，然后按快捷键Ctrl+Shift+V,把复制的文字粘贴到原文字的正上方，继续保持文字的选中状态，按键盘上的向左的方向键，向上的方向键各2次，使之和原来的文字错开一点位置，填充暗红色。这样，第一个文字“与”就制作好了。制作好的文字如图13-3-24所示。图13-3-24 文字“与”【步骤5】按上面的方法，制作好“时”，“俱”，“进”元件。【步骤6】 现在开始制作文字的跳动了。按Ctrl+F8键，新建一个命名为“文字跳动”的影片剪辑元件，点确定进入“文字跳动”影片剪辑的编辑界面。因为要制作的文字跳动总共有四个

32、字，所以我们新建3个图层，这样，加上原来，总共为4层，为了便于辩认，我们为图层改名，分别改名为“与”、“时”、“俱”、“进”。时间轴如图13-3-25所示。 图13-3-25 文字时间轴 图13-3-26 文字对齐改名后，按Ctrl+L键，打开“库”面板，把我们前面制作好的4个影片剪辑分别拖入舞台中，放在各自的层中。之后，需要对齐一下文字，保持文字的选择状态，按快捷键Ctrl+K键，打开“对齐”面板，点击“底对齐”/“水平平均间隔”，把文字对齐，如图13-3-26所示。【步骤7】为了把握好文字在跳动时的高度，需要为文字定位。按快捷键Ctrl+Shift+Alt+R,显示标尺，然后通过在标尺上按

33、住鼠标左键的方法，拉出如图13-3-26所示的定位参考线。图13-3-26 文字定位【步骤8】 选择“与”字图层的第10帧，点击右键，选择插入关键帧。选择“绘图”工具栏中的“任意变形”工具，对第10帧的“与”字进行一定的压缩。压缩多少大家可以自己决定，压缩大点，就让文字跳高点。这一步的操作是模拟文字跳动前的下蹲动作，让跳动更真实些。图13-3-27 参考线上的“与” 【步骤9】选择“与”字图层的第15帧，把第1帧的关键帧通过单击鼠标右键，选择“拷贝帧”/“粘贴帧”的方法，粘贴到第15帧，并把第15帧的“与”字通过按键盘上的向上方向键的方法，垂直移动到上方参考线的上面。如图13-3-27所示。【步骤10】之后通过“拷贝帧”/“粘贴帧”的方法，我们把“与”字图层的第10帧粘贴到“与”字图层的第20帧。为第1帧，第10帧，第15帧加上运动补间动画，这样，文字就完成了一个从跳