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
[xml] Im Skin kommt ein neuer Abschnitt Der folgende Beispielcode zeigt den Übergang vom Normalzustand ( Hinweis: Auf diese Weise könnte man auch die Buttonbeschriftung sanft einblenden. Im Beispiel erscheint es direkt, weil ich die Eigenschaften
[xml] [ad] Hier das komplette Skin am Stück:
[xml]
includeIn
, wodurch man Elemente nur in einzelnen States einblenden kann.
Transitions
s:transitions
hinzu, der für alle Übergänge zwischen den Zuständen des Buttons sorgt. Darin werden über s:Transition
Übergangsanimationen festgelegt.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
.includeIn
/excludeFrom
demonstrieren wollte …
…
[/xml]
Quellcode
[HostComponent(„spark.components.Button“)]
[/xml]
transition still doesn't work for the text on the button in flex 4?
Text isn't a problem. Perhaps you have to embed the font if you animate your text (like in Flash).