发新话题
打印

[原创]Flash+ASP+Access打造动感留言簿

[原创]Flash+ASP+Access打造动感留言簿

[这个贴子最后由zrong在 2004/07/21 12:07pm 第 5 次编辑]

[b][size=6]写给宇风的网友:[/size][/b]
这篇教程是我应“闪客启航”[url]http://bbs.flasher123.com[/url]之邀所写,目前正在“闪客沙龙”聊天室[url]http://280739.bliao.com[/url]语音授课,每周一次。现在已经讲到第六课,预计第八课讲完。
如果哪位朋友有兴趣可以去听听。 :em02:  :em02:  :em02:
这篇教程还可以在“闪客启航”找到,另外在“闪客启航”还可以找到此教程的录音。
[b][color=red]转载此教程请与我联系。[/color][/b]
教程全文:
http://www.caispace.com/v2/Article_Show.asp?ArticleID=18

留言簿效果:
[iframe]http://www.caispace.com/flashbook2/index.htm[/iframe]


[B]Flash+ASP+Access打造动感留言簿[/B]
[size=4]前 言[/size]
网上的Flash留言簿已不在少数,Flash论坛也有许多,使用Flash制作这些是不是很困难呢?其实不然,只不过稍微麻烦那么一点点而已。
下面,我们就来使用Flash+ASP+XML+Access打造一个Flash动感留言簿。
注意:寒蓝老师曾经写过Dreamweaver制作留言簿的教程,大家有兴趣可以看看,其实有许多地方都是相通的。
寒蓝老师的Dreamweaver留言簿教程:
http://cn.flasher123.com/hanlan/shui_data/hanlan4.htm
Flash留言簿演示:
http://www.caispace.com/flashbook/
注:本教程并不是讲解此留言簿的制作,本教程讲解一个最简单的Flash留言簿,便于大家举一反三
[size=4][color=#DC143C]注意:
学习本例需要一定的网络知识,你应该了解基本的网页组成,知道HTML是什么,了解Dreamweaver MX的基本操作,掌握Flash的基本操作,能够编写简单的Flash脚本。[/color][/size]
[size=4][color=#0000FF]如果你对ASP不了解,不知道IIS或PWS如何安装,请单击下面的链接。[/color][/size]
http://www.caispace.com/v2/Article_Show.asp?ArticleID=19

TOP

[原创]Flash+ASP+Access打造动感留言簿

[这个贴子最后由zrong在 2004/02/03 08:44pm 第 2 次编辑]

[B]第一章 准备工作[/B]
此留言簿的后台程序使用ASP,数据库使用Microsoft Access2000,前台制作使用Flash MX。还需要Dreamweaver MX。
Access2000是什么?就是Office里面的那个。
Flash MX是什么?没听说过?!◎¥#%◎#¥……#◎¥%
听我慢慢道来——Flash MX就是当前最酷、最有形、最炫、最……(中间略去5000字)……的动画制作(兼多媒体制作兼网站制作)程序!!你连这个都不知道?呵呵哈,好了,唐僧到此为止,下面进入正题
要调试此留言簿,需要一个支持ASP的空间,如果有网络空间当然更好,如果没有,也可以使用Microsoft IIS5.0(WIN2K)或PWS(WIN98)就可以在本机上打造一个ASP平台,具体方法可通过搜索引擎得到。
[size=4][color=#DC143C]如何安装IIS请看:[/color][/size]http://music.flasher123.com/zrong/tutorial/asp/
[size=4][color=#0000FF]注意:[/color][/size]
本文假设大家已经安装了IIS,并且在http://localhost下建立了“flashbook”虚拟目录,留言簿在IIS中的路径为http://localhost/flashbook/

TOP

[原创]Flash+ASP+Access打造动感留言簿

[这个贴子最后由zrong在 2004/02/03 08:44pm 第 1 次编辑]

[B]第二章 制作思路[/B]
我们知道Flash是不能直接与数据库通信的。但留言簿的制作必须要读取、写入数据库。高级一点的留言簿还需要删除、回复、修改或者注册、登陆等功能。这些都离不开数据库操作。
本教程使用ASP作为后台程序,负责数据库的操作。关系如下:
2.1读取数据
       要数据
Flash--------->ASP
       要数据
ASP--------->Access数据库
                 返回数据
Access数据库---------->ASP
     返回数据
ASP---------->Flash
     显示数据
Flash--------->用户
2.2写入数据
      提交数据
Flash--------->ASP
      写入数据
ASP--------->Access数据库
      返回写入状态(成功或者失败)
ASP--------->Flash
      显示写入状态
Flash--------->用户
这只是一个较粗的框架流程。实际上,由于多了一个“翻译”,每次数据传送过程中都必须检查状态。而且Flash载入外部数据的速度较慢,必须给它一个缓冲的时间。如果在数据没有载入之前就显示数据,肯定会出错。
另外,由于前台页面是Flash动画,因此数据容错、提示、检验等等工作都必须在Flash中制作了,ASP仅仅是一个数据的提供者而已。这需要大家有一定的ActionScript编程经验,尤其是对String对象的了解。
顺便说说本留言簿中使用的ActionScript的大致范围:
LoadVars对象、Button事件对象、if语句

TOP

[原创]Flash+ASP+Access打造动感留言簿

[这个贴子最后由zrong在 2004/02/03 08:47pm 第 1 次编辑] [B]第三章 Flash与外部数据通信的方法[/B]Flash借助ActionScript可以与外部数据或应用程序通信。主要方法有以下几种: [B]3.1Fscommand函数[/B] 这是Flash与外部应用程序的接口,Flash通过它可以和其它应用程序通信。典型的例如调用外部程序,和浏览器通信等等。许多Flash第三方软件,例如SwiffCANVAS、SWF Studio、SWFKit等注明第三方软件,都是通过Fscommand扩展Flash的功能的。 本教程没有使用此函数,因此不会介绍此函数的用法。 [B]3.2getURL函数[/B] 3.2.1用法说明 我们都知道它用于在Flash中调用URL链接,但是实际上它不但能够调用URL,还可以把Flash中的变量信息发送给目标URL。 getURL函数的用法如下: getURL(url [, window [, "variables"]]) 其中,可选参数“variables”的值可以为“GET”或者“POST”,如果使用这个参数,Flash会在调用URL的同时把Flash中的变量用“GET”或者“POST”方式发给目标URL,如果目标是动态页(如ASP),就可以处理这些变量了。 另外,getURL函数并不是只能和浏览器通信。使用它,还可以与Director、Authorware等多媒体编辑软件通信。不过这不在本文的讨论范围,大家有兴趣的话可以去网上搜索一下相关教程。 3.2.2实例 下面我们来做一个小例子,看看getURL怎样与网页传递信息。 1.先来制作Flash方面的内容。 ①制作两个输入文本域,关联的变量为userName和message,另有两个按钮,一个为提交按钮,实例名称submit_btn,一个为重填按钮,实例名称为cancel_btn。 ②在影片第一帧,写入如下脚本: submit_btn.onRelease = function() { getURL("http://localhost/flashbook/ch3/geturl.asp", "_blank", "GET"); }; cancel_btn.onRelease = function() { userName = ""; message = ""; }; 注意:这个例子的内容放在flashbook下的ch3目录中。 2.下面制作ASP部分。 ①打开记事本,写入如下代码: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 下面是Flash传来的内容: 姓名:<%=Request.QueryString("userName")%> 内容:<%=Request.QueryString("message")%> 注意:CODEPAGE=”65001”这句非常重要,因为Flash MX内部使用unicode(UTF-8)编码,因此ASP程序也必须使用同样的编码,否则会出现乱码现象。在ASP中,65001就代表unicode编码。 ②将文件存为getrul.asp,放置在与Flash文件相同的目录。注意在存储时选择编码格式为“UTF-8”。 注意:基于NT内核的Windows系统使用的内码就是Unicode。如果你的系统是Win9x,你的记事本没有转换编码的功能。这时就需要换用第三方的文本编辑程序,如EditPlus、UltraEdit等等,也可以直接使用Dreamweaver MX。 推荐大家使用EditPlus,下载地址http://www.skycn.com/soft/3641.html 如果使用Dreamweaver MX,可以按“Ctrl+J”快捷键打开“页面属性”对话框更改文档编码。如图1所示。 图 1 在Dreamweaver MX中更改文档编码 测试影片,效果如下: Flash: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/geturl.swf 源文件下载: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/geturl.rar 当按下“发送”按钮时,弹出的页面会显示我们刚才输入的值。有时弹出的页面可能会出现乱码(如图2所示),这是因为浏览器使用的不是Unicode编码。在页面上右击,在弹出的快捷菜单中选择“编码->unicode(UTF-8)即可。如图3所示。 图 2 乱码 图 3 调整编码

TOP

[原创]Flash+ASP+Access打造动感留言簿


[size=4][color=#DC143C]3.3loadVariables函数[/color][/size]
[B]3.3.1用法说明[/B]
loadVariables函数也能够与外部数据通信。和getURL函数相比,它的功能更强大。
①它不仅可以传送变量内容给服务器,还可以接收从服务器传回的资料。而getURL函数不能接收资料。
②它不会打开一个目标网页。
LoadVariables的语法为:
myMovieClip.loadVariables("url", variables)

loadVariables ("url" ,level/"target"[, variables])
这两种语法的功能是一样的,只不过写法不同。大家可以查阅Flash MX的帮助信息了解详情。本教程采用第一种写法。

TOP

[原创]Flash+ASP+Access打造动感留言簿

[b]3.3.2实例[/b] 让我们来看一个小例子,了解loadVariables函数的用法。 1.首先进行Flash部分的制作。 ①打开“geturl.fla”,另存为“loadvariables.fla”。 ②在第5帧和第10帧插入空白关键帧。将第5帧标签设为“sending”,第10帧设为“done”。 ③在第5帧中写入如图4所示的文字。在第10帧放置一个动态文本框,关联变量为“backMsg”,选取“将文本呈现为HTML选项”,并写入相应文字。如图5、6所示。 图 4 第5帧内容 图 5 第10帧内容 图 6 动态文本框的设置 ⑤将第1帧中的脚本改为如下所示。 stop(); submit_btn.onRelease = function() { _root.loadVariables("http://localhost/flashbook/ch3/loadvariables.asp", "POST"); gotoAndStop("sending"); }; cancel_btn.onRelease = function() { userName = ""; message = ""; }; 注意,这里使用的是“POST”方式而不是“GET”方式。它们有什么区别呢?GET方式经常用于少量的字符串,它是和URL一起发送的,我们可以在浏览器的地址栏中看到被发送的内容。大家在执行上一个例子时就可以发现这一现象。如图7所示。 图 7 使用get方式发送内容 而POST方式将被发送内容包含在页面中,适合发送大量内容,也更安全。 ⑥在“sending”帧加入如下脚本。 _root.onData = function() { gotoAndStop("done"); }; onData事件用于判断服务器是否返回了数据,如果返回了就跳转到“done”帧显示数据。关于事件,大家可以参考这篇帖子。 http://bbs.flasher123.com/dispbbs.asp?boardID=5&ID=2431 本例完成后的时间轴如图8所示。 图 8 完成后的时间轴 2.下面进行ASP部分的制作。 ①打开记事本,输入如下脚本。 1)<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 2)<% 3)dim userName,message 4)userName=Request.Form("userName") 5)message=Request.Form("message") 6)Response.write("backMsg="&"您的资料传送成功!"&" 姓名:"&userName&" 内容:"&message) 7)%> 为了便于描述,我将ASP语句进行了编号,输入时请不要输入编号。 dim是VBScript中声明变量的语句,相当与ActionScript中的var。 由于在Flash中使用的是“POST”方式发送资料,所以不能象上例一样使用 Request.Querystring(“变量名”) 来取得资料内容了,应该使用 Request.Form(“变量名”) 。第4句和第5句将从Flash获得的变量值存储在ASP的同名变量中。 第6句是最重要的。为了让Flash能够识别从ASP传回的资料,必须将资料输出为“变量-值”配对的方式,也就是类似于“backMsg=您的资料传送成功!”这种方式。左边是变量名,中间是半角的等号,右边是值。 “&”是VBScript中的连字符,相当于ActionScript中的“+”。 “ ”是HTML中的换行标签。 ②将文件存储为“loadvariables.asp”,注意在存储时选择“UTF-8”编码。 ③测试影片,观看效果。 Flash: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvariables.swf 本例源文件下载: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvariables.rar 讲到这里,大家也许会想到一个问题:Flash会将哪些信息传送给服务器? 前面的两个例子中,我们分别使用getURL和loadVariables函数与服务器“通话”,我们按下“提交”按钮时,负责发送信息的函数(在这里是getURL或loadVariables)会将与函数相同时间轴中的变量全部提交给服务器! 为了避免Flash传送一大堆无用的信息给服务器,通常将getURL或loadVariables函数写在影片剪辑中,在影片剪辑中设置需要传送的变量,这就能够保证传送给服务器的信息都是有用的。 有没有更好的方法呢?答案是肯定的,那就是LoadVars对象。

TOP

[原创]Flash+ASP+Access打造动感留言簿

[size=4][color=#DC143C]3.4LoadVars对象[/color][/size]
[B]3.4.1用法说明[/B]
1.LoadVars对象和loadVariables函数比起来,有下面的优点。
①可以只传送指定的信息。
②可以只传送信息,不接收信息。
③可以只接收信息,不传送信息。
④可以既传送信息,又接收信息。
⑤可以使用onLoad事件判断信息接收是否成功。
2.LoadVars对象的常用方法如下。
①myLoadVars.load(url)
功能:从指定的 URL 下载变量,分析变量数据,并将结果变量放在 loadVarsObject 中。loadVarsObject 中任何与下载变量同名的属性都将被覆盖。loadVarsObject 中任何与下载变量不同名的属性都不会被删除。
②loadVarsObject.send(url[,target, method] )
参数:loadVarsObject是使用其上传变量的 LoadVars 对象;target是浏览器框架窗口,所有响应都将在其中显示;method是GET或POST方法。
说明:将 myLoadVars 对象中的变量发送到指定的 URL。除非指定了GET,否则将使用POST方法。如果指定了 target 参数,则服务器响应显示在指定的目标浏览器框架窗口中。如果省略 target 参数,则服务器响应将被丢弃。
③myLoadVars.sendAndLoad(url, targetObject[,method])
参数:loadVarsObject是使用其上传变量的 LoadVars 对象;targetObject是接收下载变量的 LoadVars 对象。Method是GET或POST方法。
功能:将 myLoadVars 对象中的变量发布到指定的 URL。下载服务器响应,并作为变量数据进行分析,然后将结果变量放在 targetObject 对象中。
3.另外,有一个onLoad事件非常有用。
myLoadVars.onLoad(success)
参数:success指示 load 操作是成功完成 (true) 还是以失败结束 (false)。
说明:当 load 或 sendAndLoad 操作结束时调用。如果该操作成功,则 loadVarsObject 将填充为 load 或 sendAndLoad 操作下载的变量,并且这些变量在调用 onLoad 时可用。

TOP

[原创]Flash+ASP+Access打造动感留言簿

[B]3.4.2使用LoadVars对象载入资料[/B]
1.先制作需要载入的资料。
Flash可以直接从文本文件中载入资料,下面就制作一个这样的文本文件。
①打开记事本,输入以下内容。
userName=多媒体空间&message=大家好!
这句内容定义了两个变量userName和message,它们使用“&”符号连接。
如果想每个变量写一行,必须这么写:
&userName=多媒体空间&
&message=大家好!&
就是在每个“变量-值”对的前后都加上“&”符号。
②将此内容存储为“loadvars.txt”。编码选择“UTF-8”。
2.再制作Flash的内容。
①打开上例的源文件“loadvariables.fla”,将其另存为“loadvars.fla”。
②打开“loadvars.fla”,删除“按钮”层,将“done”帧中的内容删除。将第1帧中的所有内容(文字和两个动态文本框)转移到“done”帧。并在“done”帧输入如下脚本。
userName = loadData_lv.userName;
message = loadData_lv.message;
③将“sending”帧标签改名为“error”。将此帧中的文字转移到第1帧,并输入如图9的文字。删除此帧中的所有脚本。
   
图 9  “error”帧的内容
④删除第1帧中的所有脚本,然后输入如下脚本。
stop();
var loadData_lv = new LoadVars();
loadData_lv.load("loadvars.txt");
loadData_lv.onLoad = function(success) {
if (success) {
gotoAndStop("done");
} else {
gotoAndStop("error");
}
};
success变量代表加载资料是否成功。
⑤测试影片。
Flash: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvars.swf
本例源文件下载:
http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvars.rar
如果想检验onLoad事件是否有用,可以改变“loadVars.txt”文件的路径。如果没有载入数据,影片会停止在“error”帧。

TOP

[原创]Flash+ASP+Access打造动感留言簿

[b]3.4.3使用LoadVars对象载入和发送资料[/b]
下面我们使用LoadVars对象来制作3.3.2的内容。看看loadVars对象和loadVariables函数有什么不同。
①打开loadVariables.fla文件,将其另存为loadVars2.fla。
②在“done”帧后加入“error”帧,并加入“出现错误!”字样。当载入数据出现错误时就跳转到这帧。如图10所示。


图 10 加入“error”帧
③将第1帧中原来的脚本全部删除,写入如下脚本:
1.stop();
2.var sendData_lv = new LoadVars();
3.var loadData_lv = new LoadVars();
4.loadData_lv.onLoad = function(success) {
5.if (success) {
6.gotoAndStop("done");
7.} else {
8.gotoAndStop("error");
9.}
10.};
11.submit_btn.onRelease = function() {
12.sendData_lv.userName = userName;
13.sendData_lv.message = message;
14.sendData_lv.sendAndLoad("http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvariables.asp", loadData_lv, "OST");
15.gotoAndStop("sending");
16.};
17.cancel_btn.onRelease = function() {
18.userName = "";
19.message = "";
20.};
注意:序号是为了方便讲解,制作时请不要输入序号。
第2、3条语句新建了两个loadVars对象,一个用于发送数据,一个用于接受数据。
第4-10行定义如果loadData_lv根据数据情况进行的处理。如果接受到了,就去“done”帧;如果数据错误,就去“error”帧。
第12、13行为sendData_lv对象的两个变量赋值,注意sendData_lv.userName和userName是不同的两个变量,一个在_root里面,一个在sendData_lv里面。如果写成绝对路径,应该是_root.sendData_lv.userName和_root.userName。message变量也一样。
第14行是最关键的发送数据动作。sendAndLoad方法将sendData_lv中的变量发送给asp页(还是用的原来的loadvariables.asp),然后将返回的内容存入loadData_lv对象。使用的数据传递方法是“POST”。
④删除“sending”帧中的所有脚本。
⑤在“done”帧加入如下脚本:
backMsg = loadData_lv.backMsg;
这里的道理和③一样。
⑥测试影片。
Flash: http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvars2.swf
本例源文件下载:
[url]http://music.flasher123.com/zrong/tutorial/flashbook/ch3/loadvars2.rar[/url]

TOP

[原创]Flash+ASP+Access打造动感留言簿

第四章 制作留言簿
4.1建立数据库
①打开Access2003(Access2000、Access2002和新版的操作基本相同)。新建一个空数据库,命名为“gb.mdb”,保存在flashbook目录下。
②双击如图11所示数据库编辑器中双击“使用设计器创建表”。

图 11 数据库
③在弹出的对话框中输入如图12所示的内容。

图1 2 制作数据表
注意:一定要将userName、userEmail和userMessage这三个字段的“允许空字符串”选项设为“是”。如图13所示。

图 13 设置“允许空字符串”选项
④关闭编辑窗,弹出对话框要求保存,将此表保存为“book”。如图14所示。

图 14 保存表
⑤保存表的时候access会提示是否定义主键。单击“是”,access会自动将第一个字段作为主键。如图15所示。

图 15 定义主键
⑥此时的数据库如图16所示。

图 16 数据库编辑完成

TOP

发新话题