[教學] 如何用Flash快速在部落格中插入複數圖片與影片

—————————————————————————————————-
目前已有新版教學, 請看[教學] 如何用Media@Blog快速在部落格中插入複數圖片與影片
—————————————————————————————————-
今天花了一個下午, 終於完成了整套的[三十秒在blog部落格張貼多張圖片與影片 我也會]的Project. 有到這裡來逛過的可能有看過之前的使用教學, 這次一口氣把圖片和影片的原始碼產生器整合成一個, 您可以快速又方便的在blog部落格上使用圖片展示以及影片播放器.
這次決定將這套方法定名為Media@blog! 目前旗下有兩個主要功能, 分別是Photo@blog 以及 Movie@blog! 以下是它的特色說明:
1. 妳不需要學會Flash就可以用Flash在部落格上播放圖片或影片
2. 妳不需要安裝任何插件到妳的部落格裡面
3. 妳只要有網路空間放置你的圖片或影片即可
4. 每次張貼新聞章只需要用原始碼產生器產生HTML碼, 在貼上即可
5. 多人共用同一個SWF播放器
6. 新版CodeGenV4支援18張圖片的輸入介面(手動coding可以支援到99張)


使用前, 請先下載: Media@blog原始碼產生器
—————————————————-
Photo@blog教學:想貼照片的人看這邊
基本上使用方式和上回一樣, 為了方便我還是把文章再重複一次.
使用前, 請先下載: Media@blog原始碼產生器
第一部份:修改你既有的照片, 並整理到資料夾中
001.jpg
第二部份:開啟HTML原始碼產生器照如下說明依序輸入適當的欄位資訊
002.jpg
第三部份:把產生出來的原始碼貼到新增的blog部落格文章中
003.jpg
上回所用的Media@blog原始碼產生器是3.0版, 只支援9張圖片的文字敘述, 這回的4.0 Plus版和上一次教學的差別只在於增加到18張圖片的文字敘述, 並且結合Movie@blog的代碼產生功能.
—————————————————-
Movie@blog教學:想貼影片的人看這邊
使用前, 請先下載: Media@blog原始碼產生器
第一部份:下載FLV轉檔軟體
>Riva VX 公司製作的免費轉檔軟體, 以及FLV播放器.
原始下載點: FLV轉檔 ; FLV播放
軟體使用簡單, RivaEncoder詳細教學就等有空再PO了.
第二部份:上傳FLV到網路上
您只要有FTP或免費網路空間, 把第一步轉出來的FLV檔案上傳上去, 並且把路徑記起來. 例如: 我的FLV檔路徑是http://www.dab.idv.tw/flv_free/my_movie.flv
就請你把檔名之前的http://www.dab.idv.tw/flv_free/複製起來.
第三步會用到.
第三部份:打開Media@blog原始碼產生器, 產生HTML檔
首先選擇進入Movie@blog編輯模式
首先選擇進入Movie@blog編輯模式
接下來, 輸入如下圖的資訊
接下來, 輸入如下圖的資訊
最後按下產生原始碼
最後按下產生原始碼
把產生出來的原始碼貼到你的blog部落格新增文章欄位中就大功告成了!
以上是dAb辛苦製作的使用教學, 如有錯誤的地方, 敬請指正. 謝謝.
– 有意願要使用的人, 麻煩留在迴響中, 我好方便管理. 謝謝.
*進階使用者, 或是有自己SERVER的人, 可以下載SWF檔回去, 唯需修改Media@Blog所產生之HTML檔, 把SWF檔位址指向您SERVER所在路徑. 這裡便不詳述了.
請至以下連結處下載:
Photo@Blog – SWF檔
Movie@Blog – SWF檔
—————————————————————————————————-
目前已有新版教學, 請看[教學] 如何用Media@Blog快速在部落格中插入複數圖片與影片
—————————————————————————————————-

