투명 테두리와 모서리가 둥근 Flex 이미지를 만드는 방법은 무엇입니까?

Question

은 내가 Flex 프로젝트에서 사진이 있습니다

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

---

을하지만 (4/4.5 플렉스, 아래의 이미지로 을이 이미지를 만들 수 있다면 지금 궁금하네요/4.6)(/ MXML과 액션 또는 3) :

이것이 가능합니까?

Answer 1

다음은 플렉스에 포트 수해야 feathering mask tutorial in flash입니다.

Answer 2

네, 가능 먼저 당신은 포토샵이나 AI에 마스크 만들기 AI 또는 PS

1. 를 사용하여 둥근 모서리와 내부 그림자 마스크 레이어를 만들 필요가있다. PS를 사용하는 경우 벡터 마스크 여야합니다.
2. 플래시 촉매제로 가져옵니다. PS를 사용하는 경우 가져 오기 대화 상자에서 "모양 레이어> 편집 가능"을 선택해야합니다.
3. 레이어 패널에는 마스크 된 콘텐츠가 포함 된 그룹이 표시됩니다. 해당 그룹 안에 들어가면 아무 것도 숨길 것입니다.
4. 마스크 된 그룹 안에 하나의 이미지를 추가하고 마스크 된 코드를 플래시 촉매의 코드보기에 복사하십시오. (FC)

이제 스파크 이미지 용 스킨 클래스 하나를 만들고 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/ :

해피 스킨 ...