开发Flash留言本一直都是Flash后台交互的进阶技术,本例通过ASP和XML简单高速地同数据库交互。
开发Flash留言本一直都是Flash后台交互的进阶技术,本例通过ASP和XML简单高速地同数据库交互。
本例思路:
<1> 创建数据库。
<2> 编写ASP程序。
<3> 在Flash中制作留言本皮肤。
<4> 编写AS与ASP程序交互。
实例步骤:
(1)先安装IIS服务器,安装方法请查阅相关资料。
(2)交互流程:
显示:使用ASP读取数据库数据再输出成XML,Flash再去读取这个XML文件。
留言:Flash将用户输入留言内容发送给ASP,ASP接收到数据后再存入数据库。
交互流程如图所示。
图14-1 流程图
(3)本范例使用到的三个ASP文件为:
“head/conn.asp”打开数据库。
“listXML.asp”读取ACCESS数据库里的数据并转化为XML格式显示出来。
“post.asp”接收Flash里的值存入数据库。
(4)先创建数据库名为“db.mdb”,新建一个表名为“book”,各字段与作用如图14- 2所示.
图14-2 新建表
(5)先编写打到数据库的conn.asp文件。
ASP/Visual Basic代码
<% Db = "head/db.mdb" conn = "Provider = Microsoft.Jet.OLEDB.4.0;Data Source = " & Server.MapPath(db) %> |
Db = \”head/db.mdb\”
conn = \”Provider = Microsoft.Jet.OLEDB.4.0;Data Source = \” & Server.MapPath(db)
(6)编写显示留言列表的ASP文件listXML.asp,先打开表“book”。
ASP/Visual Basic代码
<%@LANGUAGE="VBSCRIPT" %> <!–#include file="head/conn.asp" –> <% set rs = Server.CreateObject("ADODB.Recordset") rs.ActiveConnection = conn rs.Source = "SELECT * FROM book ORDER BY id DESC" rs.CursorType = 0 rs.CursorLocation = 3 rs.LockType = 1 rs.Open() %> |
set rs = Server.CreateObject(\”ADODB.Recordset\”)
rs.ActiveConnection = conn
rs.Source = \”SELECT * FROM book ORDER BY id DESC\”
rs.CursorType = 0
rs.CursorLocation = 3
rs.LockType = 1
rs.Open()
(7)在Flash中读取数据库数据时,还要考虑分页的问题,我们每次默认读取10条数据可以在调用时设置显示条数,使用变量“itemNum”。并判断当前显示的页码,使用变量“pageNum”。
ASP/Visual Basic代码
<% Dim itemNum,pageNum,recordTotal itemNum = Request.QueryString("itemNum") If itemNum <> "" Then itemNum = Int(itemNum) else itemNum =10 end if recordTotal = rs.RecordCount pageNum = Request.QueryString("pageNum") If pageNum <> "" Then pageNum = Int(pageNum) rs.move(pageNum*itemNum) end if %> |
Dim itemNum,pageNum,recordTotal
itemNum = Request.QueryString(\”itemNum\”)
If itemNum \”\” Then
itemNum = Int(itemNum)
else
itemNum =10
end if
recordTotal = rs.RecordCount
pageNum = Request.QueryString(\”pageNum\”)
If pageNum \”\” Then
pageNum = Int(pageNum)
rs.move(pageNum*itemNum)
end if
(8)将数据打印成XML文件现显出来。
ASP/Visual Basic代码
<?xml version=\’1.0\’ encoding=\’gb2312\’?> <XML total=\'<%=(recordTotal)%>\’> <% While ((itemNum <> 0) AND (NOT rs.EOF)) %> <% id=rs("id") myname=Trim(rs("name")) mytitle=Trim(rs("title")) msg=Trim(rs("msg")) qq=Trim(rs("qq")) redate=Trim(rs("date")) %> <item id="<%=id%>" name="<%=myname%>" title="<%=mytitle%>" msg="<%=msg%>" qq="<%=qq%>" date="<%=redate%>"/> <% itemNum=itemNum-1 if NOT rs.EOF then rs.MoveNext() end if Wend %> </XML> |
While ((itemNum 0) AND (NOT rs.EOF))
id=rs(\”id\”)
myname=Trim(rs(\”name\”))
mytitle=Trim(rs(\”title\”))
msg=Trim(rs(\”msg\”))
qq=Trim(rs(\”qq\”))
redate=Trim(rs(\”date\”))
itemNum=itemNum-1
if NOT rs.EOF then
rs.MoveNext()
end if
Wend
技术看板:代码解释
第27行,标识XML版本与语言类型。
第28行,使用属性total记录数据库所有数据。
第40行,输出XML元素,每条记录着一条用户留言。
(9)使用IE浏览listXML.asp,这个XML文件的结构比较简单,每条留言记录都是一个XML节点名为item,使用节点属性来存放数据,XML结构可以更为简洁,如图14-4所示。 图14-3 listXML.asp (10)打开Flash先制作一个用于显
(9)使用IE浏览“listXML.asp”,这个XML文件的结构比较简单,每条留言记录都是一个XML节点名为“item”,使用节点属性来存放数据,XML结构可以更为简洁,如图14-4所示。
图14-3 listXML.asp
(10)打开Flash先制作一个用于显示留言列表的“显示条”,画个矩形背景再创建两个文本框名为“title”和“date”用来显示标题和日期,如图14-5所示。
图14-4 制作“显示条”
(11)将“显示条”转化为影片剪辑名为“item”,类路径为“com.GB4.Item”,如图1- 所示。
图14-5 转化为影片剪辑
(12)编写显示条的AS类文件“Item.as”。
AS3代码
package com.GB4{ import flash.display.*; import flash.events.*; import flash.events.IOErrorEvent; import flash.system.System; import flash.text.TextField; public class Item extends MovieClip { var id:Number; public function Item() { stop(); this.addEventListener(MouseEvent.MOUSE_OVER,overFun); this.addEventListener(MouseEvent.MOUSE_OUT,outFun); this.addEventListener(MouseEvent.CLICK,clickFun); } private function overFun(event:MouseEvent):void { gotoAndStop(2); date.textColor=0x000000; title.textColor=0x000000; } private function outFun(event:MouseEvent):void { gotoAndStop(1); date.textColor=0xffffff; title.textColor=0xffffff; } private function clickFun(event:MouseEvent):void { main.showMsg(id) } } } |
(13)好了,再编写main文档类,我们先把数据读进去。
AS3代码
package com.GB4{ import flash.display.*; import flash.events.*; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.IOErrorEvent; import flash.system.System; import flash.utils.*;//使用MC时引入 import flash.text.TextField; import fl.transitions.Tween; import fl.transitions.easing.*; public class main extends Sprite { private var pageNum:Number = 0; private var item:Item; private var itemBox:Sprite; private var controlBar:ControlBar; public static var showMsg:Function; private var getXML:XML; private var msgBox:MsgBox = new MsgBox; private var writeBox:WriteBox = new WriteBox; private var thenPage:Number=1; private var allPage:Number=0; public function main() { showMsg=showMsgFun; controlBar=new ControlBar; controlBar.x=50; controlBar.y=300; addChild(controlBar); loadPage(1); addChild(msgBox); msgBox.visible=false; msgBox.x=120 msgBox.y = 50 writeBox.visible=false; writeBox.x=120 writeBox.y = 50 addChild(writeBox); writeBox.closeBt.addEventListener(MouseEvent.CLICK, hideWriteBox); msgBox.closeBt.addEventListener(MouseEvent.CLICK, hideMsgBox); controlBar.prevPage.addEventListener(MouseEvent.CLICK, prevPageFun); controlBar.nextPage.addEventListener(MouseEvent.CLICK, nextPageFun) controlBar.writeBt.addEventListener(MouseEvent.CLICK,writeFun) } /*加载数据库转化的XML文件*/ private function loadPage(_pageNum:Number):void { var myLoader:URLLoader = new URLLoader(); System.useCodePage=true; myLoader.addEventListener(Event.COMPLETE,loadComplete); myLoader.addEventListener(IOErrorEvent.IO_ERROR,loadError); myLoader.load(new URLRequest("http://localhost/GB4/listXML.asp?pageNum=" + (_pageNum-1) + "&tag=" + Math.random() * 50)); thenPage=_pageNum } /*XML文件获取转化*/ private function loadComplete(event:Event):void { XML.ignoreWhitespace = true; var str:String=event.target.data; str=str.slice(0,str.lastIndexOf(">")+1); getXML = new XML(str); allPage =Number(getXML.@total) if (allPage % 10==0) { allPage=int(allPage/10) }else { allPage=int(allPage/10)+1 } controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页" printItem(); } |
技术看板:AS代码解释
第20行,初始化时先读取第1页。
第23行,私有函数loadPage()带有一个参数“_pageNum”控制要加载的页数,加载listXML留言列表文件。
第24行,文件的加载路径,读者可以跟据自己在IIS中设置的路径来修改,最后一个“&tag=”的作用防止读取缓存中的数据,所以多设了个变量“tag”并使用随机值保证每次都从数据库从新加载资料。
第30行,将所加载的页面赋给变量“thenPage”将当前页存放起来在翻动页面时使用。
第37行,加载成功后转化为XML对象“getXML”。
第38~43行,读取数据库所有留言数计算出总共页数,每页为10条记录,如果能被整除则取整为总页数否则取整加一为总页数。
(14)解析完XML文件,将其打印出来。 AS3代码 /*XML文件获取转化*/ private function loadComplete(event:Event):void { XML.ignoreWhitespace = true; var str:String=event.target.data; str=str.slice(0,str.last
(14)解析完XML文件,将其打印出来。
AS3代码
/*XML文件获取转化*/ private function loadComplete(event:Event):void { XML.ignoreWhitespace = true; var str:String=event.target.data; str=str.slice(0,str.lastIndexOf(">")+1); getXML = new XML(str); allPage =Number(getXML.@total) if (allPage % 10==0) { allPage=int(allPage/10) }else { allPage=int(allPage/10)+1 } controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页" printItem(); } /*打印留言列表*/ private function printItem():void { msgBox.visible = false; writeBox.visible = false; writeBox.inputBox.visible=true; writeBox.sendDia.visible=false; var setY=0; if (itemBox!=null) { removeChild(itemBox); } itemBox=new Sprite; itemBox.x=50; itemBox.y=50; addChild(itemBox); for (var i:uint; i<getXML.child("*").length(); i++) { item=new Item(); item.y=setY; setY+=23; item.title.text=getXML.child(i).@title; item.date.text=getXML.child(i).@date; item.id=i; itemBox.addChild(item); } } |
技术看板:AS代码解释
第49~51行,如果itemBox已经有了,先移除。
第52行,itemBox用来放置所有item显示条。
第60行,读取XML中的“title”属性即留言标题。
第61行,读取XML中的“date”属性即留言日期。
(15)先测试下如图14-6 所示。
图14-6 XML列表转化测试
(16)接着往下做,制作控制框“ControlBar”,绘制翻页用的按钮和显示页数信息的框,各命名如图14-7 所示。
图14-7 代码
(17)翻页代码。
AS3代码
/*XML文件获取转化*/ private function loadComplete(event:Event):void { XML.ignoreWhitespace = true; var str:String=event.target.data; str=str.slice(0,str.lastIndexOf(">")+1); getXML = new XML(str); allPage =Number(getXML.@total) if (allPage % 10==0) { allPage=int(allPage/10) }else { allPage=int(allPage/10)+1 } controlBar.showTxt.text="当前第"+thenPage+"页 总共"+allPage+"页" printItem(); } private function prevPageFun(event:MouseEvent):void { if (thenPage > 1) { loadPage(thenPage-1) } } private function nextPageFun(event:MouseEvent):void { if (thenPage < allPage) { loadPage(thenPage+1) } } |
技术看板:AS代码解释
第65行,显示当前页和总页数信息。
第68~71行,上翻一页。
第73~77行,下翻一页。
(18)点击留言列表后,显示详细信息,制作信息显示框“msgBox”如图14- 8 所示。
图14- 8 信息显示框
(19)显示详细数据。
AS3代码
/*显视留言内容*/ private function showMsgFun(id:Number):void { removeChild(itemBox); itemBox=null; msgBox.visible = true; msgBox.showName.text = getXML.child(id).@name; msgBox.qq.text = getXML.child(id).@qq; msgBox.title.text = getXML.child(id).@title; msgBox.msg.htmlText = getXML.child(id).@msg; } |
(20)测试下如图14-9 所示。
图14- 9测试
(21)显示数据制作完成,再编写留言发送和程序,提交留言数据的ASP程序post.asp。 ASP/Visual Basic代码 %@LANGUAGE=VBSCRIPT% !–#include file=head/conn.asp — % postName=trim(request.form(in_name)) qq=trim(
(21)显示数据制作完成,再编写留言发送和程序,提交留言数据的ASP程序“post.asp”。
ASP/Visual Basic代码
postName=trim(request.form(\”in_name\”))
qq=trim(request.form(\”in_qq\”))
title=trim(request.form(\”in_title\”))
msg=trim(request.form(\”in_content\”))
set add = Server.CreateObject(\”ADODB.Recordset\”)
add.ActiveConnection = conn
add.Source = \”SELECT * FROM book\”
add.CursorType = 0
add.CursorLocation = 2
add.LockType = 2
add.Open()
add_numRows = 0
add.addnew
if qq\”\” then
add(\”qq\”)=int(qq)
else
add(\”qq\”)=0
end if
add(\”name\”)=postName
add(\”title\”)=title
add(\”msg\”)=msg
add.update
add.Close()
set add=nothing
<%@LANGUAGE="VBSCRIPT"%> <!–#include file="head/conn.asp" –> <% postName=trim(request.form("in_name")) qq=trim(request.form("in_qq")) title=trim(request.form("in_title")) msg=trim(request.form("in_content")) set add = Server.CreateObject("ADODB.Recordset") add.ActiveConnection = conn add.Source = "SELECT * FROM book" add.CursorType = 0 add.CursorLocation = 2 add.LockType = 2 add.Open() add_numRows = 0 add.addnew if qq<>"" then add("qq")=int(qq) else add("qq")=0 end if add("name")=postName add("title")=title add("msg")=msg add.update add.Close() set add=nothing %> |
技术看板:ASP代码解释
第4~7行,接收Flash上传来的值。
第17~21行,因为“qq”字段是整型的,所以要先判断用户留言时是否有填写QQ号,默认为0。
第22~25行,写入数据库。
(22)在Flash中制作留言框“WriteBox”,如图14- 10 所示。
图14-10 留言发送框
(23)发送成功以后,会有一个提示框,制作提示框命名为“sendDia”如图14- 11 所示。
图14-11 提示框
(24)编写“WriteBox.as”代码。
AS3代码
package com.GB4{ import flash.display.*; import flash.net.URLRequest; import flash.net.URLLoader; import flash.net.URLVariables; import flash.net.URLRequestMethod; import flash.text.TextField; import flash.events.MouseEvent; import flash.events.*; public class WriteBox extends MovieClip { public function WriteBox() { stop(); inputBox.sendBt.addEventListener(MouseEvent.CLICK, sendData); sendDia.visible=true; } private function sendData(event:MouseEvent):void { if (inputBox.showName.text==""||inputBox.msg.text=="") { return; } var myLoader:URLLoader = new URLLoader(); var loadUrl:URLRequest=new URLRequest("http://localhost/GB4/post.asp"); var variables:URLVariables = new URLVariables(); &nbs, p; , ; variable, , s.in_name=inputBox.showName.text; myLoader.addEventListener(Event.COMPLETE,loadComplete); |
技术看板:ASP代码解释
第14行,先隐藏提示框。
第17行,如果用户没有输入文字则不发送。
第20~23行,发送Flash上传来的值。
第32行,发送成功,。
第22~25行,写入数据库。
(25)制作完成测试程序。
进入论坛参与讨论交流:http://www.missyuan.com/viewthread.php?tid=425889