CMS用通用图片轮换flash幻灯片播放器：Bcastr3和Bcastr4

这款Bcastr通用图片轮换播放器（或者叫他幻灯片播放器），由于其简洁的代码及其易用性，被dedeCMS、PHPCMS、帝国CMS、Z-blog等诸多网站内容管理程序开发者广泛引用。被使用的最多的是bcastr3，而开源的bcastr4不知何故没有推广开来。今天特地搜罗到了，bcastr3及bcastr4的源码和实例下载，同时分享一下他们的使用技巧。

用dedeCMS的朋友都知道dedeCMS的幻灯片展示是bcastr3.swf，之前小车也写过关于dedeCMS幻灯片的各种灵活的调用方法 其中的内容就是关于bcastr3.0的一些使用技巧。通过google我了解到，这个Bcastr  flash 实际上是Ruochi Group开发的开源的通用图片轮换播放器，一直到发稿前为止，Ruochi Group的网站始终无法访问，我也无从考证，但是万能的google还是让我找到了他们。

bcastr3的使用方法及参数设置

bcastr3通用图片轮换播放器，可以用于各种新闻系统或者blog系统。它有以下几大功能：

.可以读取xml设置播放列表,自定义xml地址
.可以将图片地址直接写网页中直接,不需要xml
.自动适应图片大小
.循环播放，自定义自动播放时间
.不限制图片数量
.自定义尺寸,自动适应任何比例，图片不变形
.自定义图片题目（可选）
.浏览过程中下载
.自定义图片连接（可选）
.自定界面色彩放案

它的使用方法及代码有三种：

特别说明：由于flashplayer9 升级了安全策略问题，所以需要保证所有的的文件（包括，bcastr3.swf,图片文件，或者需要的xml文件）都必须在统一域名下，不能在跨域读取图片和xml了

方法一，直接copy下面代码，修改其中的 swf_width，swf_height，files，links，texts 参数

程序代码：

<script type=”text/javascript”>

// <![CDATA[
var swf_width=220
var swf_height=220
var files=’pic/gymnasium.jpg|pic/zd.jpg|pic/adidas.jpg’
var links=’http://blog.bashanren.com|http://blog.bashanren.com|http://blog.bashanren.com’

document.write(‘<embed src=”bcastr3/bcastr3.swf” wmode=”opaque” FlashVars=”bcastr_file=’+files+’&bcastr_link=’+links+’&bcastr_title=’+texts+’& menu=”false” quality=”high” width=”‘+ swf_width +'” height=”‘+ swf_height +'” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />’);
// ]]></script>

方法二，直接嵌入地址

程序代码：

<embed src=”bcastr3/bcastr3.swf” FlashVars=”bcastr_file=aaa.jpg|bbb.jpg|ccc.swf&bcastr_link=http://www.baidu.com|http://www.nba.com|http://www.ruochi.com&bcastr_title=百度|NBA|Ruochi.com” width=”400″ height=”200″ loop=”false” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” salign=”T” name=”scriptmain” menu=”false” wmode=”transparent”></embed>

其中

bcastr_file=aaa.jpg|bbb.jpg|ccc.swf 是图片地址，用”|”符号分开
bcastr_link=http://www.baidu.com|http://www.nba.com|http://www.ruochi.com 是图片对应连接地址，用”|”符号分开
bcastr_title=百度|NBA|Ruochi.com 是图片对应标题，用”|”符号分开

注意其中的&连接符

方法三，使用xml地址

程序代码

<embed width=”100″ height=”200″ type=”application/x-shockwave-flash” src=”bcastr3/bcastr3.swf” quality=”high” wmode=”transparent” FlashVars=”bcastr_xml_url=bcastr3/bcastr.xml” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

修改上方的bcastr_xml_url=bcastr3/bcastr.xml地址即可

xml内容

item_url=”pic/Maradona.jpg” 图片地址
link=”http://www.google.com” 图片点击后 不填写就不可点击连接
itemtitle=”马拉多纳受邀解说世界杯” 图片题目

高级设置

程序代码：

<embed src=”bcastr3/bcastr3.swf” FlashVars=”bcastr_file=a1.jpg|a2.jpg|a3.jpg&bcastr_link=http://www.google.com|http://www.baidu.com|http://www.google.com&bcastr_title=Title 1|Title 2|Title 3&TitleTextColor=0x000000&TitleBgColor=0x0066ff” width=”400″ height=”200″ loop=”false” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” salign=”T” name=”scriptmain” menu=”false” wmode=”transparent”></embed>

