1 Reply Latest reply on Jul 10, 2006 5:16 PM by jpwrunyan

    Zoom effect bugs

    jpwrunyan Level 1
      I encounter buggy behaviour when using the zoom effect. First, the position of the component executing the zoom gradually gets displaced with multiple calls. Depending upon the easing function used the displacement is different. Second, especially with components that contain a lot of controls, the font gets distorted for one or more controls. This seems to change with each compilation and not all components are affected. If I use embedded fonts, the font size problem is eliminated. Finally, the drop shadow seems to have additional shadows added to it with each execution.

      Has anyone else seen this problem? It was present in 1.5 and i am sad to see it was not addressed. If you know any work-arounds, I would also like to know. By the way, components attached via the PopUpManager don't have a problem... perhaps because they are re-created each time.

      I am including the source code to reduplicate the behavior:

      <custom component acting like a pop-up>
      <?xml version="1.0" encoding="utf-8"?>
      <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
      title="****** TEMPLATE ******"
      show="zoomIn(event)" hide="zoomOut(event)">

      import mx.controls.Alert;
      import mx.effects.Zoom;
      import mx.events.CloseEvent;

      private var origWidth:Number;
      private var origHeight:Number;

      private function setUpListeners():void {
      origWidth = this.width;
      origHeight = this.height;

      private function zoomIn(e:Event):void {
      if (this.scaleX == 1 || this.scaleX == .01) {
      this.scaleX = .01;
      this.scaleY = .01;
      var zoom:Zoom = new Zoom();
      zoom.zoomWidthFrom = .01;
      zoom.zoomHeightFrom = .01;
      zoom.zoomWidthTo = 1;
      zoom.zoomHeightTo = 1;
      //zoom.easingFunction = EasingUtility.bounceIn;
      zoom.addEventListener("effectEnd", setOrigSize);

      private function zoomOut(e:Event):void {
      if (this.scaleX == 1) {
      this.scaleX = .999;
      this.scaleY = .999;
      this.visible = true;
      var zoom:Zoom = new Zoom();
      zoom.zoomWidthFrom = 1;
      zoom.zoomHeightFrom = 1;
      zoom.zoomWidthTo = .01;
      zoom.zoomHeightTo = .01;
      zoom.addEventListener("effectEnd", doClose);

      private function setOrigSize(e:Event):void {
      this.explicitWidth = origWidth;
      this.explicitHeight = origHeight;
      this.width = origWidth;
      this.height = origHeight;
      mx.controls.Alert.show("w: "+this.width+" h: "+this.height,


      private function doClose(e:Event):void {
      this.visible = false;
      this.scaleX = .01;
      this.scaleY = .01;


      <test application>

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:SubPanel="*" >

      <mx:Canvas width="800" height="500">
      <SubPanel:SubPanel id="testPanel" width="570" height="460" />

      <mx:Button click="testPanel.visible=!testPanel.visible" />