asp+flash留言板制作.doc

Flash+ASP留言板的制作最近见到论坛上很多朋友都在问一个问题：如何用Flash来制作留言本？那么今天就由笔者来大家抛砖引玉，给大家介绍一下Flash+Asp+Access留言本制作。在这之前，希望您能熟悉Flash的动画制作和ActionScript知识，如果您还有一点Asp的编程基础，那么我想您一定可以轻松的做出这个实例来。此留言本所有文件清单如图5.5.2所示。图 5.5.2 文件清单一、 主要工作原理：1 发表留言：Flash作为前台来获取用户的提交的信息（数据），然后把搜集到的用户信息（数据）传递给Asp；接下来在Asp中接收Flash传过来的用户信息（数据），用统一的格式写入到我们的数据库中（Access），这样完成留言的发表。2 读取留言：用户通过使用Flash来向Asp发出一个读取留言的请求，Asp接到请求后根据要求从数据库（Access）中提取用户所要的信息（数据），然后这些信息（数据）再由Asp发送给Flash，最后在Flash中把这些信息（数据）表现出来。二、 关于FlashAsp数据传递问题关于Flash与Asp的数据传递问题可以说是留言本制作的重点和难点。可以用来解决它的方法有很多，比如说现在最时髦的XML。但是在这里我要用别的方法来解决。这里不使用XML，主要是因为如果涉及了XML那么将要花很多精力来解释XML这一部分内容，而这篇教程的主要目的是为了让一些初学者来感受一下如何使用Flash来制作留言本。下面我要通过举个简单的例子让大家来了解我是如何解决数据传递问题的：首先通过Flash中的输入文本框搜集到访客名（nick）、访客的邮箱地址（email）、留言的内容（message），然后我们把这些数据交给Asp，我们该如何做呢？可以使用loadVar对象，关于这个对象的具体说明，您可以察看AS的中文帮助，我在这里就不作具体介绍了。myload = new LoadVars();myload.nick = nick.textmyload.email = email.textmyload.message = message.textmyload.sendAndLoad (myasp.asp,myload,post);在Flash里通过以上的语句就把nick、email、message这三个变量传给了myasp.asp这个文件，在myasp.asp里，我们可以通过以下的语句来获取这三个变量：在Asp中获得这三个变量后就可以通过ADO把他们记录到我们的数据库（Access）中。 以上则是FlashAspAccess的一个过程，那么如何实现AccessAspFlash这一过程呢？我们知道当我们使用一个留言本的时候，留一次言只要写入一条记录，而察看一次留言的时候往往要一下显示很多条记录，所以AccessAspFlash这个过程中要传输的数据量可能是刚刚FlashAspAccess的几倍或者十几倍、甚至几十倍，我是这样做的：首先通过Asp向Access提取我们所要的记录集，存放在一个rs对象里，然后用循环生成类似这样的一个字符串：gbook=nick1email1message1nick2email2message2最后用response.write将它输出。接下来还记得刚才在Flash中最后那句myload.sendAndLoad (myasp.asp”,myload,”post”);吗，这句话一方面可以向Asp发送数据，同时还可以从Asp中获取反馈的数据。通过它我们就可以在Flash中使用myload.gbook，即nick1email1message1nick2email2message2那么在Flash中获得像nick1email1message1nick2email2message2这样的字符串是不可以直接使用，所以我们需要这样再来处理一下。myString = new String(myload.gbook); /myload.gbook的值即为/nick1email1message1nick2email2message2temp = new Array();temp = mystring.split();通过了mystring.split();我们就把myload.gbook中的值以“”为分隔符，放入一个数组中（temp），接下来我们就可以通过这个数组来操作并显示这些数据。到此为止AccessAspFlash过程就算完成了，接下来的事就是让Flash把这些数据表现出来，至于如何表现就可以充分发挥你的想象力了：）在最后我要说明的是，之所以使用“”这个作为分隔符完全是出于个人喜好，你可以使用任何一个字符作为分隔符，但前提是你必须牺牲这个符号而保证使它不出现在你的留言信息中。三、 设计数据库（Access）：打开Microsoft Access，新建一个“空Access数据库”，保存为 gbook.mdb ，使用“设计视图”新建一张表，在表中建立如下字段：id（自动编号）、name（文本）、message（文本）、face（文本）、email（文本）、oicq（文本）、dt（日期/时间）、ip（文本）。并将id字段设为主键，最后保存表名为 gbook 。图 5.5.3 数据库设计视图四、 Flash制作部分 ：1 新建一个Flash文件，场景设置如下：width 780px，height 300px，Frame rate 24fps。2 首先我们把时间轴的设计好（如图5.5.4）。我认为这一步比较重要，一个好的时间轴安排可以让我们在编程时省掉很多代码。首先将第一个层更名为action，我们将把所有的代码写在这个层上。在此层上新建5个关键帧，并在第2、3、4关键帧中写上帧标签 read 、 write 、 loop ，并适当延长几帧。接下来再新建一个层 bg ，放在最下面，用来放置留言本的背景图案（在这里美化留言本我就不介绍了，您自己可以在bg层里面画留言本的边框和背景），并将它的第一帧延长至与action层的最后一帧对齐。在bg层的上方再新建两个层，分别起名为：write和button。从命名上我们就可以知道他们分别是用来放输入框和按钮的，如 图5.5.4 分别延长刚才新建两层的第一个关键帧至action层write帧结尾处。最后在button层的第一帧处新建一个空白的关键帧。（如图5.5.4）至此我们这个留言本的框架搭建完成，最后请再仔细检查一下，看看您做得是否与图中相一致。图 5.5.4 时间轴的设计安排3 做完了上面的工作后，我们可以轻松一下。我们来制作一个填写留言的MC（影片夹MovieClip）。首先按Ctrl+F8新建一个空白的MC，并取名为write。图 5.5.5 动画剪辑write （1） 在write里我们简单的绘制一下背景（2） 在上面放置4个输入文本框，分别命名为“name”（姓名,20字符）,“email”（邮件,50字符）,“oicq”(10字符),“message”（留言，多行）。另外再放上两个按钮，提交按钮和取消按钮，分别命名为“submit”（提交）,“cancle”（取消）。图 5.5.6 文本框的属性（3） 从组件面板里拖出一个CombBox，命名为“face”。这个是用来给用户选择头像，所以我们设置它的Labels，添加24个标签，分别填入：“请选择头像”、“1”、“2”“23”。之所以是24个标签，是因为我们准备了23个头像，加上那句“请选择头像”。那么头像放在哪里呢，别急，我们下面会介绍的。最后在这个CombBox的Change Handler里填入“changeface”，如图5.5.7所示。图 5.5.7 CombBox组件changeface的设置（4） 我们再按Ctrl+F8新建一个MC，命名为“head”。从外部导入23个头像，分别放在第123关键帧上，调整好他们的位置，尽可能的保证中心点在同一位置，并在第一帧处写上stop()。（5） 图 5.5.8 动画剪辑head的时间轴（6） 好了，回到write里面。把刚刚做好的head从Library（ctrl+L调出Library面板）里拖放到face（CombBox）旁边，命名为“head”。（7） 在write的第一帧上写上如下代码：this.y = -140;this.onEnterFrame = function() this.s = this.s*.3+(this.y-this._y)*.4; this._y += this.s;function changeface() /此处为face（CombBox）的handler head.gotoAndStop(face.getValue(); /自定函数cut为检查留言数据的合法性，不作详细的介绍function cut(str) mystr = new String(str); newstr = ; for (i=0; imystr.length; i+) temp = mystr.substring(i, i+1); switch (temp) case : temp = ; break; case & : temp = %26; break; case % : temp = %25; break; newstr += temp; return newstr;submit.onRelease = function() /定义submit按钮的动作 name.text = cut(name.text); email.text = cut(email.text); oicq.text = cut(oicq.text); message.text = cut(message.text); var ok = 0; if (email.text = ) ok = 1; else mystr = new String(email.text); for (i=0; imystr.length; i+) temp = mystr.substring(i, i+1); if (temp = ) ok1 = 1; p1 = i; if (temp = .) ok2 = 1; p2 = i; if (ok1+ok2 = 2 & p1p2) ok = 1; else ok = 0; if (name.text & ok = 1 & message.text) y = -140; _parent.gotoAndPlay(write); ;cancle.onRelease = function() /定义cancle按钮的动作 _parent.showface._visible = 1; y = -140; ;4 回到我们的主场景，在button层的第二帧处放置7个按钮，分别命名为：refresh、previousmore、previous、sign、next、nextmore、manage。再放置两个动态文本，命名为：mainpageshow、pageshow。5 按Ctrl+L调出Library，在里面找到head，单击右键设置它的Linkage（连接）为head。6 在action层的第一帧里面输入代码：system.usecodepage = true; /支持中文留言page = 1; /初始的组数为第一页（每组为100条留言）gload = new LoadVars(); /定义一个LoadVars实例gloadgload.sendAndLoad(gbook_read.asp?page=+page, gload, post);/从gbook_read.asp读取留言信息到gload对象中，此处的page为当前组数gotoAndPlay(loop);function read(str) /自定义一个读取留言的函数read（），参数为str，下面工作主要就是围绕这个传递进来的str进行编程 mystr = new String(str); temp = new Array(); temp = mystr.split(); gArray = new Array(); for (var j = 0; j(temp.length-1)/8; j+) gArrayj = new Array(); for (var k = 0; k8; k+) gArrayjk = tempj*8+k; /以上的代码为处理Asp传递过来初始的留言数据，并把这些留言信息放入一个二维数组gArray中（一次从数据库中读取前100条留言，也就是说一次最多读100条留言，这些数据可以在后面的Asp文件里设定，呆会介绍）/*初始化当前的页数为第一页（此处所讲的第一页是只把读进来的100条留言以每次显示5个，即分成100/5=20页中的第一页）*/pagecurr = 1; /计算出总的页数，这里的总页数概念同上 pagetotal = Math.ceil(gArray.length/5);/使button层中的名为pageshow的文本框显示当前页数和总页数 pageshow.text = pagecurr+/+pagetotal;/*这里作用同上显示当前组数和总组数，这里组数指的是把数据库里所有的留言分为100条一组的组数*/ mainpageshow.text = page+/+gload.totalpage;/上面的内容是处理Asp到Flash传递数据过程。/从这里开始就是显示留言部分，纯Flash的编程，所以只作简单的介绍/创建一个空的MC，我们将把所有的留言信息全部放到showface这个MC里去 this.createEmptyMovieClip(showface, 0); /*设置showface的弹性效果（如果有问题可以去闪吧论坛的AS区找一下关于弹性菜单的教程，那里有详细的介绍。）我们可以通过showface.x来控制整个showface的_x属性，并且在移动过程中是带有弹性的，即控制showface的左右平移，从而达到我们所见到的移动分页效果。*/ showface.onEnterFrame = function() /你可以通过里面的“.2”“.1”来设置showface移动的速度和弹性大小 showface.s = showface.s*.2+(showface.x-showface._x)*.1; showface._x += showface.s; ; for (var i = 0; igArray.length; i+) /*通过一个循环我们把存放在gArray这个二维数组中的留言全部显示到showface这个MC里。此处gArray.length为gArray的长度，即留言的个数。*/*在showface里为每个留言新建一个MC，命名为“message”+ i ，这里的i为循环变量，即“message0”、“message1”、“message2”*/ showface.createEmptyMovieClip(message+i, i);/*在刚新建的“message”+i中使用attachMovie粘贴头像。注意这里的head就是上面在制作write这个MC时所用的，我们事先已经在库里设置为它设置好了连接（再详细地讲一遍：在库里右键单击head，选择连接，在弹出的菜单里选中“导出为动作脚本”、“导出第一帧”，设置“标识符”为“head”）。*/eval(showface.message+i).attachMovie(head,head,0); /*为刚粘贴的“head”设置_x、_y（可能根据不同的情况，需要您微调一下后面的数值），以及跳转到该条留言所使用的头像编号gArrayi3 */ with (eval(showface.message+i+.head) _x = 156*i+30; _y = 110; gotoAndStop(gArrayi3); /*在“message”+i里创建一个文本对象info，用来显示留言者的姓名（gArrayi1）、Email（gArrayi4）、QQ（gArrayi5）以及留言时间（gArrayi6）*/ eval(showface.message+i).createTextField(info,1, 156*i+2, 205, 150, 70); with (eval(showface.message+i+.info) selectable = false; wordWrap = true; html = true; htmltext = +gArrayi1+gArrayi4+QQ:+gArrayi5+gArrayi6+; myformat = new TextFormat(); myformat.color = 0x996600; setTextFormat(myformat); /在“message”+i里创建一个文本对象info2，用来显示留言的内容eval(showface.message+i).createTextField(info2, 2, 156*i+3, 10, 150, 100);（gArrayi2） with (eval(showface.message+i+.info2) border = 1; selectable = false; wordWrap = true; text = gArrayi2; myformat = new TextFormat(); myformat.color = 0x990000; myformat.align = center; setTextFormat(myformat); /*至此循环结束，通过这个循环我们把100条留言一下都放在了showface这个MC里。*/*我们只能看到影片宽度780px的显示部分，其余的都在屏幕外侧。因此可以让showface左右移动，通过这样的方法来达到分页的效果。还记得我们上面可以通过showface.x来控制showface._x吗，那么接下来的事情就好办多了。*/ previous.onRelease = function() /定义previous按钮（后退） if (pagecurr1) pagecurr-; showface.x += 780; pageshow.text = pagecurr+/+pagetotal; if (pagecurr = 1 & page1) previousmore._visible = 1; if (nextmore._visible = 1) nextmore._visible = 0; ; next.onRelease = function() /定义next按钮（前进） if (pagecurrpagetotal) pagecurr+; showface.x -= 780; pageshow.text = pagecurr+/+pagetotal; if (pagecurr = pagetotal & pagegload.totalpage) nextmore._visible = 1; if (previousmore._visible = 1) previousmore._visible = 0; ;/*定义sign按钮（签写新留言）。在这里我们首先要把事先做好的write这个MC拖放到场景中来，放在write层的第一帧（放在已经设计好的时间轴上）*/ sign.onRelease = function() write.y = 135; /这里的write.y的用法与showface.x的用法相同 write.message.text = ; showface._visible = 0; /当write显示时，showface隐藏 ; refresh.onRelease = function() /定义refresh按钮（刷新） showface._visible = 0; gload = new LoadVars(); gload.sendAndLoad(gbook_read.asp?page=+page, gload, post); _root.gotoAndPlay(loop); ; nextmore.onRelease = function() /定义nextmore按钮（组数前进）一次更新下100条留言 if (page1) page-; if (page = 1) previousmore._visible = 0; gload = new LoadVars(); gload.sendAndLoad(gbook_read.asp?page=+page, gload, post); gotoAndPlay(loop); ;/* 定义manage按钮（后台管理）注意：此处由于时间关系，我把后台管理直接在Asp里做了，所以只用了getURL做个链接。您如果明白了次留言本原理，可以自己设计一段Flash后台管理程序。*/ manage.onRelease = function() getURL(gbook_manage.asp); ;7 在action层中read帧上写：/*我们使用read（）这个自定义函数，参数即为从外Asp处读取进来原始数据。我承认我这函数写得太死，其实完全可以把它做成一个读取数据的类，这样修改可以更灵活，但考虑到这篇教程主要面向的是初学者，重点不在于此。*/read(gload.gbook);stop();8 在action层中write帧上写：gload = new LoadVars(); = .text;gload.oicq = write.oicq.text;gload.email = write.email.text;gload.message = write.message.text;gload.face = write.face.getValue(); gload.sendAndLoad(gbook_write.asp?page=+page, gload, post); /这里的在开头已经介绍过了，所以不再复述9 在action层中最后帧上写：if (gload.eof = ok) gotoAndPlay(read); else gotoAndPlay(loop); /判断数据是否读取成功，方法比较古老，但也直观实用 10.完成图样（时间轴）图 5.5.9 完成后的时间轴五、 Asp部分1 gbook_conn.asp文件：2 nocache.asp文件：3 最重要的gbook_read.asp文件（读取留言）： 清除缓存 连接数据库4 重要的gbook_write.asp文件（撰写留言）：5 放置gbook.swf的文件gbook.asp，这里的代码，我想不用介绍大家应该都很熟悉了。留言本 6 由于版面的问题，简单的介绍一下最后