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:
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("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;
This is not so much as an answer to your canvas issue as an alternative, the group control(think of it as a light weight canvas) is ideal for what you are trying to do and as it has very little of the baggae of canvas makes for an efficient component base.
group has a property mouseEnabledWhereTransparent, so for 'shaped buttons' you set it to false for what you want to do you set it to true.
Thx a LOT David!
That works perfectly for me!
I'm more a vc++ guy, but I'm working hard on my own web project right now. Flex + Symfony. So much to learn...