透明FLASH的使用方法（一）

--相对定位--

FLASH原本是制作动画的一款软件，现在成了“动画”的代名字了。本文所指的只局限于背景透明的文件类型为swf的FLASH动画。

由于背景是透明的，它可以用来装饰博客的内容，既不影响内容的完整显示，又能使博客生动、 活泼。应用透明FLASH，相当于在以内容作底，在上面覆盖一层透明的图案。这样浏览器要在同一个位置，显示两“层”：底和面。如果这“底”仅仅是一张照片，那么最简单的方法，也就是将“底图”作为“背景”，再在背景上作文贴画。轻松地实现了两层。我们在“音画边框”内写文字，贴照片，就是使用这种方法。下面的示例就是将“天空云彩”图作为背景，上面布置了花鸟、蜻蜓、蝴蝶三个透明FLASH。透明FLASH的显示并不复杂，在“欣赏透明FLASH的方法”一文中已提供了使用embed标签的HTML源代码。比较难掌握的是安排这透明FLASH图的位置和大小。现以下面示例中的“蝴蝶”图来介绍相对定位的方法。

说明（2015年）：这只适应于IE6及以下的浏览器，如用IE7及以上的浏览器请开启“兼容性视图”功能。

先用上篇介绍的源代码，将底图地址插入备用的background后面的双引号内、拷贝embed标签成三个，并分别置换花鸟、蝴蝶、蜻蜓三个FLASH地址（按次序）。

下面是一个背景图及三个FLASH的地址：

天空  http://www.oldkids.cn/uploads/diary/201007/28142528170.jpg

花鸟  http://img2.oldkids.cn/upload/12000/u11139/2012/11/29/blog_20121129213717587148.swf

蝴蝶  http://img4.oldkids.cn/upload/12000/u11139/2012/11/29/blog_20121129213515323590.swf

蜻蜓  http://img4.oldkids.cn/upload/12000/u11139/2015/09/10/blog_20150910171414932503.swf

现在做控制蝴蝶的尺寸，及调整位置使其位于花芯内。

在这显示蝴蝶的embed标签内，加入如下行内样式语言的设置：

Style="position:relative;left:0px;top:0px;width:500px;height:375px;"

它们的解释是：

position:relative;

--对蝴蝶图作相对定位。

left:0px;top:0px;

--与坐标原点的左偏移及顶偏移。先 暂设为0。

width:500px;height:375px;

--蝴蝶图的尺寸大小，暂设成原来的数据。

先不管蝴蝶的位置，通过减小蝴蝶图的尺寸，缩小蝴蝶达到满意的程度（上面示例是Width:300;Height:225;）。再设置相对定位的左偏移量及顶偏移量，使蝴蝶正好落在花芯上。左偏移量可以理解为：蝴蝶图的左边线与相对“原点”的偏移（X方向，→ 向右为正） ；顶偏移量是蝴蝶图的顶边与相对“原点”的偏移（Y方向，↓ 向下为正）。上面的示例是left=0；top=95；在上例中，坐标原点的位置是底图的左上角。（偏移量也可以设置成负数）

这样，style的设置如下：

Style="position:relative;top:95;left:0;width:300px;height:225px;"

请注意，蝴蝶图的宽和高，既在style里设置了，原来在embed内的设置可以删除。其实在style里的设置有较高的优先级。也就是说，两处同时设置，浏览器只用style里的数据。这样，这个显示蝴蝶FLASH的embed标签改成如下。

再仔细地看图，会发现那个“蜻蜓”在飞到“蝴蝶”处时，它似乎在蝴蝶下飞，说明蝴蝶图叠在蜻蜓图上。这是由于中间的蝴蝶图设置了行内样式后，他的显示被“优先”了。解决的方法是在蜻蜓图的embed标签里也设置样式，但是XY偏移量均为0。

下面附录里是上面示例的实际源代码。

这种利用background背景层作为底层，上面覆盖透明层，以达到分两层显示的目的，方便实用。而且这底图与FLASH的位置是“相对定位”的，相互之间有固定的位置关系（蝴蝶总在花芯上）。因此特别适合只有一张照片而无须在上面书写文字的情况。

它的局限主要是两点：

1.透明FLASH占据了原来用于文本的“层”，因此，不能再在图上书写文字说明。

2.用作背景的图，一定是图片的实际大小，不能像《img》标签，可以用width和height来改变图片的大小。