55 comments

  1. 今天試用您製作的FLASH圖片展示器
    介面很in(現在啥都流行白色),且使用上都很方便
    唯獨在資料夾跟檔名的命名上稍微少了點彈性度
    這是小弟的小小使用感想。

  2. to im28
    感謝您的測試, 的確以日期為檔名似乎有一點不方便, 原本的用意是讓圖片利於日後管理, 不過如果能讓使用者自訂圖檔編號前的字串應該也是不錯,我會在下一個版本試著改善這個問題. Thanks.

  3. 很實用的軟體,謝謝您的分享。
    不過我有個問題想請教,我在Blogger新增文章,貼上原始碼時,會有警告視窗告知以下訊息「Tag is not closed: 」,請問有方法解決嗎?謝謝

  4. to PPgirl
    我去Blogger測試之後發現, 如果你用Compose模式貼上HTML原始碼的話, 會貼到一半就斷掉, 斷在大約最後一行的地方, 這大約就是出現「Tag is not closed: 」的原因. 如果切換到HTML編輯模式再貼上的話, 就不會有這個問題, 不過我按下Publish送出時, Blogger會無法送出, 雖然文章儲存了, 不過好像會因為某些問題而不能顯示. 奇怪的是如果你在送出文章之前按Preview的話, 卻又正常… 抓圖
    我想這有可能是Blogger的某些限制所導致?

  5. to PPgirl
    根據鎖頭大哥的觀察, 他建議在[/object]之前加上[/embed]以欺騙Blogger的Server. 原因可能是出在Blogger不認得沒有結尾的[embed]標記. dAb測試後證明鎖哥英明.所言不假.
    您可以試試.

  6. 應該是這樣就可以. 但是因為我為了讓大家方便一點, 所以讓大家都共用在我的主機上的SWF檔, 也就是Media@Blog的主要元件. 如果進階一點的使用者, 可以把SWF檔下載回去, 放在自己的Server不過那就得把HTML產生器產生出來的http://www.dab.idv.tw/dab/load_image_v6.swf這段, 換成自己Server的路徑, 這樣就得要改良HTML產生器(例如讀取外部文字檔當做swf檔路徑…), 一旦如此使用起來就不會像現在這樣\"三十秒我也會"了.. , 而且如果我改良版本, 共用我swf的人可以不需更動, 就能享用更新的版本, 而swf放使用者端的話, 使用者就需要自己回來看是不是有更新. 比較麻煩.
    *IP更換好像要明天才能生效… >__

  7. 請問貼影片的問題
    我將avi檔轉成flv後
    用Media@blog原始碼產生器, 產生HTML檔
    貼到plog裡去
    可是只有影片播放器裡影片並沒有出來
    (我是把load_image_v6.swf抓到自己的server)
    請問可能是哪裡的問題
    3Q!

  8. to arashi
    我想可能的原因是你的連結位址或檔名欄位有設錯
    你可以試著把 “連結位址"欄位 + “檔名"欄位 + .flv
    連在一起以後輸入到IE裡面, 正確的話, 應該會跳出下載視窗
    如果你的FLV檔路徑是http://www.dab.idv.tw/flv_free/my_movie.flv
    那在填"連結位址"欄位的地方就是http://www.dab.idv.tw/flv_free/
    要加斜線做結尾
    檔名欄位就是my_movie, 要注意沒有.flv
    *看樣子原始碼產生器有些不符合使用性, 改天有空再修改了

  9. 嗯… 蠻奇怪的, 因為我也是用IE看, MT就沒有問題.
    我想有兩個可能:
    1. 你IE裡面的Flash Player不是7.0的版本
    2. plog可能不認得[embed]這個沒有結尾的標記, 你可以看看前幾樓PPgirl的問題, 建議在最後的[/object]之前加上[/embed]欺騙plog的Server試試看.
    *每個瀏覽器都有不一樣的問題, IE裡面其實沒有EMBED那段也可以Run, 不過Mozila如果沒有EMBED那段就跑不出來.

  10. Dear dAb:
    很棒的Project,我個人很喜歡…
    不過如果可以加上preload使用起來會應該更順手..
    另外,若Media@blog可以晉升為網頁程序,相信會更方便!!

  11. to quawn
    真謝謝您看的起Media@Blog這個小玩意ㄦ
    我最初的想法只是希望不會用Flash的人也能用Flash來展示複數的圖片
    透過掛變數的方式, 使用它的人連flash是什麼swf是什麼都不需要懂, 只要照著做就可以
    讓想一次分享很多照片的人有一個更快更好看的方式呈現
    其實Blog看多了, 發現每個人的需求都不一樣
    還是有很多人不介意POST太多張圖片時首頁會被拉太長的問題
    再者, 我也覺得圖片一張張的夾在文字敘述之中其實也是不錯
    像Media@Blog那樣把所有圖片濃縮在一格裡顯示, 好像也不見得比較好…
    好像講的有點太多了XD
    最後 感謝您一語驚醒夢中人
    我已經為它加入了Preload的基本功能
    希望在瀏覽時能夠更順暢些^^

  12. Dear dAb:
    阿你客氣了啦…
    好不好這事本來就是見仁見智.
    重點是你實驗與分享的動機我個人很欣賞…
    其實我覺得最讚的是轉場濾鏡的變化很有趣..
    像是你"小倆口\"那份照片就很有效果!!

  13. to dAb
    我跟樓上的arashiㄧ樣ㄟ~
    我的也是plog~
    嘗試在最後一個之前加入,還是宣告失敗~
    騙不過它啦~
    進去看文章原始碼,embed 那一段就是會不見~
    好喜歡你的Movie@Blog,是很棒的東西~
    可惜!~嗚嗚嗚~~

  14. to mingyo
    arashi兄後來好像發現問題是他在FLV檔名的欄位 多填了.flv的副檔名.
    看他後來說好像可以了, 我就沒有去深究這件事.
    如果在plog上面使用真的會有問題的話, 就再告知一下吧
    我會找個時間解決這個問題.

  15. to dAb
    並不是.flv的關係;我弄好後,firefox可以看,但IE不行.
    用IE進入管理介面看文章的原始碼,embed 那一段就是會不見,就算我在最後一各前加入也是一樣;
    但是用firefoxㄧ切都很正常!

  16. 感謝您的分享與教學,
    相當實用。
    但有以下幾個小問題,拜託您有空解答一下囉!
    1.請問這個相簿的版型是否有可能改變呢?可以自行更換嗎?
    2.請問可以設定自動翻頁嗎?可設定幾秒鐘自動換下一張嗎?
    3.好像碰到直式和橫式交錯的照片,版型就不大合用了呢?

  17. to DearJohn
    1. 版型的部份, 想要改的話可能要懂Flash.
    不過經過您的建議, 可能下回可以來個自訂背景圖吧, 或是指定色調之類的…
    2. 嗯, 自動翻頁好像蠻多Flash圖片播放器都有, 不知怎的當時忘了做, 下個版本應該會加進來, 不過我個人是習慣點點點滑鼠來翻頁XD.
    3. 嗯, 沒錯, 這個問題是蠻不方便的, 我自己的話是都得把直的圖處理過才放, 因為Flash好像沒有辦法是先偵測圖的大小(?).
    感謝您的具體建議, 未來會作為更改時的參考 ^^
    * 您的Blog樣版很好看啊!

  18. 先謝謝你的誇獎,
    你的版型才炫呢~~
    而且你寫了好多文章喲!真厲害!
    我補充一下第2點,
    最好是可以設定自動翻頁或是手動翻頁,
    再補充一下第4點,
    如果可以再加上夾帶mp3音樂檔的功能,
    這個播放器就無敵了呢!!
    很期待下個版本的出現喲~~
    加油!

  19. 你好,很榮幸能使用 Media@blog!
    在使用之前,重複預習了一下先前的說明與迴響,
    該加 也加了,
    但正式使用 Photo@blog 卻遇到一個小問題,
    那就是圖片顯示不出來,
    我換了三個地方,仍舊是無法成功,
    後來使用你的 Blog 裡的其中一個(抱歉)原始碼,
    發覺竟然可以正確無誤,不知是甚麼原因?
    感謝你的 Project…

  20. to 邱小啾
    您客氣了. 您的問題有兩種可能:
    1. 您可能設定(填欄位)時不小心設錯了
    2. JPG一定要存成"標準"(Baseline)的格式, 一般繪圖軟體都有這個選項, 一般來說, 像機照完以後直接上傳都不會有問題, 但是如果您曾經進入繪圖軟體修改過再另存新檔, 如果該軟體預設JPG的存檔格是不是Baseline的話(例如PhotoImpact), Flash就沒有辦法顯示囉! 要避免這個問題, 盡量選擇"儲存到網頁"(Save for web)來存圖片, 並且注意裡面有沒有一個JPG格式的選項(可能有標準Baseline.漸進Progressive.等…)
    因為曾經遇過第2點, 所以我傾向於是原因2. 如果兩者都不是, 請再留言, 我會再幫您解決的.

  21. to Vista
    還有很多不滿意的地方, 還請大家多多給些意見了^^.
    Vista兄幫我確定了plog+ie無法呈現, 不過究竟是為什麼呢?
    有沒有人有一些可能的想法? 因為我對plog沒什麼了解…

  22. to Vista
    我去看了一下您的Blog, 您可能有不小心動到由CodeGen所產生出來的原始碼, 所以您網站上的原始碼與Media@Blog產生出來的不一樣喔. 請您再用Media@Blog原始碼產生器產生一次HTML代碼, 貼到Blogger以後就不會有問題了.^^

  23. to dAb大大:
    看完你這一篇詳細的教學之後,忍不住手癢也試了一下,這樣就不用動到 FLASH了,真的很實用的一篇教學,感謝dAb大大的用心,讓很多人都受惠了。

  24. to dAb:
    剛好碰到一個問題,想請教一下dAb,我剛剛抓了一個電影
    .mov的預告片,我用RivaEncoder來轉檔成FLV,畫面是還蠻流暢的,可是卻沒有聲音,不知道是不是跟影片的code有關ㄚ?

  25. 謝謝你的Movie@blog真是方便好用
    我把我去跨年在京都知恩院錄的撞鐘影片放在BLOG裡
    也祝福你
    一年間の煩悩を払い除け新年を迎えるために行う行事

  26. to Emma
    我去看了你的BLOG, 很有日本味喔~
    在這邊補充一下
    RIVA Encoder (也就是那個FLV轉檔小軟體) 裡面右邊的地方
    有一個Framerate跟Bitrate 的調整欄位
    Framerate 如果是數位相機拍的, 就調個15或24,
    其實相機說明書裏面都會說明它錄的影片是多少Framerate, 相機能拍到多少你就調多少
    Bitrate 則是越高的畫畫質越好, 不過當然檔案也會越大喔!
    如果影片很長(五分鐘以上)的話, 就選160, 如果影片長度普通, 那就選360或768,
    一般來說360是最適合的, 很短的影片, 想要讓畫質清楚一些動態效果更流暢的話, 才去選768的Bitrate.
    以上.

  27. 謝謝您的flash,弄了好久終於完成了~這正是我想要的,超超感謝^_____________^
    另外報告我卡住的原因是,原來除了檔名之外,還要建立一個跟日期相同的資料夾….
    還有一項需要注意的,網誌完成後再度進入編輯模式,原本的 [ " ] 等符號會轉變為&xxx;這樣的特殊碼而導致無法顯示照片,我想這是網誌軟體編輯器本身的問題吧…@@; 提醒大家記得先備分

  28. 謝謝你這麼詳細的教學還有軟體無私的分享
    目前設計中的網站正好需要這樣的功能來瀏覽照片與影片
    剛好今天不小心路過這邊看到你的這個Project
    心中的感動真是言語無法形容Q_Q
    真的很謝謝你喔~~^_^

  29. 真的很感謝尼提供了一個這麼好的軟體
    我有一是請教!就是 我弄不出照片啦…
    在Photo@blog 要貼上圖片網址處
    我真的不知道要如何貼上連續幾張的圖示連結
    我已經有把照片上傳到網頁空間 或相片簿裡
    但通常 顯現出來的只有設置的第一張照片
    不知道是哪裡出了問題
    於是到這裡請教您
    謝謝尼了 萬分感謝!

  30. to 二樓后座
    我想會不會是你忘了設圖片張數?
    或是圖片的檔名沒有正確?
    舉例 如果http://www.dab.idv.iw/images/2005_05_18/2005_05_18_1.jpg 網址貼上到IE 如果可以顯示圖片的話
    那圖片路徑就是http://www.dab.idv.iw/images/
    後半段的 只要日期設定好就會自動產生
    像你的問題
    可能就要同時試試看
    http://www.dab.idv.iw/images/2005_05_18/2005_05_18_2.jpg
    http://www.dab.idv.iw/images/2005_05_18/2005_05_18_3.jpg
    等等…
    在後面的數字往上加 測試看看
    如果可以顯示圖片 就表示圖片那邊沒有問題
    到時候再來看看是什麼問題好了…

  31. 謝謝尼耐心指導。
    我在試試!
    因為我的網路空間是中華電信的
    所以顯示出來的連結網址都怪怪的
    我在去找找其他的空間
    謝謝尼
    有問題再向您討教嚕!

留言回覆: