網頁

2010年7月14日 星期三

Flex_內嵌圖片(Embed)

一般在系統在顯示圖片時,通常有兩種需求:1.按鈕或選單上面的小圖示、2.使用者需要查詢的圖片資料,通常按鈕或選單上的圖示我們會使用固定的圖示,所以會寫一個路徑在程式碼裡面,而查詢的圖片會使用動態的方式改變要顯示的圖片,這在ASP.NET理面其實沒什麼差別,不過就是動態組成字串或是字串寫在程式碼裡面而已。

而在Flex當中,因為使用者在瀏覽網頁時,會先下載整個SWF檔案,既然下載到了用戶端,整體執行速度當然有一定的水準,但在圖片顯示時若是採用動態方式,則會因為跟伺服器索取圖片資料而有延遲的現象,這時候我們就可以利用內嵌圖片的方式,將所使用的圖片包在SWF檔案中,讓使用者開啟網頁時一併下載回去。當然,這也是要做取捨的,若是需要動態的查詢圖片,或是圖片檔太大,還是不要內嵌會比較好;所以,是否要內嵌就看系統需求來決定。

語法:
[Bindable]:MateData標籤,告訴編譯器,之後資料改變要做動態Bind的動作。(原始內容)
[Bindable]:MateData標籤,告訴編譯器該資料要作Bind的動作。(2010/07/21修正)
[Embed(source="assets/normal.jpg")]:內嵌圖片所要讀取的圖片位置。
private var normalImage:Class;:MateData所描述的Class名稱。

注意:
1. 標籤語法寫在所要描述Class的前面。
2. 上述語法即可將圖片存入Class中使用。

範例:
昨天整理筆記的時候,有寫到Alert的語法,當中有一個iconClass的屬性,就是要讓我們內嵌圖片使用,所以範例就利用Alert來做做看。

結果:

程式碼很簡單,就是利用Embed的標籤將圖面資料存放到Image1的Class當中,在放置到Alert的iconClass的屬性中。

內嵌程式碼:
[Bindable]
[Embed(source="img/i_home.png")]
private var Image1:Class;

沒有留言:

張貼留言