How can I animate between states in a programmatic skin? [FLEX]

Question

I have a button with the various states (up/over/down etc) that uses a skin file to render the display. I want to achieve animation between the states. For instance, between the change from 'up' to 'over' I want to fade in a color and a border.

The way I am doing this at the moment is to use viewstates and animate between them using transitions and the mx:AnimateProperty. However, using this method I can only animate one property per viewstate. So only the border, or the color can be animated.

Does anyone know how I can achieve multiple animations on multiple properties of a programmatic button skin? Thanks in advance!

Note: I have looked into using tweener but cannot see how it would help my situation

Answer 1

http://www.degrafa.org/

http://www.degrafa.org/source/AdvancedSkins/Skins.html

Answer 2

Since you use skin files I suppose you use Flex4.

In Flex4, you can use multiple mx:AnimatePropery declarations wrapped in a s:Sequence or s:Parallel node.

<s:transitions>
  <s:Transition>
    <s:Parallel>
      <mx:AnimateProperty
        target="{button}"
        property="property1"
        fromValue="property1StartValue"
        toValue="property1EndValue" />
      <mx:AnimateProperty
        target="{button}"
        property="property2"
        fromValue="property2StartValue"
        toValue="property2EndValue" />
    </s:Parallel>
  </s:Transition>
</s:transitions>

Answer 3

Lewis,

You will not be able to animate any properties of a ProgammaticSkin in Flex 3 because the way UIComponent does skins is by instantiating an entire new instance of your skin and then setting its name property. Then when the component needs to display a new state, it makes another new instance, sets its name property to something different, makes the old skin invisible and makes the new skin visible. In this way, it "caches" the skins, instead of switching states and redrawing in UpdateDisplayList.

Now because of that you can't easily animate any drawing of the skin itself, however, there is a solution although it's not entirely elegant.

ProgammaticSkin extends FlexShape, so you can't add any children to your skin, but UIComponent looks for something that implements IProgrammaticSkin, so you can make your own ProgrammaticSkin that extends FlexSprite instead of FlexShape. This allows you addChild to your skin. If you are clever enough, you can synchronize transitions between the various cached skins to make them animatable.

Hope that helps,

Jonathan