Flash網站基礎建設(1)—SWFObject、SWFFit、SWFAddress三兄弟登場！之卷

來篇正式的文章。

問題一：在以前，要在html上嵌入一個swf很簡單，用Dreamweaver，點選一個flash的icon，選好檔案，大概就解決了。後來，IE在某次更新後，對於ActiveX的安全性考量，使用者必須點擊後，才能正常運作。這就是大家熟知的"虛線框"問題。Dreamweaver 8在某版更新後，有提出解決方法，會產生一個Scripts/AC_RunActiveContent.js的東西來解決。不過使用起來有點麻煩。



問題二：隨著Flash網站發展，隨使用者瀏覽器大小100%顯示內容的網站越來越多。而顯示器的尺寸也越來越大，於是乎，Flash網站的size也越來越大。然後有一天，客戶跟你說：我用NB，看不到網站下面的東西，給我scrollbar往下捲。而你的scrollbar卻因為100%的高度而失去作用。

問題三：全Flash網站的最大問題，就是只有一個html，要找到某個內容，要依照一定的步驟一個button一個button點下去，才找的到。後來，利用url後面帶參數，然後丟給swf，再從flash裡面依照傳入的參數去判斷要到哪個內容，可以解決部分的問題。但若想讓Flash網站擁有一般html可以直接上一頁、下一頁切換，似乎是做不到。再其次，客戶做完一個網站，總是希望你能提供一些page view的參數告訴他這網站的成效。

以上這三個問題，使得在html上嵌入一個swf變的相當複雜。幸好，現在都找的到解法。這也使得原本嵌入swf總是在最後一步才作，而現在卻要拿到第一步來講。

首先來看第一個問題的解決方案，就是SWFObject。右邊可以看到下載連結，以及AIR跟html的generator—可以幫你產生需要的code。下載完後可以看看documentation，或者這篇中文簡體翻譯來了解如何使用它。簡單講呢，第一步先呼叫swfobject.js，我把他放在Scripts資料夾裡，所以會是：

再來是在想嵌入swf的位置加上一個div，給他個id，內容則可以先放當使用者沒有flash player或者版本太低時，要顯示的訊息，並且讓他連結到Adobe網站下載最新player，像這樣：

請安裝最新版的Flash Player

接著就是用javascript嵌入swf的設定啦，使用swfobject.embedSWF這個function，它有9個參數！！1.swf檔案，2.上面那個div的id名稱，3.寬，4.高，5.flash版本，只放前三個數字，6.是一個判斷版本的expressInstall.swf，下載後有，我放到Scripts裡面，7.flashvars，要傳參數給swf時可用，8.9.分別是params跟attributes，各可以塞哪些東西就請參照documentation了。這段javascript大概長這樣：

以上，第一個問題就解決了，附帶還有版本判斷以及導向安裝最新版Flash Player的功能。

第二個問題，可以透過SWFFit來解決。SWFFit可以設定最小寬高，當使用者瀏覽器小於這個最小寬高，那麼swf的寬高就會是這個size，並且會出現scrollbars讓使用者可以捲動，來看到超出瀏覽器的內容。也可以設定最大寬高來限制當瀏覽器寬高大於這個size時，會限制swf的size。通常不會去設定最大寬高，但SWFFit會自動以100%寬高來顯示swf，所以如果不想100%寬高，而是固定swf大小時，可以將最大寬高設定跟最小寬高一樣，就可以顯示固定尺寸的swf了。設定的方式，首先仍是匯入js檔案：

接著使用swffit.fit來設定，總共有7個參數：1.div的id，2.最小寬，3.最小高，4.最大寬，5.最大高，6.水平置中，7.垂直置中。若只想設定最小寬高可以只設定前三個參數，若有不想設定的size可以設為null，我測試SWFAddress的align置中時似乎有點問題，但可以用SWFFit的置中來解決。這段javascript大概像這樣：

swffit.fit('website',1000,650,1000,650,true,false);

第三個問題，則是用SWFAddress來獲得各個Flash page的deep link。在這邊我們只需要將swfaddress.js匯入：

再來就是Flash裡面的問題了，這個之後再談。如果只要產生一層link，也就是(通常是)各大單元的link其實很簡單，可以先參考下載後的範例。不過如果想要在各大單元又產生底下的小單元的link，那就傷腦筋了。另外，SWFAddress可以搭配追蹤page view的function，預設是urchinTracker，應該就是我們公司用的那一套urchin。我們也可以設定Google Analytics來追蹤，把SWFAddress的追蹤function設定為Google Analytics的pageTracker._trackPageview()，而設定的方法可以像這樣：

，或者在as裡面也提供了setTracker方法來設定。

參考檔案

以上，應該就解決了嵌入swf的問題了。