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:
  1. :Rect width="100" height="100">         
  2.    :stroke>
  3.       :SolidColorStroke weight="25" color="#5F7205" />
  4.    :stroke>                     
  5. :Rect>

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 100x100 Pixel, die Kontur hat eine Strichstärke von 25 Pixel. Dadurch ergibt sich eine Gesamthöhe/-breite der Grafik von 125x125. 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:
  1. :Rect width="100" height="100">
  2.    :fill>
  3.      :SolidColor color="#123423" />
  4.    :fill>           
  5.    :stroke>
  6.       :SolidColorStroke weight="25" color="#5F7205" alpha="0.5" />
  7.    :stroke>                     
  8. :Rect>   
  9.  
  10. :Rect width="100" height="100">
  11.    :fill>
  12.      :SolidColor color="#123423" />
  13.    :fill>           
  14.    :stroke>
  15.       :SolidColorStroke weight="25" color="#5F7205" alpha="1" />
  16.    :stroke>                     
  17. :Rect>

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:
  1. :Rect width="100" height="100">      
  2.    :stroke>
  3.       :SolidColorStroke weight="25" color="#5F7205" joints="miter"/>
  4.    :stroke>              
  5. :Rect>   
  6.  
  7. :Rect width="100" height="100">      
  8.    :stroke>
  9.       :SolidColorStroke weight="25" color="#5F7205" joints="bevel"/>
  10.    :stroke>                    
  11. :Rect>

LinearGradientStroke und RadialGradientStroke

Analog zu den Füllungen gibt es auch einen LinearGradientStroke, also eine Kontur mit Verlauf (siehe Beispiel 4).

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

Und hier das Element RadialGradientStroke, dem Pedant zum RadialGradient (kreisförmige Verlauf, Beispiel 5).

XML:
  1. :Rect width="100" height="100">         
  2.    :stroke>
  3.       :RadialGradientStroke weight="25">
  4.           :GradientEntry ratio="0"   color="0x5F7205" alpha="0.5"/>
  5.             :GradientEntry ratio="0.8" color="0xC6D481" />
  6.             :GradientEntry ratio="0.9" color="0x5F7205" />            
  7.       :RadialGradientStroke>
  8.    :stroke>                  
  9. :Rect>

Alle weiteren Beiträge gibt's hier: Gumbo-Wochen auf www.video-flash.de