【制图帮助】基本音画贴的制作（五）

来源: 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>

效果图：