Flex: Spark image resize does not work

Question

When I use resize component on image, it just disappears. Even if I give widthTo and heightTo values more than image size.

Code

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:net="flash.net.*">
    <fx:Script>
        <![CDATA[
            import mx.effects.Resize;
            import mx.utils.ObjectUtil;

            private function btn_click(evt:MouseEvent):void {
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                fileReference.browse(arr);
            }

            private function fileReference_select(evt:Event):void {
                fileReference.load();
            }

            private function fileReference_complete(evt:Event):void {
                img.source = fileReference.data;

            }


        ]]>
    </fx:Script>

    <fx:Declarations>
        <net:FileReference id="fileReference"
                           select="fileReference_select(event);"
                           complete="fileReference_complete(event);" />
        <s:Resize id="resizeBig"
                  target="{img}"
                  widthFrom="{img.width}" widthTo="{newWidth.text as Number}" 
                  heightFrom="{img.height}" heightTo="{newHeight.text as Number}"/>
        <s:Resize id="myResizeEffect" 
                  target="{img}"
                  widthBy="10" heightBy="10"/>

    </fx:Declarations>
    <s:Image id="img"
          verticalCenter="0"
          horizontalCenter="0"
          maxWidth="200"
          maxHeight="200" 
          />
    <mx:ControlBar>

    <mx:Button id="btn"
          label="Upload"
          click="btn_click(event);" />

    <s:HGroup verticalAlign="middle">
        <s:Label>Width:</s:Label>
        <!-- <s:NumericStepper id="newWidth" minimum="1" maximum="100" value="10" /> -->
        <s:TextInput id="newWidth" restrict="0-9.\\-" />
    </s:HGroup>
    <s:HGroup verticalAlign="middle">
        <s:Label>Height:</s:Label>
        <s:TextInput id="newHeight" restrict="0-9.\\-"/>
    </s:HGroup>
    <s:HGroup verticalAlign="middle">
        <s:Button id="resize"
                  label="Resize"
                  click="resizeBig.end();resizeBig.play();"
                  />
        <s:Button label="Resize Me" 
                  click="myResizeEffect.end();myResizeEffect.play();"/>
    </s:HGroup>
    </mx:ControlBar>

</s:WindowedApplication>

Answer 1

I think the binding expression doesn't like the "as Number" thing. I would try with a function that does the conversion:

widthTo="{getNumber(newWidth.text)}"