之前介紹的那一套XML/SWF Slideshow播放器經過威爺提醒是要去買License 的,不買License的話就只能播放10張圖片,不死心的我又只好再去Survey一下有沒有免費版本的Flash照片線上播放器,結果大部分都是需要用Ming(一個支援動態產生flash的函式庫)來做,不過用Ming的前提是伺服器要另外裝Ming libary,這種東西大概只有自己管的伺服器才有辦法這樣搞,所以,像是XML/SWF Slideshow這種可以讀XML的swf的彈性會比較好,總算皇天不負苦心人讓我找到了米奇的故事書介紹的JW Image Rotator

JW Image Rotator的功能更強,可自訂的功能更多(還可以邊播照片邊放音樂勒),但缺點是他網頁設計的很詭異,很難找到你要的東西,但是免費給你用的東西你還能說些什麼呢?說免費也不是完全免費,根據它的版權宣告,只要是不用於商業用途你可以免費的使用以及散佈。

接下來就和大家說明如何使用這JW Image Rotator
由於JW Image Rotator可以和Javascript溝通,所以在米奇的故事書裡面是使用javascript的控制方式來完成照片輪播的方式,我比較懶,直接用embeded object的方式在網頁嵌入flash再透過flashvar的參數來控制照片播放,這個方式完全是參考官方教學文件做的,大家可以比較一下自己想用哪種方式。

和前一篇XMS/SWF一樣,JW Image Rotator也是靠一個XML清單來當做播放清單,不過這裡有些不同,JW Image Rotator的XML比較複雜,因為它可以為每張照片加入說明,但是說複雜也沒複雜到哪裡去,就只是多了幾個Tag而已,在這邊我用playlist.php來產生播放清單的xml檔案,透過index.php傳入的資料夾參數,playlist.php可以將資料夾下面所有的jpg檔案讀出來,並產生播放清單並把檔案名稱變成圖片描述,如果有善心人士可以把這支程式稍微的改一下就可以變成線上清單編輯器了,沒有的話就看哪天我很閒的話再來寫一支XD

資料夾結構
slideshow
-index.php
-playlist.php
-imagerotator.swf
+image
--img1

程式碼如下:
index.php
傳入的dir%3Dimg1的img1就是在image資料夾裡面的子資料夾名稱,圖片會放在這裡面,使用兩層的原因是因為用了我只用了basename函式過濾,黑客如果提交多個../還是可以看到上一層的東西,所以需要夾兩層資料夾,這邊把參數編碼是因為這個值會先傳給imagerotator.swf,為了避免特殊字元造成imagerotator.swf混淆所以就照官方建議編了碼。

編碼參考

  • ? → %3F
  • = → %3D
  • & → %26

 

<embed
  src="imagerotator.swf"
  width="420"
  height="278"
  allowscriptaccess="always"
  flashvars="file=playlist.php%3Fdir%3Dimg1&transition=fade&shuffle=false&rotatetime=2&repeat=true&overstretch=true"
/>


flashvars可以控制整個flash播放的方式,所有參數內容請見這裡,懶得看英文的朋友,在這篇文章後面我會放一些你也許會有興趣的參數,您也許可以參考。

playlist.php
這邊比較要注意的是因為這隻程式會根據傳入的資料夾去搜尋底下所有的檔案,因此很可能被利用來攻擊主機,所以我利用basname這個函 式另外在前面加上image這個資料夾,讓被跨目錄攻擊的風險減到最低,此外我也加了一個preg_match("/jpg/",$entry)來避免其 他檔案被任意瀏覽,anyway這種直接傳遞目錄的功能是滿危險的,建議要寫的話可以用一些替代方案,像是結合資料庫,這樣還可以搞一個相片管理的後台。

