享受 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 的過程中,如果遇到什么問題,請在下面留言。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM