1 Reply Latest reply on Apr 19, 2010 9:32 AM by D_jam

    How to resize a component skinned with FXG?

    D_jam

      In Flex, I assigned a button's skinClass property to a custom skin (a star shape drawn

      in AI, imported to Catalyst and exported as fxp), but the skin doesn't get
      adjusted to the width and height of the button ( I thought it will be stretched
      the the user defined size). No matter what I set for width and height, the
      custom skinned button's size just doesn't change (at least the visual part of
      it).

       

      Am I missing something here or is it just an expected behavior?

       

      Here is a screenshot of the buttons in the Flex Design View:

       

      stars.png

       

       

      Skin class: Button1.mxml
      ------------

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:ai="http://ns.adobe.com/ai/2009"
      xmlns:flm="http://ns.adobe.com/flame/2008">
      <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
      <s:states>
      <s:State name="up"/>
      <s:State name="over"/>
      <s:State name="down"/>
      <s:State name="disabled"/>
      </s:states>
      <s:Path data="M 93.757 107.772 L 59.767 90.555 L 26.314 108.796 L 32.185 71.149
      L 4.5 44.97 L 42.119 38.92 L 58.46 4.5 L 75.84 38.408 L 113.624 43.314 L 86.747
      70.321 L 93.757 107.772 Z" d:id="6" ai:objID="65e014e0" winding="nonZero" x="0"
      y="0">
      <s:fill>
      <s:LinearGradient rotation="37.8954" scaleX="117.931" x="19.1543"
      y="38.1108">
      <s:GradientEntry color="0xFFFFFF" flm:midpoint="0.306250019073486"
      ratio="0.0236982"/>
      <s:GradientEntry flm:midpoint="0.13" ratio="0.496933"
      ratio.over="0.29411764705882354"/>
      <s:GradientEntry color="0xEB4332" ratio="1"/>
      </s:LinearGradient>
      </s:fill>
      <s:stroke>
      <s:SolidColorStroke caps="none" color="0xFFEC4B" joints="miter"
      miterLimit="4" scaleMode="normal" weight="9" color.over="#250f73"/>
      </s:stroke>

       

      </s:Path>
      </s:Skin>

       

      ---------------------

       


      Application.xml
      ---------------------
      <?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"
      xmlns:d="http://ns.adobe.com/fxg/2008/dt"
      xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
      width="800" height="600" backgroundColor="#ffffff"
      xmlns:ATE="http://ns.adobe.com/ate/2009"
      xmlns:ai="http://ns.adobe.com/ai/2009"
      xmlns:flm="http://ns.adobe.com/flame/2008"
      xmlns:lib="assets.graphics.stiny_a_prechody.*">
      <fx:Script>
      <![CDATA[
      import components.Button1;
      ]]>
      </fx:Script>
      <fx:DesignLayer d:id="2" ai:objID="6fa80550" d:userLabel="Layer 1">
      <s:Button skinClass="components.Button1" x="94" y="58" width="800"/>
      </fx:DesignLayer>

       

      <!--just another button that doesn't resize-->
      <s:Button skinClass="components.Button1" x="300" y="100" height="500"/>
      </s:Application>

       

      ----------------

        • 1. Re: How to resize a component skinned with FXG?
          D_jam Level 1

          I guess I figured it out:  the height and width of a Path element in the skin class should be set to 100% to make a skin stretchable.

           

          So, the following tweak made it work the way I wanted it to be:  <s:Path width="100%" height="100%" data="M 93.757 10 ......

           

          stars2.png

           

           

          Hope this won't throw me into the performance trouble.

           

          Djam.