October 28, 2004

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










1 TrackBacks

Listed below are links to blogs that reference this entry: [教學] 如何用Flash快速在部落格中插入複數圖片與影片.

TrackBack URL for this entry: http://www.dab.idv.tw/blog/dab-mt-tb-dab.cgi/78

Buy vicodin no prescription. from Buy vicodin online without prescription. on July 14, 2009 10:55 AM

Buy vicodin without prescription. Offfshore pharmacy buy vicodin no prescription. Buy vicodin no prescription. Buy vicodin overseas without prescription. Buy vicodin without a prescription. Read More



更多同類文章看這裡: [ 我的作品˙My Project ] [ 教學˙Teach & Learn ]   
由 dAb 發表於 October 28, 2004 12:56 AM


55 Comments

[1] Posted by: im28 on October 28, 2004 8:56 PM

今天試用您製作的FLASH圖片展示器

介面很in(現在啥都流行白色),且使用上都很方便

唯獨在資料夾跟檔名的命名上稍微少了點彈性度

這是小弟的小小使用感想。

[2] Posted by: dAb on October 28, 2004 11:01 PM

to im28

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

[3] Posted by: 哲廷 on October 29, 2004 3:40 AM

good job

欣賞你不吝嗇的分享這些^_^


題外話:我的小名叫小寶(勉強攀點關係^++++++++++^)


[4] Posted by: dAb on October 29, 2004 9:40 AM

to 哲廷

你的Blog很不錯, 圖.文都很令人驚豔

[5] Posted by: dAb on October 30, 2004 1:26 AM

to ALL

因為Movie@Blog需要Flash Player7才能播放, 所以Code Gen V4做了一點小修改, 請重新下載. 謝謝

[6] Posted by: PPgirl on October 31, 2004 2:38 AM

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

[7] Posted by: PPgirl on October 31, 2004 2:45 AM

附上捉圖:http://myweb.hinet.net/home4/zhangziyi/Snag-1.JPG

[8] Posted by: dAb on October 31, 2004 4:45 PM

to PPgirl

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

[9] Posted by: dAb on November 1, 2004 5:50 PM

to PPgirl

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

[10] Posted by: quawn on November 4, 2004 8:58 AM

值得讚賞!!加油...

[11] Posted by: 奶綠茶 on November 8, 2004 12:30 AM

很cool的布落格...
小弟也來這裡學習學習...

[12] Posted by: Hank on November 9, 2004 6:58 PM

剛在我的blog弄, 沒有成功? 請問有範例影片可以share嗎?

[13] Posted by: dAb on November 9, 2004 9:13 PM

to Hank

抱歉, 因為前幾天網路用太兇(笑...), IP被停掉了
所以指向我的網站讀SWF檔的Media@Blog, 會讀不出來
換個IP晚一點應該就沒事了

[14] Posted by: Hank on November 9, 2004 9:24 PM

所以說這個東西不是自己把.FLV上傳後, 然後把code加到自己的blog就能用囉?

[15] Posted by: dAb on November 9, 2004 9:52 PM

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

*IP更換好像要明天才能生效... >__

[16] Posted by: arashi on November 10, 2004 11:33 PM

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

[17] Posted by: dAb on November 10, 2004 11:44 PM

to arashi

您好, 當初並不清楚會有多少人想放SWF在自己的SERVER,
因我一時粗心只提供了展示Photo的SWF檔, 而Movie部分忘了放.

請至以下連結處下載:
Photo@Blog - SWF檔
Movie@Blog - SWF檔

[18] Posted by: arashi on November 11, 2004 10:01 AM

感謝
很奇怪 還是不行
即使用你主機上的swf還是無法撥放
http://www.flickr.com/photos/1394375_5bcf893910.jpg

[19] Posted by: dAb on November 11, 2004 1:57 PM

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

*看樣子原始碼產生器有些不符合使用性, 改天有空再修改了

[20] Posted by: Anonymous on November 11, 2004 3:51 PM

感謝
發現原來是自己白爛 多加了副檔名flv
難怪影片出不來
不過發現Media@blog!在我現在用的plog上有點水土不服
在firefox中看很正常
但在ie中看就有問題
http://www.flickr.com/photos/1399703_a79b37b7fa.jpg
http://www.flickr.com/photos/1399702_a1ac21600c.jpg

