【 tulaoshi.com - FLASH 】

开发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)   
%

(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()   
%



(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   
%

(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

技术看板：代码解释

第27行，标识XML版本与语言类型。

第28行，使用属性total记录数据库所有数据。

第40行，输出XML元素，每条记录着一条用户留言。

(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.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; igetXML.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(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;   
            variables.in_qq=inputBox.qq.text;   
            variables.in_title=inputBox.title.text;   
            variables.in_content = inputBox.msg.text   
            ;   
            loadUrl.data=variables;   
            loadUrl.method=URLRequestMethod.POST;   
  
            myLoader.addEventListener(Event.COMPLETE,loadComplete);   
            myLoader.addEventListener(IOErrorEvent.IO_ERROR,loadError);   
            myLoader.load(loadUrl);   
        }   
        private function loadComplete(event:Event):void {   
            sendDia.visible=true;   
            inputBox.visible=false;   
            inputBox.showName.text=inputBox.qq.text=inputBox.title.text=inputBox.msg.text="";   
            //留言成功以后，清空所有输入框   
        }   
        private function loadError(event:IOErrorEvent):void {   
            trace("加载出错");   
        }   
    }   
}

技术看板：ASP代码解释

第14行，先隐藏提示框。

第17行，如果用户没有输入文字则不发送。

第20~23行，发送Flash上传来的值。

第32行，发送成功，。

第22~25行，写入数据库。

(25)制作完成测试程序。