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 ...... Hope this won't throw me into the performance trouble. Djam. --- In [email protected], "djamsheds" <djams...@...> wrote: > > 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? > > 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> > > ---------------- >
