Create tilpassede filtre Bruke Pixel Bender Toolkit
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang utgitt i september 2009.
Hei, igjen, mitt navn er André og i denne opplæringen vil jeg vise hvordan man kan lage egne filtre med Pixel Bender Toolkit, og deretter bruke dem med Flash CS4 til utgang .pbj filer
* Denne funksjonen fungerer bare i Flash Player 10.
Trinn 1:. Pixel Bender Toolkit
Pixel Bender Toolkit leveres med Adobe Master Collection CS4-pakken, eller du kan laste den ned på http://labs.adobe.com/downloads/pixelbender.html
Trinn 2:. The Basics
Før du oppretter noen filter, må vi forstå de grunnleggende funksjonene og typer av språket. Det er annerledes å Flash, og mye enklere
Inngangs søkeord:. Utgangen søkeord:. Para søkeord:. Også vi har typene flyte, float2, float3, float4, int, INT2, int3, int4 og mange andre som vi ikke vil bruke her. Også er det noen typer ikke jobbe med Flash Player 10, så jeg vil ikke komme inn i dem akkurat nå. Jeg vil imidlertid diskutere litt om hvilke typer jeg har nevnt her og hvordan de fungerer Type float, float2, float3 og float4. Så float er alltid definert av dot. Selv ved bruk av "float ()" for å lage flyttallsverdi vil returnere et tall med en prikk. Til slutt, for å få tilgang flyte verdier med mer enn én verdi du kan bruke syntaks som en matrise access "variable [0] eller variabel [1] eller variabel [2] ...". Type int, INT2, int3 og in4 er det samme som float typer, men har ikke prikker. Du kan også konvertere tallverdier ved hjelp av "int" som fungerer evaluatePixel (). Denne funksjonen går over hele bildet, piksel for piksel, og returnerer deretter utgangstype pixel4. I egendefinerte filtre for Flash vi alltid bruke denne funksjonen outCoord (). Denne funksjonen returnerer gjeldende koordinere på pikselen blir lest av evaluatePixel funksjonen. Den returnerer en verditype float2, x og y-verdier, og kan nås ved [] som matrise eller .x og .Y lignende gjenstand. For eksempel: Var ute = outCoord (); //out.x er den samme for ut [0] og out.y er den samme for ut [1] sampleNearest (kilde, pixelCoordinate). Denne funksjonen returnerer float4 verdien av pixel fra kildebildet (image4) på koordinasjoner "pixelCoordinate". Normalt bruker vi "outCoord" funksjon her En observasjon må gjøres.; når du bruker float verdier og du ønsker å legge til /trekke /multiplisere eller dele verdier med andre float verdi av samme lengde, kan du bruke dem som dette eksempelet: Resultatet vil være en variabel typen float4 med verdiene 2,0, 0,0, 0,0 og 2,0. Dessuten kan du bruke: Jeg tror dette er nok til å forstå strukturen i Pixel Bender kode, la oss gå videre til neste trinn, etter at jeg har nevnt bare en ting: Før testing noe filter, er det viktig å legge minst ett bilde (fil > load image 1 "). For å teste filteret du kan gå til å bygge > kjøre, hvis filteret har noen parametre, på høyre side av programmet du ' ll se glidere å endre verdiene De endrer under kjøring og har en live forhåndsvisning, siden hver gang du trykker løpe igjen Dette filteret leveres med Pixel Bender Toolkit, men er en av de enklere filtrene til å forklare. For mer om Pixel Bender språket henvisning bare trykke F1-knappen i programmet, og hjelp i .pdf vil åpne. Når programmet er åpent, opprette en ny Kernel Filter (fil > ny kernel filter) vil programmet lage en standard struktur for filteret: I kjernen NewFilter, endrer du navnet NewFilter for navnet på filteret. Namespace, leverandør, versjon og beskrivelse jeg ikke trenger å forklare, bare dine strenger som forfatter, versjon (int) og beskrivelsen. Inngangs bildet blir bildet lastet av filteret, og produksjonen vil være den piksel som genereres av evaluatePixel funksjon. Produksjonen vil være et pixel4 verdi generert av evaluatePixel funksjon, som går piksel for piksel av inngangs bildet som jeg har forklart På linjen "Sommertid = sampleNearest (src, outCoord ());". vi får verdien til det eksisterende bildeelementet, og den koordinat outCoord () fra bilde src (inngangsbildet), så vi kan modifisere verdiene av RGBA verdien av dst. For eksempel, hvis vi ønsker å invertere fargene på inngangsbildet, kunne vi gjøre følgende: Hva gjør vi her Vi sier at rgb verdien av denne piksel er rekken av float3 verdi mindre den opprinnelige verdien av rgb? , slik at fargen vil bli invertert. Du kan bruke dst.rgb stedet for å bruke DST [0], DST [1] ... og orden etter prikken kan være hvilken som helst rekkefølge, vil den lese hver bokstav som verdien av fargen. For eksempel kan du bruke dst.gbr = float3 (1) -dst.gbr. En annen ting du kan prøve er å endre fargene i bildet. For eksempel ved å bruke koden under (inne i evaluatePixel funksjon): Denne koden vil utgang en merkelig farget bilde La oss teste et filter fra Adobe . Den Pixelate filter er stor for testing, så gå til fil > åpne; i mappen der Pixel Bender er installert er det noen filtre. La oss velge Pixelate filter. Når det er åpent kan du trykke "run" -knappen for å teste filteret. Hvis du ønsker å eksportere, gå til fil > Eksport kernel filter for flash player. Dette vil eksportere filteret å bruke med Flash, kan du laste filteret med URLLoader eller bygge med Embed koden fra Flex SDK. I denne opplæringen vil jeg vise hvordan du arbeider med den innebygde filen, siden filteret veier bare ca 4KB til 15kb (det er veldig lett). Utgangen utvidelsen er en .pbj fil. Hvis du har en klassebane for Flash, bruker classpathen, hvis du ikke har en, og vil opprette en, åpne min forrige tutorial og følg Trinn 1. Hvis du ønsker ikke en klassebane, bruker den samme mappen din FLA dokumentet. La oss anta at klassebane for opplæringen. I classpathen opprette mappen "pixelbender". Så inne i "pixelbender" -mappen, inne classpathen opprette mappen "pbj". Kopier .pbj fil (eksempel: pixelate.pbj) til denne pbj mappen du har opprettet Åpne Flash CS4, eller Flex med oppdatert SDK for FP10. Hvis du bruker Flash, er det viktig å sette opp Flex SDK for Flash. Hvis du ikke vet hvordan du gjør dette, trykk "ctrl + u" for å åpne preferansene til Flash, velg deretter "actionscripts" i kategorien, og deretter "Actionsctipt 3,0 innstillinger". I vinduet "Actionscript 3.0 avanserte innstillinger" klikker du på "+" knappen på biblioteket banen og legge til følgende: $ (FlexSDK) /frameworks/libs/flex.swc. Klikk på OK-knappen Nå opprette en ny .as fil og starte koding følgende:.. Først satt vi pakken og importere de nødvendige klassene Lag public class PixelateFilter utvide ShaderFilter. Den ShaderFilter kan brukes som en vanlig filter i filter rekke noen Displayobject. Embed den pixelate.pbj filen i mappen pbj (vi antar at vi vil spare .as i Pixelate mappe av våre klassebane). Embed tag er en Flex tag som bygger inn filer i en swf i stedet for å laste dem. Det er mange typer som du kan legge inn, som .flv, .jpg og andre, og som mimetype application /octet-stream filen vil bli integrert som ByteArray. Embed tag skaper en klasse for den innebygde filen, her jeg bruker en klasse som heter "Filter". I konstruktøren, la oss opprette en forekomst av vår innebygde filen som ByteArray. Den ByteArray er Shader konstruktør parameter, så vi vil også opprette shader eksempel sette filteret til "ByteArray" som parameter til konstruktøren. Siden vi utvide ShaderFilter, trenger vi ikke å skape en forekomst av ShaderFilter. Denne klassen er allerede ShaderFilter utvides, så alt vi trenger å gjøre er å sette den shader parameter av vår ShaderFilter klasse som shader eksempel Nå skaper vi en ny parameter for klassen vår, parameteren "dimensjon". Denne parameteren vil påvirke "parameter int dimensjon" skapt i pixelbender. Den setter funksjonen vil endre verdien, og getter funksjonen vil bare få den gjeldende verdien. Shader dataverdier kan nås ved å "instance.data.value", verdiene er arrays. Hvis vi hadde en parameter "parameter INT2 posisjon;" i filteret for eksempel, ville vi tilgang til det ved "instance.data.position [0]" og "instance.data.position [1]" henholdsvis Etter alt dette, bare lukke pakken og klassen. Nå klassen for dette filteret er opprettet, lagre .as fil med navnet "PixelateFilter.as" (samme navn som klassen) i pixelbender mappen i klassebanen (samme navn som pakken din, og hvor du har også opprettet pbj mappe) Definer en klasse for dette FLA dokumentet.. Åpne egenskaper panelet til FLA dokument fra vinduet > egenskaper, i boksen "Class" type "Main", og opprette en ny Actionscript-fil. Kopier et bilde til samme mappe av FLA-dokument, for eksempel jeg har brukt en av eksempelbilder fra Pixel Bender eksempler; YellowFlowers.png, som kan bli funnet med kildefilene. Hvis du ikke har TweenLite klasse ennå, kan du laste det på http://blog.greensock.com/tweenliteas3/, og pakke ut Innholdet i gs-mappen i gs-mappen i klassebanen Opprett en ny .as dokument Ta de nødvendige klassene til vår klassebanen.:. Lag hovedklassen utvider Sprite Klasse: Embed bildet for testing, er den mimetype "image /png", så vi er innebygging som bildet ikke ByteArray. Navn sin klasse "Img". I tillegg vi skriver en variabel som heter "filter" av den typen PixelateFilter, slik at vi kan bruke det i hvilken som helst funksjon senere. I konstruktøren, begynner vi skaper vårt bilde, som vil bli berørt av filteret, og deretter legge til bildet barnet til scenen. Deretter oppretter forekomst av PixelateFilter. Vi har laget den variable før, så vi trenger ikke å skrive igjen. Sett filter dimensjon til 100, så vi kan se effekten bedre, også legge filteret til filterlist av våre viktigste klassen. Deretter bruker TweenLite klassen vi animere filter parameter. Dimensjonen parameter vil animeres fra 100 til 1. Mens animasjonen blir oppdatert, er funksjonen "tweenLiteUpdate" henrettet, og når den er ferdig animere "newTween" funksjonen vil bli henrettet Mens TweenLite blir oppdatert, tweenLiteUpdate utføres og oppdaterer filteret av våre viktigste klassen. Uten denne metoden vi ikke ville se TweenLite oppdatere filteret Når den første Tweening animasjonen er ferdig, det vil kjøre newTween funksjon . Den første linjen av denne funksjonen vil sjekke om filteret dimensjon Verdien er 1. Hvis det er tilfelle, vil det sette dim variabel til 100, ellers blir det satt variabelen til 1. Dette er det samme med hvis og annet, eller bryter. Den andre linjen vil starte Tweening animasjon av filteret igjen Nå bare lukke pakken og klassen med dobbel "}" Lagre. filen som "Main.as" i samme mappe på din FLA fil, og hvis alle filer og mapper er OK, kan du teste filen. Animasjonen starter pixelated, endre til vanlig bilde, og vilje løkke kontinuerlig. Jeg håper du likte dette, og jeg håper det vil være svært nyttig. I Adobe Exchange det er mange andre filtre du kan laste ned, noen av dem er gratis eller åpen kildekode. Jeg har også satt noen andre .pbj og klasser med kilden for å studere. For eksempel SpherizeFilter.as: http://cavallari.freehostia.com/spherize/, animeres av posisjonen til musen
Dette er inngangs image
, bildet som vil bli lest og jobbet på. Vi kan ha opp til 2 inngangsbildene i koden, som arbeider med ett bilde vil opprette et filter, og arbeider med 2 bilder vil skape en blanding modus. Inngangen er alltid type "image4", som er et bilde i RGBA-modus (rød, grønn, blå og Alpha)
Dette er utgangs pixel
, i motsetning til inngangen. Dette vil ikke sende ut det bildet, dette vil bare sende ut pixel lese i RGBA. Dette er type "pixel4" (og ikke image4 som input)
Parameter søkeord vil fungere som en setter funksjon. Med parameteren verdiene av filteret kan skiftes når det er i bruk. Parameteren må etterfølges av den type og navn, og kan også ha minimal verdi, maksimumsverdien og standardverdi. Eksempel: parameter int dimensjon < MINVALUE: 1; MAXVALUE: 10; Default: 1; >; eller parameter float myfloat < MINVALUE: 1,0; MAXVALUE: 2.0; Default: 1,0 >. Også parameter kan tastes float2, float3, float3, int1, INT2 ... eksempel: parameter float2 test < MINVALUE: float2 (1.0,2.0); MAXVALUE: float2 (5); Default: float2 (1.0,2.0); >;
Når du oppretter en float4 type for eksempel, oppretter du en rekke 4 flyte verdier. I Pixelbender float verdier definere av dot, men flyte () også fungerer som en funksjon for å konvertere andre tallverdier i float. For eksempel "float4 test = float4 (1,2,3,4);". Her har vi et objekt med 4 verdier (type float) i "test" variable. Du kan også opprette en float4 objekt fra en verdi, for eksempel: "float4 test = float4 (3);". Her har vi et objekt med 4 verdier (RGBA) og alle verdier er de samme (3,0 float). Når du oppretter en dupp verdi, kan du også lage den med en prikk som "flyte test = 1,0;". Hvis du prøver å definere det som "flyte test = 1;" det vil kaste en feil, fordi tallene uten en prikk i pixelbender arbeid som int verdier.
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1.0,2.0,2.0,1.0); float4 resultat = test1-test2;
float4 test1 = float4 (3.0,2.0,2.0,3.0); float4 test2 = float4 (1.0,2.0,2.0,1.0); float4 resultat = test1; Resultatet [0] = test1 [0] -test2 [0]; Resultatet [2] - = 0,5;
Trinn 3:.. Opprett en ny Pixel Bender Filter
< languageVersion: 1,0; > kernel NewFilter < navnerom: "Your Namespace"; leverandør: "Your Vendor"; versjon: 1; beskrivelse: "din beskrivelse"; > {innspill image4 src; utgang pixel4 dst; void evaluatePixel () {dst = sampleNearest (src, outCoord ()); }}
dst = sampleNearest (src, outCoord ()); dst.rgb = float3 (1) -dst.rgb;
dst = sampleNearest (src, outCoord ()); . dst.rgb = dst.brg;
Trinn 4: Testing en preppet kode fra Adobe
Trinn 5: Lag mappestruktur
Trinn 6:. Opprette klasse for Pixelate Filter
pakke pixelbender {import flash .display.Shader; import flash.filters.ShaderFilter; import flash.utils.ByteArray;
Public class PixelateFilter strekker ShaderFilter {
[Bygg (kilde = "pbj /pixelate.pbj", mimetype = "application /octet-stream")] private Var Filter: Klasse;
offentlig funksjon PixelateFilter (): void {var filter. ByteArray = new Filter () som ByteArray; //Den innebygde filen som ByteArray Var shader: Shader = new Shader (filter); //Forekomsten av Shader this.shader = shader; //sette parameter shader i vår klasse}
offentlig funksjon satt dimensjon. (verdi: Number): void {shader .data.dimension.value [0] = verdi; } offentlig funksjon get dimensjon (): Antall {return shader.data.dimension.value [0]; }
}}
Trinn 7:. Test det nye filteret
< p> Første trinn, opprette et nytt FLA AS3 dokument, lagre det hvor du vil, for eksempel c: /mycustomfilter
pakke {import flash.display.Sprite; import flash.display.Bitmap; import pixelbender.PixelateFilter; //Våre tilpasset filter import gs.TweenLite; //best Tweening klassen
public class Hoved strekker Sprite {
[Bygg (kilde = "YellowFlowers.png", mimetype = "image /png»)] privat Var IMG: Klasse; private Var filter: PixelateFilter;
offentlig funksjon main (). Void {var bilde: Bitmap = new Img () som Bitmap; addChild (image); filter = new PixelateFilter (); filter.dimension = 100; this.filters = [filter]; TweenLite.to (filter, 3, {dimensjon: 1, onUpdate: tweenLiteUpdate, onComplete: newTween});}
privat funksjon tweenLiteUpdate (). Void {this.filters = [filter];}
privat funksjon newTween (): void {var dim: Number = (filter.dimension == 1) 100:.? 1; TweenLite.to (filter, 3, {dimensjon: dim, onUpdate: tweenLiteUpdate, onComplete: newTween});}
}}
Konklusjon
.