Flex 4: Strokes in FXG

Nach den Füllungen des neuen Grafikaustauschformats FXG von Flex 4 sind heute Konturen (Strokes) das Thema dieses Beitrags.

Zuerst die Übersicht der Beispiele:

Flex 4 Gumbo Stroke

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.

Stroke Alpha

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]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert