How to manage Mouse clicks on Irregular Button shapes in Flex - apache-flex

Question

In Flex, I am trying to design 3 buttons similar to the image uploaded at
http://www.freeimagehosting.net/uploads/f14d58b49e.jpg
The mouse over/click on image should work only on red colored area of the button.
How can I manage the Mouse clicks or Irregular Button shapes in Flex?
Thnx ... Atul

Answer 1

Check this out: flexlib > ImageMap.
Taken from stackOverflow

Answer 2

Use button skins based on a vector graphic (e.g., one made in Illustrator), save each state as a named symbol in the document, then export as SWF. Reference the skins as follows:
.stepButton {
upSkin: Embed(source="myfile.swf", symbol="StepButton");
downSkin: Embed(source="myfile.swf", symbol="StepButtonDown");
overSkin: Embed(source="myfile.swf", symbol="StepButtonOver");
disabledSkin: Embed(source="myfile.swf", symbol="StepButtonDisabled");
}
Flash will automatically determine the hit area from the visible portion. This example (not called "myfile.swf") is working for us right now in an application.

Answer 3

Create ArrowButtonsHolder class by inheriting from Canvas
Create 3 children classes also inherited from Canvas. For example LeftArrowButton, MiddleArrowButton, RightArrowButton
public class LeftArrowButton:Canvas {
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// draw your arrow here
// use graphics to do it
graphics.beginFill(0xFF0000);
graphics.lineStyle(1, 0x000000);
graphics.moveTo(0, 0);
graphics.lineTo(30, 0);
graphics.lineTo(50, 25);
graphics.lineTo(30, 50);
graphics.lineTo(0, 50);
graphics.lineTo(0, 0);
graphics.endFill();
}
}
You also can create general class ArrowButton and inherit another 3 from that class and override drawing function
Add this 3 child button object to ArrowButtonsHolder by overriding createChildren():void method
public class ArrowButtonsHolder:Canvas {
// ...
private var leftArrowButton:LeftArrowButton;
private var middleArrowButton:MiddleArrowButton;
private var rightArrowButton:RightArrowButton;
// ...
protected override function createChildren():void {
super();
// create buttons
leftArrowButton = new LeftArrowButton();
middleArrowButton = new LeftArrowButton();
rightArrowButton = new LeftArrowButton();
// add them to canvas
addChild(leftArrowButton);
addChild(middleArrowButton);
addChild(rightArrowButton);
// position these button by adjusting x, y
leftArrowButton.x = 0;
middleArrowButton.x = 50;
rightArrowButton.x = 100;
// assign event listeners
leftArrowButton.addEventListener(MouseEvent.CLICK, onLeftArrowButtonClick);
middleArrowButton.addEventListener(MouseEvent.CLICK, onMiddleArrowButtonClick);
rightArrowButton.addEventListener(MouseEvent.CLICK, onRightArrowButtonClick);
}
private onLeftArrowButtonClick(event:MouseEvent):void
{
trace("Left button clicked");
}
// .. etc for another 2 methods implemented here
}
PS: There might be tons of syntax mistakes in my code but you should get general idea how to do it