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.
Heute geht es um das Skinning von Buttons in Flex 4. Dabei wird anschaulich deutlich, wie einfach und leistungsfähig die Skinning-Architektur der Spark-Komponenten aufgebaut ist.
Die prinzipielle Vorgehensweise ist vergleichbar der beim Skinning einer Spark-Applikation: Man legt eine neue Klasse mithilfe einer MXML-Datei an, die das Aussehen des Buttons festlegt. Diese Skinklasse ordnet man dem Button zu.
Letzten Sommer wurde es bereits angekündigt: Flex 4 enthält eine verbesserte Videokomponente. Die Komponente heißt VideoPlayer und besitzt standardmäßig einige Buttons wie Play/Pause, Stop, Mute, Fullscreen sowie eine Seekbar und ein Lautstärkeregler.
The VideoPlayer class is skinnable video player that supports progressive download, multi-bitrate, and streaming video.
Im Flex 4 SDK ist ein Wireframe-Design für die Spark-Komponenten enthalten. Dieses einfarbige, in blau gehaltene Design sieht nicht aus wie eine fertige Anwendung, sondern hat den Charme eines Entwurfs. Sicherlich dann interessant, wenn im aktuellen Entwicklungsstadium das Design keine Rolle spielen soll. Wireframes eben.
Das Wireframe-Skin sieht so aus:
In diesem Beitrag zum Flex 4 SDK wird die neue Komponentenarchitektur deutlich. Es wird gezeigt, wie man ein eigenes Skin für eine Spark-Applikation (s:Application) erstellt. Das Skin liegt in einer eigenen MXML-Datei und ersetzt den Hintergrund durch ein gekacheltes Hintergrundbild.
Nach der Vorstellung des Grafikformats FXG geht es in den „Gumbo-Wochen” nun zuerst um Füllungen für Grafikelemente. Als Beispiel wird dabei immer ein einfaches Rechteck verwendet, das unterschiedliche Fills enthält.
Es gibt vier verschiedene Füllungen, die ein Element erhalten kann.
In einem weiteren Beitrag aus der Reihe Flex 4 SDK geht es heute um FXG.
Mit Flex 4 führt Adobe den FXG 1.0 Standard ein. FXG soll als XML-basiertes grafisches Austauschformat für die Flash-Plattform dienen. Dazu enthält es verschiedene Typen an Text- und Grafikelementen, die Vektor- und Bitmapgrafiken erstellen, gruppieren oder verändern können. Die Abbildung zeigt einige Beispiele, die ich nur über das Schreiben von XML-Code erstellt habe.