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
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]
[/xml]
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]
[/xml]
Möchte man die Ausrichtung des Farbverlaufs ändern, geschieht dies über rotation. Beispiel 3 dreht den Farbverlauf um 90 Grad.
[xml]
[/xml]
RadialGradient
Beim RadialGradient handelt es sich um einen kreisförmigen Verlauf. Die Funktionsweise ist identisch mit dem zuvor gesehen LinearGradient. Beispiel 4:
[xml]
[/xml]
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 100×100 Pixel, passt das Bild exakt hinein.
[xml]
[/xml]
Hat das Rechteck andere Maße, z.B. 200×200, 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]
[/xml]
[ad]