Flex加载大图片等待特效 Flex特效 (利用了ProgressBar)

来源：互联网发布：南水北调失败知乎编辑：程序博客网时间：2024/05/05 07:23

从网上看到的一篇加载图片显示进度条的示例。该示例组要自定义了一个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, false, 0, 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()

}