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:
  1. ... 
  2.     <mx:Style source="style.css"/>
  3.        
  4.     <mx:Button id="loaderButton" label="Demo"
  5.         verticalCenter="0" horizontalCenter="0"
  6.         height="100" width="200" />
  7.                
  8. </mx:Application>

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:
  1. Button {
  2.     skin:               ClassReference('skins.MySkin');
  3.     ...
  4. }

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:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <GraphicBorderSkin
  3.     xmlns:mx="http://www.adobe.com/2006/mxml" 
  4.     xmlns="http://www.degrafa.com/2007"
  5.     xmlns:filters="flash.filters.*"
  6.     >
  7.     <mx:Script>
  8.         <![CDATA[      
  9.             [Bindable]
  10.             private var awidth:Number=0;
  11.            
  12.             [Bindable]
  13.             private var aheight:Number=0;
  14.                    
  15.             override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{               
  16.                 super.updateDisplayList(unscaledWidth, unscaledHeight);
  17.                 awidth = unscaledWidth;
  18.                 aheight = unscaledHeight;         
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <!-- Füllungen --> 
  24.     <fills>
  25.         <!-- schwarzer Farbverlauf -->
  26.         <LinearGradientFill id="schwarzerGradient" angle="90">
  27.             <GradientStop color="#000000" alpha="1"/>
  28.             <GradientStop color="#222222" alpha="1"/>
  29.         </LinearGradientFill>
  30.        
  31.         <!-- roter Farbverlauf -->
  32.         <LinearGradientFill id="roterGradient" angle="90">
  33.             <GradientStop color="#720205" alpha="1"/>
  34.             <GradientStop color="#4C0002" alpha="1"/>
  35.         </LinearGradientFill>   
  36.        
  37.         <!-- blauer Farbverlauf -->
  38.         <LinearGradientFill id="blauerGradient" angle="90">
  39.             <GradientStop color="#004460" alpha="1"/>
  40.             <GradientStop color="#002F44" alpha="1"/>
  41.         </LinearGradientFill>         
  42.            
  43.         <!-- weißer Farbverlauf für Reflektion auf Button --> 
  44.         <LinearGradientFill id="shine" angle="90">
  45.             <GradientStop color="#FFFFFF" alpha=".6"/>
  46.             <GradientStop color="#FFFFFF" alpha=".3"/>
  47.         </LinearGradientFill>      
  48.     </fills>
  49.    
  50.     <!-- Formen -->
  51.     <geometry>
  52.         <!-- Normalzustand des Buttons (UP) -->
  53.         <GeometryComposition state="upSkin">
  54.             <!-- Button -->
  55.             <RoundedRectangleComplex
  56.                 id="mainRect"
  57.                 topLeftRadius="11" topRightRadius="11"  bottomLeftRadius="11" bottomRightRadius="11"
  58.                 fill="{schwarzerGradient}"
  59.                 height="{aheight}" width="{awidth}"/>
  60.                
  61.             <!-- weiße Reflektion --> 
  62.             <RoundedRectangleComplex
  63.                 topLeftRadius="11" topRightRadius="11" bottomLeftRadius="6" bottomRightRadius="6"
  64.                 fill="{ shine }"
  65.                 x="1"   y="1" height="{ mainRect.height/2 }"  width="{awidth - 2}"/>
  66.         </GeometryComposition>
  67.  
  68.         <!-- Mouse Over des Buttons (OVER) -->   
  69.         <GeometryComposition state="overSkin">
  70.             <RoundedRectangleComplex
  71.                 topLeftRadius="11" topRightRadius="11"  bottomLeftRadius="11" bottomRightRadius="11"
  72.                 fill="{roterGradient}"
  73.                 height="{aheight}" width="{awidth}"/>
  74.                
  75.             <!-- weiße Reflektion --> 
  76.             <RoundedRectangleComplex
  77.                 topLeftRadius="11" topRightRadius="11" bottomLeftRadius="6" bottomRightRadius="6"
  78.                 fill="{ shine }"
  79.                 x="1"   y="1" height="{ mainRect.height/2 }"  width="{awidth - 2}"/>
  80.         </GeometryComposition>
  81.        
  82.         <!-- Gedrücktzustand des Buttons (DOWN) -->       
  83.         <GeometryComposition state="downSkin">
  84.             <RoundedRectangleComplex
  85.                 topLeftRadius="11" topRightRadius="11" bottomLeftRadius="11" bottomRightRadius="11"
  86.                 fill="{blauerGradient}"
  87.                 height="{aheight}"
  88.                 width="{awidth}"/>
  89.             <!-- weiße Reflektion --> 
  90.             <RoundedRectangleComplex
  91.                 topLeftRadius="11" topRightRadius="11" bottomLeftRadius="6" bottomRightRadius="6"
  92.                 fill="{ shine }"
  93.                 x="1"   y="1" height="{ mainRect.height/2 }"  width="{awidth - 2}"/>
  94.         </GeometryComposition> 
  95.     </geometry>
  96.    
  97.     <!-- Filter -->
  98.     <filters>
  99.         <filters:GlowFilter
  100.             color="#FFFFFF"
  101.             alpha=".5"
  102.             blurX="10"
  103.             blurY="10"/>
  104.     </filters> 
  105. </GraphicBorderSkin>

Das Beispiel basiert auf einer Demonstration von Juan Sanchez, das auf dieser Degrafa-Webseite zu finden ist.

Download: Quelldateien (.zip)