内容正在载入中,请稍后……
公告
搜索
统计
其他
19 Nov.2012

优秀的通用图片轮换播放器 Bcastr 4.0 及参数配置 不指定

作者: 我就是个世界   分类:技术&学习 » 网页设计   出处:本站原创            | |
Bcastr 4.0 Beta 是一款很强悍的、开源(Open Source)的flash image silde show 图片轮换播放效果 !
Highslide JS

官方网址已经失效,谷歌浏览器报有恶意软件,就不帖了!下载

GoogleCode的源码还可以下载:
实例:http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip
源代码:http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip

之前我写过一篇关于JTBC使用 Bcastr 4.0 幻灯片的例子,大家可以参考: 给JTBC(ASP)(1_0 Final)CMS添加Bcastr 4.0 Beta FLASH幻灯片

使用 Bcastr 4.0 可以轻松的制作如上面所示的图片轮换效果,它有如下的特点:

可以读取xml设置播放列表,自定义xml地址
可以将图片地址直接写网页中直接,不需要xml
自动适应图片大小
循环播放,自定义自动播放时间
不限制图片数量
自定义尺寸,自动适应任何比例,图片不变形
自定义图片题目(可选)
浏览过程中下载
自定义图片连接(可选)
自定界面色彩放案
插入代码
Bcastr 4.0提供直接写入参数和使用xml传递参数两种代码插入的办法:

1.直接写入参数,之前bcastr3 版本的时候都是这样直接写入的

<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>


【方法】
高级设置config说明:
Highslide JS

默认参数字符串
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表示在当前窗口打开

修改的方法为

<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>

在上面幻灯代码的bcastr_title='+texts+'后面添加下面的代码相关参数可以参考上面的说明
&bcastr_config=0xffffff:文字颜色|2:文字位置|0x0066ff:文字背景颜色|60:文字背景透明度|0xffffff:按键文字颜色|0x0066ff:按键默认颜色|0x000033:按键当前颜色|8:自动播放时间(秒)|2:图片过渡效果|0:是否显示按钮|_blank:打开窗口

参考范例:长治市食品药品检验所

2.使用xml传递参数(4.0开始这种方法更好操作,更直观)


<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>


xml文件内容:

<?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>


参数说明
从上面的xml可以看出Bcastr 4.0 可以设置很多参数,下面就对这些参数和它的默认值进行简单的说明:

影片信息
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”


参考范例:长治原野摄影机构 分享到QQ空间
最后编辑: 我就是个世界 编辑于November 19, 2012 15:23
时间:15:21 评论(0) 引用(0) 阅读(13139) Tags: , , ,
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情