Transitions: Animierter Button in Flex 4

Aufbauend auf dem Artikel Button-Skinning mit Flex 4 folgt ein Beispiel-Button mit animierten Übergängen.

Im Normalzustand ist der Button klein und man sieht nur ein Icon. Fährt man mit der Maus über die Schaltfläche, wird sie breiter und die Beschriftung erscheint.

Neben den Übergangsanimationen wird auch gezeigt, wie man einzelne Grafiken/Elemente gezielt nur in bestimmten States anzeigen oder ausschließen lassen kann.

[kml_flashembed fversion=“10.0.0″ movie=“/wp-content/uploads/2009/05/buttontransition.swf“ targetclass=“flashmovie“ publishmethod=“dynamic“ width=“400″ height=“100″]

[/kml_flashembed]

Unterschiedliche Breite

Damit der Button im Normalzustand klein und zusammengeschoben ist, wird die Breite des Rechtecks zweimal definiert. Zum einen mit 100% für alle Zustände, zum anderen speziell für den Normalzustand mit 50 Pixeln Breite.

[xml]

[/xml]

Icon

Das Icon ist eine Bitmap-Grafik, die auf die gewünschte Größe skaliert wird. Außerdem wird über smooth die Darstellungsqualität der skalierten Grafik verbessert.

[xml]

[/xml]

includeIn und excludeFrom

Die Beschriftung des Buttons soll nur im Mouseover- und Gedrückt-Zustand des Buttons zu sehen sein. Dies lässt sich ganz einfach mit excludeFrom erreichen. Dadurch können einzelne States ausgeschlossen werden, das Element ist dann darin nicht sichtbar.

[xml]

Das Pendant wäre übrigens includeIn, wodurch man Elemente nur in einzelnen States einblenden kann.

[xml]

Transitions

Im Skin kommt ein neuer Abschnitt s:transitions hinzu, der für alle Übergänge zwischen den Zuständen des Buttons sorgt. Darin werden über s:Transition Übergangsanimationen festgelegt.

Der folgende Beispielcode zeigt den Übergang vom Normalzustand (up) zum Mouseover-Zustand (over). Die Resize-Animation wird auf das Objekt myButtonRect angewendet, also das grüne Rechteck des Buttons. Das Rechteck wird dabei von 50 Pixel auf die normale Breite des Buttons vergrößert. Die normale Breite ist die, die in der Haupt-MXML-Datei definiert ist. Der Zugriff erfolgt mit hostComponent.width.

Hinweis: Auf diese Weise könnte man auch die Buttonbeschriftung sanft einblenden. Im Beispiel erscheint es direkt, weil ich die Eigenschaften includeIn/excludeFrom demonstrieren wollte …

[xml]




…

[/xml]

[ad]

Quellcode

Hier das komplette Skin am Stück:

[xml]









[HostComponent(„spark.components.Button“)]

[/xml]