如何开发基于ASP的FLASH MX在线图象浏览器
发布时间:2006-10-14 3:03:59   收集提供:gaoqian

  FLASH MX(FLASH6)的闪亮登场,又给了闪客们一个晕倒的理由,因为她的新面孔让我们激动不已。

一.先从MX的新功能说起

  进入MX开发界面后,点击菜单条的Help=>Samples,就会打开一篇网页,叶子里的这些Sample能让我们感受到MX的新功能。接着,在叶子里点击"Feature highlight: Load images"链接。我们在这个动画里看到了5张海洋生物的图片(路人甲:看到了又怎么样?),与以往所不同的是:这5张图片并没有和这个swf文件编译在一起(路人乙:一定是"loadMovie"的外部swf,少见多怪),也不是调用的外部swf,而是"loadMovie"的5张外部的jpg图象文件。正是因为MX对"loadMovie"命令进行了扩充,才使我有幸写这篇教程^_^。

  翻开MX的在线帮助,可以找出MX对"loadMovie"的详细说明,其中"Parameters"部分的第一句"url The absolute or relative URL of the SWF file or JPEG file to be loaded."更是画龙点睛地指出了:如今的"loadMovie"不但可以load外部的swf,而且还能load外部的jpg图象文件。在jpg格式图象在网络上大行其道的今天,不能不说这是一个极好的消息。

  再回过头来看看MX对这个"海洋生物"动画例子的Description:"This sample demonstrates how you can load images from a drive or server into a movie at runtime. There are no images in the library of the source file for this sample."是的,这个"海洋生物"的图象浏览器所"loadMovie"的都是本地"drive"的jpg图象,而且jpg图象的文件名列表都已经提前定义好了。

  由此产生个小问题:如果已经定义好的文件名列表里有一个"daliang.jpg"文件,但是在某一天,这个文件在"drive or server"里不幸消失,再"loadMovie"的时候,岂不会出错,那怎么办?!:~(,别哭,咱们一起想办法:)

  (路人饼:要是每次"loadMovie"的时候,都能动态地生成一个当前的文件名列表就万事OK了.大亮:没错)每一次运行动画的时候,都能动态生成一个当前的jpg图象文件名列表,就可以解决上述问题。

  但是,在本地"drive"里动态生成一个文件名列表却并非易事,不过,我们从这段"海洋生物"动画的Description还能知道:MX的"loadMovie"也可以从server端动态load图象到一个"Movie Chip"里。于是,我们又会想到:利用一些"server"端的语言,就可以很容易地动态生成一个"server"端的jpg图象文件名列表。


二.构思

  综上所述,我们知道:这套MX图象浏览器将会在网络上运行,而且在"server"端要有一个提供动态生成"server"端jpg图象文件名列表的后台程序,这些jpg图象文件也要放置在"server"端。

  每当运行这个MX图象浏览器的时候,它总会用"loadVariables"的方法请求SERVER返回一个"server"端的当前图象文件列表,然后MX图象浏览器就可以依次"loadMovie"这些jpg的图象文件了。

  我们将会选择ASP来作为后台支持,因为用它来遍历"server"端文件非常方便。

  为了使这个教程便于理解,所以把后台的ASP文件和所有的jpg图象文件全部放置在"server"端的同一目录下。

  这就是整套程序的构思,下面我们将会具体实现这套MX图象浏览器。


三.具体实现

1.ASP部分

  首先从后台的ASP入手,因为我们将要开发的这套MX图象浏览器会通过ASP来得知"server"端当前目录的jpg文件清单。下面的这个imagebrowse.asp文件就可以实现动态生成jpg文件名列表的功能:

<% 
dim strPathInfo,strPhysicalPath
'获取这个asp文件的文件名
strPathInfo = Request.ServerVariables("SCRIPT_NAME")
'得到这个asp文件在服务器上的绝对路径
strphysicalpath = server.MapPath(strpathinfo)

dim objFso,objFile,objFileItem,objFolder,objFolderContents
'建立一个FileSystemObject对象
set objFso = createobject("scripting.filesystemobject")
'返回这个asp文件的文件对象
set objfile = objFso.GetFile(strphysicalpath)
'返回这个asp文件所在的目录名
set objfolder = objfile.parentfolder
'返回这个asp文件所在目录中的所有文件的File对象的Files集合
set objfoldercontents = objfolder.files

dim count
count = 0
'下面这个for内就是遍历当前目录下所有文件的全过程
for each objfileitem in objfoldercontents
'因为我们只需要"*.jpg"的文件
'所以每遇到扩展名后4个字节为".jpg"的文件
'便使count计数器加1,并把这个文件输出到列表中
if lcase(right(objfileitem.name,4))=".jpg" then
count = count+1
Response.Write "&image" & count & "=" & objfileitem.name
end if
next
'显示共遍历到多少个"*.jpg"文件
Response.Write "&total=" & count
%>

  这个ASP就那么十几句,很简单吧。相信有基础的闪客们很快就能看明白这段ASP。

  假设这个ASP文件所在的目录有"one.jpg"和"two.jpg"这个两个jpg文件,那么单独运行这段asp程序,在web浏览器中,就会返回如下的文件名列表:

