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>
<!--
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.可点这里下载。