透明な枠線と角を丸くしてFlexイメージを作成するにはどうすればよいですか？

Question

私はFlexプロジェクトでの写真があります。

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

---

をしかし、私は、下の画像のようにFlexで（4/4.5をこのイメージを作ることができれば、今、私は思ったんだけど/ 4.6）（）MXMLおよび/またはActionScript 3のでを：

これは可能ですか？

Answer 1

フレックスに移植できるはずのfeathering mask tutorial in flashです。

Answer 2

はい、それは可能であるが、まずあなたは、PhotoshopやAIでマスクを作成AIまたはPS

1. を使用して丸いコーナーと内側のシャドウ用のマスクレイヤーを作成する必要があります。 PSを使用している場合は、ベクターマスクでなければなりません。
2. フラッシュ触媒に輸入してください。 PSを使用している場合は、インポートダイアログで「シェイプレイヤーを編集可能にする」を選択する必要があります。
3. レイヤーパネルには、マスクされたコンテンツを含むグループが表示されます。そのグループに入るものはマスクされます。
4. マスクされたグループの中に1つの画像を追加し、フラッシュ触媒のコードビューでマスクされたコードをコピーします。 （FC）

スパーク画像のスキンクラスを1つ作成し、imageDisplay（BitmapImage）の上にマスクコードを追加します。

<?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> 

MaskedImageSkin.mxmlは、上記のコードは、イメージをマスキングの一例であり、火花画像

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

ため、このスキンクラスを適用角丸長方形を使用して、独自のマスクを作成します。これはあなたの問題を解決します。多分あなたはそれポートでき、http://www.flashandmath.com/howtos/alphamask/：

ハッピースキン...