2 Replies Latest reply on Apr 16, 2010 1:20 AM by David_F57

    Customized CanvasButton don't work any more after migration from Flex3 to Flash buider 4


      I've wrote a Class, which extends mx:Canvas with a private mx:Image control for a simple "Image Button" implement.

      The reason I don't just extend mx:Image, because when I use partial transparent svg images with the Image control, the RollOverEffect only works for the non transparent part of the image, when mouse rolls over the mx:Image control but on the transparent part of the svg(embeded as the Image control's source), the RolloutEffect is automatically applied. So instead of simply extending from mx:Image, I used a "wrapper" canvas to "hold" the mouse, so even mouse is over the transparent part of the svg, it is still on top of the Canvas. In Flex Builder 3, with 3.5 SDK, I got what I just expected.
      Now I want to use some fancy 3D effects on my CavasButton, but the behavior under Flash Builder 4 with 4.0 SDK don't work like I expected. It's like the Canvas is not used like the Flex 3 version of my CanvasButton Control: when mouse is over the transparent part of the svg, RolloutEffect is applied!

      Please someone tell me what is happening here.

      PS my CanvasButton Code is like:


      package com.xxxx.xxxx
          import mx.containers.Canvas;
          import mx.controls.Image;
          import mx.effects.Fade;
          import mx.effects.Glow;
          public class CanvasButton extends Canvas
              private var alphaDown:Fade = new Fade();
              private var alphaUp:Fade = new Fade();
              private var glow:Glow = new Glow();
              private var image:Image = new Image();;
              public function CanvasButton()
                  buttonMode = true;
              private function initEffects():void
                  const ALPHA:Number = 0.6;
                  const SOLID:Number = 2.0;
                  const DUR:int = 300;           
                  buttonMode = true;
                  alpha = ALPHA;
                  alphaDown.alphaFrom = SOLID;
                  alphaDown.alphaTo = ALPHA;
                  alphaDown.duration = DUR;
                  alphaUp.alphaFrom = ALPHA;
                  alphaUp.alphaTo = SOLID;
                  alphaUp.duration = DUR;
                  glow.color = 0xAAAAAA;
                  setStyle("rollOverEffect", alphaUp);
                  setStyle("rollOutEffect", alphaDown);
                  setStyle("mouseDownEffect", glow);
      //          setStyle("mouseUpEffect", unglow);
              public function set skin(s:Object):void
                  image.source = s;
              public function set scaleImageX(x:Number):void
                  image.scaleX = x;
              public function set scaleImageY(y:Number):void
                  image.scaleY = y;