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.
Applikation und Stylesheet
Die Hauptanwendung platziert lediglich einen Button, der auf der Bühne dargestellt wird.
[xml]
…
[/xml]
Außerdem wird in der Anwendung ein CSS-Stylesheet integriert. Dieses sorgt dafür, dass für alle Komponenten des Typs Button die Eigenschaft skin auf die Klasse skins.MySkin referenziert. Dadurch wird das Aussehen festgelegt.
[xml]
Button {
skin: ClassReference(’skins.MySkin‘);
…
}
[/xml]
Degrafa: Gestaltung des Buttons
Im Unterverzeichnis „skins“ liegt die Klasse MySkin (deshalb auch skins.MySkin im Stylesheet). Hier kommt nun Degrafa zum Einsatz.
Zu Beginn werden vier Füllungen festgelegt. Die ersten drei Farbverläufe sind für die Buttonzustände „normal“ (Up), „Mouseover“ (Over) und „gedrückt“ (Down). Diese unterscheiden sich durch ihre Grundfarbe. Der vierte Farbverlauf ist ein weißes Rechtecks, das in jedem Buttonzustand als Fülleffekt für den Glanzreflex genutzt wird.
Danach werden die verschiedenen Buttonzustände definiert und gezeichnet. Dabei wird jeweils der eigentliche Button und der Glanzeffekt in Form eines RoundedRectangleComplex verwendet.
Zuletzt wird noch ein Glow-Filter als Effekt eingesetzt.
Demo
Zuerst das Degrafa-Beispiel zum Anschauen:
[kml_flashembed movie=“/wp-content/uploads/2009/02/DegrafaButton.swf “ height=“200″ width=“300″ /]
[xml]
[/xml]
Das Beispiel basiert auf einer Demonstration von Juan Sanchez, das auf dieser Degrafa-Webseite zu finden ist.
Download: Quelldateien (.zip)
[ad]