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()方法,这个效果会从头开始,而不是接着进行,希望各路高人能在小弟的代码上完善,