怎么開發(fā)基于ASP的FLASH MX在線圖象瀏覽器

　　FLASH MX(FLASH6)的閃亮登場(chǎng)，又給了閃客們一個(gè)暈倒的理由，因?yàn)樗�的新面孔讓我們激�?dòng)不已。

一.先從MX的新功能說起

　　進(jìn)入MX開發(fā)界面后，點(diǎn)擊菜單條的Help=>Samples,就會(huì)打開一篇網(wǎng)頁，葉子里的這些Sample能讓我們感受到MX的新功能。接著，在葉子里點(diǎn)擊"Feature highlight: Load images"鏈接。我們?cè)谶@個(gè)動(dòng)畫里看到了5張海洋生物的圖片(路人甲:看到了又怎么樣?)，與以往所不同的是:這5張圖片并沒有和這個(gè)swf文件編譯在一起(路人乙:一定是"loadMovie"的外部swf，少見多怪)，也不是調(diào)用的外部swf,而是"loadMovie"的5張外部的jpg圖象文件。正是因?yàn)镸X對(duì)"loadMovie"命令進(jìn)行了擴(kuò)充，才使我有幸寫這篇教程^_^。

　　翻開MX的在線幫助，可以找出MX對(duì)"loadMovie"的詳細(xì)說明,其中"Parameters"部分的第一句"url The absolute or relative URL of the SWF file or JPEG file to be loaded."更是畫龍點(diǎn)睛地指出了:如今的"loadMovie"不但可以load外部的swf，而且還能load外部的jpg圖象文件。在jpg格式圖象在網(wǎng)絡(luò)上大行其道的今天，不能不說這是一個(gè)極好的消息。

　　再回過頭來看看MX對(duì)這個(gè)"海洋生物"動(dòng)畫例子的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."是的，這個(gè)"海洋生物"的圖象瀏覽器所"loadMovie"的都是本地"drive"的jpg圖象，而且jpg圖象的文件名列表都已經(jīng)提前定義好了。

　　由此產(chǎn)生個(gè)小問題：如果已經(jīng)定義好的文件名列表里有一個(gè)"daliang.jpg"文件，但是在某一天，這個(gè)文件在"drive or server"里不幸消失，再"loadMovie"的時(shí)候，豈不會(huì)出錯(cuò)，那怎么辦？!:~(，別哭，咱們一起想辦法:)

　　(路人餅:要是每次"loadMovie"的時(shí)候,都能動(dòng)態(tài)地生成一個(gè)當(dāng)前的文件名列表就萬事OK了.大亮:沒錯(cuò))每一次運(yùn)行動(dòng)畫的時(shí)候，都能動(dòng)態(tài)生成一個(gè)當(dāng)前的jpg圖象文件名列表，就可以解決上述問題。

　　但是，在本地"drive"里動(dòng)態(tài)生成一個(gè)文件名列表卻并非易事,不過,我們從這段"海洋生物"動(dòng)畫的Description還能知道:MX的"loadMovie"也可以從server端動(dòng)態(tài)load圖象到一個(gè)"Movie Chip"里。于是，我們又會(huì)想到:利用一些"server"端的語言，就可以很容易地動(dòng)態(tài)生成一個(gè)"server"端的jpg圖象文件名列表。

二.構(gòu)思

　　綜上所述，我們知道：這套MX圖象瀏覽器將會(huì)在網(wǎng)絡(luò)上運(yùn)行，而且在"server"端要有一個(gè)提供動(dòng)態(tài)生成"server"端jpg圖象文件名列表的后臺(tái)程序，這些jpg圖象文件也要放置在"server"端。

　　每當(dāng)運(yùn)行這個(gè)MX圖象瀏覽器的時(shí)候，它總會(huì)用"loadVariables"的方法請(qǐng)求SERVER返回一個(gè)"server"端的當(dāng)前圖象文件列表，然后MX圖象瀏覽器就可以依次"loadMovie"這些jpg的圖象文件了。

　　我們將會(huì)選擇ASP來作為后臺(tái)支持，因?yàn)橛盟鼇肀闅v"server"端文件非常方便。

　　為了使這個(gè)教程便于理解，所以把后臺(tái)的ASP文件和所有的jpg圖象文件全部放置在"server"端的同一目錄下。

　　這就是整套程序的構(gòu)思，下面我們將會(huì)具體實(shí)現(xiàn)這套MX圖象瀏覽器。

三.具體實(shí)現(xiàn)

1.ASP部分

　　首先從后臺(tái)的ASP入手，因?yàn)槲覀儗⒁�開發(fā)的這套MX圖象瀏覽器會(huì)通過ASP來得知"server"端當(dāng)前目錄的jpg文件清單。下面的這個(gè)imagebrowse.asp文件就可以實(shí)現(xiàn)動(dòng)態(tài)生成jpg文件名列表的功能:

<% 
 dim strPathInfo,strPhysicalPath 
 '獲取這個(gè)asp文件的文件名 
 strPathInfo = Request.ServerVariables("SCRIPT_NAME") 
 '得到這個(gè)asp文件在服務(wù)器上的絕對(duì)路徑 
 strphysicalpath = server.MapPath(strpathinfo) 

　　這個(gè)ASP就那么十幾句，很簡單吧。相信有基礎(chǔ)的閃客們很快就能看明白這段ASP。

　　假設(shè)這個(gè)ASP文件所在的目錄有"one.jpg"和"two.jpg"這個(gè)兩個(gè)jpg文件，那么單獨(dú)運(yùn)行這段asp程序，在web瀏覽器中，就會(huì)返回如下的文件名列表:

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

　　以"&"號(hào)開頭的都是變量名，"="后面的是變量的值，因?yàn)檫@是Flash用"loadVariables"讀取外部變量所規(guī)定的格式。

