Erst neulich hatte ich im Beitrag Tiny Designer exportiert Degrafa-MXML aufgezeigt, wie mit dem Online-Grafikprogramm Tiny Designer direkt Degrafa-Code erzeugt werden kann.

Tiny Designer geht nun einen Schritt weiter. Es lassen sich neuerdings zahlreiche Flex-Komponenten über vorgefertigte Templates skinnen. Dazu erstellt man über „File > New Degrafa Skin” ein neues Projekt. Anschließend stehen folgende Komponenten zur Auswahl:

(mehr …)

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.

(mehr …)

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.

(mehr …)

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:

(mehr …)

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.

(mehr …)

Nachdem bereits das Skinning von Charts und Buttons mit Degrafa gezeigt wurden, folgt nun ein Beispiel, wie der HSlider von Flex optisch angepasst werden kann.

Dieser sieht im Original so aus:

Beim Skinning werden drei Elemente angepasst:

• der Anfasser, der im Bild als Kreis zu sehen ist (in Flex ist das ThumbSkin verantwortlich)
• der Balken, auf dem der Anfasser bewegt wird (in Flex: trackSkin)
• der Bereich links vom Anfasser, also das blaue Rechteck (in Flex: trackHightlightSkin)

(mehr …)

Hier ein kurzes Beispiel, wie man Buttons mit Degrafa gestalten kann. Das Ergebnis ist ein Button im iPhone-Stil mit Glaseffekt. Das Beispiel wurde in Flex erstellt und zeigt, wie man ein Skin für eine Schaltfläche anlegt.

(mehr …)

Letztes Jahr sah ich ein hübsches Beispiel, wie man Diagramme in Flex mithilfe von Degrafa ansprechend gestalten kann. Das Beispiel war ein Diagramm im Stil der Nike+ Website. Man kann es sich hier anschauen: Nike+ Beispiel.

Endlich habe ich die Zeit gefunden, mich näher mit dem Beispiel beschäftigen. Damit man besser versteht, worin der eigentliche Kern des Diagramm-Skinnings mit Degrafa liegt, habe ich alles „Unwichtige“ aus dem Original geworfen.

Den Source-Code gibt es am Ende des Beitrags zum Herunterladen.

(mehr …)