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:

(weiterlesen…)

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.

(weiterlesen…)

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)

(weiterlesen…)

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.

(weiterlesen…)

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: .

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.

(weiterlesen…)

Die Gewinner des “Skin to Win Challenge” von ScaleNine wurden gestern bekannt gegeben. Bei dem Wettbewerb ging es darum, neue Skins für Adobe Flex 3 zu erstellen.

Insgesamt wurden 27 neue Flex Skins eingereicht. Die Gewinner können bereits betrachtet werden, die Downloads sollen laut Website demnächst zur Verfügung stehen.

(weiterlesen…)

Ich war sehr erfreut, als ich gelesen habe, dass es für die Screencast-Software Camtasia nun Skin-Sourcecodes zum Download gibt. Es handelt sich dabei um das Expressshow-Skin (siehe unten), das mir immer von allen am besten gefallen hat. Der Nachteil war leider bisher, dass keinerlei Anpassungen möglich waren.

Nun kann man das Design des Skins komplett gestalten. Im Folgenden die genaue Vorgehensweise und ein Beispiel.

(weiterlesen…)

Mich hat es gestört, dass die Skins der Videokomponente von Flash CS3 bei Livestreaming alle einen Play-/Pausebutton haben. Klickt man beim Livestream darauf, wird das Video pausiert. Nun hat man jedoch den Eindruck, dass man mit dem Playbutton das Video an der gleichen Stelle wieder fortsetzen kann, was bei einem Livestreaming natürlich nicht möglich ist.

Deshalb habe ich ein Skin angepasst. Es enthält nur einen Volumeregler und einen Fullscreen-Button und ist somit speziell für Livestreams ausgelegt.

(weiterlesen…)