首頁>網絡編程教程>ASP教程

如何開發基於ASP的FLASH MX線上圖象瀏覽器

作者：Eve Cole 更新時間：2009-06-23 16:42:44

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 at runtime. There are no images in the library of the source file for at runtime. There are no images in the library of the source file for 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線上圖象瀏覽器。別忘了把你的好消息和好點子告訴大亮。

好了，就說這麼多，以後見!

由於大亮程度有限，難免有疏漏之處，敬請朋友批評指正。
相關文章