分類
我的作品˙My Project 教學˙Teach & Learn

[教學] 如何用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快速在部落格中插入複數圖片與影片
—————————————————————————————————-

作者: dAb

葛如鈞。1981年生於臺北,台灣大學資工博士,奇點大學見證者,前瞻科技傳教士,現任職於台北科技大學互動設計系 專任助理教授。

在〈[教學] 如何用Flash快速在部落格中插入複數圖片與影片〉中有 55 則留言

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

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

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

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

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

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

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
*看樣子原始碼產生器有些不符合使用性, 改天有空再修改了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
等等…
在後面的數字往上加 測試看看
如果可以顯示圖片 就表示圖片那邊沒有問題
到時候再來看看是什麼問題好了…

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

留言回覆: