Flash+ASP+XML+Access開(kāi)發(fā)留言本（圖文教程）
我要評(píng)論開(kāi)發(fā)Flash留言本一直都是Flash后臺(tái)交互的進(jìn)階技術(shù)，本例通過(guò)ASP和XML簡(jiǎn)單高速地同數(shù)據(jù)庫(kù)交互。教程介紹的很詳細(xì)，思路也很清晰，教程很實(shí)用，轉(zhuǎn)發(fā)過(guò)來(lái)，希望對(duì)大家有所幫助！
本例思路：
<1> 創(chuàng)建數(shù)據(jù)庫(kù)。
<2> 編寫(xiě)ASP程序。
<3> 在Flash中制作留言本皮膚。
<4> 編寫(xiě)AS與ASP程序交互。
實(shí)例步驟：
(1)先安裝IIS服務(wù)器，安裝方法請(qǐng)查閱相關(guān)資料。
(2)交互流程：
顯示：使用ASP讀取數(shù)據(jù)庫(kù)數(shù)據(jù)再輸出成XML，F(xiàn)lash再去讀取這個(gè)XML文件。
留言：Flash將用戶(hù)輸入留言?xún)?nèi)容發(fā)送給ASP，ASP接收到數(shù)據(jù)后再存入數(shù)據(jù)庫(kù)。
交互流程如圖所示。
圖14-1 流程圖
(3)本范例使用到的三個(gè)ASP文件為：
“head/conn.asp”打開(kāi)數(shù)據(jù)庫(kù)。
“listXML.asp”讀取ACCESS數(shù)據(jù)庫(kù)里的數(shù)據(jù)并轉(zhuǎn)化為XML格式顯示出來(lái)。
“post.asp”接收Flash里的值存入數(shù)據(jù)庫(kù)。
(4)先創(chuàng)建數(shù)據(jù)庫(kù)名為“db.mdb”，新建一個(gè)表名為“book”，各字段與作用如圖14- 2所示.
圖14-2 新建表
(5)先編寫(xiě)打到數(shù)據(jù)庫(kù)的conn.asp文件。
ASP/Visual Basic代碼
Db = "head/db.mdb"
conn = "Provider = Microsoft.Jet.OLEDB.4.0;Data Source = " & Server.MapPath(db)
%>
(6)編寫(xiě)顯示留言列表的ASP文件listXML.asp，先打開(kāi)表“book”。
ASP/Visual Basic代碼
<!--#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()
%>
???? SSI ????????
(7)在Flash中讀取數(shù)據(jù)庫(kù)數(shù)據(jù)時(shí)，還要考慮分頁(yè)的問(wèn)題，我們每次默認(rèn)讀取10條數(shù)據(jù)可以在調(diào)用時(shí)設(shè)置顯示條數(shù)，使用變量“itemNum”。并判斷當(dāng)前顯示的頁(yè)碼，使用變量“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)將數(shù)據(jù)打印成XML文件現(xiàn)顯出來(lái)。
ASP/Visual Basic代碼
<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行，標(biāo)識(shí)XML版本與語(yǔ)言類(lèi)型。
第28行，使用屬性total記錄數(shù)據(jù)庫(kù)所有數(shù)據(jù)。
第40行，輸出XML元素，每條記錄著一條用戶(hù)留言。
(9)使用IE瀏覽“listXML.asp”，這個(gè)XML文件的結(jié)構(gòu)比較簡(jiǎn)單，每條留言記錄都是一個(gè)XML節(jié)點(diǎn)名為“item”，使用節(jié)點(diǎn)屬性來(lái)存放數(shù)據(jù)，XML結(jié)構(gòu)可以更為簡(jiǎn)潔，如圖14-4所示。
圖14-3 listXML.asp
(10)打開(kāi)Flash先制作一個(gè)用于顯示留言列表的“顯示條”，畫(huà)個(gè)矩形背景再創(chuàng)建兩個(gè)文本框名為“title”和“date”用來(lái)顯示標(biāo)題和日期，如圖14-5所示。
圖14-4 制作“顯示條”
(11)將“顯示條”轉(zhuǎn)化為影片剪輯名為“item”，類(lèi)路徑為“com.GB4.Item”，如圖1- 所示。
圖14-5 轉(zhuǎn)化為影片剪輯
(12)編寫(xiě)顯示條的AS類(lèi)文件“Item.as”。
AS3代碼
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)好了，再編寫(xiě)main文檔類(lèi)，我們先把數(shù)據(jù)讀進(jìn)去。
AS3代碼
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時(shí)引入
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)
}
/*加載數(shù)據(jù)庫(kù)轉(zhuǎn)化的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文件獲取轉(zhuǎn)化*/
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="當(dāng)前第"+thenPage+"頁(yè) 總共"+allPage+"頁(yè)"
printItem();
}
技術(shù)看板：AS代碼解釋
第20行，初始化時(shí)先讀取第1頁(yè)。
第23行，私有函數(shù)loadPage()帶有一個(gè)參數(shù)“_pageNum”控制要加載的頁(yè)數(shù)，加載listXML留言列表文件。
第24行，文件的加載路徑，讀者可以跟據(jù)自己在IIS中設(shè)置的路徑來(lái)修改，最后一個(gè)“&tag=”的作用防止讀取緩存中的數(shù)據(jù)，所以多設(shè)了個(gè)變量“tag”并使用隨機(jī)值保證每次都從數(shù)據(jù)庫(kù)從新加載資料。
第30行，將所加載的頁(yè)面賦給變量“thenPage”將當(dāng)前頁(yè)存放起來(lái)在翻動(dòng)頁(yè)面時(shí)使用。
第37行，加載成功后轉(zhuǎn)化為XML對(duì)象“getXML”。
第38~43行，讀取數(shù)據(jù)庫(kù)所有留言數(shù)計(jì)算出總共頁(yè)數(shù)，每頁(yè)為10條記錄，如果能被整除則取整為總頁(yè)數(shù)否則取整加一為總頁(yè)數(shù)。
(14)解析完XML文件，將其打印出來(lái)。
AS3代碼
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="當(dāng)前第"+thenPage+"頁(yè) 總共"+allPage+"頁(yè)"
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);
}
}
技術(shù)看板：AS代碼解釋
第49~51行，如果itemBox已經(jīng)有了，先移除。
第52行，itemBox用來(lái)放置所有item顯示條。
第60行，讀取XML中的“title”屬性即留言標(biāo)題。
第61行，讀取XML中的“date”屬性即留言日期。
(15)先測(cè)試下如圖14-6 所示。
圖14-6 XML列表轉(zhuǎn)化測(cè)試
(16)接著往下做，制作控制框“ControlBar”，繪制翻頁(yè)用的按鈕和顯示頁(yè)數(shù)信息的框，各命名如圖14-7 所示。
圖14-7 代碼
(17)翻頁(yè)代碼。
AS3代碼
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="當(dāng)前第"+thenPage+"頁(yè) 總共"+allPage+"頁(yè)"
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)
}
}
技術(shù)看板：AS代碼解釋
第65行，顯示當(dāng)前頁(yè)和總頁(yè)數(shù)信息。
第68~71行，上翻一頁(yè)。
第73~77行，下翻一頁(yè)。
(18)點(diǎn)擊留言列表后，顯示詳細(xì)信息，制作信息顯示框“msgBox”如圖14- 8 所示。
圖14- 8 信息顯示框
(19)顯示詳細(xì)數(shù)據(jù)。
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)測(cè)試下如圖14-9 所示。
圖14- 9測(cè)試
(21)顯示數(shù)據(jù)制作完成，再編寫(xiě)留言發(fā)送和程序，提交留言數(shù)據(jù)的ASP程序“post.asp”。
ASP/Visual Basic代碼
???? SSI ????????
<!--#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
%>
技術(shù)看板：ASP代碼解釋
第4~7行，接收Flash上傳來(lái)的值。
第17~21行，因?yàn)?ldquo;qq”字段是整型的，所以要先判斷用戶(hù)留言時(shí)是否有填寫(xiě)QQ號(hào)，默認(rèn)為0。
第22~25行，寫(xiě)入數(shù)據(jù)庫(kù)。
(22)在Flash中制作留言框“WriteBox”，如圖14- 10 所示。
圖14-10 留言發(fā)送框
(23)發(fā)送成功以后，會(huì)有一個(gè)提示框，制作提示框命名為“sendDia”如圖14- 11 所示。
圖14-11 提示框
(24)編寫(xiě)“WriteBox.as”代碼。
AS3代碼
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("加載出錯(cuò)");
}
}
}
技術(shù)看板：ASP代碼解釋
第14行，先隱藏提示框。
第17行，如果用戶(hù)沒(méi)有輸入文字則不發(fā)送。
第20~23行，發(fā)送Flash上傳來(lái)的值。
第32行，發(fā)送成功，。
第22~25行，寫(xiě)入數(shù)據(jù)庫(kù)。
(25)制作完成測(cè)試程序。
以上就是Flash+ASP+XML+Access開(kāi)發(fā)留言本，雖然內(nèi)容比較多，大部分都是利用代碼編寫(xiě)，但每一步都介紹的也很詳細(xì)，也對(duì)代碼進(jìn)行講解，希望大家看完本教程之后有所收獲！
相關(guān)文章
flash cs6鼠標(biāo)跟隨效果實(shí)現(xiàn)代碼分享
flash cs6想要實(shí)現(xiàn)鼠標(biāo)跟隨效果？該怎么制作呢？今天我們就來(lái)看看使用as2.0實(shí)現(xiàn)鼠標(biāo)跟隨效果的教程，需要的朋友可以參考下2019-05-19
Flash cs6怎么使用代碼輸入中英文文本？Flash cs6中可以使用文字工具直接輸入文本，也可以使用代碼來(lái)輸入文本，該怎么使用代碼輸入文本呢？請(qǐng)看下文詳細(xì)的教程，需要的朋友2018-03-11
flash as3.0抽象類(lèi)怎么定義？ as3.0中有很多抽象類(lèi)，該怎么定義抽象類(lèi)和抽象方法呢？下面我們就來(lái)看看簡(jiǎn)單的例子，需要的朋友可以參考下http://m.fzitv.net/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0？flash cs6中想要使用ActionScript3.0功能，該怎么使用呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-01-25
Flash中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置？
本教程給大家分享一個(gè)Flash小教程，教大家在Flash CS6中怎么實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊決定圖像位置？方法很簡(jiǎn)單，感興趣的朋友歡迎前來(lái)一起分享學(xué)習(xí)2018-01-12
Flash中如何用代碼將圖片放在自己想要的舞臺(tái)位置?
本教程教腳本之家的ActionScript教程學(xué)習(xí)者在Flash中如何用代碼將圖片放在自己想要的舞臺(tái)位置，教程講解的詳細(xì)，感興趣的朋友歡迎前來(lái)分享學(xué)習(xí)2017-11-20
在Flash CS6中使用with函數(shù)繪制背景圖教程
本教程教腳本之家的ActionScript教程學(xué)習(xí)者如何在Flash CS6中使用with函數(shù)繪制背景圖？教程一步步講解的挺詳細(xì)，方法也不難，非常適合Flash新手入門(mén)學(xué)習(xí)2017-11-18
Flash怎么設(shè)置元件坐標(biāo)?flash使用代碼設(shè)置元件的坐標(biāo)的教程
Flash怎么設(shè)置元件坐標(biāo)？flash中導(dǎo)如的元件需要添加坐標(biāo)，該怎么定位元件坐標(biāo)呢？下面我們就來(lái)看看flash使用代碼設(shè)置元件的坐標(biāo)的教程，需要的朋友可以參考下2017-10-11
Flash怎么制作來(lái)回?fù)u擺的花朵的動(dòng)畫(huà)?
Flash怎么制作來(lái)回?fù)u擺的花朵的動(dòng)畫(huà)？Flash中想要給花朵制作一段搖擺的動(dòng)畫(huà)效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2017-05-23
Flash怎么制作流動(dòng)七彩色的文字？想要讓文字動(dòng)起來(lái)，該怎么使用flash給文字制作一個(gè)流動(dòng)七彩色的動(dòng)畫(huà)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2017-04-23
