preloader.mxml

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	
	width="100%"
	height="100%"
	
	backgroundColor="#EfEfEf"
	
	currentState="{ScreenStates.PRELOADER_CLOSED}"
	creationComplete="creationCompleteHandler(event)">
	
	
	<mx:Script>
		<![CDATA[
			
			//////////////////////////////////////////////////
			//import
			
			import com.flexShowcase.constants.*;
			import com.flexShowcase.events.PreloaderEvent;
			
			import mx.effects.Fade;
			import mx.events.EffectEvent;
			
			//////////////////////////////////////////////////
			//public variables
			
			
			//////////////////////////////////////////////////
			//private variables
			
			private var messages:Array;
			
			private var projectlistLoaded:Boolean=false;
			private var tagsLoaded:Boolean=false;
			private var industriesLoaded:Boolean=false;
			private var technologiesLoaded:Boolean=false;
			private var applicationsLoaded:Boolean=false;
			
			private var sectionsLoaded:uint=0;
			
			//////////////////////////////////////////////////
			//initialization
			
			private function creationCompleteHandler(event:Event):void {
				//
			}
			
			//////////////////////////////////////////////////
			//public functions
			
			public function open():void {
				currentState = ScreenStates.PRELOADER_OPEN;
			}
			public function close():void {
				currentState = ScreenStates.PRELOADER_CLOSED;
			}
			
			//////////////////////////////////////////////////
			//private functions
			
			public function handleSectionLoaded(section:String):void {
				var sectionLoaded:Boolean=this[section+"Loaded"]
				if(!sectionLoaded){
					sectionLoaded=true
					this.sectionsLoaded++
					trace("PRELOADER: handleSectionLoaded: "+this.sectionsLoaded)
					this["segment"+this.sectionsLoaded].visible=true;
				}
				
				if(this.sectionsLoaded>=5){
					var ev:PreloaderEvent=new PreloaderEvent(PreloaderEvent.LOADING_COMPLETE)
					this.dispatchEvent(ev)
					this.sectionsLoaded=0
				}
			}
			
			//////////////////////////////////////////////////
			//handler functions
			
			public function handleCloseTransitionEffectEnd(effectEvent:EffectEvent):void {
				var preloaderEvent:PreloaderEvent = new PreloaderEvent(PreloaderEvent.CLOSED);
				
				dispatchEvent(preloaderEvent);
			}
			
			
		]]>
	</mx:Script>
	
	
	<mx:states>
		<mx:State name="{ScreenStates.PRELOADER_OPEN}" />
		<mx:State name="{ScreenStates.PRELOADER_CLOSED}" />
	</mx:states>
	
	
	<mx:transitions>
		<mx:Transition id="openTransition" fromState="{ScreenStates.PRELOADER_CLOSED}" toState="{ScreenStates.PRELOADER_OPEN}">
			<mx:Parallel id="openParallel" targets="{[panel,panelShadow]}">
				<mx:Resize startDelay="300" duration="150" widthFrom="1" widthTo="378" targets="{[panelShadow]}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
				<mx:Move startDelay="400" duration="300" yFrom="400" yTo="205" targets="{[panel]}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
			</mx:Parallel>
		</mx:Transition>
		
		<mx:Transition id="closeTransition" fromState="{ScreenStates.PRELOADER_OPEN}" toState="{ScreenStates.PRELOADER_CLOSED}">
			<mx:Parallel id="closeParallel" targets="{[panel,panelShadow]}">
				<mx:Move startDelay="0" duration="300" yFrom="205" yTo="400" targets="{[panel]}" easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
				<mx:Resize startDelay="200" duration="200" widthFrom="378" widthTo="1" 
					targets="{[panelShadow]}" effectEnd="handleCloseTransitionEffectEnd(event)"
					easingFunction="{AnimationFunctions.EXPONENTIAL_EASING_FUNCTION}" />
			</mx:Parallel>
		</mx:Transition>
	</mx:transitions>
	
	
	<mx:Canvas id="background" width="100%" height="100%" alpha="1">
		<mx:Image source="@Embed('/assets/images/preloader/preloader_bg.png')" maintainAspectRatio="false" width="100%" y="279" />
		<mx:Canvas backgroundColor="0xe5e5e5" y="380" width="100%" height="100%" />
	</mx:Canvas>
	
	<mx:Image id="panelShadow" source="@Embed('/assets/images/preloader/preloader_greyPanel_shadow.png')" y="343" horizontalCenter="0" width="1" maintainAspectRatio="false" />
	
	<mx:Canvas id="panelMask" horizontalCenter="0" backgroundAlpha="0" width="400" height="353" backgroundColor="0x000099" horizontalScrollPolicy="off" verticalScrollPolicy="off">
		<mx:Canvas id="panel" y="400" horizontalCenter="0">
			<mx:Image source="@Embed('/assets/images/preloader/preloader_greyPanel.png')" />
			<mx:Image id="segment1" x="34" y="105" visible="false" source="@Embed('/assets/images/preloader/preloader_loadBar_segment.png')" />
			<mx:Image id="segment2" x="96" y="105" visible="false" source="@Embed('/assets/images/preloader/preloader_loadBar_segment.png')" />
			<mx:Image id="segment3" x="158" y="105" visible="false" source="@Embed('/assets/images/preloader/preloader_loadBar_segment.png')" />
			<mx:Image id="segment4" x="220" y="105" visible="false" source="@Embed('/assets/images/preloader/preloader_loadBar_segment.png')" />
			<mx:Image id="segment5" x="282" y="105" visible="false" source="@Embed('/assets/images/preloader/preloader_loadBar_segment.png')" />
		</mx:Canvas>
	</mx:Canvas>
	
	
</mx:Canvas>