Binding effect properties inside effect tags not working?

Question

We're trying to do this:

<rollOverEffect>
    <AnimateProperty property="scaleX" toValue="{originalWidth + scaleFactor}" />
</rollOverEffect>

However, it seems as though the effects toValue is always NaN. If I set the value to a constant the effect works. Isn't it possible to use databinding for effects like this?

---

Addendum: Both originalWidth and scaleFactor is bindable. I managed to get this working by moving the effect out of the rollOverEffect-tag, giving it and id and then binding to it like so:

<AnimateProperty id="scaleEffect" property="scaleX" toValue="{originalWidth + scaleFactor}" />
<MyComponent rollOverEffect="{scaleEffect}" />

Any idea why this works and the former code doesn't? The latter snippet creates a second, uneccessary binding and isn't as readable, but at least it works.

---

Addendum: The following code highlights the problem. No matter what the slider is set to, the value of the angleTo property of the effects will always be set to whatever the sliders initial value is set to.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox horizontalCenter="0" verticalCenter="0">
 <mx:Label text="Rotation (mouse over on canvas triggers effect):" />
 <mx:HSlider id="slider" width="200" minimum="0" maximum="360" value="90" />

 <mx:Spacer height="50" />

 <mx:Canvas borderStyle="solid" borderThickness="1" borderColor="#ff0000" backgroundColor="#0000ff" width="200" height="200">
  <mx:rollOverEffect>
   <mx:Rotate angleTo="{slider.value}" duration="500" />
  </mx:rollOverEffect>

  <mx:rollOutEffect>
   <mx:Rotate angleTo="{-slider.value}" duration="500" />
  </mx:rollOutEffect>
 </mx:Canvas>
</mx:VBox>
</mx:Application>

Compare the with the following code which actually produces the expected result:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Rotate id="rollOver" angleTo="{slider.value}" duration="500" />
<mx:Rotate id="rollOut" angleTo="{-slider.value}" duration="500" />

<mx:VBox horizontalCenter="0" verticalCenter="0">
 <mx:Label text="Rotation (mouse over on canvas triggers effect):" />
 <mx:HSlider id="slider" width="200" minimum="0" maximum="360" value="90" />

 <mx:Spacer height="50" />

 <mx:Canvas rollOverEffect="{rollOver}" rollOutEffect="{rollOut}" borderStyle="solid" borderThickness="1" borderColor="#ff0000" backgroundColor="#0000ff" width="200" height="200" />
</mx:VBox>
</mx:Application>

So essentially what the question is, why doesn't the binding work in the first example? There are no errors or warnings to tell you this and neither can I find anything in the documentation about this, could it be a bug?

Answer 1

You need to show us more code. Can you give the following code a shot? Does this work?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <!-- Simple exemplo to demonstrate the AnimateProperty effect. -->

    <mx:Sequence id="animateScaleXUpDown" >
        <mx:AnimateProperty property="scaleX" fromValue="{ns.value}" toValue="{ns.minimum}" duration="1000" />
        <mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1" duration="1000" />    
    </mx:Sequence>

    <mx:Panel title="AnimateProperty Effect Example" width="75%" height="75%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Text width="100%" color="blue" 
            text="Click on the image to use the AnimateProperty effect with the scaleX property."/>

        <mx:Image id="flex" source="http://stackoverflow.com/content/img/stackoverflow-logo.png"
            mouseDownEffect="{animateScaleXUpDown}"/>
        <mx:NumericStepper id="ns" width="62" value=".5" minimum="1" maximum="3" stepSize="0.5" enabled="true"/>

    </mx:Panel>

</mx:Application>