特別提示: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= |
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> |
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> |
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> |
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> |
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> |
31 |
" width="500" height="150"> |
32 |
<param name="movie" value="http://xiaogui.org/files/bcastr/bcastr4.swf?xml= |
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> |
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> |
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> |
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> |
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> |
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" /> |
xml文件內容:
1 |
<?xml version="1.0" encoding="utf-8"?> |
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> |
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> |
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> |
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> |
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> |
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> |
參數說明
從上面的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 的過程中,如果遇到什么問題,請在下面留言。