Seamless Animated Skins in Flex

In Joey Lotts session on styling Flex at FOTB (where he did a great job), one of the attendees asked about animated skins.

There’s obviously many ways to approach this but I thought I’d do an example of how you can have seamless transitions between these states using frame labels inside the symbol in Flash, and by adding code using addFrameScript().

AnimatedSkinExample (right click for source)

GingerbreadMan skins are going to be all the rage in Flex 3.0 ;) .

The animation for this skin was found on Flashkit.

11 Responses to “Seamless Animated Skins in Flex”

  1. Jim says:

    Hey, I reskinned our flex app with the gingerbread men and my boss didn’t seem too impressed for some reason (though I thought it was well cool).

    So then I changed it to scantily dressed dancing girls and I lost my job :(

    Can you spare some change mate?

  2. judah says:

    Thats sweet. I’m about to do animated skins in my next project. Did you use the Flex Component kit to export this from Flash? If so, did it write all that code for you? I think this would be too much work for a flash animator if its not automatically generated by the export command. The timeline and frame labels should handle this without writing code, imho??? Anyway, thanks for sharing.

  3. Tink says:

    @ Jim

    I really don’t understand why your boss didn’t like the gingerbread men skins. did u explain how its going to be all the rage very soon? ;)

    @ judah

    No I didn’t use the Flex component kit, it also wouldn’t work with the Flash skinning templates provided by Adobe as these use a different symbol for each state, and therefore the transitions can’t be seemless.

    The code is custom written. I wouldn’t expect a Flash animator to write the code, the dev would write the code, the animator would animate. That said once the code is written and you have a template of frame labels in Flash it can be re-used over and over for different animations.

  4. Juan says:

    Pretty cool!

    I did a similar tutorial using the Flex Component Kit and Flash CS3. Each component skin is one symbol with tweens and frame labels for the transitions and states.

    You could probably make it seemless, but it’d probably be a bit more work. The nice thing is just by naming the frame labels accordingly the tweens automatically reverse themselves in Flex. Here’s what I did: http://tinyurl.com/22fwex .

  5. [...] nd sorry but what the #$%#$% a week later Tink is posting this article on his site…. Seamless Animated Skins in Flex This is the stuff I w [...]

  6. Flex: Animated Skins

    Tink写了一个动画皮肤的例子,很好玩。 个截图:
    禁用的时候:

    激活之后:

    选中以后:

    这个皮肤是在Flash中编写的一个SWF文件,不过应用到了Flex的Button上而已。
    运行示例 | 查看源…

  7. [...] =”javascript:urchinTracker (‘/outgoing/www.tink.ws/blog/seemless-animated-skins-in-flex/’);” href=”http://www.tink.ws/blog/seemless-animated-skins-in-flex/” title=”Tink stuff” target=”_blank”>Seamless Animated Skins in Flex This is the stuff I w [...]

  8. [...] ery cool. You have to check it out if only to see dancing Gingerbread men in Flex… Tink » Blog Archive » Seamless Animated Skins in Flex In Joey Lotts session on stylin [...]

  9. [...] nter – Design (tags: ui design flex adobe) ADOBE FLEX JOURNAL (tags: ria flex journal) Tink » Blog Archive » Seamless Animated Skins in Flex (tags: skinning flex tutorial) [...]

  10. Steffen says:

    Great work, Tink! For real coders I think this provides a good alternative to the Flex Component Kit.

    However, could you give a quick description what each label stands for? Especially the “upCenter” worries my a bit. And why isn’t there an appropriate “overCenter” label?

    Thanks again for the good work ;-)

  11. [...]
    Here’s a skin we built recently for a very popular AIR application. Like the gingerbread man example this skin has seamless transitions between its different states [...]

Leave a Reply