Paradigm Shift Design

ISHITOYA Kentaro's blog.

コンポーネントの拡大縮小

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を読んでも分からない・・・.
というわけで,あきらめて次へ.