【製圖幫助】基本音畫貼的製作（五）

來源: smallguy 於 2012-10-10 23:03:41 [檔案] [博客] [舊帖] [給我悄悄話] 閱讀數 : (7229 bytes)

本文內容已被 [ smallguy ] 在 2012-10-14 19:06:37 編輯過。如有問題，請報告版主或論壇管理刪除.

【製圖幫助】基本音畫貼的製作（五）

前麵幾節講的都是用圖片打底，也就是用圖片做背景的製貼方法。
這節主要講用flash檔（或者swf文件）做背景的帖子的做法，以及如何為之添加播放器和素材。

1.flash檔做背景。

用flash檔做背景的代碼有所不同，示例如下：

代碼：

<center>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td>
<embed src="http://space.wenxuecity.com/media/201209/29/1348929628.swf" width="1000" height="700"
type="application/x-shockwave-flash" border="0" quality="high" wmode="transparent"></embed>
</td></tr></table></center>

這裏麵的http://space.wenxuecity.com/media/201209/29/1348929628.swf就是一個flash文件，在這裏用做了背景。

接著就要添置播放器和flash素材了。

2.使用div為帖子謀篇布局。

我們用前一講裏用到的div來先給布局，為後來的各種素材的添加創造良好條件和環境。

<DIV style="LEFT: 0px; POSITION: relative; TOP: 0px;">

（這中間添加代碼，引入各種素材，包括播放器、flash素材、文字等。
每一個素材都由前置<div>開始，以後置</div>結束，且一次添加一個素材。）

</DIV>

和前麵講過的圖片打底時一樣，這裏的LEFT和TOP都設置為0。
不同的是，上次的LEFT和TOP歸0時，x,y(0,0)坐標定在了圖片的左上角，也就是圖片左邊起始為0，頂部起始也為0。
而這次flash打底後的同樣設置，x,y(0,0)坐標卻是在flash圖檔的左下角，flash圖檔的左邊起始還是0，頂部起始不再是0，而是圖檔的底部。

有圖為例（為便於比較，使用了同一張圖片）：

和上節一樣，圖檔橫向的x坐標，從左到右，數字依次增大，這和數學裏講的x坐標相似。
而和上節不一樣的，縱向的y坐標，從底部向上，數字依次由0開始，-50，-100，-150，-200，依次遞減。
有點confusing哈。其實我們不妨先把負數想象成正數，把它看成，圖檔左下角是起算點。這樣來添加素材時，就不會搞暈了。
（其實，三年前發現並開始使用這種設置時，使用圖片打底的帖子，需要為帖子添置播放器和素材時，遭遇到的正是這種情形。）

3.添加播放器。

我把播放器的大小設置成寬200px，高度80px隻顯示一個曲名的樣式，想把它擱置在帖子的底部中間的位置。

該怎麽計算出位置呢？

flash圖檔寬為1000，player寬為200，1000-200=800，800再除以2，就是400，兩邊留出的空位。這樣，LEFT的數值就是400了。
高的設置就是另外一種算法了。
這裏，這裏的TOP就是圖檔的底邊，其相對於圖檔的下麵空餘部分就是TOP。
從上麵的圖例可以看出，數字是從小到大（且不管負號），我的播放器的高度是80，擺放在底部，80就是它的高度了。
考慮到圖檔底部有書頁的陰影，高約不到10px，我把高度加多10，變成90。
然後加上這個負號（-），這就得出了TOP為-90這個數值，填入。

<DIV style="Z-INDEX: 1; LEFT: 400px; POSITION: absolute; TOP: -90px;">
<embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://space.wenxuecity.com/media/201208/27/1346120689.swf" width="200" height="80"
type="application/x-shockwave-flash" menu="false" quality="high"
flashvars="&config=http://space.wenxuecity.com/media/201209/29/1348929685.xml&file=http://space.wenxuecity.com/media/201209/29/1348929725.xml"
wmode="transparent" border="0"></embed>
</DIV>

4.添加flash素材。

添加的是一個花絮的flash素材。寬和高分別設置為600和450，也就是它的大小。
我把它放置在中間、靠底部的位置。
位置的計算：
寬：圖片1000，flash素材600。1000-600=400，在除以2，得出200。這樣LEFT的數值就是200。
因為是擱置底部，所以素材的450px就是它的高了，加上一個負號，賦予TOP"-450px“這個數值。

<DIV style="Z-INDEX: 1; LEFT: 200px; POSITION: absolute; TOP: -450px;">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://space.wenxuecity.com/media/201210/09/1349829537.swf" width="600" height="450"
type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed>
</DIV>

5.完整代碼和效果圖。

把播放器、flash素材的代碼填入一開始介紹的代碼中：

<center>
<table cellspacing=0 cellpadding=0 border=0>
<tr><td>
<embed src="http://space.wenxuecity.com/media/201209/29/1348929628.swf" width="1000" height="700"
type="application/x-shockwave-flash" border="0" quality="high" wmode="transparent"></embed>
<DIV style="LEFT: 0px; POSITION: relative; TOP: 0px;">

<DIV style="Z-INDEX: 1; LEFT: 400px; POSITION: absolute; TOP: -90px;">
<embed name="mp3player" pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://space.wenxuecity.com/media/201208/27/1346120689.swf" width="200" height="80"
type="application/x-shockwave-flash" menu="false" quality="high"
flashvars="&config=http://space.wenxuecity.com/media/201209/29/1348929685.xml&file=http://space.wenxuecity.com/media/201209/29/1348929725.xml"
wmode="transparent" border="0"></embed>
</DIV>

<DIV style="Z-INDEX: 1; LEFT: 200px; POSITION: absolute; TOP: -450px;">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer"
src="http://space.wenxuecity.com/media/201210/09/1349829537.swf" width="600" height="450"
type="application/x-shockwave-flash" wmode="transparent" quality="high"></embed>
</DIV>

</DIV>
</td></tr></table></center><br><br>

效果圖：