飞龙博客

妙法莲华经

把非透明swf动画dreamweaver做成透明背景flash动画方法

feilong.org 修订于2009-11-19 06:36:35

  记录如何把非透明swf动画在dreamweaver做成透明flash动画方法。今天飞龙做公司网站,横幅广告条banners需处理成动画形式,但要求能简便地更换动画背景图片。如果每换一次背景图片都用flash8处理,那就太麻烦了,所以必须想办法做透明flash动画。思路是,把背景图片叠加在div层背景上;然后把透明flash动画插入该div层。

想到制作思路就寻解决方法。先在flash8里把已有背景图片层拿掉,但文件属性无法设置背景为透明,而alpha值只适合flash对象,不适合flash背景色。飞龙知道如果把flash动画转为gif格式(方法参考:http://feilong.org/swf-gif),那就和直接用带背景flash动画没啥区别,就不是飞龙这里谈到透明flash叠加在层背景上的做法。到底如何做透明flash动画呢?飞龙想看dreamweaver8里有没有把非透明swf动画dreamweaver做成透明背景flash动画方法。探索之路开始,此文修订地址:http://feilong.org/dreamweaver-transparent-flash-swf-background 。做个记录,供大家参考。

一 说干就干,先做一个div层,设置总高72和总宽780,在css样式里面设置层背景。代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何做透明flash第一步</title>
<style type="text/css">
<!--
#banner {height: 56px;width: 780px;background-image: url(http://e.jiaju99.com/efiles/jiaju99poem.jpg);}
-->
</style>
</head>
<body>
<div id="banner">此处即将插入透明flash动画</div>
</body>
</html>

二 直接插入去掉了背景图片层的非透明flash动画。id为banner的层里面“此处即将插入透明flash动画”文字变为:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="72">
<param name="movie" value="efiles/banner.swf">
<param name="quality" value="high">
<embed src="efiles/banner2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="72"></embed>
</object>

三 按F12在浏览器里面看效果,发现非透明flash动画把图片背景给遮住了。怎么办了?查看dereamweaver8帮助,找到这么一些资料:

设置 Flash 和 Shockwave 影片属性....若要查看所有 Flash SWF 文件属性,请单击属性检查器右下角的扩展箭头。
“名称”指定用来标识影片以进行脚本撰写的名称。在属性检查器最左侧的未标记文本框中输入名称。
“宽”和“高”以像素为单位指定影片的宽度和高度。
“文件”指定指向 Flash 或 Shockwave 文件的路径。
“源文件”指定 Flash 源文档 (FLA) 的路径..。
“编辑”允许您启动 Flash 以更新 FLA 文件..。
“重设大小”将选定影片返回到其初始大小。
“循环”,在选中该选项时影片将连续播放;
“自动播放”,如果选中该选项,则在加载页面时自动播放影片..。
“垂直边距”和“水平边距”指定影片上、下、左、右空白的像素数..。
“品质”在影片播放期间控制抗失真。设置越高,影片的观看效果就越好..。
“比例”确定影片如何适合在宽度和高度文本框中设置的尺寸。“默认值”显示整个影片。
“无边框”使影片适合设定的尺寸,因此无边框显示并维持原始的纵横比。
“严格匹配”对影片进行缩放以适合设定的尺寸,而不管纵横比如何。
“对齐”确定影片在页面上的对齐方式。有关每一对齐选项的说明,请参见对齐图像。
“背景颜色”指定影片区域的背景颜色。在不播放影片时(在加载时和在播放后)也显示此颜色。
“参数”打开一个对话框,可在其中输入传递给影片的附加参数。有关添加或删除参数的更多信息,请参见使用参数控制媒体对象。影片必须已设计好,可以接收这些附加参数。

四 咦,背景颜色改成黑色后,flash制作的原背景色变成黑色,看来可以用dreamweaver处理flash背景!但是很遗憾里面没有透明色。怎么办?dreamweaver怎么制作透明flash动画背景

五 看到最后,发现了一线新希望:参数”打开一个对话框,可在其中输入传递给影片的附加参数。有关添加或删除参数的更多信息,请参见使用参数控制媒体对象。哈哈,看有没有用参数来控制背景为透明色呢?飞龙知道这两行代码是默认状态下参数:
<param name="movie" value="efiles/banner.swf">
<param name="quality" value="high">

有没有用参数控制flash动画背景为透明色?“属性--参数”里没提示,只好找网上资料。发现这么一个参数:  <param name="wmode" value="transparent">    马上放里面看看?哈哈,终于把非透明的flash动画中dreamweaver里面设置成透明flash动画啦。ok~~

五 飞龙提供背景是透明的flash动画方法的最终代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何做透明flash方法步步寻</title>
<style type="text/css">
<!--
#banner {height: 56px;width: 780px;background-image: url(http://e.jiaju99.com/efiles/jiaju99poem.jpg);}
-->
</style>
</head>
<body>
<div id="banner">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="780" height="72">
<param name="movie" value="http://e.jiaju99.com/efiles/banner.swf">
<param name="quality" value="high"><param name="wmode" value="transparent">
<embed src="efiles/banner2.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="780" height="72"></embed>
</object>
</div>
</body>
</html>

六 效果预览参考:http://e.jiaju99.com/background-flash.htm

博主:飞龙.org
链接:http://feilong.org/dreamweaver-transparent-flash-swf-background
庭院 e页通:http://e.jiaju99.com 可加入收藏夹

更新网址:http://feilong.org/dreamweaver-transparent-flash-swf-background
最初发布:20081118 08:51:42 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 未分类

飞龙前端QQ群