How to manage Mouse clicks on Irregular Button shapes in Flex

Question

Hi,

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

1. Create ArrowButtonsHolder class by inheriting from Canvas

2. 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

3. 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