How to create a Flex image with transparent border and rounded corners?

Question

I have a photo in a Flex project:

<s:Image source="@Embed('images/photo.png')" />

---

But now I'm wondering if I can make this image as the image below, in Flex (4 / 4.5 / 4.6) (in MXML and/or ActionScript 3):

Is this possible?

Answer 1

Here's a feathering mask tutorial in flash that you should be able to port to Flex.

Answer 2

Yes it is possible, first you need to create a mask layer for the rounder corners and inner shadow using AI or PS

1. Create a mask in Photoshop or AI. If you're using PS, it must be a vector mask.
2. Import it to Flash catalyst. If you're using PS, you must chose "Shape Layers > Keep Editable" in the import dialog.
3. In the layers panel, you'll see a Group with your masked content inside of it. Anything that goes inside that group will be masked.
4. Add the one image inside the masked group and copy the masked code in code view of Flash catalyst. (FC)

Now create one skin class for the spark image and add the mask code above the imageDisplay (BitmapImage).

MaskedImageSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">

    <s:states>
        <s:State name="uninitialized" />
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor")))
                {
                    background.visible = false;
                    background.includeInLayout = false;
                }
                else
                {
                    background.visible = true;
                    background.includeInLayout = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>        
    </fx:Script>

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Image")]
        ]]>
    </fx:Metadata>

    <!--- Defines the appearance of the image background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <!-- @private -->
            <s:SolidColor id="bgFill"/>
        </s:fill>
    </s:Rect>

    <s:Group x="0" y="0">
        <s:filters>
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="45" distance="10" />
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="90" distance="10"/>
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-45" distance="10" />
            <s:DropShadowFilter color="#FFFFFF" inner="true" blurX="10" blurY="10" quality="5" alpha="0.85" angle="-90" distance="10"/>
        </s:filters>
        <s:mask>
            <s:Group x="0" y="0" width="280" height="180" >
                <s:Rect left="0" right="0" top="0" bottom="0" radiusX="10" radiusY="10">
                    <s:fill>
                        <s:SolidColor color="#FFFFFF"/>
                    </s:fill>
                </s:Rect>
            </s:Group>

        </s:mask>

        <!--- Primary image display skin part. -->
        <s:BitmapImage id="imageDisplay" left="0" top="0" right="0" bottom="0"/>

    </s:Group>




    <!--- Progress indicator skin part. -->
    <s:Range id="progressIndicator" skinClass="spark.skins.spark.ImageLoadingSkin" verticalCenter="0" horizontalCenter="0" includeIn="loading" layoutDirection="ltr" />

    <!--- Icon that appears in place of the image when an invalid image is loaded. -->
    <s:BitmapImage id="brokenImageIcon" includeIn="invalid" source="@Embed(source='Assets.swf',symbol='__brokenImage')" verticalCenter="0" horizontalCenter="0"/>

</s:Skin>

Apply this skin class for spark image

<s:Image source="@Embed('assets/maskImg.png')" skinClass="MaskedImageSkin" width="200" height="200"/>

The above code is just an example of masking image, create your own mask using rounded rectangle. This will solve your issue.

Happy skinning ...