Have Geek Brain

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

I have a button with different states (up / down / down, etc.) that uses a skin file to show the display. I want to achieve animation between states. For example, between changing from "up" to "above" I want to fade in color and border.

The way I am doing it at the moment is to use viewstates and animate between them with transitions and mx: AnimateProperty. However, using this method, I can only animate one property in the view. Thus, you can only animate the border or color.

Does anyone know how I can achieve multiple animations on multiple softbutton properties? Thanks in advance!

Note. I've looked into using the tweener but can't see how it would help my situation.

+2


a source to share


3 answers


http://www.degrafa.org/



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

0


a source


Since you are using skin files, I assume you are using Flex4.

In Flex4, you can use multiple mx: AnimatePropery declarations wrapped in 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>
0


a source


Lewis,

You won't be able to animate any of the ProgammaticSkin properties in Flex 3, as the UIComponent way of rendering skins is by instantiating an entire new instance of your skin and then setting its name property. Then, when the component needs to render a new state, it creates another new instance, sets its name property to something else, makes the old skin invisible, and makes the new skin visible. Thus, it "caches" the skins, instead of switching states and repainting in UpdateDisplayList.

Now, because of this, you cannot easily animate any drawing of the skin itself, however there is a solution, although it is not entirely elegant.

ProgammaticSkin extends FlexShape, so you cannot add any children to your skin, but UIComponent is looking for something that implements IProgrammaticSkin, so you can create your own ProgrammaticSkin that extends FlexSprite instead of FlexShape. This allows you to add to your skin. If you're smart enough, you can sync transitions between different cached skins to make them animated.

Hope it helps,

Jonathan

0


a source






More articles:


All Articles