Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i september 2009.
Hei, igjen, jeg heter Andr? og i denne opplæringen vil jeg demonstrere hvordan du oppretter egendefinerte filtre med Pixel Bender Toolkit, og bruk dem med Flash CS4 for å output .pbj filer.
* Denne funksjonen fungerer bare i Flash Player 10.
Pixel Bender Toolkit leveres med Adobe Master Collection CS4-pakken, eller du kan laste den ned på http://labs.adobe.com/downloads/pixelbender.html.
Før du oppretter et filter, må vi forstå de grunnleggende funksjonene og typene av språket. Det er annerledes enn Flash, og mye enklere.
Inngangsordet: Dette er inngangen bilde, bildet som vil bli lest og arbeidet på. Vi kan ha opptil 2 innspillingsbilder i koden. Å arbeide med ett bilde, vil opprette et filter, og å jobbe med 2 bilder vil skape en blandingstilstand. Inngangen er alltid typen "image4", som er et bilde i RGBA-modus (rød, grønn, blå og alfa).
Utgangssøkeordet: Dette er utgangen pixel, i motsetning til inngangen. Dette vil ikke sende ut bildet, dette vil bare gi ut bildepunktet som leses i RGBA. Dette er typen "pixel4" (og ikke image4 som inngangen).
Parameter søkeordet: Parameter søkeord vil fungere som en setter funksjon. Med parameteren kan filterets verdier endres når de brukes. Parameteren må etterfølges av type og navn, og kan også ha minimumsverdi, maksimumsverdi og standardverdi. Eksempel: parameter int dimensjon eller parameter float myfloat . Også parameteren kan skrives float2, float3, float3, int1, int2? eksempel: parameter float2 test
Vi har også typene float, float2, float3, float4, int, int2, int3, int4 og mange andre som vi ikke vil bruke her. Også noen typer fungerer ikke med Flash Player 10, så jeg kommer ikke inn i dem akkurat nå. Jeg vil imidlertid diskutere litt om typene jeg har nevnt her og hvordan de fungerer.
Skriv float, float2, float3 og float4: når du oppretter en float4-type, for eksempel, oppretter du en rekke 4 float-verdier. I Pixelbender defineres floatverdiene med prikk, men float () fungerer også 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" variabelen. Du kan også opprette et 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 lager en flyteverdi, kan du også opprette den ved hjelp av en prikk som "float test = 1.0;". Hvis du prøver å definere det som "float test = 1;" det vil kaste en feil, fordi tall uten punkt i pixelbender fungerer som int-verdier.
Så float er alltid definert av prikk. Selv ved å bruke "float ()" for å opprette float-verdien, returneres et nummer med en prikk. Til slutt, for å få tilgang til flytverdier med mer enn én verdi, kan du bruke syntaks som en array-tilgang "variabel [0] eller variabel [1] eller variabel [2]?".
Type int, int2, int3 og in4 er de samme som flyttyper, men har ikke prikker. Du kan også konvertere tallverdier ved hjelp av "int" -funksjoner.
evaluatePixel (): Denne funksjonen går over hele bildet, piksel etter piksel, og returnerer deretter utskriftstypen piksel4. I tilpassede filtre for Flash bruker vi alltid denne funksjonen.
outCoord (): Denne funksjonen returnerer den nåværende koordinaten til pikselet som leses av evalueringsPixel-funksjonen. Den returnerer en verdi type float2, x og y verdier, og kan nås av [] som array eller .x og .y lignende objekt. For eksempel: var ut = outCoord (); //out.x er det samme ut av [0] og out.y er det samme ut av [1].
sampleNearest (kilde, pixelCoordinate): Denne funksjonen returnerer float4-verdien av pikselet fra kildebildet (image4) på koordinasjonene "pixelCoordinate". Normalt bruker vi funksjonen "outCoord" her.
En observasjon må gjøres; Når du bruker float-verdier, og du vil legge til / trekke / multiplisere eller dele verdiene med annen float-verdi av samme lengde, kan du bruke dem som dette eksempelet:
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;
Resultatet vil være en variabel type float4 med verdier 2.0, 0.0, 0.0 og 2.0. Du kan også bruke:
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;
Jeg tror dette er nok til å forstå strukturen til Pixel Bender-koden, la oss gå videre til neste trinn, etter at jeg har nevnt enda en ting:
Før du tester et filter, er det viktig å laste minst ett bilde (fil> lastbilde 1 "). For å teste filteret kan du gå til å bygge> kjøre, hvis filteret har noen parametere, på høyre side av programmet du ' Jeg ser skyveknappene for å endre verdiene. De endres ved kjøring og har et levende forhåndsvisning, siden hver gang du trykker på kjør igjen.
Dette filteret kommer med Pixel Bender Toolkit, men er et av de enklere filtre som skal forklare. For mer om Pixel Bender-språkreferansen, trykk bare F1-knappen i programmet, og hjelpen i .pdf åpnes.
Når programmet er åpent, opprett et nytt Kernelfilter (fil> nytt kjernefilter), vil programmet opprette en standardstruktur for filteret:
kjernen NewFilter < namespace : "Your Namespace"; vendor : "Your Vendor"; version : 1; description : "your description"; > input image4 src; utdata pixel4 dst; void evaluatePixel () dst = sampleNearest (src, outCoord ());
I kjernen NewFilter endrer du navnet NewFilter for navnet på filteret ditt. Navneområde, leverandør, versjon og beskrivelse Jeg trenger ikke å forklare, bare strenger som forfatter, versjon (int) og beskrivelse.
Inndata bildet vil være bildet lastet av filteret og utgangen vil være piksel generert av evalueringsPixel-funksjonen. Utgangen vil være en pixel4-verdi generert av evalueringsPixel-funksjonen, som kjører piksel etter piksel av inngangsbildet som jeg har forklart.
På linjen "dst = sampleNearest (src, outCoord ());"vi får verdien av den nåværende piksel, og koordinatet outCoord () fra image src (inngangsbildet), slik at vi kan endre verdiene av rgba-verdien til dst. Hvis vi for eksempel vil vende om farger av inngangsbildet, kan vi gjøre følgende:
dst = sampleNearest (src, outCoord ()); dst.rgb = float3 (1) -dst.rgb;
Hva gjør vi her?
Vi sier at rgb-verdien av denne piksel er mengden av float3-verdi minus den opprinnelige verdien av rgb, så fargen vil bli omvendt. Du kan bruke dst.rgb i stedet for å bruke dst [0], dst [1]? og rekkefølgen etter prikken kan være en hvilken som helst ordre, vil den lese hvert brev som verdien av fargen. For eksempel kan du bruke dst.gbr = float3 (1) -dst.gbr. En annen ting du kan prøve er å endre bildens farger. For eksempel ved å bruke koden nedenfor (inne i evalueringsPixel-funksjonen):
dst = sampleNearest (src, outCoord ()); dst.rgb = dst.brg;
Denne koden vil gi et merkelig farget bilde.
La oss teste et filter fra Adobe. Pixelate filteret er flott for testing, så gå til fil> åpne; I mappen der Pixel Bender er installert, er det noen filtre. La oss velge pixelfilteret. Når den er åpen, kan du trykke "run" -knappen for å teste filteret. Hvis du vil eksportere, går du til fil> Eksporter kjernefilter for flash-spiller. Dette vil eksportere filteret som skal brukes med Flash, du kan laste filteret med URLLoader eller legge inn embedet-tagget 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).
Utdatautvidelsen er en .pbj-fil.
Hvis du har en klassepath for Flash, bruk din klassepath, hvis du ikke har en og vil opprette en, åpner du min forrige opplæring og følger trinn 1. Hvis du ikke vil ha en klassepath, bruker du samme mappe til .fla dokumentet . La oss anta klasseplan for opplæringen.
I din klassepath opprett mappen "pixelbender". Deretter i mappen "pbj", inne i "pixelbender" -mappen, i klassepathen din. Kopier .pbj-filen (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, trykker du på "ctrl + u" for å åpne innstillingene for Flash, og deretter velge "actionscripts" på kategorien, og deretter "Actionsctipt 3.0 settings". I vinduet "Actionscript 3.0 advanced settings" klikker du på "+" -knappen i biblioteksstien og legger til følgende: $ (FlexSDK) /frameworks/libs/flex.swc. Klikk på OK-knappen.
Opprett nå en ny .as-fil, og start kodingen av følgende:
Først setter vi pakken og importerer de nødvendige klassene.
pakke pixelbender import flash.display.Shader; importer flash.filters.ShaderFilter; importere flash.utils.ByteArray;
Opprett offentlig klasse PixelateFilter som utvider ShaderFilter. ShaderFilter kan brukes som et vanlig filter i filteret array av noen DisplayObject.
offentlig klasse PixelateFilter utvider ShaderFilter
Legge i pixelate.pbj-filen i mappen pbj (vi antar at vi vil lagre .as i pixelate-mappen i vår klassepath). Embed-taggen er en Flex-tag som innebærer filer i en swf i stedet for å laste dem. Det finnes mange typer som du kan legge inn, som .flv, .jpg og andre, og som mimeType-applikasjon / octet-stream vil filen bli integrert som ByteArray. Embed-taggen oppretter en klasse for den innebygde filen, her bruker jeg en klasse som heter "Filter".
[Embed (source = "pbj / pixelate.pbj", mimeType = "application / octet-stream")] privat var Filter: Klasse;
I konstruktøren, la oss lage en forekomst av vår innebygde fil som ByteArray. ByteArray er Shader-konstruktørens parameter, så vi vil også skape shader-forekomsten, og sette filteret til "ByteArray" som parameter for konstruktøren. Siden vi utvider ShaderFilter, trenger vi ikke å opprette en forekomst av ShaderFilter. Denne klassen er allerede ShaderFilter utvidet, så alt vi trenger å gjøre er å angi shader-parameteren i vår ShaderFilter-klasse som shader-forekomsten.
offentlig funksjon PixelateFilter (): void var filter: ByteArray = nytt filter () som ByteArray; // Den innebygde filen som ByteArray var shader: Shader = ny Shader (filter); // Instansen av Shader this.shader = shader; // sette parameteren shader av vår klasse
Nå lager vi en ny parameter for vår klasse, parameteren "dimensjon". Denne parameteren vil påvirke "parameter int dimensjonen" opprettet i pixelbenderen. Setter-funksjonen vil endre verdien, og getter-funksjonen vil bare få den nåværende verdien. Skjermdataverdiene kan nås med "instance.data.value", verdiene er arrayer. Hvis vi hadde en parameter "parameter int2 posisjon;" i filteret for eksempel, ville vi få tilgang til det ved henholdsvis "instance.data.position [0]" og "instance.data.position [1]".
Offentlig funksjon sett dimensjon (verdi: Nummer): void shader.data.dimension.value [0] = value; offentlig funksjon få dimensjon (): tall return shader.data.dimension.value [0];
Etter alt det, bare lukk pakken og klassen.
Nå er klassen for dette filteret opprettet, lagre .as-filen med navnet "PixelateFilter.as" (samme navn som klassen) i pixelbender-mappen inne i klassestien din (samme navn som pakken din, og hvor du også har opprettet pbj-mappen).
Første trinn, opprett et nytt .fla AS3-dokument, lagre det hvor som helst du vil, for eksempel c: / mycustomfilter.
Definer en klasse for dette .fla-dokumentet. Åpne egenskapspanelet i .fla-dokumentet fra vinduet> egenskaper, i boksen "Klasse" type "Hoved" og opprett en ny handlingskriptfil.
Kopier et bilde til samme mappe i .fla-dokumentet, for eksempel har jeg brukt et av eksemplene fra Pixel Bender-eksemplene; YellowFlowers.png, som kan bli funnet med kildefilene.
Hvis du ikke har TweenLite-klassen ennå, kan du laste den ned på http://blog.greensock.com/tweenliteas3/, og pakke ut innholdet i gs-mappen i gs-mappen i klassestien din.
Opprett et nytt .as-dokument.
Ta med de nødvendige klassene til vår klassepath:
pakke import flash.display.Sprite; importer flash.display.Bitmap; importer pixelbender.PixelateFilter; // Vårt tilpassede filter importerer gs.TweenLite; // den beste Tweening-klassen
Opprett hovedklassen som utvider Sprite-klassen:
offentlig klasse Main utvider Sprite
Embed bildet for testing, mimeType er "image / png", så vi legger inn som bilde ikke ByteArray. Gi navnet sin klasse "Img". I tillegg skriver vi en variabel som heter "filter" av typen PixelateFilter, så vi kan bruke den i en hvilken som helst funksjon senere.
[Embed (source = "YellowFlowers.png", mimeType = "image / png")] privat var Img: klasse; privat var filter: PixelateFilter;
I konstruktøren begynner vi å lage bildet vårt, som vil bli påvirket av filteret, og deretter legge bildet barnet til scenen. Deretter lager du forekomst av PixelateFilter. Vi har opprettet variabelen før, så vi trenger ikke skrive igjen. Sett filterdimensjonen til 100, slik at vi kan se effekten bedre, legg også til filteret i filterlisten i hovedklassen.
Da bruker vi TweenLite-klassen vi animerer filterparameteren. Dimensjonsparameteren vil bli animert fra 100 til 1. Mens animasjonen blir oppdatert, blir funksjonen "tweenLiteUpdate" utført, og når den er ferdig, vil "newTween" -funksjonen bli utført.
offentlig funksjon Main (): void var bilde: Bitmap = ny Img () som Bitmap; addChild (image); filter = ny PixelateFilter (); filter.dimension = 100; this.filters = [filter]; TweenLite.to (filter, 3, dimensjon: 1, onUpdate: tweenLiteUpdate, onComplete: newTween);
Mens TweenLite oppdateres, utføres tweenLiteUpdate og oppdaterer filteret i hovedklassen. Uten denne metoden ville vi ikke se TweenLite å oppdatere filteret.
privat funksjon tweenLiteUpdate (): void this.filters = [filter];
Når den første Tweening-animasjonen fullføres, kjører den newTween-funksjonen. Den første linjen i denne funksjonen vil sjekke om filterdimensjonsverdien er 1. Hvis det er tilfelle, vil den sette den svarte variabelen til 100, ellers vil den sette variablen til 1. Dette er det samme med om og ellers eller bytt. Den andre linjen vil starte filterets Tweening-animasjon igjen.
privat funksjon newTween (): void var dim: Number = (filter.dimension == 1)? 100: 1; TweenLite.to (filter, 3, dimensjon: dim, onUpdate: tweenLiteUpdate, onComplete: newTween);
Nå bare lukk pakken og klassen med dobbel "".
Lagre filen som "Main.as" i samme mappe av .fla-filen, og hvis alle filer og mapper er OK, kan du teste filen din. Animasjonen begynner pixelert, endrer seg til det normale bildet, og vil løp kontinuerlig.
Jeg håper du likte dette, og jeg håper det vil være veldig nyttig. I Adobe Exchange finnes det 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/, animerer med museposisjonen.
Accentsconagua