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

    c.nicos

      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()
              {
                  super();
                  buttonMode = true;
                  addChild(image);
                  initEffects();
              }
             
              private function initEffects():void
              {
                  const ALPHA:Number = 0.6;
                  const SOLID:Number = 2.0;
                  const DUR:int = 300;           
                 
                  buttonMode = true;
                  this.
                  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;
              }

       

              ...

              ...

              ...
             
          }
      }