个人资料
正文

石头制贴讲座之二(Flash定位及模版二号)

(2009-06-05 16:09:36) 下一个


自从第一次讲座发出后,同学们反响强烈,尤其让本班高兴的是已经有同学开始使用模版一号,制作的贴子像摸像样,非常棒!希望大家继续努力。
也有的同学反映讲座内容深奥看不懂,无奈本班水平实在有限,自我感觉已经用了最通俗易懂的语言来解释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是不是恰当,好看,字体做的是不是漂亮,等等。所以大家应该多在选图作图上下功夫。