Das „Flex Component Kit for Flash“ (FCK) ist eine großartige Sache! Denn es bietet uns die Möglichkeit, kinderleicht eigene Flex Komponenten innerhalb der Flash IDE zu erstellen und diese wunderbar zu skinnen oder mit Animationen über die Flash Timeline zu versehen. Und dank der verwendeten UIMovieClip– und ContainerMovieClip-Klassen entsprechen die in der Flash IDE erstellten MovieClips auch dem notwendigen Flex Component Life Cycle. Übrigens: Hilfreiche Videos zum Umgang mit dem „Flex Component Kit for Flash“ gibt es u.a. hier bei Serge Jespers
Problem
Leider hat diese Erweiterung auch seine Schattenseite: Denn wenn man sehr viele dieser in der Flash IDE erstellten Flex Komponenten in einer Flex Anwendung einsetzt, kann es schnell zu Performance Problemen kommen.
Zu dieser Problematik findet man aktuell sehr interessante Beiträge, u.a. in den Blogs von scalenine: „Performance Issues Using the Flex Component Kit for Flash„, Behind the UI: „Flex Component Kit: CPU black hole“ und Patrick Hansen: „Flex Stateful Skins vs. Stateless„.
Das Performance Problem liegt in einem enterFrameHandler des UIMovieClips (siehe Original Source), welcher bei jedem Event.ENTER_FRAME checkt, ob sich die die Größe oder sich der State (welcher über Frame-Lables auf der Timeline des MovieClips definiert wird) der Flex Komponente ändert. Das ist notwendig, da ein Flash MovieClip keinen Validierung bzw. Invalidierungsprozess wie bei einer UIComponent besitzt. Nicht unbedingt die eleganteste Lösung, denn jeder Entwickler aus der Flash-Welt kennt die Performance-Bremse, die von unzähligen MovieClips mit unzähligen ENTER_FRAME Handlern ausgelöst werden kann 😉
Lösungen
Derzeit sind zwei Lösungen zu finden:
1. Verwenden von sogenannten „Stateless Skins“ nach Patrick Hansen
Soll ein Skin eingesetzt werden, diesen als „Stateless“ und nicht als „Statefull“ Skin in Flash definieren.
Ein Statefull-Skin ist ein MovieClip, der seine States über die Timeline definiert. Diesen nutzt man beispielsweise, wenn man bei Flash eine Button-Komponente wie folgt erstellt (installiertes FCK vorausgesetzt): File new -> Templates -> Flex Skins -> Button. Dieser Button hat all seine States „up“, „over“, „down“, „disabled“ auf der Timeline definiert.
Screen: Timeline eines Buttons als Statefull-Skin-Komponente
Besser ist dagegen ein Stateless Skin. D.h. für jeden State wird in der Flash IDE ein eigenes Symbol angelegt und über einen Identifier verlinkt. Diese Symbole erben nicht von UIMovieClip und haben somit keinen enterFrameHandler.
Screen: Verlinkung eines ComboBoxArrow-DisabledSkin als Stateless-Skin
2. UIMovieClip Erweiterung von Guillaume Malartre
Diese Erweiterung überschreibt Adobes UIMovieClip, um den enterFrameHandler „auszuschalten“. Nachteil ist hierbei, dass keine Größenänderung mehr stattfindet, sobald sich die Größe der Parent-Komponente ändert und die „eigene“ Flex Komponente nach der Initialisierung darauf reagieren soll.
Frohes Flex-Tuning 😉
-Jens
[ www.websector.de ]
Schöner Artikel. Vielen Dank 😉
Sehr nützlich und praxisorientiert 🙂
sehr gut zu Wissen!
[…] […]
[…] in Flash estellen (mit Flex Komponent Kit und Hack), SWC einbinden und in Flex dann eine neue Komponente bauen, die von der Flash Komponente erbt. […]
Houses and cars are not very cheap and not everybody can buy it. But, mortgage loans are created to aid different people in such kind of cases.
[…] […]
Good post. I learn something new and challenging on blogs I stumbleupon everyday.
It will always be helpful to read content from other writers
and practice something from their sites.