Schlagwort: Skin

Degrafa: Jetzt auch Komponenten-Skinning mit Tiny Designer

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:

Degrafa: Jetzt auch Komponenten-Skinning mit Tiny Designer weiterlesen

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.

Transitions: Animierter Button in Flex 4 weiterlesen

Button-Skinning mit Flex 4

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.

Button-Skinning mit Flex 4 weiterlesen

Wireframe-Theme in Flex 4

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:

Wireframe-Theme in Flex 4 weiterlesen

Flex 4: Skinning einer Spark-Applikation

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.

Flex 4: Skinning einer Spark-Applikation weiterlesen

Skinning eines Slider mit Degrafa

Flex HSlider Degrafa

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:

Flex HSlider normal

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)

Skinning eines Slider mit Degrafa weiterlesen

Skinning von Diagrammen mit Degrafa

Degrafa Skin ChartLetztes 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.

Skinning von Diagrammen mit Degrafa weiterlesen