fbpx

網頁技術筆記《FlashSlideShow》利用Flash+XML控制圖片切換

雖然丫湯不斷的在研究Wordpress佈景,一直很想做一個CMS樣式的佈景,不過輪播圖片的部份一直找不到很滿意的程式來製作,最近無意間看到一個Flash+XML製作起來的輪播系統,看起來效果十足,也不會佔用太多資源,不過目前還不是很適合用在結合文章上,只適用輪播圖片,先在這裡做個筆記,之後再來研究看看是否適合做成WP外掛,有興趣的也可以拿去研究看看哦。

01

Flash SlideShow介紹:

元件官方網站:http://www.progressivered.com/cu3er/
Demo檔案下載:https://steachs.com/d/files/flashslide.zip
Demo頁面:https://steachs.com/wp-content/uploads/flashslide

Flash SlideShow使用方式:

下載檔案解壓縮後一共有二個資料夾images及swfobject,檔案有config.xml、cu3er.swf、index.html共三個。

首先將我們要輪播的圖片放置在images資料夾裡,記得圖片大小必需一致。

02

然後開啟config.xml這個檔案來設定輪播的圖片,找到第34行開始,依照相同的格式來填寫圖片檔案,相信聰明的你應該會舉一反三,看的出來該如何修改。

然後在每一個圖片下面都有<transition num=….這一行語法,這一段是用來控制圖片要切換時的特效,像是切片的切換,在前面有一個num是要設定切成幾片,direction是轉動的方向等等,請自行翻譯為中文就知道每一項切換效果了。
03

接下來打開index.html找到以下語法,其中紅字的二個數據是指圖片的寬和高,記得設置為和圖片一致,顯示出來才會好看哦。

swfobject.embedSWF("cu3er.swf", "FlashSlideShow", "500", "500", "9", "expressInstall.swf", flashvars, attributes);

以上就是一些基本用法的解說,有興趣的可以用看看,目前丫湯已經有嘗試結合在wp的佈景裡,沒有什麼大問題,等待丫湯解決文章結合的部份,再來寫一篇筆記囉。

你可能對這些內容也有興趣

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

9 個留言

  1. Avatar DL表示:

    你好版主可以詢問您
    如何調整它的大小 960*300
    我調整”FlashSlideShow”, “960”, “300”, “9”,
    可是無法順利調整麻煩幫我解惑
    謝謝

    阿湯說:

    這部份請自行研究囉

  2. Avatar 表示:

    請問一下這要怎麼擺在網頁上面
    HTML語法直接可以用嗎?
    謝謝

    阿湯說:

    網頁有支援就能用

  3. Avatar 周愛馬表示:

    阿湯啊~請教一下 都改好之後要把資料主機裡的哪一塊

    阿湯說:

    ??看不懂

  4. Avatar Mike表示:

    恩,我會找時間去研究官方文件的…(遠望)

    阿湯說:

    wp現在其實只有會員機制比較差,其它要做什麼樣的功能大概都沒什麼問題了

  5. Avatar Mike表示:

    WordPress 比較少 CMS 的版型是真的。
    所以原本公司網站想用 Joomla 架的說…
    不過後來發現,只要多花點時間改 WP 版型就可以做到了。
    但是…也僅限於首頁、分頁、文章而已…
    好像無法像 Joomla 一般依照文章分類套用不同的模版…
    不過目前公司的網站內容還不多,所以還好…
    但是考慮未來的話,好像還是要換成 Joomla 才行 = =”

    阿湯說:

    文章分類是可以套不同模板的,你對wp結構不了解而已哦

  6. Avatar kalahan表示:

    看看而已,偶不会css。今天顺便祝丫汤同学节日快乐!嘿嘿,大陆六一儿童节啦…

    阿湯說:

    = =

  7. Avatar 梅干扣肉表示:

    唷~好強喔!!!也在搞flash啦~cool~

    阿湯說:

    小玩一下而已啦@@

  8. Avatar Alvin表示:

    有官方網站: http://www.progressivered.com/cu3er/

    阿湯說:

    感謝提供.補上去囉^^

發表留言 »

姓名(*)
信箱(*)