Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima data in septembrie 2009.
Bună, încă o dată, numele meu este Andr? și în acest tutorial voi demonstra cum să creați filtre personalizate cu Pixel Bender Toolkit, apoi să le folosiți cu Flash CS4 pentru a ieși fișiere .pbj.
* Această caracteristică funcționează numai în Flash Player 10.
Pixel Bender Toolkit este livrat împreună cu pachetul Adobe Master Collection CS4 sau îl puteți descărca la http://labs.adobe.com/downloads/pixelbender.html.
Înainte de a crea orice filtru, trebuie să înțelegem funcțiile și tipurile de bază ale limbii. Este diferit de Flash, și mult mai simplu.
Cuvantul de intrare: Aceasta este intrarea imagine, imaginea care va fi citită și activată. Putem avea până la 2 imagini de intrare în cod, lucrul cu o singură imagine va crea un filtru, iar lucrul cu 2 imagini va crea un mod de amestecare. Intrarea este întotdeauna tipul de "image4", care este o imagine în modul RGBA (roșu, verde, albastru și alb).
Cuvântul cheie de ieșire: Acesta este rezultatul pixel, spre deosebire de intrare. Aceasta nu va scoate imaginea, aceasta va trimite doar pixelul citit în RGBA. Acesta este tipul "pixel4" (și nu image4 ca intrarea).
Cuvântul cheie pentru parametri: Cuvântul cheie pentru parametri va funcționa ca o funcție de setare. Cu parametrul, valorile filtrului pot fi schimbate în timpul utilizării. Parametrul trebuie să fie urmat de tip și nume și poate avea și valoarea minimă, valoarea maximă și valoarea implicită. Exemplu: parametrul int parametru sau parametru float myfloat . De asemenea, parametrul poate fi tastat float2, float3, float3, int1, int2? exemplu: parametrul float2 test
De asemenea, avem tipurile float, float2, float3, float4, int2, int2, int3, int4 și multe altele pe care nu le vom folosi aici. De asemenea, unele tipuri nu funcționează cu Flash Player 10, deci nu voi intra în ele chiar acum. Cu toate acestea, voi discuta un pic despre tipurile pe care le-am menționat aici și despre cum funcționează.
Tip float, float2, float3 și float4: atunci când creați un tip float4, de exemplu, creați o matrice de 4 valori flotante. În Pixelbender valorile flotorului sunt definite prin punct, dar float () funcționează de asemenea ca o funcție pentru a converti alte valori numerice în float. De exemplu "testul float4 = float4 (1,2,3,4);". Aici avem un obiect cu 4 valori (tip float) în variabila "test". De asemenea, puteți crea un obiect float4 dintr-o singură valoare, de exemplu: "testul float4 = float4 (3);". Aici avem un obiect cu 4 valori (RGBA) și toate valorile sunt aceleași (3.0 float). Atunci când creați o valoare float, puteți să o creați și utilizând un punct asemănător "test float = 1,0;". Dacă încercați să o definiți "test float = 1;" aceasta va arunca o eroare, deoarece numerele fără punct în pixelbender funcționează ca valori int.
Deci flota este întotdeauna definită de punct. Chiar folosind "float ()" pentru a crea valoarea float va returna un număr cu un punct. În cele din urmă, pentru a accesa valori flotante cu mai mult de o valoare, puteți utiliza sintaxa ca un acces la matrice "variabilă [0] sau variabilă [1] sau variabilă [2]?".
Tipurile int, int2, int3 și in4 sunt aceleași ca și tipurile de flotoare, dar nu au puncte. De asemenea, puteți converti valorile numerice utilizând funcții similare "int".
evaluatePixel (): această funcție rulează întreaga imagine, pixel cu pixel și apoi returnează tipul de ieșire pixel4. În filtre personalizate pentru Flash, folosim întotdeauna această funcție.
outCoord (): această funcție returnează coordonatele curente ale pixelului citit de funcția evaluatePixel. Aceasta returnează valori de tip float2, x și y și poate fi accesată de [] ca array sau .x și .y like object. De exemplu: var out = outCoord (); //out.x este același de ieșire [0] și out.y este același de ieșire [1].
sampleNearest (sursa, pixelCoordinate): această funcție returnează valoarea float4 a pixelului din imaginea sursă (image4) la coordonatele "pixelCoordinate". În mod normal, folosim funcția "outCoord" aici.
Trebuie să se facă o observație; când utilizați valorile flotante și doriți să adăugați / scadeți / înmulțiți sau să împărțiți valorile cu altă valoare float de aceeași lungime, le puteți folosi ca în acest exemplu:
float4 test1 = float4 (3,0,2,0,2,0,3,0); float4 test2 = float4 (1,0,2,0,2,0,1,0); rezultatul float4 = test1-test2;
Rezultatul va fi un tip variabil float4 cu valori 2,0, 0,0, 0,0 și 2,0. De asemenea, puteți utiliza:
float4 test1 = float4 (3,0,2,0,2,0,3,0); float4 test2 = float4 (1,0,2,0,2,0,1,0); rezultatul float4 = test1; rezultat [0] = test1 [0] -test2 [0]; rezultat [2] - = 0,5;
Cred că este suficient să înțelegem structura codului Pixel Bender, să trecem la pasul următor, după ce am menționat doar un singur lucru:
Înainte de a testa orice filtru, este important să încărcați cel puțin o imagine (fișier> încărcați imaginea 1 "). Pentru a testa filtrul puteți merge pentru a construi> executați, dacă filtrul are parametri, în partea dreaptă a aplicației, Vedeți glisoarele pentru a schimba valorile. Se schimbă la timpul de execuție și au o previzualizare live, de fiecare dată când apăsați din nou pe run.
Acest filtru este livrat împreună cu Pixel Bender Toolkit, dar este unul din filtrele mai simple care trebuie explicate. Pentru mai multe informații despre referința limbajului Pixel Bender, apăsați butonul F1 din program și se va deschide ajutorul în .pdf.
Odată ce programul este deschis, creați un nou filtru kernel (fișier> filtru kernel nou), programul va crea o structură implicită pentru filtru:
kernelul NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > input image4 src; ieșire pixel4 dst; void evaluatePixel () dst = sampleNearest (src, outCoord ());
În kernelul NewFilter, schimbați numele NewFilter pentru numele filtrului. Spațiu de nume, furnizor, versiune și descriere Nu este nevoie să explic, doar șirurile ca autorul, versiunea (int) și descrierea.
Imaginea de intrare va fi imaginea încărcată de filtru, iar ieșirea va fi pixelul generat de funcția evaluatePixel. Ieșirea va fi o valoare pixel4 generată de funcția evaluatePixel, care rulează pixeli după pixel al imaginii de intrare așa cum am explicat.
La linia "dst = sampleNearest (src, outCoord ());"primim valoarea pixelului curent și coordonatele outCoord () din imaginea src (imaginea de intrare), astfel încât să putem modifica valorile valorii rgba a dst. De exemplu, dacă vrem să inversăm culorile din imaginea de intrare, am putea face următoarele:
dst = sampleNearest (src, outCoord ()); dst.rgb = float3 (1) -dst.rgb;
Ce facem aici?
Afirmăm că valoarea rgb a acestui pixel este matricea valorii float3 mai mică decât valoarea inițială a rgb, astfel că culoarea va fi inversată. Puteți folosi dst.rgb în loc să utilizați dst [0], dst [1]? și ordinea după punctul poate fi orice ordin, va citi fiecare literă ca valoare a culorii. De exemplu, puteți utiliza dst.gbr = float3 (1) -dst.gbr. Un alt lucru pe care îl puteți încerca este să schimbați culorile imaginii. De exemplu, folosind codul de mai jos (în cadrul funcției evaluatePixel):
dst = sampleNearest (src, outCoord ()); dst.rgb = dst.brg;
Acest cod va afișa o imagine ciudată.
Să testați un filtru de la Adobe. Filtrul pixelat este excelent pentru testare, deci mergeți la fișier> deschis; în dosarul în care este instalat Pixel Bender există câteva filtre. Să alegem filtrul pixelat. Odată ce este deschis, puteți apăsa butonul "Run" pentru a testa filtrul. Dacă doriți să exportați, mergeți la fișierul> Export filtru kernel pentru playerul flash. Aceasta va exporta filtrul pentru a fi utilizat cu Flash, puteți încărca filtrul cu URLLoader sau puteți încorpora cu eticheta Embed din Flex SDK. În acest tutorial voi arăta cum să lucrați cu fișierul încorporat, deoarece filtrul cântărește doar aproximativ 4kb până la 15kb (este foarte ușor).
Extensia de ieșire este un fișier .pbj.
Dacă aveți o cale de clasă pentru Flash, utilizați calea de clasă, dacă nu aveți una și doriți să o creați, deschideți tutorialul anterior și urmați Pasul 1. Dacă nu doriți o cale de clasă, utilizați același folder al documentului .fla . Să presupunem calea de clasă pentru tutorial.
În calea de clasă creați directorul "pixelbender". Apoi, în interiorul dosarului "pixelbender", în interiorul căii de clasă creați folderul "pbj". Copiați fișierul .pbj (exemplu: pixelate.pbj) în acest folder pbj pe care l-ați creat.
Deschideți Flash CS4 sau Flex cu SDK actualizat pentru FP10. Dacă utilizați Flash, este important să configurați Flex SDK pentru Flash. Dacă nu știți cum să faceți acest lucru, apăsați "ctrl + u" pentru a deschide preferințele Flash, apoi selectați "actionscripts" la categorie, apoi "Actionspropt 3.0 settings". În fereastra "Setări avansate Actionscript 3.0" faceți clic pe butonul "+" din calea bibliotecii și adăugați următoarele: $ (FlexSDK) /frameworks/libs/flex.swc. Faceți clic pe butonul OK.
Acum creați un nou fișier .as și începeți să codificați următoarele:
Mai întâi setăm pachetul și introducem clasele necesare.
pachet pixelbender import flash.display.Shader; import flash.filters.ShaderFilter; import flash.utils.ByteArray;
Creați clasa publică PixelateFilter care extinde ShaderFilter. ShaderFilter poate fi aplicat ca filtru normal în matricea de filtre a oricărui DisplayObject.
clasa publică PixelateFilter extinde ShaderFilter
Încorporați fișierul pixelate.pbj în dosarul pbj (presupunem că vom salva fișierul .as în directorul pixelat al clasei noastre de clasă). Eticheta de încorporare este o etichetă Flex care încorporează fișiere într-un SWF în loc să le încarce. Există o mulțime de tipuri pe care le puteți încorpora, cum ar fi .flv, .jpg și altele, și ca aplicație mimeType / stream octet fișierul va fi încorporat ca ByteArray. Eticheta de încorporare creează o clasă pentru fișierul încorporat, aici folosesc o clasă numită "Filtru".
[Embed (sursă = "pbj / pixelate.pbj", mimeType = "aplicație / octet-stream")] private var Filter: Class;
În constructor, să creăm o instanță a fișierului nostru încorporat ca ByteArray. ByteArray este parametrul constructorului Shader, așa că vom crea și instanța shader, setând filtrul la "ByteArray" ca parametru al constructorului. Deoarece extindeți ShaderFilter, nu este necesar să creați o instanță a ShaderFilter. Această clasă este deja extinsă pentru ShaderFilter, deci tot ce trebuie să facem este să setăm parametrul shader al clasei noastre ShaderFilter ca instanță shader.
funcția publică PixelateFilter (): void var filter: ByteArray = filtrul nou () ca ByteArray; // Fișierul încorporat ca ByteArray var shader: Shader = Shader nou (filtru); // instanța lui Shader this.shader = shader; // setarea parametrului shader al clasei noastre
Acum creăm un parametru nou pentru clasa noastră, parametrul "dimension". Acest parametru va afecta parametrul "parametru int" creat în pixelbender. Funcția setter va modifica valoarea, iar funcția getter va obține valoarea curentă. Valorile datelor shader pot fi accesate de "instance.data.value", valorile sunt matrice. Dacă am avea un parametru "parametru int2 position;" în filtru, de exemplu, l-am accesa prin "instance.data.position [0]" și "instance.data.position [1]" respectiv.
dimensiunea setului funcției publice (valoare: Număr): void shader.data.dimension.value [0] = value; funcția publică obține dimensiunea (): Număr return shader.data.dimension.value [0];
După toate acestea, închideți doar pachetul și clasa.
Acum, clasa pentru acest filtru este creată, salvați fișierul .as cu numele "PixelateFilter.as" (același nume ca și clasa) în dosarul pixelbender din interiorul căii de clasă (același nume ca pachetul dvs. și unde ați mai a creat dosarul pbj).
Primul pas, creați un nou document ASF .fla, salvați-l oriunde doriți, de exemplu c: / mycustomfilter.
Definiți o clasă pentru acest document .fla. Deschideți panoul de proprietăți al documentului .fla din fereastra> proprietăți, în caseta "Clasă" de tip "Principal" și creați un nou fișier actionscript.
Copiați orice imagine în același folder al documentului .fla, de exemplu, am folosit una dintre exemplele de imagini din exemplele Pixel Bender; YellowFlowers.png, care poate fi găsit cu fișierele sursă.
Dacă nu aveți încă clasa TweenLite, vă rugăm să o descărcați la http://blog.greensock.com/tweenliteas3/ și să despachetați conținutul dosarului gs din interiorul folderului gs din clasa dvs. de clasă.
Creați un nou document .as.
Includeți clasele necesare cursului nostru de clasă:
pachet import flash.display.Sprite; import flash.display.Bitmap; import pixelbender.PixelateFilter; // Filtrul nostru personalizat de import gs.TweenLite; // cea mai bună clasă Tweening
Creați clasa principală care extinde clasa Sprite:
clasa publică principală extinde Sprite
Încorporați imaginea pentru testare, mimeType este "image / png", deci încorporăm ca imagine nu ByteArray. Denumiți clasa sa "Img". În plus, tastăm o variabilă numită "filtru" de tip PixelateFilter, astfel încât să o putem folosi în orice funcție ulterioară.
[Embed (sursă = "YellowFlowers.png", mimeType = "imagine / png")] privat var Img: Class; privat filtru var: PixelateFilter;
În constructor, începem să ne creăm imaginea, care va fi afectată de filtru, apoi adăugăm imaginea copilului pe scenă. Apoi creați instanța PixelateFilter. Am creat variabila înainte, deci nu trebuie să tastăm din nou. Setați dimensiunea filtrului la 100, astfel încât să putem vedea efectul mai bine, adăugăm filtrul și în lista de filtre a clasei noastre principale.
Apoi, folosind clasa TweenLite animăm parametrul de filtrare. Parametrul de dimensiune va fi animat de la 100 la 1. În timp ce animația este actualizată, funcția "tweenLiteUpdate" este executată și, după terminarea animației, funcția "newTween" va fi executată.
funcția publică Main (): void var imagine: Bitmap = nou Img () ca bitmap; addChild (imagine); filtru = nou PixelateFilter (); filter.dimension = 100; this.filters = [filtru]; TweenLite.to (filtru, 3, dimensiune: 1, onUpdate: tweenLiteUpdate, onComplete: newTween);
În timp ce TweenLite este actualizat, tweenLiteUpdate este executat și actualizează filtrul clasei noastre principale. Fără această metodă nu am vedea TweenLite actualizarea filtrului.
funcția privată tweenLiteUpdate (): void this.filters = [filter];
Când prima animație Tweening se termină, va rula funcția newTween. Prima linie a acestei funcții va verifica dacă valoarea dimensiunii filtrului este 1. Dacă da, va seta variabila dim la 100, altfel va seta variabila la 1. Aceasta este aceeași cu dacă și altceva sau comută. A doua linie va începe din nou animația Tweening a filtrului.
funcția privată newTween (): void var dim: Număr = (filter.dimension == 1)? 100: 1; TweenLite.to (filtru, 3, dimensiune: dim, onUpdate: tweenLiteUpdate, onComplete: newTween);
Acum închideți pachetul și clasa cu dublă "".
Salvați fișierul ca "Main.as" în același director al fișierului .fla și dacă toate fișierele și folderul sunt OK, puteți testa fișierul. Animația va începe pixelată, va schimba imaginea normală și va continua să circule.
Sper că ți-a plăcut acest lucru și sper că va fi foarte util. În Adobe Exchange există multe alte filtre pe care le puteți descărca, unele dintre ele fiind gratuite sau cu sursă deschisă. Am mai pus și alte .pbj și clase cu sursa de studiu. De exemplu, SpherizeFilter.as: http://cavallari.freehostia.com/spherize/, animă de poziția mouse-ului.
Accentsconagua