flex fill rect with many colors and rotation 45 degrees

123 Views Asked by At

Is there are any way to fill s:Rect with 3-4 different colors and rotation 45 degrees? Something like:

    <s:fill>
        <s:SolidColor  color="#ff0000" />
        <s:SolidColor  color="#00ff00" />
        <s:SolidColor  color="#ffff00" />
    </s:fill>
2

There are 2 best solutions below

3
On

Use LinearGradient as the fill property, like so:

<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:LinearGradient rotation="45">
            <s:GradientEntry color="#ff0000" />
            <s:GradientEntry color="#00ff00" />
            <s:GradientEntry color="#ffff00" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>
0
On

iF you want in mxml then @RIA star is correct but if you want in action script here is the code. Its quite long but you can reduce it

protected function box1_mouseOverHandler(event:MouseEvent):void
        {
            if(event.currentTarget!=null)
            {
                if(event.type == MouseEvent.MOUSE_OVER)
                {
                    var fill:LinearGradient = new LinearGradient();

                    var g1:GradientEntry = new GradientEntry(0xE7E7E7);
                    var g2:GradientEntry = new GradientEntry(0xFDFDFD);

                    fill.entries = [g1,g2];
                    fill.rotation = 45;
                    event.currentTarget.backgroundFill = fill;
                    Mouse.cursor = MouseCursor.BUTTON;
                }
                else
                {
                    var fill1:LinearGradient = new LinearGradient();

                    var g3:GradientEntry = new GradientEntry(0xFDFDFD);
                    var g4:GradientEntry = new GradientEntry(0xE7E7E7);

                    fill1.entries = [g3,g4];
                    fill1.rotation = 45;
                    event.currentTarget.backgroundFill = fill1;
                    Mouse.cursor = MouseCursor.AUTO;
                }
            }
        }