如何开发基于ASP的FLASH MX在线图象浏览器

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) 

　　这个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在线图象浏览器。别忘了把你的好消息和好点子告诉大亮。

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

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