代码改变世界

FLASH图片广告系统使用心得(使用方法及下载)

2010-08-31 15:01  追忆似水流年  阅读(806)  评论(0编辑  收藏  举报

项目中首页有个图片广告轮流播放的功能,看了一下是用flash+javascript实现的。在网上google了一下,原来网上已有此解决方案。

原理:使用JAVASCRIPT和FLASH进行数据交换

文件:一个调用FLASH和含有JAVASCRIPT的html文件+一个广告FLASH文件

<script type="text/javascript">   
  
<!--   
  var focus_width=365;  
  
var focus_height=420
  
var text_height=0
  
var swf_height = focus_height+text_height;  
         
var pics='http:www.pconline.com.cn/test/toptitle/images/picpath/pmareddian365.jpg|http:www.pconline.com.cn/test/toptitle/images/picpath/jiadian(2).JPG|http:www.pconline.com.cn/test/toptitle/images/picpath/02232yuejiangkpfoc.jpg'; 
  
var links='http:www.pconline.com.cn/digital/dc/news/cmt/0602/760853.html|http:www.pconline.com.cn/digital/family/|http:www.pconline.com.cn/digital/audio/daogou/mp3/time/0602/760219.html'
  
var texts='DC|家电|随身听';
    
  document.write(
'<object ID="focus_flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');   
  document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#E7E7E7">');   
  document.write(
'<param name="menu" value="false"><param name=wmode value="transparent">');   
  document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');   
  document.write(
'<embed ID="focus_flash" src="pixviewer.swf" wmode="transparent" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#E7E7E7" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http:www.macromedia.com/go/getflashplayer"/>');    document.write('</object>');   
 
//-->
</script>  

 几个参数说明。

focus_width  用来设置FLASH宽度
focus_height  用来设置FLASH高度
text_height  设置显示字体区域高度(字会显示在FLASH最下面,如果是0就不显示)
pics      设置加载图片的地址,中间以“|”分隔
links      设置加载图片链接的地址,中间以“|”分隔
texts     设置加载图片说明文字的地址,中间以“|”分隔,如果text_height设置是0的话就不会显示 

在实际使用中,pixviewer.swf存放在某个文件夹下,轮播的图片存放在项目的某个文件夹中,此两处的路径稍微改动下即可。另外图片以几十KB大小,bmp格式为好,像素在256*252显示效果不错。具体的范围,可以自己去试。pics为图片的服务器端地址(中间以"|"隔开)。links 为加载图片链接的地址(中间同样以"|"隔开),它里面的字符串内容没严格要求。

实现的效果类似下图。

 

此方案缺点是:对图片有限制要求,图片轮播的时间间隔和图片的停留时间不能人为控制。

flash文件pixviewer.swf.可点这里下载。