FLEX入门实例--------各种Effect的综合运用

                                      FLEX入门实例--------各种Effect的综合运用

 

废话少说看代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			
			import mx.effects.easing.Bounce;
			[Bindable]
			private var dp:Array=["asset/1.jpg","asset/2.jpg","asset/3.jpg","asset/1.jpg","asset/2.jpg","asset/3.jpg"];
			
			private function playImg():void{
				wlLeft.play();
			}
			private var bigZoomCount:int=3;
			
			private function overHanlder(event:MouseEvent):void{
				overImg.source=event.currentTarget.source;
			}
			private function oneclickHanlder(event:MouseEvent):void{
				if(bigZoomCount>0){
					bigZoomCount--;
					big.zoomHeightTo=(3-bigZoomCount)*0.2+1;
					//trace(big.zoomHeightTo);
					big.zoomWidthTo=big.zoomHeightTo;
					big.play();
				}
			}
			
			private function doubleClickHanlder(event:MouseEvent):void{
				if(bigZoomCount<3){
					bigZoomCount++;
					small.zoomHeightTo=(3-bigZoomCount)*0.2+1;
					//trace(small.zoomHeightTo);
					small.zoomWidthTo=small.zoomHeightTo;
					small.play();
					
				}
			}
			
		  private function setImgCanToLocalPoint():void{
		  	
		  }
		  
		]]>
	</mx:Script>
	
	<mx:Style>
		Canvas{
			borderColor:"red";	
			borderStyle:"solid";
			boderThickness:"3";
		}
	</mx:Style>
	<mx:Move id="wlLeft" target="{canContainer}" xFrom="{scorllBox.x+scorllBox.width+6}"
		xTo="{scorllBox.x-6-6*110}" repeatCount="0" repeatDelay="0" duration="{6*2000}"/>
	<mx:Parallel  id="durSeq">
			<mx:Resize duration="300" easingFunction="Bounce.easeOut"/>
		<mx:Sequence>
			<mx:Blur blurXFrom="0" blurXTo="20" blurYFrom="0" blurYTo="20" duration="300" easingFunction="Bounce.easeOut"/>
			<mx:Blur blurXFrom="20" blurXTo="0" blurYFrom="20" blurYTo="0" duration="300" easingFunction="Bounce.easeOut"/>
		</mx:Sequence>
	</mx:Parallel>
	
	<mx:Zoom id="big"  target="{imgCan}"/>
	<mx:Zoom id="small" target="{imgCan}"/>
	
	<mx:Canvas id="scorllBox" width="600" height="100" x="30" y="30" 
		verticalScrollPolicy="off" horizontalScrollPolicy="off">
		<mx:HBox id="canContainer" width="100%" height="100%">
		<mx:Repeater id="rp" dataProvider="{dp}">
			<mx:Canvas width="100" height="100">
				<mx:Image width="100%" height="100%" source="{rp.currentItem}"
					 rollOverEffect="{durSeq}" mouseOver="overHanlder(event);" />
			</mx:Canvas>
		</mx:Repeater>
		</mx:HBox>
	</mx:Canvas>
	<mx:HBox>
	<mx:Button label="play" click="playImg();" x="200" y="200"/>
	<mx:Button label="big" click="oneclickHanlder(event);" x="200" y="200"/>
	<mx:Button label="small" click="doubleClickHanlder(event);" x="200" y="200"/>
	</mx:HBox>
	<mx:Canvas  id="imgCan"   x="300" y="300" borderColor="#cc0033" cornerRadius="18"
		 borderStyle="solid" borderThickness="5" verticalScrollPolicy="off" horizontalScrollPolicy="off"
		  width="300" height="300" doubleClickEnabled="true" dropShadowEnabled="true" dropShadowColor="black"  shadowDirection="right" shadowDistance="10"
		  click="oneclickHanlder(event);"
		  doubleClick="doubleClickHanlder(event);">
		<mx:Image id="overImg" width="100%" height="100%"/>
	</mx:Canvas>
</mx:Application>

 

感觉flex的doubleClick事件处理得不是很到位,还有effect的pause()方法执行后,再调用play()方法,这个效果会从头开始,而不是接着进行,希望各路高人能在小弟的代码上完善,

 

评论

1 楼 karlom 2010-09-08  

再调用play()方法,这个效果会从头开始,而不是接着进行,这个是完全正确的，如果你要接着进行，应该调用resume()方法才对，而不是play().