Flex 界面,第二部分——添加了縮略圖
要在列表中使用縮略圖,你需要對(duì)列表做一下更改使其可以同時(shí)顯示縮略圖及其標(biāo)題。幸運(yùn)的是在Flex中實(shí)現(xiàn)這一點(diǎn)很容易。首先我們要修改<List>標(biāo)簽為其添加一個(gè)itemRenderer,代碼如下:
mytube2.mxml
... <mx:List width="100%" height="340" id="movieList" dataProvider="{movies}" change="onChange()" itemRenderer="MovieItem"></mx:List> ...
這個(gè)itemRenderer是一個(gè)由你自己創(chuàng)建的MXML組件,而且它的文件名必須是MovieItem。你可以通過選擇菜單中的 New > MXML Component 來創(chuàng)建文件,然后將下面的代碼添加進(jìn)去:
MovieItem.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx=" <mx:Image source="{data.thumb}" width="{data.width/3}" height="{data.height/3}" rotation="5" left="10" top="0" /> <mx:Label text="{data.title}" fontWeight="bold" top="10" left="100" fontSize="18" /> </mx:Canvas>
我使用了Canvas容器,這樣我就可以按照自己的想法定位其中的組件了,當(dāng)然,你可以使用最適合你的布局的容器。然后,我使用了一個(gè)<mx:Image>標(biāo)簽用來加載圖像并使用了一個(gè)<mx:label>標(biāo)簽來顯示標(biāo)題。為了使其看起來有趣一點(diǎn),我們將圖像稍微旋轉(zhuǎn)了一下。最終的效果見圖5。
圖5.使用了縮略圖的加強(qiáng)版列表框
好了,這個(gè)外觀雖然不是特別好,但是它比單純的文筆列表酷多了。接下來你可以在這個(gè)組件中添加更多想要的東西,比如視頻描述、運(yùn)行時(shí)間、鏈接、評(píng)分按鈕等等。
存儲(chǔ)和帶寬
雖然建立前臺(tái)程序和數(shù)據(jù)庫操作相對(duì)來說很簡單,但是這并不是建立一個(gè)視頻分享網(wǎng)站要面對(duì)的唯一問題。目前來說帶寬是主要的問題。這些視頻,即使格式為編碼緊湊的Flash Video,也是相當(dāng)大的文件。如何在不耗盡帶寬的情況下提供視頻服務(wù)是值得好好考慮的。 當(dāng)然,解決帶寬的一個(gè)辦法就是買一個(gè)更大的連接或者將主機(jī)放到寬帶情況比較好的數(shù)據(jù)中心。另外一個(gè)選擇就是把網(wǎng)站和數(shù)據(jù)分離,將視頻文件存儲(chǔ)到其它的地方。Amazon’s S3 service 就提供了一種簡單的方式,你只要付相當(dāng)少的費(fèi)用就可以用一種富余和可升級(jí)的方式存儲(chǔ)和分享大的文件。在早期使用 S3 來存儲(chǔ)網(wǎng)站上的視頻文件可以幫你節(jié)省一大筆基礎(chǔ)設(shè)施的費(fèi)用,而且可以一直使用到網(wǎng)站足夠受歡迎可以支付基礎(chǔ)設(shè)施費(fèi)用的時(shí)候。
總結(jié)
隨著Flash Video的出現(xiàn)和寬帶的廣泛普及,現(xiàn)在用很少的費(fèi)用建立一個(gè)視頻分享網(wǎng)站不再是天方夜譚了。我希望這個(gè)例子可以告訴你使用Flex/PHP建立一個(gè)視頻分享網(wǎng)站是多么容易并激發(fā)你的進(jìn)一步探索。
本文鏈接:http://m.95time.cn/tech/multimedia/2007/4990.asp
出處:藍(lán)色理想
責(zé)任編輯:moby
上一頁 使用Flex和PHP創(chuàng)建自己的視頻應(yīng)用 [4] 下一頁
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|