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