　　后臺(tái)的ASP部分已經(jīng)搞定。下面我們來看看如何來做FLASH里面的東西。

2.FLASH部分

　　首先打開FLASH MX，在主場(chǎng)景中放置兩個(gè)變量名分別為"text"和"test"的Dynamic Text，并在"test"中輸入"loading..."字符串(表示正在讀取列表)。其中，"text"用來顯示正在瀏覽的jpg文件名，"test"用來顯示一些其它的相關(guān)信息。

　　然后在主場(chǎng)景中建立一個(gè)實(shí)例名為"imageview"的Movie Chip和一個(gè)實(shí)例名為"display"的按鈕，每按一次這個(gè)按鈕，就會(huì)在"imageview"里顯示"loadMovie"進(jìn)來jpg圖象。

　　緊接著在主場(chǎng)景中建立一個(gè)實(shí)例名為"finder"的由3幀組成的Movie Chip，它的作用是向服務(wù)器詢問當(dāng)前目錄的jpg圖象文件名列表，直到有了答案才在第二幀停止運(yùn)行。這3幀的Action Script分別為:

　　第一幀的Action Script:

//返回imagebrowse.asp生成的jpg文件名列表 
//ASP文件的路徑根據(jù)實(shí)際情況填寫 
//本文假定ASP文件和所有的jpg文件都在WEB服務(wù)器的根目錄下 
loadVariables("http://127.0.0.1/imagebrowse.asp", ""); 

　　第二幀的Action Script:

//如果返回的total值不為空,則... if (total<>null) {      //在"test"文字框中顯示jpg文件名列表中總共有多少個(gè)jpg文件      _root.test = "total=" add total;      //依次把這些jpg文件名傳遞給以"fImage"為開頭的這些FLASH變量      for (i=1; i<=total; i++) {        set("fImage" add i, eval("image" add i));      }      //在當(dāng)前幀停止      stop(); }  

　　第三幀的Action Script:

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

　　如何控制圖象的顯示呢？接下來，就該給"display"按鈕賦予靈魂了。

　　回到主場(chǎng)景，在主場(chǎng)景的第一幀(主場(chǎng)景僅有一幀)加入如下Action Script:

   count = 1;    //單擊按鈕所觸發(fā)的事件    //(FLASH MX新增的事件描述方法,使MX的腳本編程更接近面向?qū)ο?    _root.display.onPress = function() {    //如果total的值不為空,則...    //(也就是說:如果成功讀取了文件名列表的話,則...)      if (_root.finder.total<>null) {        //用"loadMovie"方法使一個(gè)jpg圖象顯示在"imageview"中        loadMovie(eval("_root.finder.fImage" add count), _root.imageview);        //在"text"文字框中顯示這個(gè)jpg圖象的文件名        _root.text = eval("_root.finder.fImage" add count);        //在"test"文字框中顯示這個(gè)jpg圖象是列表中的第幾個(gè)文件        _root.test = "Number=" add count;        //如果顯示完列表中的最后一個(gè)圖象,則重新開始顯示列表中的第一個(gè)圖象        if (count<_root.finder.total) {          count++;        } else {          count = 1;        }      }    }; 

　　到此為止，F(xiàn)LASH部分里邊的東西也做好了，編譯輸出swf文件后，整套程序宣布完工！

3.測(cè)試

　　本文假定ASP文件和所有的jpg文件都在WEB服務(wù)器的根目錄下

　　也不知道這套程序運(yùn)行起來是什么樣子的？下面就讓我們來測(cè)試一下:

　　先在WEB服務(wù)器的根目錄下隨意放置一些jpg圖象文件，然后用Flash Player或web瀏覽器打開剛才做好的swf文件，等到"test"文字框中的"loading..."字符串消失后，我們就可以通過點(diǎn)擊"display"按鈕來瀏覽這些jpg圖象了。

四.總結(jié)

　　FLASH MX的新技術(shù)再與一些象ASP之類的程序相結(jié)合，更能讓FLASH光彩奪目。

　　這篇文章畢竟只是篇教程。為了使讀者快速掌握其要領(lǐng)，所以這個(gè)MX圖象瀏覽器的功能簡單得不能再簡單了。你要是想把她用在實(shí)際當(dāng)中，還需要對(duì)本程序做一些改進(jìn)。比如說:由于帶寬的限制，當(dāng)"loadMovie"一副大圖象時(shí)，你就需要在FLASH中加上圖象的預(yù)載程序，使"傻等"現(xiàn)象不再發(fā)生；當(dāng)"loadMovie"進(jìn)來的圖象的尺寸很大或者很小時(shí)，你就需要加上一段自動(dòng)調(diào)整其尺寸的程序；對(duì)ASP程序和FLASH部分做適當(dāng)?shù)母倪M(jìn)，使其不局限于只能瀏覽"imagebrowse.asp"文件所在目錄的圖象；對(duì)FLASH部分做適當(dāng)改進(jìn)，可以使其對(duì)"loadMovie"進(jìn)來的圖象做一些簡單的處理，如尺寸縮放、顏色調(diào)節(jié)、簡單變形等等。(經(jīng)過驗(yàn)證,以上的想法都能實(shí)現(xiàn),只是大亮懶得去做,大家一定要努力!努力!千萬別和大亮一起懶 ^_^)

　　最后祝大家看了這篇文章之后，做出網(wǎng)絡(luò)上最炫的FLASH MX在線圖象瀏覽器。別忘了把你的好消息和好點(diǎn)子告訴大亮。

　　好了，就說這么多，以后見!

　　由于大亮水平有限，難免有疏漏之處，敬請(qǐng)朋友們批評(píng)指正。