Nach den Füllungen des neuen Grafikaustauschformats FXG von Flex 4 sind heute Konturen (Strokes) das Thema dieses Beitrags.
Zuerst die Übersicht der Beispiele:
SolidColorStroke
SolidColorStroke erstellt eine einfarbige Umrandung. Wie bei den Füllungen wird dieses Element als Child einer Form (z.B. Rechteck) definiert. Die Strichstärke wird über die Eigenschaft weight (in Pixeln) geregelt, die Farbe über color. Für die Transparenz ist alpha zuständig. Beispiel 1 aus der Abbildung:
[xml]
[/xml]
Stroke überlagert die Füllung
Wichtig zu wissen: Der Rahmen liegt immer in einer Ebene überhalb der Füllung und überdeckt diese somit. Der Mittelpunkt der Kontur ist direkt auf dem Pfad der Form.
Das folgende Beispiel zeigt dies: Das Rechteck ist 100×100 Pixel, die Kontur hat eine Strichstärke von 25 Pixel. Dadurch ergibt sich eine Gesamthöhe/-breite der Grafik von 125×125. Warum? Macht man die Kontur eine wenig transparent, erkennt man, dass sie zur Hälfte herausragt und zur anderen Hälfte nach innen über der Füllung liegt.
Das entsprechende Codebeispiel dazu lautet:
[xml]
[/xml]
Dieses Beispiel zeigt übrigens auch, wie man Füllungen und Konturen zusammen verwendet.
Verbindungen
Vielleicht manchem aus Flash bekannt: Man kann die Art der Verbindung zwischen den einzelnen Linien einer Umrandung festlegen. Drei Werte sind möglich:
- Rund (
round) - Winkel (
miter) - Abgeflacht (
bevel)
Eine runde Verbindung ist der Standardwert, die Beispiele 2 und 3 in der Abbildung zeigen die anderen beiden Werte. Ein anschauliches Beispiel gibt es auch in der Flash-Hilfe (JointStyle).
[xml]
[/xml]
LinearGradientStroke und RadialGradientStroke
Analog zu den Füllungen gibt es auch einen LinearGradientStroke, also eine Kontur mit Verlauf (siehe Beispiel 4).
[xml]
[/xml]
Und hier das Element RadialGradientStroke, dem Pedant zum RadialGradient (kreisförmige Verlauf, Beispiel 5).
[xml]
[/xml]
Alle weiteren Beiträge gibt’s hier: Gumbo-Wochen auf www.video-flash.de
[ad]