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 ]