&image1=two.jpg&image2=one.jpg&total=2

  以"&"号开头的都是变量名,"="后面的是变量的值,因为这是Flash用"loadVariables"读取外部变量所规定的格式。

  后台的ASP部分已经搞定。下面我们来看看如何来做FLASH里面的东西。

2.FLASH部分

  首先打开FLASH MX,在主场景中放置两个变量名分别为"text"和"test"的Dynamic Text,并在"test"中输入"loading..."字符串(表示正在读取列表)。其中,"text"用来显示正在浏览的jpg文件名,"test"用来显示一些其它的相关信息。

  然后在主场景中建立一个实例名为"imageview"的Movie Chip和一个实例名为"display"的按钮,每按一次这个按钮,就会在"imageview"里显示"loadMovie"进来jpg图象。

  紧接着在主场景中建立一个实例名为"finder"的由3帧组成的Movie Chip,它的作用是向服务器询问当前目录的jpg图象文件名列表,直到有了答案才在第二帧停止运行。这3帧的Action Script分别为:

  第一帧的Action Script:

//返回imagebrowse.asp生成的jpg文件名列表 
//ASP文件的路径根据实际情况填写
//本文假定ASP文件和所有的jpg文件都在WEB服务器的根目录下
loadVariables("http://127.0.0.1/imagebrowse.asp", "");

  第二帧的Action Script:

//如果返回的total值不为空,则... 
if (total<>null) { 
     //在"test"文字框中显示jpg文件名列表中总共有多少个jpg文件 
     _root.test = "total=" add total; 
     //依次把这些jpg文件名传递给以"fImage"为开头的这些FLASH变量 
     for (i=1; i<=total; i++) { 
       set("fImage" add i, eval("image" add i)); 
     } 
     //在当前帧停止 
     stop(); 
}  

  第三帧的Action Script:

gotoAndPlay(2); //返回到第2帧

  如何控制图象的显示呢?接下来,就该给"display"按钮赋予灵魂了。

  回到主场景,在主场景的第一帧(主场景仅有一帧)加入如下Action Script:

   count = 1; 
   //单击按钮所触发的事件 
   //(FLASH MX新增的事件描述方法,使MX的脚本编程更接近面向对象) 
   _root.display.onPress = function() { 
   //如果total的值不为空,则... 
   //(也就是说:如果成功读取了文件名列表的话,则...) 
     if (_root.finder.total<>null) { 
       //用"loadMovie"方法使一个jpg图象显示在"imageview"中 
       loadMovie(eval("_root.finder.fImage" add count), _root.imageview); 
       //在"text"文字框中显示这个jpg图象的文件名 
       _root.text = eval("_root.finder.fImage" add count); 
       //在"test"文字框中显示这个jpg图象是列表中的第几个文件 
       _root.test = "Number=" add count; 
       //如果显示完列表中的最后一个图象,则重新开始显示列表中的第一个图象 
       if (count<_root.finder.total) { 
         count++; 
       } else { 
         count = 1; 
       } 
     } 
   }; 

  到此为止,FLASH部分里边的东西也做好了,编译输出swf文件后,整套程序宣布完工!

3.测试

  本文假定ASP文件和所有的jpg文件都在WEB服务器的根目录下

  也不知道这套程序运行起来是什么样子的?下面就让我们来测试一下:

  先在WEB服务器的根目录下随意放置一些jpg图象文件,然后用Flash Player或web浏览器打开刚才做好的swf文件,等到"test"文字框中的"loading..."字符串消失后,我们就可以通过点击"display"按钮来浏览这些jpg图象了。


四.总结

  FLASH MX的新技术再与一些象ASP之类的程序相结合,更能让FLASH光彩夺目。

  这篇文章毕竟只是篇教程。为了使读者快速掌握其要领,所以这个MX图象浏览器的功能简单得不能再简单了。你要是想把她用在实际当中,还需要对本程序做一些改进。比如说:由于带宽的限制,当"loadMovie"一副大图象时,你就需要在FLASH中加上图象的预载程序,使"傻等"现象不再发生;当"loadMovie"进来的图象的尺寸很大或者很小时,你就需要加上一段自动调整其尺寸的程序;对ASP程序和FLASH部分做适当的改进,使其不局限于只能浏览"imagebrowse.asp"文件所在目录的图象;对FLASH部分做适当改进,可以使其对"loadMovie"进来的图象做一些简单的处理,如尺寸缩放、颜色调节、简单变形等等。(经过验证,以上的想法都能实现,只是大亮懒得去做,大家一定要努力!努力!千万别和大亮一起懒 ^_^)

  最后祝大家看了这篇文章之后,做出网络上最炫的FLASH MX在线图象浏览器。别忘了把你的好消息和好点子告诉大亮。

  好了,就说这么多,以后见!

  由于大亮水平有限,难免有疏漏之处,敬请朋友们批评指正。

 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50