石頭製貼講座之二(Flash定位及模版二號)
文章來源: songofspring2010-08-12 07:17:52
石頭製貼講座之二(Flash定位及模版二號) 2009-06-03 23:20:16


自從第一次講座發出後,同學們反響強烈,尤其讓本班高興的是已經有同學開始使用模版一號,製作的貼子像摸像樣,非常棒!希望大家繼續努力。
也有的同學反映講座內容深奧看不懂,無奈本班水平實在有限,自我感覺已經用了最通俗易懂的語言來解釋HTML語法了。如果還是看著費勁,就拷貝模版code再換成你自己的圖片什麽的就行了,別的也不用多研究。

今天的這一講非常的重要,請同學們做好筆記哈。為什麽呢,因為不但俺的很多貼子都是用這個模版做的,還有很多的大腕的貼子也是這個版。這個模版可謂是放之四海而皆準的毛選級別的模版,就作為模版石頭二號(其實也是從師傅那裏偷來的,嘿嘿)。會用了這個版,你以後就所向無敵了。
本貼子歌曲錄音的時候話筒有問題,所以很難聽又沒有時間重錄了,希望大家把上麵貼子的音樂播放器關掉,專心學習。

貼子的構思:
首先根據歌詞內容找了一張這樣的照片,有些網友也曾經用過這個圖。一大輪金黃圓月,有神秘的河流和山川,就像夢境。正體現了歌詞裏描寫的意境。
同樣寫好歌詞,調整大小,上傳得到圖片鏈接。注意寫歌詞的時候要讓歌詞清楚一些,不然看著費勁。這個圖片的大小是750X563
圖片地址:http://i42.tinypic.com/2cr3dkp.jpg

寫好歌詞後,我想再加上以下flash來強調主題:
1) 霧蒙蒙的飄動的雲霧,進一步體現夢幻效果。
http://podmedia.imhb.cn/uploadpodmedia/2008/7/6/20080706135757_68639.swf
2) 天空比較單薄,加上了一顆伴月星閃亮。
http://www.leiyu668.com/flash/transparent1/starlight/014.swf
3) 河灣的流水要體現動感,我以後會單獨講水波紋的製作,但現在就靠這個flash來體現:
http://imgfree.21cn.com/free/flash/137.swf
原料都有了就可以做了,顯然把這幾個flash定位在自己想要的位置非常重要。所以就需要一些定位語句來給flash模塊定位。首先第一句開頭是這樣的:


center: 就是要把貼子放在中間位置顯示,這上次講了
table: 現在要開始一個表單來做貼子,和上次不同的是這次要嵌套表單,後麵還會再有一個表單套在這一層裏。
tr: 開始表單內的行
td: 開始行的內容
div 的概念說起來會很複雜,你隻要記住它的意思是開是一個模塊就行了,模塊是什麽呢,它可以是一個圖片,歌曲播放器,flash,或什麽別的東西。隻要定義在div和/div之內的東西都屬於這一個模塊。
這第一句的div一句非常重要,有時候會看到一些網友的貼子,flash的位置不對,不在貼子裏麵。有的貼子在IE裏看得好好的,到了firefox看就不對了。或者flash不對或者播放器位置不對,都是因為位置沒搞好。這句話就是說以下的這一個模塊都相對於最左上角的0X0這個位置而定,後邊的所有flash都要“絕對”的定位於這個模塊之內。這樣就不會出現位置差錯了。不管是瀏覽器是IE也好還是firefox,都不會位置不對。另外你還可以靠Z-INDEX來實現flash模塊的層疊顯示,這個以後再講。


你看又一個table開始了,是嵌套在前麵的表單裏的。這句話定義了整個貼子的大小,因為我的圖片像素是750X563的,所以簡單起見貼子的高度寬度也設置成同樣大小。
邊框顏色寬度我第一課已經講過了。
cellpadding是30,就是說下一個模塊(播放器)到邊框的距離是30,這個距離可以調整任意大小。



這句話定義了播放器的格式和位置
上節課講過valign和align, 所以可以看出來,播放器是被放在了下麵靠左的位置,但是會留出離邊框30像素的距離(由前麵的padding決定)。
style="FILTER: Xray" 定義的是播放器的外觀,顧名思義x射線就是把播放器顯示成黑色透明狀的,就像醫院裏照出來的X光透視片的感覺。但是這個命令在不同版本的瀏覽器裏看效果是不同的。
播放格式是mpeg,是一種比較普通的播放格式,IE和firefox都能聽得見。注意這個播放格式和第一節課的realplayer播放格式不一樣。
loop播放循環是1,就是說放一次,如果是loop="true" 就是無限循環,不停的放。
至此大table裏的小table就結束了,所以要加上/td/tr/table.



這個單元是定義第一個flash動畫:雲霧效果
在開始的style的地方,我就定位了flash的具體位置,我讓它在最左邊5個像素開始,上麵也留下5個像素的空間。為什麽呢,因為我不想讓這個雲霧飄到邊框上去,讓flash控製在貼子範圍之內。注意position是絕對absolute,不是相對,是讓本單元顯示的內容把位置定位於第二句的開始點。
flash的寬度和高度是740x500,740=圖寬度750-邊框5X2=750-10=740
500的高度是讓雲霧能覆蓋畫麵大部分地方。


這個單元是定義伴月星的flash, 我想讓這個星星顯示在貼子右上方天空處。它的位置是從上麵數負50,隻有是負數才能讓這個flash顯示在比較靠上的位置。



這個單元是定義水波紋的動畫效果。它的位置大小也是通過這四個數值來設定的(左右寬高)。變量就是這個四個數字和flash鏈接。



又一個同樣的水波紋,隻不過大一些400X400 放在河道寬的地方。
貼子快做完了,注意這些flash動畫的單元都是一個模式,隻是更換4個變量來改變他們的大小和位置,所以理論上你可以想放多少個flash都可以,多了隻不過顯示起來會慢一些。


結尾句:

對應開始第一句,這樣就結束了這個貼子。

掌握了這個模版,會自如運用了,你就差不多可以畢業了。以後的一些技巧都可以在這個基礎上加。
還是那句話,HTML語言隻是工具,貼子做得好不好取決於選圖flash是不是恰當,好看,字體做的是不是漂亮,等等。所以大家應該多在選圖作圖上下功夫。
[打印]