CODEWITHSUNDEEP
apache-flexbuttonshapes
Atul
Atul

Reputation: 21

How to manage Mouse clicks on Irregular Button shapes in Flex

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

Upvotes: 2

Views: 1056

Answers (3)

tefozi
tefozi

Reputation: 5480

  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

Upvotes: 0

adamcodes
adamcodes

Reputation: 1606

Check this out: flexlib > ImageMap.

Taken from stackOverflow

Upvotes: 1

Robusto
Robusto

Reputation: 31913

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.

Upvotes: 0

Related Questions