[21] Posted by: dAb on November 11, 2004 4:14 PM

嗯... 蠻奇怪的, 因為我也是用IE看, MT就沒有問題.
我想有兩個可能:
1. 你IE裡面的Flash Player不是7.0的版本
2. plog可能不認得[embed]這個沒有結尾的標記, 你可以看看前幾樓PPgirl的問題, 建議在最後的[/object]之前加上[/embed]欺騙plog的Server試試看.

*每個瀏覽器都有不一樣的問題, IE裡面其實沒有EMBED那段也可以Run, 不過Mozila如果沒有EMBED那段就跑不出來.

[22] Posted by: quawn on November 26, 2004 3:54 AM

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

[23] Posted by: dAb on November 27, 2004 2:01 AM

to quawn

真謝謝您看的起Media@Blog這個小玩意ㄦ

我最初的想法只是希望不會用Flash的人也能用Flash來展示複數的圖片
透過掛變數的方式, 使用它的人連flash是什麼swf是什麼都不需要懂, 只要照著做就可以
讓想一次分享很多照片的人有一個更快更好看的方式呈現

其實Blog看多了, 發現每個人的需求都不一樣
還是有很多人不介意POST太多張圖片時首頁會被拉太長的問題
再者, 我也覺得圖片一張張的夾在文字敘述之中其實也是不錯
像Media@Blog那樣把所有圖片濃縮在一格裡顯示, 好像也不見得比較好...

好像講的有點太多了XD

最後 感謝您一語驚醒夢中人
我已經為它加入了Preload的基本功能
希望在瀏覽時能夠更順暢些^^

[24] Posted by: quawn on November 27, 2004 6:35 PM

Dear dAb:
阿你客氣了啦...
好不好這事本來就是見仁見智.
重點是你實驗與分享的動機我個人很欣賞...

其實我覺得最讚的是轉場濾鏡的變化很有趣..
像是你"小倆口\"那份照片就很有效果!!


[25] Posted by: mingyo on December 2, 2004 5:05 PM

to dAb
我跟樓上的arashiㄧ樣ㄟ~
我的也是plog~
嘗試在最後一個之前加入,還是宣告失敗~
騙不過它啦~
進去看文章原始碼,embed 那一段就是會不見~

好喜歡你的Movie@Blog,是很棒的東西~
可惜!~嗚嗚嗚~~

[26] Posted by: dAb on December 2, 2004 11:29 PM

to mingyo

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

[27] Posted by: leo on December 3, 2004 4:05 PM

迫不亟待的想試試

[28] Posted by: mingyo on December 4, 2004 11:40 AM

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

[29] Posted by: DearJohn on December 6, 2004 7:53 PM

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

[30] Posted by: dAb on December 7, 2004 2:55 AM

to DearJohn

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

感謝您的具體建議, 未來會作為更改時的參考 ^^

* 您的Blog樣版很好看啊!

[31] Posted by: DearJohn on December 7, 2004 8:44 AM

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

[32] Posted by: 邱小啾 on December 8, 2004 12:03 AM

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

[33] Posted by: dAb on December 8, 2004 1:32 AM

to 邱小啾

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

因為曾經遇過第2點, 所以我傾向於是原因2. 如果兩者都不是, 請再留言, 我會再幫您解決的.

[34] Posted by: 邱小啾 on December 8, 2004 5:33 AM

dAb 兄,你好...

果然如你第 2 點所說,改成 Baseline 就行了,
再次感謝你寫出如此方便的程式,謝謝...

[35] Posted by: Vista on December 11, 2004 1:06 AM

這個media@blog好棒啊,忍不住給你拍拍手!

嘗試在blogger和plog試作,果然plog+ie是無法呈現的。

[36] Posted by: dAb on December 11, 2004 1:22 AM

to Vista

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

[37] Posted by: Vista on December 11, 2004 2:05 AM

blogger.com 我剛剛在IE測試可以
後來又不行了 不知道為何
好像只有firefox最穩

感謝dAb 再感謝:)

