0

I have read the Adobe's docs Using FXG and Embedding application assets, but can only embed the FXG through MXML -

enter image description here

MyStars.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.Home">
</s:ViewNavigatorApplication>

Home.mxml (works okay, when embedding FXG through MXML):

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <comps:Star />
</s:View>

Star.fxg (located in src/assets/Star.fxg):

<?xml version='1.0' encoding='UTF-8'?>
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">    
    <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
        <fxg:fill>
            <fxg:SolidColor color="#FFFFFF"/>
        </fxg:fill>
        <fxg:stroke>
            <fxg:SolidColorStroke 
                caps="none" 
                color="#4769C4" 
                joints="miter" 
                miterLimit="4" 
                weight="20"/>
        </fxg:stroke>
    </fxg:Path>
</fxg:Graphic>

When I however try to instansiate the FXG graphic through ActionScript (still in the same Flex mobile project), I get the compile error:

enter image description here

Call to a possibly undefined method Star

Home.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="assets.*"
        title="Home">

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            private static const STAR:SpriteVisualElement = new Star();
        ]]>
    </fx:Script>  

<s:BitmapImage source="{STAR}" />
</s:View>

I've also tried import comps; and/or new comps.Star();

When I move the FXG file to src/ and use xmlns:comps="*" everything works.

Alexander Farber
  • 21,519
  • 75
  • 241
  • 416

2 Answers2

1

Import Star in ActionScript, which based on your code I assume will be something like this:

import assets.Star
private static const STAR:SpriteVisualElement = new Star();

I suspect that will get rid of the compiler error. However, I'm not sure if you can use a SpriteVisualElement as the source for a BitmapImage. You may have to add the SpriteVisualElement as a child of the parent container and make use of the Flex Component Lifecycle to do this.

I've done some experimenting around this, and just contributed this code to Apache Flex. The specific class is here. Although, for some reason I missed the fact that FXG elements could be SpriteVisualElements. Using my FXGImage class will not absolve you of the responsibility of having to size and position the component in ActionScript if you create it in ActionScript.

JeffryHouser
  • 39,401
  • 4
  • 38
  • 59
  • "import assets.Star;" works well, thank you. Image and BitmapImage can take it as *source=* too. Unfortunately they work bad when I set *width* and *height*, scaling the FXG file doesn't work well for some reason. – Alexander Farber Apr 09 '12 at 13:36
  • 1
    @AlexanderFarber Is the problem that the image is not scaling? Or is the problem that the aspect ratio is not being maintained? Here is a sample of my FXGImage component: http://www.flextras.com/labs/FlextrasFridayLunch/2012/FXGImage/FXGImageSample.html . You can change the height and width w/o issue. – JeffryHouser Apr 09 '12 at 13:49
  • Allright your FXGImage component looks much better. The Image and BitmapImage do scale, but it looks bad. For example, when I use this code in the above app: – Alexander Farber Apr 09 '12 at 13:52
1

For FXG graphic, pay attention to your artwork size. When you create object using FXG, the white-space around the icon counts. Make sure you set the artwork size to the size of your icon (no extra white-space around the icon). This way, the FXG asset will look much better when you embed to the bitmapImage.

Jack Vo
  • 319
  • 2
  • 14