优秀的通用图片轮换播放器 Bcastr 4.0 及参数配置
作者：我就是个世界
发表于：2012-11-19
Bcastr 4.0 Beta 是一款很强悍的、开源(Open Source)的flash image silde show 图片轮换播放效果 ！
[img]http://www.husw.net/blog/attachment.php?fid=255[/img]
官方网址已经失效，谷歌浏览器报有恶意软件，就不帖了！下载
GoogleCode的源码还可以下载：
实例：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip
源代码：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip[separator]
之前我写过一篇关于JTBC使用 Bcastr 4.0 幻灯片的例子，大家可以参考: [url=http://www.husw.net/blog/JTBC-CMS-ASP-1_0-Final-FLASH-Bcastr_4_0_Beta/]给JTBC(ASP)(1_0 Final)CMS添加Bcastr 4.0 Beta FLASH幻灯片[/url]
使用 Bcastr 4.0 可以轻松的制作如上面所示的图片轮换效果，它有如下的特点：
可以读取xml设置播放列表,自定义xml地址
可以将图片地址直接写网页中直接,不需要xml
自动适应图片大小
循环播放，自定义自动播放时间
不限制图片数量
自定义尺寸,自动适应任何比例，图片不变形
自定义图片题目（可选）
浏览过程中下载
自定义图片连接（可选）
自定界面色彩放案
插入代码
Bcastr 4.0提供直接写入参数和使用xml传递参数两种代码插入的办法：
[b][color=#FF0000]1.直接写入参数，之前bcastr3 版本的时候都是这样直接写入的[/color][/b]
[code]
<object type="application/x-shockwave-flash" data="common/images/theme/default/swf/bcastr4.swf?xml=<data>
<channel>
<item>
<link>article/redir.php?id=116</link>
<image>article/common/upload/2010/12/17/18302764.jpg</image>
<title>长治市食品药品检验所、长治市药品不良反应监测中心正式揭牌</title>
</item>
<item>
<link>article/redir.php?id=57</link>
<image>article/common/upload/2010/5/7/23647Cx.jpg</image>
<title>CS-9300PC薄层扫描仪</title>
</item>
<item>
<link>article/redir.php?id=56</link>
<image>article/common/upload/2010/5/7/23553ni.jpg</image>
<title>GC-14C气相色谱仪</title>
</item>
<item>
<link>article/redir.php?id=55</link>
<image>article/common/upload/2010/5/7/2344894.jpg</image>
<title>FTIR-8400S红外分光光度计</title>
</item>
<item>
<link>article/redir.php?id=54</link>
<image>article/common/upload/2010/5/7/23211mh.jpg</image>
<title>KF-1水分测定仪</title>
</item>
<item>
<link>article/redir.php?id=52</link>
<image>article/common/upload/2010/5/7/225334Av.jpg</image>
<title>WZZ-T1旋光仪</title>
</item>
</channel>
</data>" width="242" height="242" id="vcastr3">
<param name="movie" value="common/images/theme/default/swf/bcastr4.swf?xml=<data>
<channel>
<item>
<link>article/redir.php?id=116</link>
<image>article/common/upload/2010/12/17/18302764.jpg</image>
<title>长治市食品药品检验所、长治市药品不良反应监测中心正式揭牌</title>
</item>
<item>
<link>article/redir.php?id=57</link>
<image>article/common/upload/2010/5/7/23647Cx.jpg</image>
<title>CS-9300PC薄层扫描仪</title>
</item>
<item>
<link>article/redir.php?id=56</link>
<image>article/common/upload/2010/5/7/23553ni.jpg</image>
<title>GC-14C气相色谱仪</title>
</item>
<item>
<link>article/redir.php?id=55</link>
<image>article/common/upload/2010/5/7/2344894.jpg</image>
<title>FTIR-8400S红外分光光度计</title>
</item>
<item>
<link>article/redir.php?id=54</link>
<image>article/common/upload/2010/5/7/23211mh.jpg</image>
<title>KF-1水分测定仪</title>
</item>
<item>
<link>article/redir.php?id=52</link>
<image>article/common/upload/2010/5/7/225334Av.jpg</image>
<title>WZZ-T1旋光仪</title>
</item>
</channel>
</data>" />
</object>
[/code]
【方法】
高级设置config说明：
[img][attach]432[/attach][/img]
默认参数字符串
0xffffff：文字颜色| 2：文字位置| 0xff6600：文字背景颜色| 60：文字背景透明度| 0xffffff：按键文字颜色| 0xff6600：按键默认颜色| 0x000033：按键当前颜色| 8：自动播放时间(秒)| 2：图片过渡效果| 1：是否显示按钮| _blank：打开新窗口
颜色都以0x开始16进制数字表示
文字颜色：题目文字的颜色
文字位置：0表示题目文字在顶端，1表示文字在底部，2表示文字在顶端
文字背景透明度：0-100值，0表示全部透明
按键文字颜色：按键数字颜色
按键默认颜色：按键默认的颜色
按键当前颜色：当前图片按键颜色
自动播放时间：单位是秒
图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡
是否显示按钮：0，表示隐藏按键部分，更适合做广告挑轮换
打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开
修改的方法为
[code]
<object id="bcastr4" data="/bcastr/bcastr4.swf" type="application/x-shockwave-flash" width="242" height="242">
<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config=0xffffff|1|0x0066ff|60|0xffffff|0x0066ff|0x000033|3|2|1|_blank">
<embed src="/bcastr/bcastr4.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config=0xffffff|1|0x0066ff|60|0xffffff|0x0066ff|0x000033|3|2|1|_blank& menu="false" quality="high" ;'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
[/code]
在上面幻灯代码的bcastr_title='+texts+'后面添加下面的代码相关参数可以参考上面的说明
&bcastr_config=0xffffff:文字颜色|2:文字位置|0x0066ff:文字背景颜色|60:文字背景透明度|0xffffff:按键文字颜色|0x0066ff:按键默认颜色|0x000033:按键当前颜色|8:自动播放时间(秒)|2:图片过渡效果|0:是否显示按钮|_blank:打开窗口
参考范例：[url=http://www.czyjs.org/]长治市食品药品检验所[/url]
[b][color=#FF0000]2.使用xml传递参数（4.0开始这种方法更好操作，更直观）[/color][/b]
[code]
<object id="bcastr4" data="/bcastr/bcastr4.swf?xml=/bcastr/bcastr.xml" type="application/x-shockwave-flash" width="242" height="242">
<param name="movie" value="/bcastr/bcastr4.swf?xml=/bcastr/bcastr.xml" />
</object>
[/code]
xml文件内容：
[code]
<?xml version="1.0" encoding="utf-8"?>
<data>
<channel>
<!-- $rslist AS $key=>$value -->
<item>
<link>{:$value[link_url]}</link>
<image>{:$value[picture]}</image>
<title>{:$value[title]}</title>
</item>
<!-- end -->
</channel>
<config>
<roundCorner>0</roundCorner>
<autoPlayTime>8</autoPlayTime>
<isHeightQuality>false</isHeightQuality>
<blendMode>normal</blendMode>
<transDuration>1</transDuration>
<windowOpen>_blank</windowOpen>
<btnSetMargin>auto 5 5 auto</btnSetMargin>
<btnDistance>20</btnDistance>
<titleBgColor>0xff6600</titleBgColor>
<titleTextColor>0xffffff</titleTextColor>
<titleBgAlpha>.75</titleBgAlpha>
<titleMoveDuration>1</titleMoveDuration>
<btnAlpha>.7</btnAlpha>
<btnTextColor>0xffffff</btnTextColor>
<btnDefaultColor>0x1B3433</btnDefaultColor>
<btnHoverColor>0xff9900</btnHoverColor>
<btnFocusColor>0xff6600</btnFocusColor>
<changImageMode>click</changImageMode>
<isShowBtn>{:$showbtn}</isShowBtn>
<isShowTitle>{:$showtitle}</isShowTitle>
<scaleMode>noBorder</scaleMode>
<transform>blur</transform>
<isShowAbout>false</isShowAbout>
<titleFont>微软雅黑</titleFont>
</config>
</data>
[/code]
[b]参数说明[/b]
从上面的xml可以看出Bcastr 4.0 可以设置很多参数，下面就对这些参数和它的默认值进行简单的说明：
[b]影片信息[/b]
channel.item 图片信息，可以设置多张图片
channel.itme.image 图片地址参数，此参数是唯一必须要有的参数，其他参数都有默认参数
channel.itme.link 对应图片的连接
channel.itme.tilte 对应图片的标题
[b]设置[/b]
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”
参考范例：[url=http://www.czyuanye.com/]长治原野摄影机构[/url]
[img]http://www.husw.net/blog/attachment.php?fid=255[/img]
官方网址已经失效，谷歌浏览器报有恶意软件，就不帖了！下载
GoogleCode的源码还可以下载：
实例：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip
源代码：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip[separator]
之前我写过一篇关于JTBC使用 Bcastr 4.0 幻灯片的例子，大家可以参考: [url=http://www.husw.net/blog/JTBC-CMS-ASP-1_0-Final-FLASH-Bcastr_4_0_Beta/]给JTBC(ASP)(1_0 Final)CMS添加Bcastr 4.0 Beta FLASH幻灯片[/url]
使用 Bcastr 4.0 可以轻松的制作如上面所示的图片轮换效果，它有如下的特点：
可以读取xml设置播放列表,自定义xml地址
可以将图片地址直接写网页中直接,不需要xml
自动适应图片大小
循环播放，自定义自动播放时间
不限制图片数量
自定义尺寸,自动适应任何比例，图片不变形
自定义图片题目（可选）
浏览过程中下载
自定义图片连接（可选）
自定界面色彩放案
插入代码
Bcastr 4.0提供直接写入参数和使用xml传递参数两种代码插入的办法：
[b][color=#FF0000]1.直接写入参数，之前bcastr3 版本的时候都是这样直接写入的[/color][/b]
[code]
<object type="application/x-shockwave-flash" data="common/images/theme/default/swf/bcastr4.swf?xml=<data>
<channel>
<item>
<link>article/redir.php?id=116</link>
<image>article/common/upload/2010/12/17/18302764.jpg</image>
<title>长治市食品药品检验所、长治市药品不良反应监测中心正式揭牌</title>
</item>
<item>
<link>article/redir.php?id=57</link>
<image>article/common/upload/2010/5/7/23647Cx.jpg</image>
<title>CS-9300PC薄层扫描仪</title>
</item>
<item>
<link>article/redir.php?id=56</link>
<image>article/common/upload/2010/5/7/23553ni.jpg</image>
<title>GC-14C气相色谱仪</title>
</item>
<item>
<link>article/redir.php?id=55</link>
<image>article/common/upload/2010/5/7/2344894.jpg</image>
<title>FTIR-8400S红外分光光度计</title>
</item>
<item>
<link>article/redir.php?id=54</link>
<image>article/common/upload/2010/5/7/23211mh.jpg</image>
<title>KF-1水分测定仪</title>
</item>
<item>
<link>article/redir.php?id=52</link>
<image>article/common/upload/2010/5/7/225334Av.jpg</image>
<title>WZZ-T1旋光仪</title>
</item>
</channel>
</data>" width="242" height="242" id="vcastr3">
<param name="movie" value="common/images/theme/default/swf/bcastr4.swf?xml=<data>
<channel>
<item>
<link>article/redir.php?id=116</link>
<image>article/common/upload/2010/12/17/18302764.jpg</image>
<title>长治市食品药品检验所、长治市药品不良反应监测中心正式揭牌</title>
</item>
<item>
<link>article/redir.php?id=57</link>
<image>article/common/upload/2010/5/7/23647Cx.jpg</image>
<title>CS-9300PC薄层扫描仪</title>
</item>
<item>
<link>article/redir.php?id=56</link>
<image>article/common/upload/2010/5/7/23553ni.jpg</image>
<title>GC-14C气相色谱仪</title>
</item>
<item>
<link>article/redir.php?id=55</link>
<image>article/common/upload/2010/5/7/2344894.jpg</image>
<title>FTIR-8400S红外分光光度计</title>
</item>
<item>
<link>article/redir.php?id=54</link>
<image>article/common/upload/2010/5/7/23211mh.jpg</image>
<title>KF-1水分测定仪</title>
</item>
<item>
<link>article/redir.php?id=52</link>
<image>article/common/upload/2010/5/7/225334Av.jpg</image>
<title>WZZ-T1旋光仪</title>
</item>
</channel>
</data>" />
</object>
[/code]
【方法】
高级设置config说明：
[img][attach]432[/attach][/img]
默认参数字符串
0xffffff：文字颜色| 2：文字位置| 0xff6600：文字背景颜色| 60：文字背景透明度| 0xffffff：按键文字颜色| 0xff6600：按键默认颜色| 0x000033：按键当前颜色| 8：自动播放时间(秒)| 2：图片过渡效果| 1：是否显示按钮| _blank：打开新窗口
颜色都以0x开始16进制数字表示
文字颜色：题目文字的颜色
文字位置：0表示题目文字在顶端，1表示文字在底部，2表示文字在顶端
文字背景透明度：0-100值，0表示全部透明
按键文字颜色：按键数字颜色
按键默认颜色：按键默认的颜色
按键当前颜色：当前图片按键颜色
自动播放时间：单位是秒
图片过渡效果：0，表示亮度过渡，1表示透明度过渡，2表示模糊过渡，3表示运动模糊过渡
是否显示按钮：0，表示隐藏按键部分，更适合做广告挑轮换
打开窗口：_blank表示新窗口打开。_self表示在当前窗口打开
修改的方法为
[code]
<object id="bcastr4" data="/bcastr/bcastr4.swf" type="application/x-shockwave-flash" width="242" height="242">
<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config=0xffffff|1|0x0066ff|60|0xffffff|0x0066ff|0x000033|3|2|1|_blank">
<embed src="/bcastr/bcastr4.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'&bcastr_config=0xffffff|1|0x0066ff|60|0xffffff|0x0066ff|0x000033|3|2|1|_blank& menu="false" quality="high" ;'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
[/code]
在上面幻灯代码的bcastr_title='+texts+'后面添加下面的代码相关参数可以参考上面的说明
&bcastr_config=0xffffff:文字颜色|2:文字位置|0x0066ff:文字背景颜色|60:文字背景透明度|0xffffff:按键文字颜色|0x0066ff:按键默认颜色|0x000033:按键当前颜色|8:自动播放时间(秒)|2:图片过渡效果|0:是否显示按钮|_blank:打开窗口
参考范例：[url=http://www.czyjs.org/]长治市食品药品检验所[/url]
[b][color=#FF0000]2.使用xml传递参数（4.0开始这种方法更好操作，更直观）[/color][/b]
[code]
<object id="bcastr4" data="/bcastr/bcastr4.swf?xml=/bcastr/bcastr.xml" type="application/x-shockwave-flash" width="242" height="242">
<param name="movie" value="/bcastr/bcastr4.swf?xml=/bcastr/bcastr.xml" />
</object>
[/code]
xml文件内容：
[code]
<?xml version="1.0" encoding="utf-8"?>
<data>
<channel>
<!-- $rslist AS $key=>$value -->
<item>
<link>{:$value[link_url]}</link>
<image>{:$value[picture]}</image>
<title>{:$value[title]}</title>
</item>
<!-- end -->
</channel>
<config>
<roundCorner>0</roundCorner>
<autoPlayTime>8</autoPlayTime>
<isHeightQuality>false</isHeightQuality>
<blendMode>normal</blendMode>
<transDuration>1</transDuration>
<windowOpen>_blank</windowOpen>
<btnSetMargin>auto 5 5 auto</btnSetMargin>
<btnDistance>20</btnDistance>
<titleBgColor>0xff6600</titleBgColor>
<titleTextColor>0xffffff</titleTextColor>
<titleBgAlpha>.75</titleBgAlpha>
<titleMoveDuration>1</titleMoveDuration>
<btnAlpha>.7</btnAlpha>
<btnTextColor>0xffffff</btnTextColor>
<btnDefaultColor>0x1B3433</btnDefaultColor>
<btnHoverColor>0xff9900</btnHoverColor>
<btnFocusColor>0xff6600</btnFocusColor>
<changImageMode>click</changImageMode>
<isShowBtn>{:$showbtn}</isShowBtn>
<isShowTitle>{:$showtitle}</isShowTitle>
<scaleMode>noBorder</scaleMode>
<transform>blur</transform>
<isShowAbout>false</isShowAbout>
<titleFont>微软雅黑</titleFont>
</config>
</data>
[/code]
[b]参数说明[/b]
从上面的xml可以看出Bcastr 4.0 可以设置很多参数，下面就对这些参数和它的默认值进行简单的说明：
[b]影片信息[/b]
channel.item 图片信息，可以设置多张图片
channel.itme.image 图片地址参数，此参数是唯一必须要有的参数，其他参数都有默认参数
channel.itme.link 对应图片的连接
channel.itme.tilte 对应图片的标题
[b]设置[/b]
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”
参考范例：[url=http://www.czyuanye.com/]长治原野摄影机构[/url]
请发表您的评论