2 Replies Latest reply on Jan 31, 2011 7:12 AM by Kretep

    Vector graphics for a button icon

    Kretep

      I am trying to set button icons for a number of (spark) buttons and I want these icons to be vector graphics. I have tried a number of options, but none of them seem to be the optimal solution.

       

            • I tried setting the button's icon to an embedded SVG file (b.t.w. the spark button's icon property only seems to be available in build 4.5.0.18623), but apparently SVG is deprecated in Flex 4 and it tells me to use FXG (which would be okay with me, if it only worked).
            • I tried setting the button's icon to an embedded FXG file, which doesn't work because there is "no transcoder registered for mimeType text/fxg".
            • I also tried creating a custom skin that displays the icon in a BitmapImage, as is described here: http://flexwiz.amosl.com/flex/flex4/tip-easy-spark-icon-button/ This works fine for embedded raster graphics. To accommodate for vector graphics, I thought I would set up the icon as an mxml Graphic class and assign it to the BitmapImage in the skin (shouldn't the BitmapImage then render it?). But no icon is rendered.
            • From the Adobe documentation and various videos I have seen, it seems to be required to create a separate skin for each button (similar to the above option, but hard-coding the Graphic class icon into each of the skins). Only, it seems like a whole lot of redundancy to create a separate skin for each and every button, because most of the code would consist of copies of the spark ButtonSkin (apparently inheritance isn't an option either...) I only want the vector graphic to show on top of the ButtonSkin.

       

      So what is the best way to put vector graphics on top of an existing button?

       

      Thanks,

      Peter

        • 1. Re: Vector graphics for a button icon
          Shongrunden Adobe Employee

          Here's an example of how to use an FXG file as an icon in a Button:

           

          Main.mxml:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:Button icon="{MyIcon}" label="circle icon" />

           

          </s:Application>

           

           

          MyIcon.fxg:

           

          <?xml version="1.0" encoding="utf-8" ?>

          <Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">

               <Ellipse width="20" height="20">

                    <fill>

                         <SolidColor color="#FF0000" />

                    </fill>

               </Ellipse>

          </Graphic>

          • 2. Re: Vector graphics for a button icon
            Kretep Level 1

            Thanks for your reply. I have been playing around a bit, and it indeed seems to be this simple, but it only works for the Flex SDK build 4.5.0.18623. Is this correct?

             

            When I use the SDK that comes with Burrito, the icon doesn't show. Is there a fix for this? (I also require the mobile functionality, which is not available in the 18623-build...)