享受 Bcastr 4.0，优秀的通用图片轮换播放器～～

特别提示：xml 是可以动态生成的，但是在生成的时候要着重考虑 bcastr4.swf 、bcastr.xml 以及图片的路径关系，另外需要注意 flash新版本是不能跨域的，flash里面的链接和图片都是不能跨域的，就是说你的xml里面的的图片和链接地址都要跟xml是属于一个域名的～～

网友冰淇淋小子建议：参数里面的图片和链接地址最好使用绝对路径。

我们在进行网页编程时，难免会遇到需要进行图片轮换的地方，在这里向大家推荐 Bcastr 4.0 ，一款优秀的通用图片轮换播放器。使用 Bcastr 4.0 可以轻松的制作如上面所示的图片轮换效果，它有如下的特点：

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

插入代码

Bcastr 4.0提供直接写入参数和使用xml传递参数两种代码插入的办法：

1.直接写入参数

1
<object type="application/x-shockwave-flash" data="http://xiaogui.org/files/bcastr/bcastr4.swf?xml= 

2
   <data> 

3
    <channel> 

4
     <item> 

5
      <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link> 

6
         <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image> 

7
         <title>Visual Studio 2010 MSDN中文版下载</title> 

8
        </item> 

9
        <item> 

10
         <link>http://xiaogui.org/province-city-area-selector.html</link> 

11
         <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image> 

12
         <title>PCAS省、市、地区联动选择JS封装类</title> 

13
        </item> 

14
        <item> 

15
         <link>http://xiaogui.org/foxit-reader-3-3.html</link> 

16
         <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image> 

17
         <title>福昕PDF阅读器（Foxit Reader）3.3 正式发布</title> 

18
        </item> 

19
        <item> 

20
         <link>http://xiaogui.org/visual-studio-2010-express-version.html</link> 

21
         <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image> 

22
         <title>Visual Studio 2010 Express 版提供下载</title> 

23
        </item> 

24
        <item> 

25
         <link>http://xiaogui.org/expression-studio-4-release.html</link> 

26
         <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image> 

27
         <title>微软设计套装 Expression Studio 4 正式版发布</title> 

28
        </item> 

29
       </channel> 

30
   </data> 

31
  "  width="500" height="150"> 

32
  <param name="movie" value="http://xiaogui.org/files/bcastr/bcastr4.swf?xml= 

33
   <data> 

34
        <channel> 

35
          <item> 

36
            <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link> 

37
            <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image> 

38
            <title>Visual Studio 2010 MSDN中文版下载</title> 

39
          </item> 

40
          <item> 

41
            <link>http://xiaogui.org/province-city-area-selector.html</link> 

42
            <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image> 

43
            <title>PCAS省、市、地区联动选择JS封装类</title> 

44
          </item> 

45
          <item> 

46
            <link>http://xiaogui.org/foxit-reader-3-3.html</link> 

47
            <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image> 

48
            <title>福昕PDF阅读器（Foxit Reader）3.3 正式发布</title> 

49
          </item> 

50
          <item> 

51
            <link>http://xiaogui.org/visual-studio-2010-express-version.html</link> 

52
            <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image> 

53
            <title>Visual Studio 2010 Express 版提供下载</title> 

54
          </item> 

55
          <item> 

56
            <link>http://xiaogui.org/expression-studio-4-release.html</link> 

57
            <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image> 

58
            <title>微软设计套装 Expression Studio 4 正式版发布</title> 

59
          </item> 

60
        </channel> 

61
   </data>" /> 

62
 </object>

2.使用xml传递参数

1
<object id="bcastr4" data="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=http://xiaogui.org/files/bcastr/bcastr.xml" type="application/x-shockwave-flash" width="500" height="150"> 

2
        <param name="movie" value="http://xiaogui.org/files/bcastr/bcastr4.swf?xml=http://xiaogui.org/files/bcastr/bcastr.xml" /> 

3
</object>

xml文件内容：

1
<?xml version="1.0" encoding="utf-8"?> 

2
<data> 

3
 <channel> 

4
  <item> 

5
   <link>http://xiaogui.org/visual-studio-2010-msdn-chinese-simplified-version.html</link> 

6
   <image>http://xiaogui.org/files/2010-05/home-hero-boxshot.jpg</image> 

7
   <title>Visual Studio 2010 MSDN中文版下载</title> 

8
  </item> 

9
  <item> 

10
   <link>http://xiaogui.org/province-city-area-selector.html</link> 

11
   <image>http://xiaogui.org/files/2010-05/province-city-area-selector.png</image> 

12
   <title>PCAS省、市、地区联动选择JS封装类</title> 

13
  </item> 

14
  <item> 

15
   <link>http://xiaogui.org/foxit-reader-3-3.html</link> 

16
   <image>http://xiaogui.org/files/2010-05/foxit-reader-3-3.png</image> 

17
   <title>福昕PDF阅读器（Foxit Reader）3.3 正式发布</title> 

18
  </item> 

19
  <item> 

20
   <link>http://xiaogui.org/visual-studio-2010-express-version.html</link> 

21
   <image>http://xiaogui.org/files/2010-06/sl_VSE2010.png</image> 

22
   <title>Visual Studio 2010 Express 版提供下载</title> 

23
  </item> 

24
  <item> 

25
   <link>http://xiaogui.org/expression-studio-4-release.html</link> 

26
   <image>http://xiaogui.org/files/2010-06/expression-studio-4-release.png</image> 

27
   <title>微软设计套装 Expression Studio 4 正式版发布</title> 

28
  </item> 

29
 </channel> 

30
 <config> 

31
  <roundCorner>0</roundCorner> 

32
  <autoPlayTime>8</autoPlayTime> 

33
  <isHeightQuality>false</isHeightQuality> 

34
  <blendMode>normal</blendMode> 

35
  <transDuration>1</transDuration> 

36
  <windowOpen>_blank</windowOpen> 

37
  <btnSetMargin>auto 5 5 auto</btnSetMargin> 

38
  <btnDistance>20</btnDistance> 

39
  <titleBgColor>0xff6600</titleBgColor> 

40
  <titleTextColor>0xffffff</titleTextColor> 

41
  <titleBgAlpha>.75</titleBgAlpha> 

42
  <titleMoveDuration>1</titleMoveDuration> 

43
  <btnAlpha>.7</btnAlpha> 

44
  <btnTextColor>0xffffff</btnTextColor> 

45
  <btnDefaultColor>0x1B3433</btnDefaultColor> 

46
  <btnHoverColor>0xff9900</btnHoverColor> 

47
  <btnFocusColor>0xff6600</btnFocusColor> 

48
  <changImageMode>click</changImageMode> 

49
  <isShowBtn>true</isShowBtn> 

50
  <isShowTitle>true</isShowTitle> 

51
  <scaleMode>noBorder</scaleMode> 

52
  <transform>blur</transform> 

53
  <isShowAbout>true</isShowAbout> 

54
  <titleFont>微软雅黑</titleFont> 

55
 </config> 

56
</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”

下载

实例：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/example/example.zip

源代码：http://bcastr.googlecode.com/svn/trunk/bcastr4/release/src.zip

意见和反馈

上面的例子，在插入Flash的时候使用的是《符合w3c标准flash(swf)插入代码,常用flash参数设置》中的方法，你也可以结合《SWFObject，独立、简捷、安全的Flash媒体版本检测与嵌入模块》，对上面的代码进行完善。在你使用Bcastr 4.0 的过程中，如果遇到什么问题，请在下面留言。