Accentsconagua

Hur man skapar gradienter med ActionScript

Koda
Share

Det finns många alternativ tillgängliga för konfigurering av gradienter genererade med AS3-kod. I den här artikeln kommer vi att utforska olika alternativ med en interaktiv app som du kan använda för att ändra dessa alternativ i flygningen.

Play Time

Spela runt med alternativen i SWF ovan. Den vänstra rektangeln visar den resulterande gradienten som den skulle visas när den dras in i en 50x50 rektangel. Den rätta rektangeln visar matrisen med den aktuella inställningen. Jämför de två medan du utforskar alla inställningar och det kommer alla att vara meningsfullt.

När du har skapat en lutning som du gillar, träffa Klicka här för kod för att se en AS3-kodlista som du kan kopiera och klistra in i ditt eget projekt för att generera den gradient du har gjort.

I kodgenerationen har extra variabler lagts till, så att du enkelt kan ändra utseendet på gradienten.

  • gradientScaling, använd detta för att öka storleken.
  • gradientOffsetX, använd detta för att flytta gradienten horisontellt.
  • gradientOffsetY, använd detta för att flytta lutningen vertikalt.

Gradient Översikt

För att skapa en gradient behöver du använda grafik föremål för a Form, eller någon klass det underklasser. Då behöver vi skapa gradientfyllningen, genom att ringa

 Graphics.beginGradientFill ()

Dessa parametrar krävs:

  • type: String
  • färger: Array
  • alphas: Array
  • förhållanden: Array

Dessa parametrar är valfria:

  • matris: Matris = null
  • spreadMethod: String = "pad"
  • interpolationMethod: String = "rgb"
  • focalPointRatio: Number = 0

Jag kommer dock att gå men varje parameter senare. Om du hellre vill leka med det och försöker räkna ut det själv, har jag gjort en SWF bara av den anledningen, och det kan även generera funktionskod för den gradient du har gjort. Kolla in det på toppen av artikeln.

För fullständig dokumentation om hur du skapar gradienter, se LiveDocs om ämnet.

Gradient Type

Ställ in lutningstypen med: flash.display.GradientType

Färger, alfas, förhållanden

Dessa tre arrays måste matcha upp. Så om du vill ha tre färger måste du också leverera tre alfas och tre förhållanden.

Färgerna behöver hexadecimala värden. (tycka om 0xFF0000 för rött)

Alfabetisk array behöver siffror från (och inklusive) 0 till 1.

Förhållandet array behöver siffror från (och inklusive) 0 till 255. Dessa måste vara i rätt ordning, så [100,0,200] är inte giltigt, men [0.100.200] är.

Här är ett exempel på vad som händer när du ändrar förhållandena:

Matris

Matrisen definierar hur gradienten kommer att se ut. Om du inte definierar den kommer den att ha en bredd på 200px. Istället, om du vill kontrollera hur gradienten kommer att se ut, måste du skapa en ny matris:

 var gradientMatrix: Matrix = ny Matrix ();

Då behöver du skapa en lutningsbox på matrisen genom att ringa:

 gradientMatrix.createGradientBox

Följande parametrar krävs:

  • width: Number
  • height: Number

Dessa parametrar är valfria:

  • rotation: Nummer = 0
  • tx: Number = 0
  • ty: Nummer = 0

bredd är bredden på matrisen (ej påverkad av matrisrotation).

höjd är matrisens höjd (inte påverkad av matrisrotation).

rotation är matrisens rotation i radianer.

tx är den horisontella förskjutningen av matrisen (ej påverkad av matrisrotation).

tack är den vertikala förskjutningen av matrisen (ej påverkad av matrisrotation).

Spridningsmetod

Om matrisen på något sätt inte täcker hela området du ritar, måste resten fyllas. Det finns tre olika sätt att hantera detta:

Ställ in spridningsmetoden med: flash.display.SpreadMethod

Interpoleringsmetod

Det här är hur färgövergången beräknas, det finns två alternativ:

Ställ in interpolationsmetoden med: flash.display.InterpolationMethod

Brännpunktsförhållande

Detta har bara en effekt om du använder radiella gradienter. Det accepterar värden från och inklusive -1 till 1. Om du anger ett tal över 1, oroa dig inte, det kommer att vara standard till 1. Detta påverkas också av rotation (så att du kan göra det överst i inställning av brännpunkten till -1 och rotation till Pi / 2).

Ritning

När du är klar måste du rita fyllningen. Detta kan utföras med någon av grafikfyllningsritningsmetoderna, som startFill ().

Om du inte använder (0,0) som startpunkt för ritningsmetoden måste du komma ihåg att ändra tx och tack matrisens värden.

Slutsats

Nu borde du vara redo att gå på nya äventyr med kodgenererade gradienter.

Tack för att du läser!

Koda
×