青阁茶心

网站公告

欢迎来到青阁茶心网站


先有卞和慧眼识玉,

才有璞玉磨石成壁。

茶心苦涩遇水甘甜,

网络青阁知己而乐。

青阁茶心座右铭

如何Flash背景设为透明

发表时间:2015/01/05 00:00:00  来源:原创  作者:admin  浏览次数:1462  
字体大小: 【小】 【中】 【大】

    Flash比GIF动画要漂亮些,我们把它设为透明后,Flash的背面我们可以插入一些漂亮的图片与之搭配达到很漂亮的效果;或者仅仅在网页中加入透明的Flash,乱跑的Flash动画不会影响浏览者看你的博客。可吸引更多的人来拜访你哦~~当然不可不提的是,插入Flash也需谨慎,因为它会使网页加载速度明显变慢。透明Flash下载

(一)首先教大家最简单的插入Flash的代码,透明,无坐标控制:
注意wmode="transparent"是控制Flash是否透明显示的,如果不想让它显示为透明的,直接把wmode="transparent"去掉即可。


<EMBED height=60 pluginspage=http://www.macromedia.com/go/getflashplayer src=/UploadPic/2007-7/20077803153888.swf type=application/x-shockwave-flash width=468 wmode="transparent" quality="high"></EMBED>

(二)再教教大家加入绝对坐标的透明Flash,绝对坐标意味着不管你的窗口拉多大,那个Flash依然乖乖地在原地不动


<EMBED style="LEFT: 60px; WIDTH: 468px; POSITION: absolute; TOP: 200px; 
HEIGHT: 1000px" align=right src=/UploadPic/2007-7/20077803153888.swf width=568 height=60 type=application/octet-stream ;; quality="high" wmode="transparent">
(三)最后教教大家如何加入相对坐标的透明Flash,注意下面代码的table部分,这主要是使用表格作为容器,把Flash“装”到表格里,这样不管浏览者把浏览器拉多大,Flash永远和表格一起动。而且,表格可以设置背景图片,表格上面再放一个透明Flash与背景图片相配合,哇塞,效果好得不得了。

<table border="0" cellPadding="0" cellSpacing="0" width=600 height=382 align=center
 background=/book/ewebeditor/UploadFile/20051212165525581.jpg>  
<TD width=600 height=382><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer  
src=/UploadPic/2007-7/20077803153888.swf width="100%" height="100%"  
type=application/x-shockwave-flash wmode="transparent"  
quality="high"></EMBED></TD></td></table>


效果是不是酷?当然很酷了,它其实有时候比flash的动画效果还要好,建议大家以后在网页中如果放动画的话采用这种形式,通过演示页面大家其实已经看到了最终效果是通过一张背景图片和一个flash动画结合而成的,这对于维护来说是很方便的,只要把背景图片更新就可以了,flash可以不动它的。

实现方法如下:

基于网页排版的实现方法

你可以先准备好一张图片和一个适合做透明效果的flash,然后打开Dreamweaver中新建一个网页,插入一个一行一列的单元格,单元格的规格大小和事先准备好的图片宽高一样,然后把这个图片设为单元格的背景图片,设置完了后,在这个单元格中插入准备好的flash了,其中flash的大小规格也应该调成和单元格一样大小。用鼠标选中flash后,把网页编辑状态由“设计”切换到“代码中,你会看到flash部分在源代码中都变成了黑色了,代码实例如下:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="470" height="180">
<param name="movie" value="0.swf">
<param name="quality" value="high">
<embed src="0.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="470" height="180"></embed>
</object>

在以上代码中插入这么一段代码:<param name="wmode" value="transparent">,完整代码如下:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="470" height="180">
<param name="movie" value="0.swf">
<param name="wmode" value="transparent">
<param name="quality" value="high">
<embed src="0.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="470" height="180"></embed>
</object>

