Accentsconagua

Slik lager du gradienter med ActionScript

Kode
Share

Det er mange alternativer tilgjengelig for konfigurering av gradienter generert med AS3-kode. I denne artikkelen vil vi utforske ulike alternativer med en interaktiv app som du kan bruke til å endre disse alternativene i fly.

Spilletid

Spill rundt med alternativene i SWF ovenfor. Venstre rektangel viser deg den resulterende gradienten som den ville vises når den ble trukket inn i et 50x50 rektangel. Riktig rektangel viser matrisen med gjeldende innstilling. Sammenlign de to mens du utforsker alle innstillingene, og det vil gjerne gi mening.

Når du har opprettet en gradient som du liker, treffer du Klikk her for kode for å se en AS3-kodeoppføring som du kan kopiere og lime inn i ditt eget prosjekt for å generere den gradienten du har gjort.

I kodegenerasjonen er det lagt til ekstra variabler, slik at du enkelt kan endre utseendet på gradienten.

  • gradientScaling, bruk dette for å øke størrelsen.
  • gradientOffsetX, bruk dette for å flytte gradienten horisontalt.
  • gradientOffsetY, Bruk dette til å flytte gradienten vertikalt.

Gradient Oversikt

For å opprette en gradient, må du bruke grafikk gjenstand for a Form, eller noen klasse det underklasser. Da må vi lage gradientfyllingen ved å ringe

 graphics.beginGradientFill ()

Disse parametrene er påkrevd:

  • Type: String
  • farger: Array
  • Alpha: Array
  • forhold: Array

Disse parametrene er valgfrie:

  • Matrise: Matrise = null
  • spreadMethod: String = "pad"
  • interpoleringMetode: String = "rgb"
  • focalPointRatio: Number = 0

Jeg vil gå om hver parameter senere. Hvis du helst vil spille rundt med det, prøver jeg å finne ut det selv, har jeg laget en SWF bare av den grunn, og det kan til og med generere funksjonskode for gradienten du har gjort. Sjekk det ut på toppen av artikkelen.

For full dokumentasjon om å opprette gradienter, se LiveDocs på emnet.

Gradient Type

Angi gradient typen med: flash.display.GradientType

Farger, alfas, forhold

Disse tre arrays må samsvare. Så hvis du vil ha tre farger, må du også levere tre alfaer og tre forhold.

Fargearrayen trenger heksadesimale verdier. (som 0xff0000 for rødt)

Alfabetisk rekkefølge trenger tall fra (og inkludert) 0 til 1.

Forholdstallet trenger tall fra (og inkludert) 0 til 255. Disse må være i riktig rekkefølge, så [100,0,200] er ikke gyldig, men [0100200] er.

Her er et eksempel på hva som skjer når du endrer forholdene:

Matrise

Matrisen definerer hvordan graden vil se ut. Hvis du ikke definerer den, vil den ha en bredde på 200px. I stedet, hvis du vil kontrollere hvordan gradienten ser ut, må du opprette en ny matrise:

 var gradientMatrix: Matrix = ny Matrix ();

Deretter må du opprette en gradientboks på matrisen ved å ringe:

 gradientMatrix.createGradientBox

Følgende parametere er påkrevd:

  • bredde: Number
  • Høyde: Antall

Disse parametrene er valgfrie:

  • rotasjon: tall = 0
  • tx: tall = 0
  • ty: Nummer = 0

bredde er bredden av matrisen (ikke påvirket av matrisrotasjon).

høyde er høyden på matrisen (ikke påvirket av matrisrotasjon).

rotasjon er rotasjonen av matrisen, i radianer.

tx er den horisontale forskyvningen av matrisen (ikke påvirket av matrisrotasjon).

ty er den vertikale forskyvningen av matrisen (ikke påvirket av matrisrotasjon).

Spread Method

Hvis matrisen på en eller annen måte ikke dekker hele området du tegner, må resten fylles. Det er tre forskjellige måter å håndtere dette på:

Sett spredemetoden med: flash.display.SpreadMethod

Interpoleringsmetode

Dette er måten fargenovergangen beregnes på, det er to alternativer:

Sett interpoleringsmetoden med: flash.display.InterpolationMethod

Fokuspunktforhold

Dette har bare en effekt hvis du bruker radiale gradienter. Den aksepterer verdier fra og inkludert -1 til 1. Hvis du oppgir et tall over 1, ikke bekymre deg, det vil være standard på 1. Dette påvirkes også av rotasjon (slik at du kan få det til å være øverst ved setter fokuspunktet til -1 og rotasjon til Pi / 2).

Tegning

Når du er ferdig, må du tegne fyllingen. Dette kan utføres med noen av grafikkfyllingsteknikkene, som startFill ().

Hvis du ikke bruker (0,0) som startpunkt for tegnemetoden, må du huske å endre tx og ty matrisens verdier.

Konklusjon

Nå bør du være klar til å gå på nye eventyr med kodegenererte gradienter.

Takk for at du leste!

Kode
×