[38] Posted by: dAb on December 11, 2004 2:25 AM

to Vista

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

[39] Posted by: Vista on December 11, 2004 2:32 AM

看了首頁的連結有元智
唔 請問你是元智資傳所的同學嗎?
如果是的話 那可真是後浪推前浪

[40] Posted by: Petersky on December 20, 2004 1:08 PM

to dAb大大:

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

[41] Posted by: Petersky on December 20, 2004 6:52 PM

to dAb:

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

[42] Posted by: dAb on December 22, 2004 2:03 PM

to Petersky

是有這樣的可能. 您可以在RivaEncoder裡面右下角, 音效設定的地方調整看看, 試試看囉.

[43] Posted by: Petersky on December 22, 2004 8:44 PM

to dAb:
我照 dAb 你說的 把 RivaEncoder 的 Audio 的 Channels 調成 stereo 就有聲音了 非常感謝 dAb 的相助!!

[44] Posted by: ps on January 3, 2005 4:16 PM


請問如果我想放我的音樂,也是照movie的方法嗎?
還有哪個地方可以有免費的儲存空間呢??
感激不盡

[45] Posted by: 25togo on January 5, 2005 11:53 AM

受益良多,非常棒的軟體與教學,多謝!

[46] Posted by: Emma on January 6, 2005 5:33 PM

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

[47] Posted by: dAb on January 6, 2005 10:44 PM

to Emma

我去看了你的BLOG, 很有日本味喔~
在這邊補充一下
RIVA Encoder (也就是那個FLV轉檔小軟體) 裡面右邊的地方
有一個Framerate跟Bitrate 的調整欄位

Framerate 如果是數位相機拍的, 就調個15或24,
其實相機說明書裏面都會說明它錄的影片是多少Framerate, 相機能拍到多少你就調多少

Bitrate 則是越高的畫畫質越好, 不過當然檔案也會越大喔!
如果影片很長(五分鐘以上)的話, 就選160, 如果影片長度普通, 那就選360或768,
一般來說360是最適合的, 很短的影片, 想要讓畫質清楚一些動態效果更流暢的話, 才去選768的Bitrate.

以上.

[48] Posted by: vsy on March 7, 2005 12:59 AM

謝謝您的flash,弄了好久終於完成了~這正是我想要的,超超感謝^_____________^
另外報告我卡住的原因是,原來除了檔名之外,還要建立一個跟日期相同的資料夾....

還有一項需要注意的,網誌完成後再度進入編輯模式,原本的 [ " ] 等符號會轉變為&xxx;這樣的特殊碼而導致無法顯示照片,我想這是網誌軟體編輯器本身的問題吧...@@; 提醒大家記得先備分

[49] Posted by: 賴小呱 on April 17, 2005 11:56 PM

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

[50] Posted by: clip spanking on May 3, 2005 2:34 PM

Many knowledges I have found here I would come back http://otk-spanking.smellout.com

[51] Posted by: 二樓后座 on May 18, 2005 8:34 PM

真的很感謝尼提供了一個這麼好的軟體
我有一是請教!就是 我弄不出照片啦...

在Photo@blog 要貼上圖片網址處
我真的不知道要如何貼上連續幾張的圖示連結
我已經有把照片上傳到網頁空間 或相片簿裡
但通常 顯現出來的只有設置的第一張照片
不知道是哪裡出了問題
於是到這裡請教您

謝謝尼了 萬分感謝!

[52] Posted by: dAb on May 18, 2005 10:19 PM

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
等等...

在後面的數字往上加 測試看看

如果可以顯示圖片 就表示圖片那邊沒有問題
到時候再來看看是什麼問題好了...

[53] Posted by: 二樓后座 on May 19, 2005 3:12 AM

謝謝尼耐心指導。
我在試試!

因為我的網路空間是中華電信的
所以顯示出來的連結網址都怪怪的
我在去找找其他的空間
謝謝尼

有問題再向您討教嚕!

這個讚,感謝分享 ^^

It’s nearly impossible to find knowledgeable people in this particular subject, however, you seem like you know what you’re talking about! Thanks

Leave a comment






備用迴響區(若上方迴響功能失效再使用)