コンポーネントの拡大縮小
Flex祭り続行中です.
コンポーネントの拡大縮小にはまる.
Flexでは様々の種類のEffectがあらかじめ用意されていて,例えば
var zoom:Zoom = new Zoom(someComponent); zoom.zoomHeightTo = 5; //times zoom.zoomWidthTo = 5; zoom.play();
とかすると,Zoomできたりする.他にもmx.effectsにあるように組み付けのEffectはすぐに使えるものばかりが用意されている.
さて,僕はマウスオーバーで拡大,アウトで元のサイズに戻るコンポーネントを作っているのだけれども,これが厄介で.
ZoomTest
の写真にカーソルを合わせると,拡大縮小されるが,何回がすばやい速度でやると,なぜか,元の位置から移動してしまう.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Image; import mx.effects.Zoom; private var rect:Shape = new Shape(); private var zoom:Zoom = new Zoom(); public function initApp():void{ image.addEventListener(MouseEvent.MOUSE_OVER, this.onMouseOver); image.addEventListener(MouseEvent.MOUSE_OUT, this.onMouseOut); this.zoom.target = image; } //image 1 public function onMouseOver(event:MouseEvent):void{ if(this.zoom.isPlaying){ return; } this.zoom.duration = 300; this.zoom.zoomHeightTo = 8; this.zoom.zoomWidthTo = 8; this.zoom.zoomHeightFrom = 1; this.zoom.zoomWidthFrom = 1; this.zoom.play(); } public function onMouseOut(event:MouseEvent):void{ if(this.zoom.isPlaying){ var timer:Timer = new Timer(300); timer.repeatCount = 1; timer.addEventListener(TimerEvent.TIMER_COMPLETE, this.onTimer); timer.start(); return; } this.zoomOut(); } public function onTimer(event:TimerEvent):void{ this.zoomOut(); } public function zoomOut():void{ this.zoom.duration = 300; this.zoom.zoomHeightTo = 1; this.zoom.zoomWidthTo = 1; this.zoom.play(); } ]]> </mx:Script> <mx:Image id="image" source="test.gif" x="200" y="200" width="20" height="20" complete="initApp();"/> </mx:Application>
とかいうソースコードなのだけれども.
どうもZoomは中心座標でZoomするEffectのようなので,中心座標がZoom時におかしくなっているのではないかと思う.
Zoomの設定時に
this.zoom.originX = 0; this.zoom.originY = 0;
と明示的に指定すると
ZoomTest2の様に改善する.
でも,真ん中からニューって出したいんだよなぁとおもって,mouseOutのZoomに
this.zoom.originX = this.width / 2; this.zoom.originY = this.height / 2;
とか
this.zoom.originX = this.explisitWidth / 2; this.zoom.originY = this.explicitHeight / 2;
とか
this.zoom.originX = this.unscaledWidth / 2; this.zoom.originY = this.unscaledHeight / 2;
とかしてもだめ.というかむしろ画面外に飛んでいく.
Adobe - Error Pageを読んでも分からない・・・.
というわけで,あきらめて次へ.