Nach der Vorstellung des Grafikformats FXG geht es in den „Gumbo-Wochen” nun zuerst um Füllungen für Grafikelemente. Als Beispiel wird dabei immer ein einfaches Rechteck verwendet, das unterschiedliche Fills enthält.

Es gibt vier verschiedene Füllungen, die ein Element erhalten kann.

  • Solid color (einfarbig)
  • Linear Gradient (lineare Verlauf)
  • Radial Gradient (kreisförmiger Verlauf)
  • Bitmap

FXG Füllungen (Fills)

SolidColor

Mit SolidColoder wird eine einfarbige Füllung erstellt. Es gibt zwei Eigenschaften: color bestimmt die Farbe (z.B. ##ff0000) und alpha legt die Transparenz (0..1) fest. Das folgende Codebeispiel 1 zeigt ein Rechteck mit grüner Füllung.

XML:
  1. :Rect width="100" height="100"> 
  2.    :fill>
  3.       :SolidColor color="#C6D481" />
  4.    :fill>        
  5. :Rect>

LinearGradient

LinearGradient ist ein linearer Farbverlauf, wie man ihn z.B. auch vom Palettenfenster in der Flash IDE oder Photoshop kennt. Im einfachsten Fall handelt es sich um einen Farbverlauf von einer Farbe zu einer anderen (z.B. rot nach grün). Selbstverständlich sind auch komplexere Farbverläufe mit bis zu 16 Farben möglich.

Die einzelnen Farben des Verlaufs werden mithilfe von GradientEntry-Elementen definiert, die als Child innerhalb des Verlaufselements (in diesem Fall LinearGradient) platziert werden. Insgesamt sind maximal 16 GradientEntry-Elemente möglich.

XML:
  1. :Rect width="100" height="100">
  2.    :fill>
  3.       :LinearGradient>
  4.           :GradientEntry ratio="0"   color="0x5F7205" alpha="0.5"/>
  5.         :GradientEntry ratio="0.3" color="0xC6D481" />
  6.         :GradientEntry ratio="0.9" color="0x5F7205" />               
  7.       :LinearGradient>
  8.    :fill>   
  9. :Rect>

Möchte man die Ausrichtung des Farbverlaufs ändern, geschieht dies über rotation. Beispiel 3 dreht den Farbverlauf um 90 Grad.

XML:
  1. :Rect width="100" height="100">
  2.    :fill>
  3.           :LinearGradient rotation="90">
  4.           :GradientEntry ratio="0"   color="0x5F7205" alpha="0.5"/>
  5.         :GradientEntry ratio="0.3" color="0xC6D481" />
  6.         :GradientEntry ratio="0.9" color="0x5F7205" />      
  7.           :LinearGradient>
  8.    :fill>   
  9. :Rect>

RadialGradient

Beim RadialGradient handelt es sich um einen kreisförmigen Verlauf. Die Funktionsweise ist identisch mit dem zuvor gesehen LinearGradient. Beispiel 4:

XML:
  1. :Rect width="100" height="100">
  2.    :fill>
  3.     :RadialGradient>
  4.      :GradientEntry ratio="0"   color="0x5F7205" alpha="0.5"/>
  5.         :GradientEntry ratio="0.3" color="0xC6D481" />
  6.         :GradientEntry ratio="0.9" color="0x5F7205" />      
  7.        :RadialGradient>
  8.    :fill>   
  9. :Rect>

BitmapFill

Zuguterletzt kann man das Rechteck auch mit einer Grafikdatei (jpg, png, gif) befüllen. Im folgenden Beispiel 5 wird eine eingebettete Grafik als Füllung für das Rechteck verwendet. Haben die Grafik und das Rechteck – wie im Beispiel - beide 100x100 Pixel, passt das Bild exakt hinein.

XML:
  1. :Rect width="100" height="100">
  2.    :fill>
  3.         :BitmapFill source="@Embed('skin/bitmapfill.jpg')" />
  4.    :fill>   
  5. :Rect>

Hat das Rechteck andere Maße, z.B. 200x200, zeigt Beispiel 6, dass automatisch gekachelt wird. Die Bitmap-Füllung lässt sich außerdem über rotation drehen (Beispiel 7) und über scaleX bzw. scaleY skalieren (Beispiel 8).

XML:
  1. :Rect width="200" height="200">
  2.    :fill>
  3.         :BitmapFill source="@Embed('skin/bitmapfill.jpg')" />
  4.    :fill>   
  5. :Rect>   
  6.  
  7.  
  8. :Rect width="200" height="200">
  9.    :fill>
  10.         :BitmapFill source="@Embed('skin/bitmapfill.jpg')" x="50" y="50" rotation="45"/>
  11.    :fill>   
  12. :Rect>   
  13.  
  14. :Rect width="200" height="200">         
  15.    :fill>
  16.         :BitmapFill source="@Embed('skin/bitmapfill.jpg')" scaleX="0.25" scaleY="0.25" />
  17.    :fill>   
  18. :Rect>