projectpanellargeimage.mxml

flex 实现的一个showcase 喜欢flex的朋友可以

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:projectPanel="com.flexShowcase.components.projectPanel.*"
	
	width="100%"
	height="100%"
	
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	
	horizontalAlign="center"
	resize="resizeEvent(event)">
	
	<mx:Script>
		<![CDATA[
			
			/////////////////////////////////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.events.ProjectPanelEvent;
			import com.flexShowcase.utils.*;
			
			import flash.geom.*;
			import flash.events.*;
			
			/////////////////////////////////////////////////////////////////////////////////
			//static public constants
			
			static public const REQUEST_MAXIMIZE:String="requestmaximize";
			static public const REQUEST_MINIMIZE:String="requestminimize";
			static public const REQUEST_NEXT_IMAGE:String="requestnextimage";
			static public const IMAGE_LOAD_COMPLETE:String="imageloadcomplete";
	
			/////////////////////////////////////////////////////////////////////////////////
			//private vars
			
			private var __imageurl:String;
			private var __maximized:Boolean=false;
			
			/////////////////////////////////////////////////////////////////////////////////
			//public vars
			
			[Bindable]
			public var useimagescale:Boolean=false;
			
			////////////////////////////////////////////////////////////
			//getter/setters
			[Bindable]
			public function set maximized(i_val:Boolean):void{
				if(i_val!=__maximized){
					__maximized=i_val;
					handleMaximizedChanged();
				}
			}
			
			public function get maximized():Boolean{
				return __maximized;
			}
			
			//------------------------------------------------------------------
			
			[Bindable]
			public function set imageURL(i_val:String):void{
				__imageurl=i_val;
				if (__imageurl == "" || __imageurl == null) {
					defaultScreenshot.visible = true;
					enlargeImageBut_mc.alpha = 0;
					shrinkImageBut_mc.alpha = 0;
				} else {
					defaultScreenshot.visible = false;
					enlargeImageBut_mc.alpha = 1;
					shrinkImageBut_mc.alpha = 1;
				}
				if(imageLoader_mc!=null){
					imageLoader_mc.alpha=0;
				}
			}
			
			public function get imageURL():String{
				return __imageurl;
			}
			
			///////////////////////////////////////////////////////////////////////////////////////////////
			//image loading
			private function handleImageLoadComplete(event:Event):void{
				Bitmap(event.target.content).smoothing = true;
				
				sizeUIToSuitImage();
				imageLoader_mc.visible=true;
			}
			
			//image sizing-------------------------------------------------------------------
			private function resizeEvent(event:Event):void {
				sizeUIToSuitImage();
			}
			
			private function sizeUIToSuitImage():void{
				if(imageLoader_mc!=null){
					if(imageLoader_mc.content!=null){
						if(useimagescale){
							var imgpoint:Point=new Point(imageLoader_mc.content.width,imageLoader_mc.content.height);
							var maxpoint:Point=new Point(width-6,height-6);
							
							var finalsizepoint:Point=GeomUtils.getResizedBoxThatFits(imgpoint,maxpoint);
							
							imageLoader_mc.width=finalsizepoint.x;
							imageLoader_mc.height=finalsizepoint.y;
						}else{
							imageLoader_mc.width=width-6;
							imageLoader_mc.height=height-6;	
						}
						defaultScreenshot.width = imageLoader_mc.width;
						defaultScreenshot.height = imageLoader_mc.height;
					}
				}
	
			}
			
			public function getLoadedImageSize():Point{
				var p:Point;
				if(imageLoader_mc.content!=null){
					p=new Point(imageLoader_mc.content.width+6,imageLoader_mc.content.height+6);
				}
				return p;
			}
			
			//maximize//minimize--------------------------------------------------------------
			private function handleMaximizeRequest(event:Event=null):void{
				var ev:ProjectPanelEvent=new ProjectPanelEvent(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MAXIMIZE)
				dispatchEvent(ev);
			}
			
			private function handleMinimizeRequest(event:Event=null):void{
				var ev:ProjectPanelEvent=new ProjectPanelEvent(ProjectPanelEvent.REQUEST_LARGE_IMAGE_MINIMIZE)
				dispatchEvent(ev);
			}
			
			private function handleMaximizedChanged():void{
				if(maximized){
					this.addNextImageClickListener();
				}else{
					this.removeNextImageClickListener();
				}
			}
			
			//next image-------------------------------------------------------------------------
			private function addNextImageClickListener():void{
				imageLoader_mc.addEventListener(MouseEvent.CLICK,handleNextImageRequest);
				imageLoader_mc.buttonMode=true;
			}
			
			private function removeNextImageClickListener():void{
				imageLoader_mc.removeEventListener(MouseEvent.CLICK,handleNextImageRequest);
				imageLoader_mc.buttonMode=false;
			}
			
			public function requestNextImage():void{
				var ev:Event=new Event(REQUEST_NEXT_IMAGE);
				dispatchEvent(ev);
			}
			
			private function handleNextImageRequest(event:Event=null):void{
				requestNextImage();
			}
				
		]]>
	</mx:Script>
	
	
	<mx:Fade id="imagefade_effect" target="imageLoader_mc" alphaFrom="0" alphaTo="1" />
	
	<mx:Canvas id="imageHolder_mc" 
		horizontalScrollPolicy="off" verticalScrollPolicy="off" 
		backgroundColor="#666666" 
		borderColor="#FFFFFF" borderThickness="3" borderStyle="solid" 
		dropShadowEnabled="true" shadowDistance="0">
		
		<projectPanel:ProjectPanelLargeImageLoadingAnim id="loading_mc"
			 verticalCenter="0" horizontalCenter="0"/>
			 
		
		<mx:SWFLoader id="imageLoader_mc" source="{this.imageURL}"
			 maintainAspectRatio="true" scaleContent="{this.useimagescale}" complete="handleImageLoadComplete(event)" completeEffect="{imagefade_effect}" />
		<mx:Image id="defaultScreenshot" source="@Embed('/assets/images/defaultScreenshot.png')" />
		
		<mx:Button id="enlargeImageBut_mc" styleName="projectPanelLargeImageFullSizeButton" right="10" 
			top="10" buttonMode="true" visible="{!maximized}"
			 toolTip="Enlarge this image"
			  click="handleMaximizeRequest()"/>
		
		<mx:Button id="shrinkImageBut_mc" styleName="projectPanelLargeImageSmallSizeButton" right="10" 
			top="10" buttonMode="true" visible="{maximized}" 
			 toolTip="Minimize this image"
			 click="handleMinimizeRequest()"/>
			
	</mx:Canvas>

</mx:HBox>