OK … here is the way how I solved it. Based on this tutorial [1], I have put the scaling attributes into the 2 FXG files 1) menuMiddle_upSkin.fxg and 2) menuMiddle_selectedSkin.fxg. Thereafter, I have linked the FXG files with the ToggleButton skin 3) MenuMiddleToggleButtonSkin.mxml. Unfortunately, I still don't know how to get the scaling information out of Illustrator CS5.5 or Flash Catalyst CS5.5, which not that handy when creating lots of these skins types. If you a recommendation, please, let me know. Hope this helps, and, thanks for help!
[1] http://flexdevtips.blogspot.de/2011/10/fxg-scale-grid.html - Sebastian (PPMC) Interaction Designer Looking for a Login Example with Apache Flex? Please check out this code: http://code.google.com/p/masuland/wiki/LoginExample 1) menuMiddle_upSkin.fxg <?xml version='1.0' encoding='UTF-8'?> <Graphic xmlns="http://ns.adobe.com/fxg/2008"; version="2.0" scaleGridLeft="22" scaleGridRight="48" scaleGridTop="1" scaleGridBottom="46" > <Path winding="nonZero" data="M 58.17 46.5 L 0.914 46.5 L 15.658 23.5 L 0.914 0.5 L 58.17 0.5 L 72.914 23.5 L 58.17 46.5 Z"> <fill> <SolidColor color="#C1C6C8"/> </fill> <stroke> <SolidColorStroke caps="none" color="#6F767C" joints="miter" miterLimit="4"/> </stroke> </Path> </Graphic> 2) menuMiddle_selectedSkin.fxg <?xml version='1.0' encoding='UTF-8'?> <Graphic xmlns="http://ns.adobe.com/fxg/2008"; version="2.0" scaleGridLeft="22" scaleGridRight="48" scaleGridTop="1" scaleGridBottom="46" > <Path winding="nonZero" data="M 58.17 46.5 L 0.914 46.5 L 15.658 23.5 L 0.914 0.5 L 58.17 0.5 L 72.914 23.5 L 58.17 46.5 Z"> <fill> <SolidColor color="#0A4991"/> </fill> <stroke> <SolidColorStroke caps="none" color="#6F767C" joints="miter" miterLimit="4"/> </stroke> </Path> </Graphic> 3) MenuMiddleToggleButtonSkin.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:menu="assets.menu.*" height="47" > <fx:Metadata>[HostComponent("spark.components.ToggleButton")]</fx:Metadata> <s:states> <s:State name="up" stateGroups="normStates" /> <s:State name="over" stateGroups="overStates, normStates" /> <s:State name="down" stateGroups="downStates, normStates" /> <s:State name="disabled" stateGroups="disabledStates, normStates" /> <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" /> <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" /> </s:states> <menu:menuMiddle_upSkin includeIn="normStates" width="100%" height="100%" /> <menu:menuMiddle_selectedSkin includeIn="selectedStates" width="100%" height="100%" /> <s:Label id="labelDisplay" verticalCenter="1" width="100%" paddingLeft="30" paddingRight="30" color="#5E6A71" color.selectedStates="#FFFFFF" fontFamily="myFontMyriadBold" fontSize="16" lineHeight="17" maxDisplayedLines="2" textAlign="center" > <s:filters> <s:DropShadowFilter includeIn="normStates" blurX="2" blurY="2" quality="2" color="#FFFFFF" alpha="0.75" angle="90" distance="1" /> <s:DropShadowFilter includeIn="selectedStates" blurX="2" blurY="2" quality="2" alpha="0.75" angle="90" distance="1" /> </s:filters> </s:Label> </s:Skin> On Sep 16, 2013, at 7:51 PM, OmPrakash Muppirala <bigosma...@gmail.com> wrote: > Here is a very good set of instructions on how to build and use FXG skins > [1]. Apparently you can edit FXG using the design view of Flash Builder > (not sure which version you tried) > > From the article, here are the restrictions when using scalegrids in FXG. > Do you have any of these in your skins? > > ============================================= > Scale grid > > Scale grids have some limitations that must be considered when designing > graphics using FXG. > > Scale grid values must be inside the boundaries of the graphic and must not > overlap (that is, left boundary < scaleGridLeft < scaleGridRight < right > boundary). > > Scale grids will not work if the graphic contains any Group elements. > > Scale grids will not work if elements have alpha applied. Instead, apply > alpha to the stroke and fill elements. > ============================================= > > > [1] http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html > > > On Mon, Sep 16, 2013 at 10:43 AM, OmPrakash Muppirala > <bigosma...@gmail.com>wrote: > >> On Mon, Sep 16, 2013 at 10:27 AM, Alex Harui <aha...@adobe.com> wrote: >> >>> I don't know much about the rules for scaleGrid and skins. I haven't >>> spent any time in that area. >>> >>> But again, Path and Text are still vectors. You shouldn't need scaleGrid >>> to scale them. >>> >>> -Alex >>> >> >> Even though they are vectors, they are built for a particular form >> factor. When using it the user might want to use it in a different form >> factor but still expect it to scale correctly. We do that a lot in the Flex >> Mobile skins, ex. [1] >> >> Thanks, >> Om >> >> [1] >> https://fisheye6.atlassian.com/browse/~br=develop/flex-sdk/frameworks/projects/mobiletheme/src/spark/skins/mobile160/assets/Button_down.fxg?hb=true >> >> >> >>> >>> On 9/16/13 10:17 AM, "Sebastian Mohr" <flex.masul...@gmail.com> wrote: >>> >>>> Thanks for your reply ... I wanted to use these attributes for a bunch of >>>> vector <s:Button /> skins like ... >>>> >>>> <s:SparkSkin scaleGridLeft="22" scaleGridRight="48" scaleGridTop="0" >>>> scaleGridBottom="47" /> >>>> >>>> Inside are a number of <s:Path /> and <s:Richtext /> that I have created >>>> with Flash Catalyst CS5.5. >>>> >>>> for the moment I get this error: >>>> Error: ScaleGrid properties can not be set on this Group since at least >>>> one >>>> child element is a DisplayObject. >>>> >>>> Wouldn't this be possible? Thanks. >>>> >>>> -- >>>> Sebastian (PPMC) >>>> Interaction Designer >>>> >>>> Looking for a Login Example with Apache Flex? Please check out this code: >>>> http://code.google.com/p/masuland/wiki/LoginExample >>>> >>>> >>>> >>>> On Mon, Sep 16, 2013 at 6:45 PM, Alex Harui <aha...@adobe.com> wrote: >>>> >>>>> Why do you want to scale vector graphics via scale9? >>>>> >>>>> On 9/16/13 5:09 AM, "Sebastian Mohr" <flex.masul...@gmail.com> wrote: >>>>> >>>>>> Just wanted to know if you have a recommendation what would be the >>>>>> quickest >>>>>> way to add scale-9 information to FXG files. For PNG files I usually >>>>> use >>>>>> Flex Builder 3 which has a "Edit Scale Grid" Button in the CSS file >>>>>> "Design >>>>>> View" [1], but, for FXG files there seems to be no quick solution. >>>>> Thanks >>>>>> in advance. >>>>>> >>>>>> [1] >>>>>> >>>>> >>>>> >>> https://cwiki.apache.org/confluence/display/FLEX/Designer+&+Developer+Too >>>>> l >>>>>> s#Designer%26DeveloperTools-AdobeFlexBuilder3 >>>>>> >>>>>> -- >>>>>> Sebastian (PPMC) >>>>>> Interaction Designer >>>>>> >>>>>> Looking for a Login Example with Apache Flex? Please check out this >>>>> code: >>>>>> http://code.google.com/p/masuland/wiki/LoginExample >>>>> >>>>> >>> >>> >>
