1. 文学城
  2. [music]

【制图帮助】基本音画贴的制作（五） smallguy2012-10-11 07:03:41

smallguy2012-10-11 07:03:41

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

前面几节讲的都是用图片打底，也就是用图片做背景的制贴方法。
这节主要讲用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>

效果图：





闽姑2012-10-11 13:48:44
Wow,都到第(五)了.赶紧补前面的课.原来你就是大雅,呵呵~~问好雅雅!
229712012-10-11 14:17:36
边听琵琶悦耳声，边学习制帖，我这笨人慢慢学吧，学好无涯，哈哈
guyucaoming2012-10-11 15:50:27
回复：【制图帮助】基本音画贴的制作（五）
碧云天2012-10-11 18:27:20
so nice!
片片红叶2012-10-11 19:03:10
问候为快递勤勤恳恳的雅雅,估计这是快递有史以来最完整的制帖教程了!
smallguy2012-10-11 19:58:16
哇，丽丽这个建议好：））
smallguy2012-10-11 20:07:26
那，另外两个还劳烦老班长给出好题目：））
舒畅2012-10-11 20:24:24
标明内容的建议好，一目了然，收藏制贴帮助慢慢学，谢谢。
片片红叶2012-10-11 20:32:25
园园和雅雅看看合适不合适:)
yy8882012-10-11 20:40:36
好的，谢谢丽丽好主意，我刚刚看见，等雅雅全发完了，我一起改！
片片红叶2012-10-11 20:53:27
高兴雅雅喜欢这个建议,园园就可以改:)
smallguy2012-10-11 21:42:38
very good:))
AriesKnight2012-10-11 22:25:16
支持一下！以后偶有空也来做点力所能及的好事：）
yy8882012-10-12 03:56:09
******收入论坛帮助“教你如何制作音乐贴子的程序。。。”
smallguy2012-10-12 05:42:55
回复：回复：【制图帮助】基本音画贴的制作（五）
小声音2012-10-12 07:02:12
再谢热心助人的雅雅精彩的制贴经验分享：））
旧燕归来2012-10-12 19:30:53
谢谢楼主辛苦教导，看的有点晕，要慢慢消化
继续阅读
【新世纪提琴】David Garrett -《Encore》Xiaokanshijie   2012-10-11 06:52:38秋去秋来springbank   2012-10-11 05:41:12【前方 · --- 喜欢的一曲5版纯乐】弓尒   2012-10-10 21:10:13【制图帮助】基本音画贴的制作 - 大汇总smallguy   2012-10-10 17:10:49Foo Fighters: Live At Wembley StadiumnWAY   2012-10-10 16:25:02【羽泉的歌】- 世界因你而美丽无情有义   2012-10-10 16:18:20【制图帮助】基本音画贴的制作（四 下）smallguy   2012-10-10 16:17:13【制图帮助】基本音画贴的制作（四 上）smallguy   2012-10-10 15:42:24Exit Music / Radioheadwangyuan   2012-10-10 04:36:10不知道别人也觉得沙哑的声音性感大财主   2012-10-09 20:49:48
同作者
【纯音本色】吉它、小号、口哨三CD连播smallguy   2013-10-12 03:10:56【纯音本色】吉它、小号、口哨三CD连播smallguy   2013-10-12 03:10:00【怀旧经典·浪漫温馨】双钢琴演奏的轻音乐CD4/CD5/CD6合集smallguy   2013-10-06 04:10:34【怀旧经典·浪漫温馨】双钢琴演奏的轻音乐CD4/CD5/CD6合集smallguy   2013-10-06 04:10:29【夏日休闲·美食飘香】美味茄子的十五种做法smallguy   2013-08-07 02:47:09【夏日休闲·美食飘香】9道豆腐的做法smallguy   2013-08-04 19:07:30【夏日休闲·美食飘香】黄瓜的11种做法，简单又好吃！smallguy   2013-08-03 02:56:2842张背景渐隐Bokeh照片(300DPI)smallguy   2013-07-31 18:01:11【夏日休闲· 放松心情】浪漫弦乐曲 CD 1 and CD 2smallguy   2013-07-31 03:20:52【夏日休闲· 放松心情】浪漫弦乐曲 CD 1 and CD 2smallguy   2013-07-31 03:20:02