Question

Having problem with creating a rectangle with alpha fill. Seems like UIComponent doesnot allow the “Alpha” of the filled rectangle, and converts it into 100% alpha ( alpha=1). How to make a alpha-filled rectangle in flex’s UIComponent ?

var uic:UIComponent = new UIComponent(); 


var mc:MovieClip = new MovieClip(); 

mc.graphics.beginFill(0xffcc33,0.2) // <<<<<<NOTICE THE ALPHA FILL
mc.graphics.lineStyle( 1,0xffcc33);
mc.graphics.drawRect(0,0,100,100);
mc.graphics.endFill();
uic.addChild(mc);

addElement(uic);

PS: additionally, even the filter effects like “Glow” don’t work when adding movieclip to UIComponent.

Answer 1

You could use this code to create rectangle with “ALPHA” fill

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               minWidth="955"
               minHeight="600">

    <fx:Script>
        <![CDATA[
        import mx.graphics.SolidColor;
        import mx.graphics.SolidColorStroke;

        import spark.primitives.Rect;

        public function makeRect():void {
            var rect:Rect = new Rect();
            rect.width = 100;
            rect.height = 100;

            rect.fill = new SolidColor(0xffcc33, 0.2);
            rect.stroke = new SolidColorStroke(0xffcc33, 1);

            addElement(rect);
        };
    ]]>
    </fx:Script>

    <s:Button click="makeRect()"/>

</s:Application>