將 FLEX 的 IMAGE 元件加上讀取圖片時的進度顯示

首頁 > FLEX, 程式設計 > 將 FLEX 的 IMAGE 元件加上讀取圖片時的進度顯示

將 FLEX 的 IMAGE 元件加上讀取圖片時的進度顯示

2009年11月10日瀏覽次數 : 10,727

閱讀評論發表評論

一般在寫FLEX的時候要讓 IMAGE 顯示圖片，大多時候會使用他的 source 屬性，這個屬性實在很好用不但可以直接丟 URL ，也可以使用 EMBED 崁入圖片，甚至可以把 ByteArray 丟進去給他，他就會把他繪圖出來，雖然是很好用，但是如果讀到比較大的圖片，好像就會有點改他傻傻的，所以這次就加個進度表給他吧。

加上讀取圖片的進度 bar

其實要做這個功能並不會很複雜，因為 IMAGE 元件其實已經給了我們 load() , progress() , complete() 這三個好用的幫手， load() 就是去讀取圖片，在讀取的途中會不斷的觸發 progress() ，一直到完成後會觸發 complete() 的方法。

因此就不多說啦，請看範例，但是因為有可能有跨網域限制，如果讀不到圖請下載原始碼回去測試吧。

CODE

case1109.mxml

^?View Code FLEX

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">
	<local:progressImage id="myProgressImg"/>
	<mx:TextInput width="342" id="urlText">
		<mx:text>http://keepy.com.tw/keepyedit/keepy/pageshot/666_97901355/000.jpg</mx:text>
	</mx:TextInput>
	<mx:Button label="開始" click="this.myProgressImg.loadImage(this.urlText.text);"/>
</mx:Application>

progressImage.mxml

^?View Code FLEX

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			public function loadImage(url:String):void{
				this.img.load(url);
				this.progressbar.visible = true ;
			}
			private function onImageLoadHandler(event:ProgressEvent):void{
				this.progressbar.setProgress(event.bytesLoaded,event.bytesTotal);
			}
			private function onImageCompleteHandler():void{
				this.progressbar.visible = false ;
			}
		]]>
	</mx:Script>
	<mx:Image id="img" progress="onImageLoadHandler(event);" complete="onImageCompleteHandler();"/>
	<mx:ProgressBar id="progressbar" mode="manual" x="{this.width/2 - this.progressbar.width/2}" y="{this.height/2 - this.progressbar.height/2}" visible="false" width="200" height="32"/>
</mx:Canvas>