Question

I created a custom timer component, which basically renders a circle sector, with a default start angle (0) and an end angle:

public class Arc extends FilledElement
{
    private var _endAngle:Number = 0;

    public function Arc()
    {
    }

    public function get endAngle():Number
    {
        return _endAngle;
    }

    public function set endAngle(value:Number):void
    {
        if (_endAngle == value)
            return;

        _endAngle = value;
        invalidateDisplayList();
    }

    // left out the rendering logic, for clarity
}

Works fine and dandy so far. This is the code which renders the sector:

<org:Arc id="arc"
     endAngle="135">
    <org:fill>
        <s:SolidColor color="#FFFF00" />
    </org:fill>
</org:Arc>

However, I want to animate the endAngle property. This is the MXML code which aims to achieve this:

<s:Animate id="effect"
       duration="2000"
       target="arc">
    <s:SimpleMotionPath property="endAngle"
            valueFrom="90"
            valueTo="180" />
</s:Animate>

The problem is then when I play the effect, I get this error:
Error: Property endAngle is not a property or a style on object arc: TypeError: Error #1006: value is not a function..

Has anyone else encountered this problem, or better yet, does anyone know what I did wrong and how to fix this problem?

Thank you.

Answer 1

The Animate#target property does not evaluate string values to object ID’s. You have to bind the target element instead (or it will try to find the property endAngle on the String "arc", which will throw the error you’re getting):

<s:Animate id="effect" duration="2000" target="{arc}">
    <s:SimpleMotionPath property="endAngle" valueFrom="90" valueTo="180" />
</s:Animate>

Note the only difference between your version and mine is the curly braces {}