Flex加载大图片等待特效 Flex特效 (利用了ProgressBar)
|
从网上看到的一篇加载图片显示进度条的示例。该示例组要自定义了一个Image类作为控件，继承自Image，在自定义类里面实现了ProgressBar的监听，感觉不错，可以借鉴一下。 ? <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" ??? xmlns:controls="com.favzone.controls.*" ??? layout="absolute" > ??? ??? <mx:Style source="styles.css" />??? ? ??? <mx:HBox? horizontalCenter="0" top="20" horizontalGap="16"> ??????????????????? ??????? <mx:Panel title="Select a Source (double click)" width="281" height="374" >??????????? ??????????? <mx:Tile width="100%" height="100%"? tileHeight="75" tileWidth="75" paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" verticalScrollPolicy="off"> ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button01.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button01.jpg?v=0&r='+Math.random();}" /> ??????????????????????? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button02.jpg" ? ??????????????????????doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button02.jpg?v=0&r='+Math.random();}" /> ??????????????????????? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button03.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button03.jpg?v=0&r='+Math.random();}" /> ? ?????? ?????????????<controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button04.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button04.jpg?v=0&r='+Math.random();}" /> ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button05.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button05.jpg?v=0&r='+Math.random();}" /> ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button06.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button06.jpg?v=0&r='+Math.random();}" /> ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button07.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button07.jpg?v=0&r='+Math.random();}" /> ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button08.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button08.jpg?v=0&r='+Math.random();}" /> ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button09.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button09.jpg?v=0&r='+Math.random();}" />??????????????? ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button10.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button10.jpg?v=0&r='+Math.random();}" />??????????????? ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button11.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button11.jpg?v=0&r='+Math.random();}" />??????????????? ? ??????????????????? <controls:LoadImages width="75" height="75" source="http://favzone.com/images/crybutton/button12.jpg" ??????????????????????? doubleClickEnabled="true" doubleClick="{loadingImage.source='http://favzone.com/images/crybutton/button12.jpg?v=0&r='+Math.random();}" />??????????????? ??????????? </mx:Tile>??????????? ??????? </mx:Panel>????? ??????? ??????? <mx:Panel title="Loading Image Component" > ??????????? ??????????? ??????????? <controls:LoadImages id="loadingImage" width="500" height="333" ??????????????????? progressPercentWidth="80" progressHeight="20" /> ??????????? ??????????? ??????? </mx:Panel> ??? </mx:HBox> ??????? ??????? ??? <mx:ApplicationControlBar dock="true"> ??????? <mx:Label text="Loading" styleName="headderText"/>??????? ??????? <mx:Spacer width="-20" />??????? ??????? <mx:Label text="Images" styleName="headderTextBlue"/> ??????? <mx:Script> ??????????? <![CDATA[ ??????????????? import flash.net.navigateToURL;??????????? ??????????? ]]> ??????? </mx:Script> ???? ??? </mx:ApplicationControlBar> ??? </mx:Application> ?
package com.favzone.controls { ??? import flash.events.Event; ??? import flash.events.IOErrorEvent; ??? import flash.events.ProgressEvent; ??? import flash.events.SecurityErrorEvent; ??? ??? import mx.controls.Image; ??? import mx.controls.ProgressBar; ??? import mx.controls.ProgressBarMode; ??? import mx.events.FlexEvent; ??? import mx.events.ResizeEvent; ??? ??? public class LoadImages extends Image ??? { ??????? //--------------------------------------------------------------------- // Private properties //--------------------------------------------------------------------- ??????? private var _progressBar:ProgressBar;??????? ??????? ??????? private var _progressPercentWidth:Number = 80; ??????? private var _progressHeight:Number = 20; ??????? ??????? //--------------------------------------------------------------------- // Public properties //--------------------------------------------------------------------- ??????? ??????? /** ???????? * The relative width of the progress bar ???????? */ ?????? ?public function set progressPercentWidth( value:Number ):void ??????? { ??????????? _progressPercentWidth = value; ??????????? evaluateProgressSize(); ??????? } ??????? public function get progressPercentWidth():Number ??????? { ??????????? return _progressPercentWidth;??? ??????? } ??????? ??????? /** ???????? * The height of the progress bar ???????? */ ??????? public function set progressHeight( value:Number ):void ??????? { ??????????? _progressHeight = value; ??????????? evaluateProgressSize(); ??????????? ??????? } ??????? public function get progressHeight():Number ??????? { ??????????? return _progressHeight; ??????? } ??????? ??????? /** ???????? * The progress bar label ???????? */ ??????? public function set progressLabel( value:String ):void ??????? { ??????????? _progressBar.label = value; ??????? } ??????? public function get progressLabel():String ??????? { ??????????? return _progressBar.label; ??????? } ??????? ??????? //--------------------------------------------------------------------- // Constructior //--------------------------------------------------------------------- ??????? public function LoadImages() ??????? { ??????????? this.addEventListener( ResizeEvent.RESIZE,resizeHandler ); ??????????? this.addEventListener( Event.OPEN,openHandler ); ??????????? this.addEventListener( Event.COMPLETE,completeHandler ); ??????????? this.addEventListener( IOErrorEvent.IO_ERROR,ioErrorHandler ); ??????????? this.addEventListener( SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler ); ??????? } ??????? ??????? ? ??????? override protected function createChildren():void ??????? { ??????????? _progressBar = new ProgressBar(); ?????????? ?_progressBar.addEventListener( FlexEvent.CREATION_COMPLETE,progressCreated ); ??????????? _progressBar.visible = false; ??????????? _progressBar.includeInLayout = false; ??????????? ??????????? _progressBar.mode = ProgressBarMode.EVENT; ??????????? _progressBar.source = this; ??????????? ??????????? _progressBar.label = "%3%%"; ??????????? _progressBar.labelPlacement = "center"; ??????????? ??????????? this.addChild( _progressBar ); ??????? } ??????? ??????? /** ???????? * Set the dimensions of the progress bar ???????? */ ??????? protected function evaluateProgressSize():void ??????? { ??????????? if( _progressBar == null ) ??????????????? return; ??????????????? ??????????? _progressBar.x???????? = this.width * ( ( 1 - ( progressPercentWidth / 100 ) ) * 0.5 ); ??????????? _progressBar.y???????? = ( this.height * 0.5 ) - ( progressHeight * 0.5 ); ??????????? _progressBar.width???? = this.width * ( progressPercentWidth / 100 ); ??????????? _progressBar.height = progressHeight ??????? } ??????? ??????? /** ???????? * Show the progress bar ???????? */ ??????? protected function showProgress():void ??????? { ??????????? // resets the progress bar before it is shown ??????????? this.dispatchEvent( new ProgressEvent(ProgressEvent.PROGRESS,false,100 ) ); ??????????? ??????????? _progressBar.visible = true; ??????? } ??????? ??????? /** ???????? * Hide the progress bar ???????? */ ??????? protected function hideProgress():void ??????? { ??????????? _progressBar.visible = false; ??????? } ??????? ? //--------------------------------------------------------------------- // Event handlers //--------------------------------------------------------------------- ??????? ??????? private function progressCreated( event:FlexEvent ):void ??????? { ??????????? evaluateProgressSize(); ??????? } ??????? ??????? private function resizeHandler( event:ResizeEvent ):void ??????? { ??????????? evaluateProgressSize(); ??????? } ??????? ??????? private function openHandler( event:Event ):void ??????? { ??????????? showProgress(); ??????? } ? ??????? private function completeHandler( event:Event ):void ??????? { ??????????? hideProgress(); ??????? } ??????? ??????? private function ioErrorHandler( event:IOErrorEvent ):void ??????? { ??????????? hideProgress(); ??????? } ? ??????? private function securityErrorHandler( event:SecurityError ):void ??????? { ??????????? hideProgress() ??????? } ??????? ??? } ??? } （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |