How å lage overgangar med Action
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Det er mange alternativer tilgjengelige for konfigurering 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 på fly.
Play Time
Spill rundt med alternativene i SWF ovenfor. Den venstre rektangelet viser den resulterende gradient som det vil vises når trukket inn i en 50x50 rektangel. Den høyre rektangelet viser matrise med gjeldende innstilling. Sammenligne de to mens utforske alle innstillingene og det vil alle være fornuftig.
Når du har opprettet en gradient som du liker, traff Klikk her for kode for å se en AS3 kode liste som du kan kopiere og lime inn ditt eget prosjekt for å generere gradienten du har gjort.
I kodegenerering ekstra variabler er lagt slik at du enkelt kan endre utseendet på graderingen.
gradientScaling, bruk dette for å øke størrelsen.
gradientOffsetX, bruke dette til å flytte gradient horisontalt.
gradientOffsetY, bruke dette til å flytte gradient vertikalt.
Gradient Oversikt
For å lage en gradient, må du bruke grafikk gjenstand for en form, eller en hvilken som helst klasse det underklasser. Da må vi lage graderingsfyllet, ved å ringe
graphics.beginGradientFill ()
Disse parametrene er required:
type:String
colors:Array
alphas:Array
ratios:Array
These parametere er valgfritt:
matrise: Matrix = null
spreadMethod: String = "pad"
interpolationMethod: String = "rgb"
focalPointRatio: Number = 0
Jeg vil gå om hver parameter senere. Hvis du heller vil leke seg med det, prøver å finne ut av det selv, har jeg laget en SWF nettopp av den grunn, og det kan også generere funksjonell kode for gradienten du har gjort. Sjekk det ut på toppen av artikkelen.
For full dokumentasjon på å lage gradienter, se LiveDocs om temaet.
Gradient Type
Sett gradient skrive med: flash.display.GradientType
Farger, Alphas, prosenter
Disse tre arrays trenger å matche opp. Så hvis du vil ha tre farger, må du også levere tre Alpha og tre forholdstall.
farger rekke trenger heksadesimale verdier. (som 0xff0000 for rød)
alfaer rekke trenger tall fra (og med) 0 til 1.
forholdstall rekke trenger tall fra (og med) 0 til 255. Disse må være i riktig rekkefølge, [100,0,200] så er ikke gyldig, men [0100200] er
Her er et eksempel på hva som skjer når du endrer forholdene.
Matrix
Matrisen definerer hvordan gradient vil se. Hvis du ikke definerer det, vil det ha en bredde på 200px. I stedet, hvis du ønsker å kontrollere hvordan gradient vil se ut, må du opprette en ny matrise:
Var gradientMatrix: Matrix = new Matrix ();
Så du trenger for å lage en gradient boks på matrisen, ved å ringe:
gradientMatrix.createGradientBox
Følgende parametere er obligatoriske:
bredde: Antall
Høyde: Antall
Disse parametrene er valgfritt:
rotasjon: Antall = 0
tx: Antall = 0
ty: Antall = 0
bredden er bredden av matrisen (ikke påvirkes av matriks rotasjon).
høyden er høyden av matrisen (ikke påvirkes av matriks rotasjon).
rotasjonen er rotasjon av matrisen, i radianer .
tx er den horisontale forskyvning av matrisen (ikke påvirkes av matriks rotasjon).
ty er den vertikale forskyvning av matrisen (ikke påvirkes av matriks rotasjon).
Spre Metode
Hvis matrisen på noen måte dekker ikke opp hele området du tegner, vil resten må fylles. Det er tre forskjellige måter å håndtere dette:
Sett spredning metoden med: flash.display.SpreadMethod
interpolasjonsmetode
Dette er måten fargen overgang beregnes, er det to alternativer:
Sett interpoleringsmetode med: flash.display.InterpolationMethod
Brennpunkt Ratio
Dette har bare en effekt hvis du bruker radial gradienter. Det aksepterer verdier fra, og inkludert, -1 til 1. Hvis du oppgir et tall over 1, ikke bekymre deg, det vil som standard til 1. Dette er også påvirket av rotasjon (slik at du kan gjøre det for å være i toppen av innstilling av fokuspunkt til -1, og rotasjon til Pi /2).
Tegning
Når du er ferdig, må du trekke fyllet. Dette kan utføres av noen av grafikken fylle tegning metoder, som beginfill ().
Hvis du ikke bruker (0,0) som startpunkt for tegningen metoden, må du huske å endre tx og ty verdier i matrisen.
Konklusjon
Nå bør du være klar til å gå på nye eventyr med kode genereres gradienter.
Takk for lesing!