这段代码里设置了标题颜色和标题背景颜色。

程序代码

<embed src=”bcastr3/bcastr3.swf” FlashVars=”bcastr_file=a1.jpg|a2.jpg|a3.jpg&bcastr_link=http://www.google.com|http://www.baidu.com|http://www.google.com&bcastr_title=&IsShowBtn=0″ width=”400″ height=”80″ loop=”false” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” salign=”T” name=”scriptmain” menu=”false” wmode=”transparent”></embed>

这里设置的是不显示标题和按钮。

所有参数说明

参数名称<>参数说明<>默认值
bcastr_file<>图片地址参数，多个使用|分开，与方法2配合使用<>空
bcastr_title<>图片标题参数，多个使用|分开，与方法2配合使用<>空
bcastr_link<>图片连接参数，多个使用|分开，与方法2配合使用<>空
bcastr_xml<>方法3 传递图片参数，样板参考http://www.ruochi.com/product/bcastr3/bcastr.xml<>bcastr.xml
TitleTextColor<>图片名称文字颜色<>0xFFFFFF
TitleBgColor<>图片名称文字背景颜色<>0xFF6600
TitleBgAlpha<>图片名称文字背景颜色透明度：0-100值，0表示全部透明<>60
TitleBgPosition<>图片名称文字位置，0表示文字在顶端，1表示文字在底部，2表示文字在顶端浮动<>100
BtnDefaultColor<>按键默认的颜色<>0xFF6600
BtnOverColor<>按键当前的颜色<>0x000033
AutoPlayTime<>自动播放时间：单位是秒<>8
Tween<>图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡<>2
IsShowBtn<>是否显示按钮：1表示显示按键，0表示隐藏按键，更适合做广告挑轮换<>1
WinOpen<>打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开.

以上是bcastr3，我们再看一下bcastr4:

bcastr4的使用方法及参数设置

Bcastr4在2008年6月9日被放出，Bcastr 4flash image silde show 图片轮换播放 (开源 Open Source)，作者还放出了AS3.0的源码。
新的Bcastr增加的特点如下：

• 使用as3.0重写,效率有所提高
• 增加了几种变换方式
• 新参数和bcastr3.x不同,xml格式采用rss2.0的格式,可以直接读取rss中的图片(不能跨域)
• 可以通过xml对播放器设置
• 等多参数可以设置

代码使用方法有两种：

方法一，直接写入图片及相关参数

<embed src=”images/bcastr4.swf” wmode=”Transparent” FlashVars=”xml=
<data>
<channel>
<item>
<link>http://www.baidu.com/</link>
<image>uploads/1.jpg</image>
<title>图片1</title>
</item>
<item>
<link>http://www.baidu.com/</link>
<image>uploads/2.jpg</image>
<title>图片2</title>
</item>
<item>
<link>http://www.baidu.com/</link>
<image>uploads/3.jpg</image>
<title>图片2</title>
</item>
</channel>
<config>
<autoPlayTime>3</autoPlayTime>
<btnDefaultColor>#83b4d8</btnDefaultColor>
<isShowAbout>false</isShowAbout>
<titleBgColor>0x333333</titleBgColor>
<TitleBgPosition>1</TitleBgPosition>
<titleFont></titleFont>
<titleBgAlpha>.50</titleBgAlpha>
<titleMoveDuration>1</titleMoveDuration>
</config>
</data>” quality=”high” width=”230″ height=”160″ type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

此种写法适合在CMS中使用，方便调用。参数意义详见下方使用说明。

方法二，使用xml文件读取图片及参数

使用xml时写入一下代码：

<embed width=”100″ height=”200″ type=”application/x-shockwave-flash” src=”flash/bcastr4.swf” quality=”high” wmode=”transparent” FlashVars=”bcastr_xml_url=flash/bcastr.xml” pluginspage=”http://www.macromedia.com/go/getflashplayer” />

参数设置说明：xml的可以设置的全部参数，以及默认的数值

<data>
<channel>
<item>
<link>http://www.baidu.com/</link>
<image>images/Desert.jpg</image>
<title>沙漠</title>
</item>
<item>
<link>http://www.baidu.com/</link>
<image>images/Hydrangeas.jpg</image>
<title>八仙花</title>
</item>
<item>
<link>http://www.baidu.com/</link>
<image>images/Jellyfish.jpg</image>
<title>水母</title>
</item>
</channel>
<config>
<roundCorner>0</roundCorner>
<autoPlayTime>8</autoPlayTime>
<isHeightQuality>false</isHeightQuality>
<blendMode>normal</blendMode>
<transDuration>1</transDuration>
<windowOpen>_self</windowOpen>
<btnSetMargin>auto 5 5 auto</btnSetMargin>
<btnDistance>20</btnDistance>
<titleBgColor>0xff6600</titleBgColor>