如果您的目錄已經固定的話,可以建議您直接將path值修改為你的目錄名稱就好,順帶一提的是,location這個tag裡面在我的範例是使用相對目錄,因為我只讀本地檔案,您可以依照您的需求直接給一個圖片的url(如http://aaa.bbb.ccc/123.jpg),也就是說這份清單不限定是本地的圖片,imagerotator.swf會根據location的網址去抓取圖片。

XML格式請參考米奇的故事書,他的是靜態XML比較好讀

<?php
$path="image/".$_GET[dir];
$d = dir($path);
echo "<playlist version=\"1\">\n<trackList>\n";
while (false !== ($entry = $d->read())) {
    if($entry!='.' && $entry!='..'){
        if(preg_match("/jpg/",$entry)){
            echo "<track>\n";
            echo "   <title>$entry</title>\n";
            echo "   <creator>nightmare</creator>\n";
            echo "   <location>$path"."/$entry</location>\n";
            echo "   <info>http://blog.pixnet.net/nsysumis94</info>\n";
            echo "</track>\n";
        }
    }
}
$d->close();
echo "</trackList>\n</playlist>\n";
?>

下面是flashvars參數參考:
圖片顯示相關(display appearance)

  • overstretch (false):這個參數用來顯示當圖片的Size和你Flash顯示的Size不合的時候要怎麼做,預設是false,當overstretch為false的時候,會根據圖片原始比例縮放,這樣不管你的flash size怎麼變都會顯示整張照片,若overstretch為true時會將照片做裁切以及一些縮放以符合flash size,建議可以採用false,然後flash size以你照片最長的那一邊為基準,把flash長寬都定為那個size,譬如我的照片為800*600,則flash size就定為800*800,這樣不管直幅或橫幅顯示都不會有問題。
  • transition (random):圖片過場方式,預設為亂數決定,我比較喜歡用淡出(fade),其他還有fade, bgfade, blocks, bubbles, circles, flash, fluids, lines or slowfade這些參數大家可以玩玩看。

換頁控制bar

  • shownavigation (true):預設是true,改為false就是隱藏

播放參數

  • autostart (true):預設為true,表示flash是不是一載入就要播放
  • repeat (false):預設為false,表示要不要重複播放
  • rotatetime (5):每張照片播放間隔,預設為5秒
  • shuffle (false):是否random播放,這邊寫預設是false但是根據我實驗預設是true

============10/31補充============

emma問的問題很好,上面的程式碼是給自己架設網站或者是使用支援php的網頁空間使用的,如果你的網頁空間不支援動態程式語言,那就只能靠自己編寫好的xml檔案來決定撥放清單。

你如果要直接嵌embeded元件在blog裡面的話,你必須要找一個網頁空間放imagerotator.swf,如下面範例我把我的imagerotator.swf跟撥放清單img.xml放在www.google.com.tw這台主機的slideshow這個資料夾下面的話,內嵌語法就可以這樣寫:

<embed
  src="http://www.google.com.tw/slideshow/imagerotator.swf"
  width="420"
  height="278"
  allowscriptaccess="always"
  flashvars="file=http://www.google.com.tw/slideshow/img.xml&transition=fade&shuffle=false&rotatetime=3&overstretch=true"
/>

至於照片要放哪裡...這個看你個人喜好,只要可以透過http連到就好(某些網站不給外連或者是像pixnet會鎖流量),例如我要放我在Flickr的照片,img.xml的內容就可以像下面這樣,在我測試裡面Title如果用中文好像會有問題。

<playlist version="1">
<trackList>
<track>
   <title>Flickr1</title>
   <creator>nightmare</creator>
   <location>http://farm3.static.flickr.com/2374/2517992572_b010fe8ea7.jpg</location>
   <info>http://blog.pixnet.net/nsysumis94</info>
</track>
<track>
   <title>Flickr2</title>
   <creator>nightmare</creator>
   <location>http://farm3.static.flickr.com/2197/2517170913_aa90dd6b93.jpg</location>
   <info>http://blog.pixnet.net/nsysumis94</info>
</track>
<track>
   <title>Flickr3</title>
   <creator>nightmare</creator>
   <location>http://farm4.static.flickr.com/3147/2517991710_ef62f0c185.jpg</location>
   <info>http://blog.pixnet.net/nsysumis94</info>
</track>
</trackList>
</playlist>

arrow
arrow
    全站熱搜

    nsysumis94 發表在 痞客邦 留言(2) 人氣()