Flash+ASP+XML+Access开发留言本

文章类别：Flash | 发表日期:2011-7-2 9:16:12

开发Flash留言本一直都是Flash后台交互的进阶技术，本例通过ASP和XML简单高速地同数据库交互。

出自:Flash CS4动画设计与制作208例作者：望月狼

本例思路：
<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" %>

<%
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中读取数据库数据时，还要考虑分页的问题，我们每次默认读取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; 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代码

技术看板：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"%>

<%
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)制作完成测试程序。

上一篇：{教程}Flash CS4教程：制作扑克切换效果人气:4650
下一篇：{教程}Flash绘画教程：绘制小龙与花插画场景人气:4368

Flash视频教程

视频教程列表

计算机基础入门及办公自动化:

网页制作开发视频教程:

平面广告设计视频教程

初级程序设计及ASP动态网站开发

Asp.net动态网站开发视频教程

Flash 动画角本编程视频教程

文章教程搜索

Flash推荐教程

.给所有ActionScript初学者的建议

.flash站满整个网页且flash总是居

.Flash鼠绘:绘制竹林燕子

.Flash鼠绘:水晶按钮的制作方法

.Flash鼠绘:小鸟的绘制

.Flash鼠绘:卡通风车的绘制

.flash视频教程(21视频教程网)

.用Flash制作一只慧眼

.用Flash制作龙骨（洋葱皮效果）

.狡猾的小球--经典FLASH制作

.Flash鼠标事件：起伏的立体方块群

.震动窗口

.鼠绘动物技术篇

.《心心相印》PS Flash制作贺卡

.圣诞贺卡的制作[FLASH版]

.萤火虫特效

.FLASH简单三步制作飞越星空效果

.Flash 8 AS做滤镜效果的类别整理

.Flash视觉特效之科技之光

.翻页书源文件

.实现一个简单的补间动画及扩展

.Light Factory－－激光（视频教程）

.用AS来表达模糊或震动效果

.Flash中利用ActionScript实现动

.雪夜的作法讲解

.FCL组件库－交互特效Interactive

.加载外部文本文件的另类方法！

.2006：火山基础开发习惯总结

.在Flash动画中使字体清楚的三种

.介绍一种作仿3D flash动画的方法

Flash热门教程

.Flash教程：雪景动画制作源码

.Flash教程：飞舞的两只蝴蝶2

.Flash教程：飞舞的两只蝴蝶

.Flash教程：图案文字的制作方法

.Flash教程：一箭穿心的制作技巧

.Flash教程：镂空文字的制作技巧

.Flash教程：红旗飘飘制作方法

.Flash教程：变色花朵的制作技巧

.Flash教程：爆炸文字的制作方法及

.Flash教程：鸡蛋绘制方法及技巧

.Flash教程：雨伞绘制方法及技巧

.Flash教程：枫叶绘制方法及技巧

.Flash教程：小草绘制方法及技巧

.Flash教程：《香烟》制作步骤

.Flash教程：随风摆动的小草制作案

.Flash教程：flash与asp结合应用_

.Flash教程：flash与asp结合应用_

.Flash教程：flash与asp结合应用_

.Flash教程：绘制插画的技巧三

.Flash教程：绘制插画的技巧二

.Flash教程：绘制插画的技巧

.Flash CS6中文版安装及激活的方

.Flash教程：打造鼠标触发的焰火飘

.Flash教程：打造鼠标触发的焰火飘

.Flash教程：Flash AS3学习源代码

.Flash教程：Flash动画如何转成GI

.Flash教程：如何解决Flash画面运

.Flash教程：用Flash CS4文字颜色

.Flash教程：CS6中文版简单安装方

.Flash教程：Flash雪花脚本的编写

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网