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

sjz168

于 2011-06-23 16:31:00 发布

阅读量1.1k

点赞数

分类专栏： Flex 文章标签： flex function import image application string

本文链接：https://blog.csdn.net/sjz168/article/details/6563846

版权

Flex 专栏收录该内容

125 篇文章 0 订阅

订阅专栏

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="*"
layout="absolute" >

<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
{
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()
  }

}

}