[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>
Global site tag (gtag.js) - Google Analytics