基于CSS排版 把核心思想把握,在有背景图片的div标签中再插入flash,然后对flash部分加入以上代码就行了。
  b6s p,a:8\m5vm [ 本 资 料 来 源 于 贵 州 学 习 网 网页设计Flash教程 http://Www.gzU521.com ] b6s p,a:8\m5vm
 
我们经常收到一些初学网业制作的网友提出的问题,很多问题其实很简单,只要动脑筋想一想就可以解决了,但有的网友不喜欢多思考,一遇到问题想都不想就直接去问别人,这种学习方法可不太好。而本文的作者学到一种技巧后,他发现这种技巧在两种环境下显示的结果不同,这个时候比较两种环境中产生的源代码的区别无疑是解决问题最好的方法!他也正是这样做的,并最终解决了问题。本文涉及的问题并不算太难,但作者发现问题、解决问题的思路却很值得我们学习!
  首先忠心感谢凌宇5942给我的帮助!在他的启迪下我发现了另一种实现flash透明背景的办法,愿与大家共同探讨
  凌宇5942告知的解决办法:在flash的html发布选项中选windows mode/transparent windowless,发布为html,插入网页就可以得到透明的flash的效果。
  不错,照这样的办法去做,便可以发布出带有透明flash的html页。但是它存在一个问题:所发布的flash动画只在与其同时发布的html页中显示透明效果,而如果用dreamweaver新建一个文件,再将其插入页面中,保存-->>f12预览我们会发现它又是不透明的了!这是怎么回事呢?
  我仔细比较了用flash发布的html页和用dreamweaver制作的带有flash 动画的两个html页的源代码:
  1.用flash发布的html页源代码:
<html>
<head>
<title>movie2</title>
</head>
<body bgcolor="#000000">
<!-- url's used in the movie-->
<!-- text used in the movie-->
<!--fdsaaaa aaaaaaa -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=5,0,0,0"
width=550 height=400>
<param name=movie value="movie2.swf">
<param name=quality value=high>
<param name=wmode value=transparent>
<param name=bgcolor value=#ffffff> <!--用flash导出后将背景改为黑色,其目的是便于观察透明效果-->
<embed src="movie2.swf" quality=high wmode=transparent bgcolor=#ffffff width=550 height=400 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version
本文来自学习网(www.gzu521.com),原文地址:http://www.gzu521.com/campus/article/design/200607/28421.htm
=shockwaveflash"></embed>
</object>
</body>
</html> qE6vxE?XMJWT`2 [ 本 资 料 来 源 于 贵 州 学 习 网 网页设计Flash教程 http://Www.gzU521.com ] qE6vxE?XMJWT`2
  2.用Dreamweaver制作的带有flash 动画的html页的源代码:
<html>
<head>
<title>untitled document</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#000000" text="#000000"><!--背景亦为黑色,其目的是便于观察透明效果-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=5,0,0,0" width="550" height="400">
<param name=movie value="movie2.swf">
<param name=quality value=high>
<embed src="movie2.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version
=shockwaveflash" type="application/x-shockwave-flash" width="550" height="400">
</embed>
</object>
</body>
</html>
  请仔细比较分析两段代码的<object>标记中的<embed>标记,我们发现其中的不同之处:前者有参数wmode=transparent而后者却没有,这就是影响flash是否透明的关键之所在!
  请想一下dreamweaver的有关flash的属性面板,是否对parameter有印象呢?大家是否知道它的用处呢?
  现在让我们用dreamweaver来做透明效果:选中刚才已插入的flash动画,右击鼠标选择properties调出属性面板后,再单击parameter按钮,在弹出的对话框中点击加号图标,在左侧的parameter中键入wmode在右侧的value框内键入transparent点击ok,按f12进行预览,ok!我们所要的透明效果就出现了!
  先不要激动,我们把这一技巧推广,它是否能对任何的按flash默认设置(即不对windows mode/transparent windowless进行修改)的动画都奏效呢?经过我的实验证明它是普遍试用的。也就是说在dreamweaver中插入任何一个flash动画后,对其进行properties→parameter→wmode→value=transparent设置都可以实现flash的透明背景效果。
  其实关于dreamweaver中flash动画的parameter除了wmode外还有很多种,请大家在以后的学习中多注意,多交流!

<param name="wmode" value="transparent">可以去掉flash的背景颜色 实现flash背景透明


<object id="player" height="200" width="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!--是否透明-->
<param name="wmode" value="transparent">
<param name="AutoStart" VALUE="-1">
<!--是否自动播放-->
<param name="Balance" VALUE="0">
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制-->
<param name="EnableContextMenu" VALUE="-1">
<!--是否启用上下文菜单-->
<param name="url" VALUE="http://../***.wmv">
<!--播放的文件地址-->
<param name="PlayCount" VALUE="1">
<!--播放次数控制,为整数-->
<param name="rate" value="1">
<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0">
<!--控件设置:当前位置-->
<param name="currentMarker" value="0">
<!--控件设置:当前标记-->
<param name="defaultFrame" value="">
<!--显示默认框架-->
<param name="invokeURLs" value="0">
<!--脚本命令设置:是否调用URL-->
<param name="baseURL" value="">
<!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0">
<!--是否按比例伸展-->
<param name="volume" value="50">
<!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0">
<!--是否静音-->
<param name="uiMode" value="mini">
<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param name="windowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="0">
<!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="-1">
<!--是否启用错误提示报告-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>

 

本站源码和一些文章收集于互联网如有侵权或其它问题请及时联系我们,以便及时处理!

张永庆的空间版权所有
copyright 2009-07-20  

( http://www.qgcxjs.com)

All rights reserved 苏ICP备13013770号

苏公网安备 32083002000040号

公众号:青阁茶心