<titleBgAlpha>.75</titleBgAlpha>
<titleMoveDuration>1</titleMoveDuration>
<btnAlpha>.7</btnAlpha>
<btnDefaultColor>0xB3433</btnDefaultColor>
<btnHoverColor>0xff9900</btnHoverColor>
<btnFocusColor>0xff6600</btnFocusColor>
<changImageMode>click</changImageMode>
<isShowBtn>true</isShowBtn>
<isShowTitle>true</isShowTitle>
<scaleMode>noBorder</scaleMode>
<transform>blur</transform>
<isShowAbout>true</isShowAbout>
</config>
</data>

以下用”.”描述xml树结构并说明参数作用

【影片信息】

channel.item
图片信息，可以设置多张图片

channel.itme.image
图片地址参数，此参数是唯一必须要有的参数，其他参数都有默认参数

channel.itme.link
对应图片的连接

channel.itme.tilte
对应图片的标题
【设置】

config.roundCorner
图片的圆角

config.autoPlayTime
图片切换时间，默认值是8，单位秒

config.isHeightQuality
图片缩小是否采用高质量的方法，默认值false

config.normal
图片的混合模式

config.transDuration
图片在切换过程中的时间，默认值1，单位秒

config.windowOpen
图片连接的打开方式，默认值”_blank”,在新窗口打开，也可以使用”_self”,使用本窗口打开

config.btnSetMargin
按钮的位置，文字的位置，用了css的margin概念，默认值”auto 5 5 auto”，四个数值代表 上 右 下 左 相对于播放器的距离，四个数值用空格分开，不需具体数值用”auto”填写 ，比如左上对齐并都有10像素的距离可以写 “10 auto auto 10″, 右下角对齐是”auto 10 10 auto”

config.btnDistance
每个按钮的距离，默认值20

config.titleBgColor
标题背景的颜色，默认0xff6600

config.titleTextColor
标题文字的颜色，默认0xffffff

config.titleBgAlpha
标题背景的透明度，默认0.75

config.titleFont
标题文字的字体，默认值”微软雅黑”

config.titleMoveDuration
标题背景动画的时间，默认值1，单位秒

config.btnAlpha
按钮的透明度，默认值0.7

config.btnTextColor
按钮文字的颜色，默认值0xffffff

config.btnDefaultColor
按钮的默认颜色，默认值0×1B3433

config.btnHoverColor
按钮的默认颜色，默认值0xff9900

config.btnFocusColor
按钮当前颜色，默认值0xff6600

config.changImageMode
切换图片的方法，默认值”click”,点击切换图片，还可以使用”hover”,鼠标悬停就切换图片

config.isShowBtn
是否显示按钮，默认值”true”

config.isShowTitle
是否显示标题，默认值”true”

config.scaleMode
图片放缩模式: 默认值是”noBorder”
“showAll”: 可以看到全部图片,保持比例,可能上下或者左右
“exactFil”: 放缩图片到舞台的尺寸,可能比例失调
“noScale”: 图片的原始尺寸,无放缩
“noBorder”: 图片充满播放器,保持比例,可能会被裁剪

config.transform
图片放缩模式: 默认值是”alpha”
“alpha”: 透明度淡入淡出
“blur”: 模糊淡入淡出
“left”: 左方图片滚动
“right”: 右方图片滚动
“top”: 上方图片滚动
“bottom”: 下方图片滚动
“breathe”: 有一点点地放缩的淡入淡出
“breatheBlur”: 有一点点地放缩的模糊淡入淡出，本页的例子就是这个

config.isShowAbout
是否显示关于信息，默认值”true”

改版后的Bcastr4——移动图片标题位置的位置到下方

Bcastr4虽然效果更好且更易用，但是图片标题的位置却被固定到了图片顶部，无法移动。于是，有达人自行修改了源码，将图片标题的位置由顶部移动到了底部。

Bcastr3/Bcastr4/改版Bcastr4下载

• 点击下载：通用图片轮换FLASH播放器Bcastr3
• 点击下载：通用图片轮换FLASH播放器Bcastr4（带源文件） 
• 点击下载：通用图片轮换FLASH播放器Bcastr4标题下置版
• 点击下载：通用图片轮换FLASH播放器Bcastr3/Bcastr4/Bcastr4标题下置版整合包