俺的貼子是怎樣糊起來的 by 玉米糊

送交者: 玉米糊 2007年11月09日19:08:29 於 [高山流水]http://www.bbsland.com

回 答: 貼圖的簡單基本製作【網上講座 】 現在開始! 主講人玉米糊 由 子敬 於 2007年11月09日19:03:30:

又要考試了,還好是開卷的,而且允許找人幫忙.所以俺先把俺的師傅們請出來上座,萬一俺要不會回答的問題,請你們一定要幫俺回答啊,不然俺就要點名啦:)) 師傅們在這裏(排名不分先後,偷他們的貼也記不清先後了:)):小聲音,水雲間,小扇子,聆歌,印夏,以夢,小九,大馬大哈,柳影,風在吹,藍色小魚兒,海 石,xlbr,玉蘭,荷葉,小燕子,朦朦雨,無墨,金花,碗叮當,Maggie,樂歌,網絡劇場.....還有城裏的神探,天涯望月,黎叔,Autumn,豆豆....等等做貼大碗,名字一時也記不全了, 他們有是CODE高手,有得是做FLASH,做小電影的專家,還有PHOTOSHOP做圖,繪畫的專家... 師傅們都坐好了,現在可以開始了. ********************************************** http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou1.mp3 前一陣子中部同學從國內回來,非常懷念美好的FB時光,就做了個MTV(據他說有些真人獸,不方便貼出來),讓俺幫著唱了這首"朋友幹杯",我就用這首歌做個貼子,把每步過程都寫下來,盡量用到我所有的軟件工具,其實平常做貼時也不一定都用的到.其實工具用的多,不見得貼子就好看,這就是個證明:DD 1.選圖. 中部同學不喜歡原歌太過悲傷,把歌詞給改了,為了配合他改過的歌詞,我就用GOOGLE搜"幹杯朋友",找了張FB圖:)), 見圖: http://www.zhiji.com/uploadimages/blog_photo/2006/10/1/22320172.JPG 這張圖不夠大,不好直接在上麵寫歌詞.就用"光影魔術手"(多謝小九介紹給我這個軟件:http://neoimaging.download.it168.com/),給圖加了個框,多出一塊寫歌詞的地方, 見圖:http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou.jpg 2.用PHOTOSHOP寫歌詞.(網上可以下載這個軟件) 用PHOTOSHOP的寫字工具(T),在這張加工過的圖上寫上歌詞.(也可以在原始圖上寫).然後用圖層--圖層樣式--混合選項,給歌詞所在的圖層加工一下,添了點燈紅酒綠的色彩:)), 見圖:http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou2.jpg 3.用Sothink SWF Quicker給歌名做個簡單的FLASH(多謝神探介紹這個軟件,也可以網上下載) 打開軟件,先把背景設成300*100大小(不用太大,實際用的時候也可以放大),顏色選個和圖背景差不多的. 用文字工具(T),在背景上寫上歌名,再在Effect裏選擇一款動畫方式, 見圖: http://www.starlakeporch.net/upload/files/yumihu/SWF.JPG http://www.starlakeporch.net/upload/files/yumihu/flashganbei.JPG OK以後,字體的動畫就做好了. 如果希望在動畫的後麵留段空白的時間,可以在動畫結束後的FRAME裏用右鍵,insert blank key frame,再隔幾十個空格,insert key frame,就 可以了, 見圖 http://www.starlakeporch.net/upload/files/yumihu/flashganbei1.JPG 做好後用Export就可以保存這個小動畫了,並上傳到你的空間或山上: http://www.starlakeporch.net/upload/files/yumihu/ganbei.swf 在做動畫過程中,隨時可以用Export左邊一個綠色的三角符號工具,測試這個動畫,直到滿意為止. 用這個軟件也可以做些其他的簡單的FLASH,甚至FLASH小電影. 4.選擇現成的透明FLASH 到http://www.9941.cn/這個網站,雨雪火光部分,我選了另外兩個透明FLASH,用SWF Catcher(下載地址:http://www.sothinkmedia.com/swf-catcher- ie/)把它們保存在電腦裏,再上傳到山上: http://www.bbsland.org/upload_music/1627776.swf http://www.bbsland.org/upload_music/1628800.swf 5.到這個網站http://ghlp.igogo8.com/ghlp_more.html(從紅門那兒 學的),給"玉米糊唱"這幾個字做個小動畫圖片,一般生成GIF文件(有時也有png文件),先下載再上傳到自己的空間: http://www.starlakeporch.net/upload/files/yumihu/YMHC.png 6.把歌上傳到山上或其他空間: http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou1.mp3 7.用Office FrontPage(OFFICE軟件,和WORD,POWERPOINT一起的)來做貼,試貼(也可以在自己的博客試) 點擊文件--新建網頁--空白網頁,確定是在代碼頁麵,再把頁麵上本身帶的那些CODE全刪掉.(因為我們不需要做網頁,隻是做個貼子) 然後COPY以前一個差不多貼子的CODE,到代碼頁麵,為了便於修改,把這一整段連在一起的CODE,分成幾行,(在FrontPage裏分行不影響顯示) 見圖:http://www.starlakeporch.net/upload/files/yumihu/frontpage1.JPG 然後把裏麵的圖片,FLASH,歌曲地址,還有TABLE,FLASH的大小,換一下. 然後進入預覽頁麵,看貼子的效果,然後再回到代碼頁麵,修改FLASH,或小圖的位置.這樣來回修改直到滿意為止. 見圖:http://www.starlakeporch.net/upload/files/yumihu/frontpage.JPG 下麵是這個貼子的具體CODE,以及每一步的意義. 其實基本上,我一般做貼子都是按照這個格式來寫CODE的.不同的貼子會有不同的背景圖,不同的FLASH,也許會多一兩個FLASH..放FLASH的那段CODE也可以換成放播放器或文字..放播放器那兒也可以放FLASH....,但基本的框架不變. 見圖:http://www.starlakeporch.net/upload/files/yumihu/CODEshuoming.JPG 可以在下麵框內COPY這段CODE <center><table><tbody><tr><td><div style="LEFT: 0px; POSITION: relative; TOP: 0px"><table height="502" cellspacing="0" cellpadding="30" width="880" background="http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou2.jpg" border="0"><tbody><tr><td valign="bottom" align="right"><embed style="FILTER: alpha(opacity=100, finishopacity=0, style=2)invert()" onload="javascript:if(this.width>450) this.width=450" src="http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou1.mp3" width="80" height="30" type="audio/mpeg" autostart="1" loop="1" /></embed /></td></tr></tbody></table><div style="LEFT: 30px; POSITION: absolute; TOP: 40px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://www.starlakeporch.net/upload/files/yumihu/ganbei.swf" width="300" height="100" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></embed /></div><div style="LEFT: 298px; POSITION: absolute; TOP: 0px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://www.bbsland.org/upload_music/1627776.swf" width="120" height="120" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></embed /></div><div style="LEFT: 200px; POSITION: absolute; TOP: 120px"><embed onload="javascript:if(this.width>450) this.width=450" src="http://www.bbsland.org/upload_music/1628800.swf" width="500" height="400" type="application/x-shockwave-flash" wmode="transparent" quality="high" /></embed /></div><div style="LEFT: 450px; POSITION: absolute; TOP: 430px"><img style="FILTER: alpha(opacity=100, finishopacity=50, style=3)" onload="javascript:if(this.width>450) this.width=450" src="http://www.starlakeporch.net/upload/files/yumihu/YMHC.png" /></a /></div></div></td></tr></tbody></table><br /><a href="http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou1.mp3">http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou1.mp3</a></center> 8.在山上貼前要記得把CODE每句之間的空行回車都去掉,不然貼子會變型,拉長.如果在一句CODE裏多了回車,空行,那貼子裏有關那部分就不能正常顯示了.有時候歌曲或圖片的連接地址和引號之間多個空格,有些人的電腦就聽不到也看不到了.這個蠻重要的. ********************************** 有關這貼就講到這了.下麵我再說一下在山上如何把你所要的貼子CODE從頁麵的Source裏分離出來(如何偷別人的貼子CODE:)) 進入下麵這個頁麵 http://bbs2.creaders.net/music/messages/832252.html 用右鍵點擊頁麵的空白部分,再左擊view Source,可以看到有整個一頁的CODE.一般在頁麵的中間部分,找到有歌詞,或歌曲地址的那一整段連在一起的CODE(你也可以通過查找mp3或wma,來找到這段) . 去掉最前麵的和最後的兩小段CODE(高山網站自動加在每個貼子前後的,每貼加的都一樣,第二段的P有時會是br,有時沒有,把它們記住,記得去掉就行),剩下中間的一段應該就是了.如果COPY時多了些CODE,那再貼時,貼子就會變形了. 見圖:http://www.starlakeporch.net/upload/files/yumihu/weilaicode.JPG 如果你的電腦看CODE中的中文歌詞是亂碼,也沒關係, 你隻要上貼時把段亂碼換成正常的中文就行. 其實隻要把電腦控製麵版的語言設置version of the non-unicode也改成了中文,那麽當中文軟件,看中文CODE都不會有亂碼了. 如果點擊右鍵看不到Source,試試refresh頁麵,不要碰頁麵任何部分,直接在空白部分再試一遍. 如果還是不行,可以用鼠標把貼子部分塗黑,COPY,然後到FrontPage的設計頁麵(BUTTON和預覽,代碼在一起的),PASTE,然後可以在預覽頁麵看貼子效果,在代碼頁麵會發現貼子的CODE已經給帶過來了.隻不過前後會多出一些其他的CODE,和前麵一樣,要注意把它們去掉. 當然偷了別人的CODE,還得把裏麵的圖,歌,歌詞,FLASH,換成你自己的,就成一個新貼子了:)) ************************************* 有關做貼的幾個常見問答: 1.問:為什麽在我自己的博客和其他網站的貼子裏FLASH,播放器....的位置,和在高山上貼子裏的位置不一樣?為什麽在山上試貼正常,但在貼子前再加一段話,貼子就變形了? 答:各個網站允許的CODE不太一樣,有點差別,但主要原因是定位的時候隻用POSITION:ABSOLUTE造成的.或者雖然都有,但沒把Absolute定位的部分包含在Relative定位裏,就是/div的位置搞錯了. 精確固定位置要把POSITION:RELATIVE 和 POSITION:ABSOLUTE 合起來用,最好先用RELATIVE定好總TABLE或者DIV的位置, 比如table style="LEFT: 0px; POSITION: relative; TOP: 0px" height="502" cellspacing="0" cellpadding="30" width="880" background="http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou2.jpg" border="0" 或者分兩句div style="LEFT: 0px; POSITION: relative; TOP: 0px" 再接著 table height="502" cellspacing="0" cellpadding="30" width="880" background="http://www.starlakeporch.net/upload/files/yumihu/ganbeipengyou2.jpg" border="0" 然後再用ABSOLUTE定各個圖 ,文字,播放器的位置..比如 embed style="LEFT:1px; POSITION: absolute; HEIGHT: 520px" onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/1.swf" width="768" height="520" type="application/x-shockwave-flash" wmode="transparent" quality="high" 或者分兩句: div style="LEFT:1px; POSITION: absolute; HEIGHT: 520px" 然後 embed onload="javascript:if(this.width>450) this.width=450" src="http://imgfree.21cn.com/free/flash/1.swf" width="768" height="520" type="application/x-shockwave-flash" wmode="transparent" quality="high" 圖片也一樣,隻要用IMG STYLE=.....就行了 還不要忘了每個div要有/div才能合成完整的一句,這裏所有大於小於號都省略了. 隻用ABSOLUTE,位置會亂跑,如果前麵版麵的CODE中沒有RELATIVE設置,那它的位置其實是在整個版麵中的絕對位置... 而用FrontPage做貼子時,前麵是沒有和貼子內容無關的東西,而上貼的網站,在你貼子的上麵會有一堆其他的東西,各個網站還不一樣.所以位置 就變了. 如果隻用Relative,貼子本身也許看著蠻好,但貼子下部常常會多出一大段空白頁麵,去不掉.這是因為用Relative直接定位的東東,Table,圖,文字,FLASH....不管顯示時是不是和別的東西重疊,所占用的麵積是不會因重疊而去掉的.那段空白就是它們所占的實際麵積之和.. 2.問:為什麽貼子在不同的電腦上顯示不同,同樣的貼子會拉長變型,多出來一截? 或者在自己電腦上能看到全部歌詞,在別人的電腦上,歌詞顯示卻不完整? 答:如果貼子裏的歌詞不是直接寫在圖上(和圖一起成為一個圖片文件),而是用CODE寫在圖片背景上的,會有這種情況. IE頂上有一排BUTTON,View裏麵Text Size的大小影響字體的大小,從而影響貼子長短. 貼子字體用size=(1,2,3...)的會受影響;帖子字體用font-size:(12pt或者18px...)的就不會變. 例如:把font face="FZShuTi" color="#ffff00" size="3" 換成 font style="font-family:FZShuTi; color:#ffff00; font-size:12pt;WIDTH: 100%; LINE-HEIGHT: 120%" 字體就不會隨各人VIEW裏TEXT SIZE不同而不同了 我最近發現,即使字體大小保證不變了,但同一貼子(除了字體以外)在不同電腦上大小顯示還是有差別的. 所以就算用了上麵第二種CODE,在歌詞 比較多的時候,還是會造成貼子拉長現象,或歌詞缺失現象. 所以現在俺比較喜歡用PHOTOSHOP把歌詞寫在圖上,保存成圖片文件. 不過如果歌詞寫在圖或貼子的下麵,字後麵沒什麽背景圖片,就不用擔心這種問題.因為就算拉長一點,也不影響美觀. 3.問:怎樣把好幾張圖片一張接一張連續顯示? 答:有很多方法,我建議用現成的FLASH,做起來很簡單就到這個網站,把圖傳上去,選一種FLASH就行,圖先縮小到最後效果的大小.最後它會把CODE 給你,你隻要放在你的貼子中就行.記得把CODE中,最後/embed和/div之間的CODE去掉,是它加進去的廣告. http://www.picturetrail.com/photoFlick/samples/pflicks.shtml 例貼:http://bbs2.creaders.net/music/messages/799243.html(我上傳圖片的空間壞了,所以看不到背景圖片) 如果不想用FLASH,隻用CODE也可以,效果可能沒有FLASH的精彩.你隻要換圖片地址就行 第一種用marquee,圖片隻能左右,上下跑... 例貼:http://bbs2.creaders.net/music/messages/608799.html 第二種用控製時間的CODE,效果也不錯,在論壇貼沒問題,(從Maggie那兒學來的) http://www.transsiberiancool.com/template/template_tonghua.php? changebg=0&unset=0&changeflash=0&authenticated=1&action=add這個網站最近好象壞了:( 例貼:http://bbs2.creaders.net/music/messages/802491.html 以上貼子CODE都可以用前麵的方法,從貼子Source裏扣出來. 當然也可以幹脆用MOVIE MAKER或Photostory3做成小電影.. Photostory3下載地址: http://www.microsoft.com/windowsxp/using/digitalphotography/photostory/default.mspx 4.問:怎樣借用網上現成的小電影視頻? 答:http://bbs2.creaders.net/music/messages/751865.html http://bbs2.creaders.net/music/messages/752026.html *********************************************** 一些有用的連接: 雲清教你如何貼歌,貼圖和貼flash http://bbs2.creaders.net/articleReader.php? idx=117066 ==================================== 漂亮字體的地址:**最好在裝PHOTOSHOP之前裝,如果你的PHOTOSHOP是網上下載的,那再裝新字體,可能就不能寫字了,(不能初始化) http://www.sj00.com/sort/2_1.htm 上麵的字體文件下載解壓後的fft文件,直接COPY到你的C:WINDOWSFONTS下麵就行了 =========================== 我在山上有關FLASH的幾個貼子在這裏,貼歌指南裏有常用透明FLASH: 這裏有常用的透明FLASH地址!! http://bbs2.creaders.net/music/messages/600131.html 更多透明FLASH地址 http://bbs2.creaders.net/music/messages/708502.html 精美的不透明FLASH地址&直接在上麵加歌詞的CODE http://bbs2.creaders.net/music/messages/692489.html ============================= 最簡單加FLASH http://bbs2.creaders.net/music/messages/805469.html =========================== HTML 語言教程(我就是在這兒學的CODE的基本知識,可以重點看一下裏麵有關Table的部分) http://www.gzsums.edu.cn/webclass/html/html_design.html ============================== 關於碩思閃客之錘(Sothink SWF Quicker)軟件的詳細簡介：(下載地址:http://www.fzlyl.cn/193.htm 這個下載頁麵可能已經不存在了,可以 自己從網上重新GOOGLE一個) Sothink SWF Quicker 是一款功能完備簡單易用的Flash動畫製作軟件，具有美觀易用的用戶界麵，可以快速的製作出SWF動畫,程序默認具有4 個浮動的麵板,通過他們你可以對所製作的電影或者動畫中的屬性進行任意設置,從而製作出專業水準的動畫效果! 由 Sothink 公司所出的一款 功能完善卻簡單操作的 Flash 動畫製作軟件閃客之錘，您不須要購買昂貴的 Flash 動畫製作軟件便可自行製作出具有專業效果的 Flash 動畫 來。閃客之錘 -- 製作Flash動畫更快更容易。閃客之錘是一款全能型的Flash動畫製作工具，強大的功能讓你更快更容易的製作專業級Flash影 片。此外它還具有導入和修改SWF格式影片的功能，支持在沒有源文件的情況下對SWF影片進行編輯。閃客之錘擁有友好的環境和如下強大的功 能，可使用戶創建出豐富專業的動畫影片。 碩思閃客之錘(Sothink SWF Quicker) v2.6.70301 =================================== 還有一個做水波紋的軟件Sqirlz Water Reflections,很好用,從網上搜有很多下載地址 ==================================== 網頁素材,邊框CODE等等(好象是碗叮當告訴我的) http://xzc.2000y.net/mb/2/ReadNews.asp?NewsID=699993 ==================================== 下載PHOTOSHOP,記得先裝好漂亮字體,再裝PHOTOSHOP 我的版本是Photoshop CS2 v9.0,網上有很多下載地址.這裏有一個可以試試,是中文版的.得先把電腦設置成中文,不要忘了控製麵版裏麵語言advanced下麵 non-unicode也要是中文,這樣就不會有亂碼了. http://www.crsky.com/soft/5594.html這個地址好象也不行了,自己用GOOGLE搜吧 關鍵是安裝後要激活,這有個教激活的圖. http://i16.tinypic.com/53zur9g.gif ========================================== Autumn的博客,許多做貼的小竅門: http://blog.wenxuecity.com/blogview.php?date=200611&postID=36286 ================================================= 看完了以上的,如果你還有問題麽,現在可以問俺了 雖然用了這麽些軟件,其實隻知道些皮毛.和專家師傅們不能比.如果各位師傅覺得哪兒說的不對,也請指出來,不能讓俺在這兒誤人子弟...:)) **************申明:本文中提到的所有版權所有軟件,在試過試用版後,請購買正式軟件,畢竟試用版或多或少都有點缺陷.在所有下載頁麵,請仔細閱讀有關版權和下載的說明,出了問題,俺不負責.另外偷別人的CODE寫法,不是偷別人的貼子,別人經過加工設計過的圖片,FLASH,小電影等等,引用時最好注明出處.網上用別人的小電影視頻,也最好注明出處.如果本文牽涉到版權問題,必要時,請版主刪掉此貼.****************** -----嗯?怎麽聽著感覺象是此地無銀三百兩,賊喊捉賊啊......嘎嘎:))