Accentsconagua

Cum se creează gradienți cu ActionScript

Cod
Share

Există multe opțiuni disponibile pentru configurarea gradienților generați cu codul AS3. În acest articol, vom explora diferite opțiuni cu o aplicație interactivă pe care o puteți utiliza pentru a schimba aceste opțiuni în zbor.

Timp de joaca

Redați-vă cu opțiunile din SWF de mai sus. Dreptunghiul stâng vă arată gradientul rezultat, așa cum ar apărea atunci când este atras în un dreptunghi de 50x50. Dreptunghiul drept afișează matricea cu setarea curentă. Comparați cele două în timp ce explorați toate setările și toate acestea vor avea sens.

Când ați creat un gradient care vă place, apăsați Dați clic aici pentru cod pentru a vedea o listă de coduri AS3 pe care o puteți copia și insera în propriul proiect pentru a genera un gradient pe care l-ați făcut.

În generarea de coduri au fost adăugate variabile suplimentare, astfel încât să puteți schimba cu ușurință aspectul gradientului.

  • gradientScaling, utilizați aceasta pentru a mări dimensiunea.
  • gradientOffsetX, utilizați această funcție pentru a deplasa gradientul orizontal.
  • gradientOffsetY, utilizați această funcție pentru a deplasa gradientul vertical.

Prezentare generală a gradientului

Pentru a crea un gradient, trebuie să utilizați grafică obiect de a Formă, sau orice clasă subclase. Apoi trebuie să creăm umplutura de gradient, sunând

 graphics.beginGradientFill ()

Acești parametri sunt necesari:

  • Tip: String
  • Culori: Array
  • alfa: Array
  • rapoarte: Array

Acești parametri sunt opționali:

  • matrice: matrice = nulă
  • spreadMethod: String = "pad"
  • interpolareMethod: String = "rgb"
  • focalPointRatio: Număr = 0

Voi trece prin fiecare parametru mai târziu. Dacă preferați să jucați cu el, încercând să vă dați seama, am făcut un SWF doar din acest motiv și poate chiar genera un cod funcțional pentru gradientul pe care l-ați făcut. Verificați-l în partea de sus a articolului.

Pentru documentația completă cu privire la crearea de gradienți, consultați LiveDocs pe subiect.

Tip de gradient

Setați tipul de gradient cu: flash.display.GradientType

Culori, Alphas, Ratios

Aceste trei matrice trebuie să se potrivească. Deci, dacă doriți trei culori, trebuie să furnizați trei alfa și trei rapoarte.

Matricea de culori are nevoie de valori hexazecimale. (ca 0xFF0000 pentru roșu)

Matricea alphas are nevoie de numere de la (și inclusiv) 0 la 1.

Matricea rapoartelor are nevoie de numere de la (și inclusiv) 0 la 255. Acestea trebuie să fie în ordinea corectă, deci [100,0,200] nu este valabil, dar [0100200] este.

Iată un exemplu despre ce se întâmplă atunci când schimbați rapoartele:

Matrice

Matricea definește modul în care va arăta gradientul. Dacă nu o definiți, va avea o lățime de 200 de pixeli. În schimb, dacă doriți să controlați aspectul gradientului, va trebui să creați o nouă matrice:

 var gradientMatrix: matrice = matrice nouă ();

Apoi trebuie să creați o casetă de gradient pe matrice, apelând:

 gradientMatrix.createGradientBox

Sunt necesari următorii parametri:

  • Lățime: Număr
  • Înălțime: Număr

Acești parametri sunt opționali:

  • rotație: Numărul = 0
  • tx: Număr = 0
  • ty: Numărul = 0

lăţime este lățimea matricei (nu este afectată de rotația matricei).

înălţime este înălțimea matricei (nu este afectată de rotația matricei).

rotație este rotația matricei, în radiani.

tx este deplasarea orizontală a matricei (nu este afectată de rotația matricei).

Multumesc este deplasarea verticală a matricei (nu este afectată de rotația matricei).

Metoda Spread

Dacă matricea într-un fel nu acoperă întreaga zonă pe care o desenați, restul va trebui să fie umplut. Există trei modalități diferite de a gestiona acest lucru:

Setați metoda răspândirii cu: flash.display.SpreadMethod

Metoda de interpolare

Acesta este modul în care se calculează tranziția de culoare, există două opțiuni:

Setați metoda interpolării cu: flash.display.InterpolationMethod

Punctul focal

Acest lucru are efect doar dacă utilizați gradienți radiali. Acceptă valori cuprinse între -1 și 1. Dacă furnizați un număr de peste 1, nu vă faceți griji, acesta va fi implicit la 1. Acesta este, de asemenea, afectat de rotație (astfel încât să puteți face să fie în partea de sus prin setarea punctului focal la -1 și rotirea la Pi / 2).

Desen

Când ați terminat, trebuie să desenați umplutura. Acest lucru poate fi realizat prin oricare dintre metodele de desenare grafice, cum ar fi beginFill ().

Dacă nu utilizați (0,0) ca punct de pornire pentru metoda de desen, trebuie să vă amintiți să schimbați tx și Multumesc valorile matricei.

Concluzie

Acum ar trebui să fii gata să faci noi aventuri cu gradienți generați de cod.

Vă mulțumim pentru lectură!

Cod
×