[flex] 求一个flex zoom resize的事例
wl_liu_lin
2010-02-27
http://www.sony.com/index.php
这个是sony的主页。进入以后在最下方有四个box(应该是box--See,Hear,Play,Shop).请教一下它的MouseOver放大,MouseOut缩小,以及Click放大,Close缩小。是怎样实现的。本人自己也做了一个,但是效果不是很理想。哪个达人有比较好的事例的,可否给一个,学习一下。谢谢 以下是我实现的代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.events.FlexEvent; import mx.controls.Alert; import mx.effects.Zoom; import mx.effects.Resize; //标识 private var t1Mode:int = 0; private var t2Mode:int = 0; private var t3Mode:int = 0; private var t1Zoom:Zoom = new Zoom(); private var t2Zoom:Zoom = new Zoom(); private var t3Zoom:Zoom = new Zoom(); private var t1Resize:Resize = new Resize(); public function init():void{ t1Zoom.target = t1; t2Zoom.target = t2; t3Zoom.target = t3; t1Resize.target = t1; //t1.addEventListener(MouseEvent.MOUSE_MOVE,onMouseOver); } public function onMouseOver(event:MouseEvent):void{ var id:String = TitleWindow(event.currentTarget).uid; var subid:String = getId(id); switch(subid){ case 't1': trace("t1"); trace("firstheight=" + t1.height) if(t1Mode != 1){ t1Zoom.zoomHeightFrom = 0.7; t1Zoom.zoomHeightTo = 1.0; t1Zoom.zoomWidthFrom = 0.8; t1Zoom.zoomWidthTo = 1.0; t1Zoom.play(); t2Zoom.zoomWidthFrom = 0.8; t2Zoom.zoomWidthTo = 0.7; t2Zoom.play(); t3Zoom.zoomWidthFrom = 0.8; t3Zoom.zoomWidthTo = 0.7; t3Zoom.play(); trace("lastheight=" + t1.height); } //twResize.end(); break; case 't2': trace("t2"); t2Zoom.zoomHeightFrom = 0.7; t2Zoom.zoomHeightTo = 1.0; t2Zoom.zoomWidthFrom = 0.8; t2Zoom.zoomWidthTo = 1.0; t2Zoom.play(); t1Zoom.zoomWidthFrom = 0.8; t1Zoom.zoomWidthTo = 0.7; t1Zoom.play(); t3Zoom.zoomWidthFrom = 0.8; t3Zoom.zoomWidthTo = 0.7; t3Zoom.play(); break; case 't3': trace("t3"); t3Zoom.zoomHeightFrom = 0.7; t3Zoom.zoomHeightTo = 1.0; t3Zoom.zoomWidthFrom = 0.8; t3Zoom.zoomWidthTo = 1.0; t3Zoom.play(); t2Zoom.zoomWidthFrom = 0.8; t2Zoom.zoomWidthTo = 0.7; t2Zoom.play(); t1Zoom.zoomWidthFrom = 0.8; t1Zoom.zoomWidthTo = 0.7; t1Zoom.play(); break; } } public function onMouseOut(event:MouseEvent):void{ var id:String = TitleWindow(event.currentTarget).uid; var subid:String = getId(id); switch(subid){ case 't1': trace("t1"); if(t1Mode != 1){ t1Zoom.zoomHeightFrom = 1.0; t1Zoom.zoomHeightTo = 0.7; t1Zoom.zoomWidthFrom = 1.0; t1Zoom.zoomWidthTo = 0.8; t1Zoom.play(); t2Zoom.zoomWidthFrom = 0.7; t2Zoom.zoomWidthTo = 0.8; t2Zoom.play(); t3Zoom.zoomWidthFrom = 0.7; t3Zoom.zoomWidthTo = 0.8; t3Zoom.play(); } break; case 't2': trace("t2"); t2Zoom.zoomHeightFrom = 1.0; t2Zoom.zoomHeightTo = 0.7; t2Zoom.zoomWidthFrom = 1.0; t2Zoom.zoomWidthTo = 0.8; t2Zoom.play(); t1Zoom.zoomWidthFrom = 0.7; t1Zoom.zoomWidthTo = 0.8; t1Zoom.play(); t3Zoom.zoomWidthFrom = 0.7; t3Zoom.zoomWidthTo = 0.8; t3Zoom.play(); break; case 't3': trace("t3"); t3Zoom.zoomHeightFrom = 1.0; t3Zoom.zoomHeightTo = 0.7; t3Zoom.zoomWidthFrom = 1.0; t3Zoom.zoomWidthTo = 0.8; t3Zoom.play(); t2Zoom.zoomWidthFrom = 0.7; t2Zoom.zoomWidthTo = 0.8; t2Zoom.play(); t1Zoom.zoomWidthFrom = 0.7; t1Zoom.zoomWidthTo = 0.8; t1Zoom.play(); break; } } private function getId(id:String):String{ var index:int = id.lastIndexOf(".",id.length); var subid:String = id.substring(index+1,id.length); return subid; } private function onClick(event:MouseEvent):void{ var id:String = TitleWindow(event.currentTarget).uid; var subid:String = getId(id); switch(subid){ case 't1': if(t1Mode == 0){ //Alert.show("t1.height=" + t1.height); t1Resize.widthTo = t1.width + 100; t1Resize.heightTo = t1.height + 300; t1Resize.play(); t1.showCloseButton = true; t1Mode = 1; //Alert.show("t1Mode1=" + t1Mode.toString()); t1.addEventListener(Event.CLOSE,onClose); } break; case 't2': break; case 't3': break; } } private function onClose(event:Event):void{ Alert.show("t1.height=" + t1.height); t1Resize.widthTo = (t1.width - 100)*0.8; t1Resize.heightTo = (t1.height - 300)*0.7; t1Resize.play(); //t1.removeEventListener(Event.CLOSE,onClose); //t1.showCloseButton = false; //Alert.show(t1Mode.toString()); t1.invalidateDisplayList(); t1.addEventListener(FlexEvent.UPDATE_COMPLETE,onComplete); } private function onComplete(event:FlexEvent):void{ t1.showCloseButton = false; t1Mode = 0; t1.scaleX = 0.8; t1.scaleY = 0.7; //Alert.show("t1Mode2="+t1Mode.toString()); t1.removeEventListener(FlexEvent.UPDATE_COMPLETE,onComplete); } ]]> </mx:Script> <mx:HBox width="100%" height="100%" horizontalGap="1" horizontalAlign="center" verticalAlign="middle"> <mx:TitleWindow id="t1" title="+网站设计" height="100" width="200" scaleX="0.8" scaleY="0.7" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center" verticalAlign="middle" rollOver="onMouseOver(event)" rollOut="onMouseOut(event)" click="onClick(event)" > <mx:Image source="image/3w.jpg"/> </mx:TitleWindow> <mx:TitleWindow id="t2" title="+竞价推广" height="100" width="200" scaleX="0.8" scaleY="0.7" horizontalScrollPolicy="off" verticalScrollPolicy="off" horizontalAlign="center" verticalAlign="middle" rollOver="onMouseOver(event)" rollOut="onMouseOut(event)"> <mx:Image source="image/bid.jpg"/> </mx:TitleWindow> <mx:TitleWindow id="t3" title="+VI设计" height="100" width="200" scaleX="0.8" scaleY="0.7" horizontalScrollPolicy="off" verticalScrollPolicy="off" rollOver="onMouseOver(event)" rollOut="onMouseOut(event)"> <mx:Image source="image/vi.jpg"/> </mx:TitleWindow> </mx:HBox> </mx:Application> |