Create en Retro CRT Distortion Effect Bruke RGB Shifting
5
Del
en
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du lære hvordan å skille ut et bilde tre ulike fargekanaler for å skape en RGB shift effekt. Jeg vil også vise deg noen grafiske triks for å etterligne en gammel CRT-skjerm.
Endelig resultat Forhåndsvisning
Her er et eksempel på effekten vi vil være skaper:
Hovedtakeaway i denne opplæringen skal være RGB skiftende effekt, men jeg vil også demonstrere hvordan du oppretter CRT skanningslinjer, støy og roll bar grafikk
.
Trinn 1: Om RGB Images
Hvert bilde på dataskjermen vises med fargene rød, blå og grønn. Ved å blande disse tre fargene i ulike mengder datamaskinen kan skape de andre fargene i spekteret.
Hvis de tre fargekanalene ikke justert riktig bildet vil ikke sammensettes på riktig måte, og du vil begynne å se kantene av de enkelte kanaler "blødning" ut av sidene av bildet
Dette er akkurat hva vi skal gjøre i denne opplæringen.; separere et bilde inn i sine tre fargekanalene og deretter trans hvert individuelt for å skape en forvrengning effekt. La oss få til det
(Du kan lære mye mer om hvordan RGB farge jobber på Wikipedia.)
Trinn 2: Opprett En tittel Screen
Du 'll trenger for å lage en grafisk å bruke effekten til. Jeg valgte å lage en video spilltittel skjermen, men du kan gjøre hva slags grafikken du vil.
Opprett en ny filmklipp som heter "titleScreen 'og sette tittelen skjermen (eller annen grafikk) inne.
Jeg tror noe retro-inspirerte fungerer best med denne effekten fordi det minner meg om en gamle feil arcade skjermen. Jeg opprettet min tittel skjermen med en font som heter Commodore 64 Pixeled. Jeg har lagt en Glow filter til teksten å gi den som smeary, blåst ut CRT utseende.
Når du er fornøyd med designen, tilsett titleScreen Opprett en ny Actionscript-fil som heter 'RGBShift.as'. Lagre denne filen i samme katalog som hoved Flash-fil. Legg denne koden for å lage skallet for klassen: Red.anm: Ikke komfortabel med klassebasert koding ennå? Sjekk ut denne Quick Tips for å hjelpe deg med å komme i gang. Denne koden er ikke egentlig gjøre noe ennå. De første 10 linjene eller så importere alle de ekstra klasser vi kommer til å trenge. Jeg har to private variabler som heter '_centerX' og '_centerY' (jeg bruker understrek å betegne private variabler). Disse to variablene vil holde x- og y-koordinatene til sentrum av vår grafikk. Legg merke til at konstruktøren funksjon (tom for nå) aksepterer en Displayobject. Dette vil tillate oss å bruke noen form for Displayobject med denne effekten (MovieClip, Sprite, Bitmap, etc.) Vi kommer til å være med titleScreen Vi har gjort vår klasse fleksibelt ved at det å godta noen Displayobject, men vi ? re faktisk kommer til å trenge en BitmapData objekt for å gjøre RGB skiftende effekt. La oss lage en funksjon som kan skape BitmapData fra en Displayobject Legg denne funksjonen til din RGBShift klassen rett under konstruktøren. Ta en titt på hva denne funksjonen gjør. Den første linjen bruker Displayobject bredde og høyde for å lage en ny gjennomsiktig BitmapData protestere samme størrelse som Displayobject. Deretter trekker den Displayobject til BitmapData. Endelig den returnerer BitmapData til oppringeren Her er der selve fargeseparasjon finner sted. Legg denne funksjonen til klassen: Denne funksjonen tar også en Displayobject. Det går da til createBMD () Vi bruker BitmapData s copyChannel () Den siste linjen returnerer bare de tre nye BitmapData gjenstander innpakket i en rekke Nå som vi har vår createBMD Hotell og createRGB Denne linjen bare passerer Displayobject til createRGB () Anmeldelser funksjon. createRGB () Vi har nå en rekke tre BitmapData stedene. Vi må skape en Bitmap fra hver for å vise dem på skjermen. Legg dette for Red.anm: beklager det inntrufne folk, viser denne spesielle delen av Action turer FireFox over. Føl deg fri til å laste det ned her. Det meste av dette er ganske enkel. La oss ta en titt. Du kan lage denne effekten uten beholderen Sprite ved å bare legge de punktgrafikk direkte til scenen. Jeg liker å pakke dem i en container fordi det gjør det lettere å kontrollere forvandle punktet når du gjør ting som skaler og roter. Normalt, når du utfører en skala eller en rotering på et objekt det forvandler fra opprinnelse punkt (0,0) av dette objektet. Det er sjelden det jeg vil skal skje. Vanligvis jeg vil at transformasjoner som skal brukes fra midten av objektet. Legg merke til at i den siste delen vi sette x og y av punktgrafikk til negative Det eneste problemet er at bare den nederste hjørne av vår Bitmap er synlig nå , så jeg setter beholderen Sprite x og y til halve høyden og bredden på Bitmap å få alt tilbake sin korrekte posisjon Her er RGBShift klasse opp til dette punktet i tilfelle du har tapt på veien: Red.anm: Me igjen, nok en gang må du laste ned AS her. Beklager det inntrufne Så har vi vår RGBShift klasse, men hvordan bruker vi det? Begynn med å lage en ny Actionscript-fil som heter Main.as, og deretter legge inn denne koden: Her skaper vi en ny forekomst av RGBShift klassen og passerer den titleScreen Nå er vi bare nødt til å koble denne klassen til vårt Flash dokument. Tilbake til Flash og sette dokumentet klassen til "Main" Du skal nå kunne teste din Flash-fil (Control - > Test Movie ) uten å få noen feil eller advarsler. Hmm, som ikke ser helt riktig gjør det? Det som skjer her er at vi har lagt lagvis de tre fargekanalene oppå hverandre, men de er ikke kombinere og blande farger, slik at vi bare ser det øverste laget (blå). La oss fikse det nå For å få de fargekanalene for å blande riktig vi trenger å endre sin BlendMode til SCREEN. Vi ønsker bare å endre blanding modus for de andre og tredje lag skjønt. Vi vil forlate først (nederst) lag normal og blande de to andre lagene i den Legg denne koden til for Dette sjekker for å sikre at det aktuelle bildet er ikke det første bildet (0) og deretter setter blendMode eiendom til SCREEN Test filmen igjen, og du burde se noe som ser identisk med din titleScreen MovieClip jeg vet. hva du tenker; «Det var mye arbeid for å gjenskape den samme grafikken som allerede var der. ' Men nå grafikken er bygd opp av tre objekter som vi kan forvandle individuelt for å skape vår forvrengning. Så slutte klynking og la oss fortsette ... Vi kommer til å bruke Tweener Library å gjøre vårt animasjon. Last den ned her hvis du ikke allerede har det For å bruke Tweener, plasserer hoved 'caurina' mappe i samme katalog som Flash-fil og legge denne importen uttalelse til toppen av RGBShift klassen.: Jeg bruker dette randRange Opprett en ny Actionscript-fil med navnet 'randRange.as "i samme mappe som din viktigste Flash-fil. Legg inn denne koden: Som du kan se er det bare en enkelt funksjon innpakket i en pakke erklæring. Vi kan nå bruke denne funksjonen som om den var en del av vår klasse. (For mer informasjon om hvordan denne funksjonen fungerer, sjekk ut Carlos Quick Tip.) Her er der magien skjer. Legg denne funksjonen til RGBShift Klasse: Vi kommer til å kjøre denne forvrenge () Funksjonen aksepterer en Sprite (en av våre fargekanal containere). Den starter da en Tweener animasjon på kanalen ved hjelp av en tilfeldig Y-verdi (mellom -3 og 3), og en tilfeldig tidsperiode (mellom 1 og 2 sekunder). Dette vil gjøre hver kanal gire opp og ned av ulike mengder ved forskjellige hastigheter. Legg merke jeg bruker _centerY variabel her igjen for å kompensere for Y-verdien. Vi har også Tween til en tilfeldig alpha verdi (mellom 0,8 og 1) for å gjøre flimmer hver kanal litt. Når tween ferdig vi bruker onComplete egenskapen å kalle det samme forvrenge () Se, hva var det jeg sa ..? For å sparke i gang denne forvrengningen løkke må vi kalle det en gang på hver av våre fargekanal Sprites. Legg til denne linjen i slutten av for Du skal nå kunne teste filmen og se den forvrengning effekt i aksjon Personlig liker jeg den subtil Y skift at vi har kommet i gang her, men du kan gjøre mye sprø ting med forvrengning nå som vi har fått kanalene animere separat. Å eksperimentere med forvrengning kan du bare endre egenskaper og verdier i Tweener samtalen i forvrenge Her er et eksempel på noen alvorlig forvrengning jeg laget ved å legge til noen flere eiendommer til Tweener samtalen. Sjekk ut forvrenge () Du kan stoppe her hvis du vil. RGB separasjon og forvrengning skal jobbe på dette punktet. For å forbedre CRT effekten jeg tror vi trenger å legge til noen flere grafiske elementer. I de neste trinnene vil vi legge til skanningslinjer, en rullende svart strek, noe statisk, og et skinnende refleksjon Opprett en ny MovieClip på scenen kalt 'linjer'. Inne i MovieClip tegne en 1 pixel horisontal linje som spenner over hele bredden av filmen. Sett strek farge til svart med 40% alfa. Nå kopiere og lime inn denne linjen om og om igjen, flytte den ned 2 piksler hver gang, helt til du har linjer som dekker hele høyden av filmen. Den effekten du ønsker er en 1 pixel linje, deretter en 1 pixel plass før neste linje Nå vil vi legge til rullende svart bar. Opprett en ny MovieClip kalt "bar". Inside, tegne en solid svart rektangel som dekker hele bredden av filmen. Gjør det ca 40 piksler høy. Sett Color Style av MovieClip til Alpha på 30% Opprett en ny MovieClip kalt 'animatingBar' og plasserer bar Sett animatingBar klippet på scenen. Velg den og legge en blur filter. Oppheve koblingen X- og Y-innstillinger på uskarphet og sett Blur Y til 20 og Blur X til 0. Sett Blend Mode til overlegg. Dette ligner på skjerm Blend Mode vi brukte tidligere, men ikke akkurat det samme Opprett en ny Photoshop-fil samme størrelse som din film. Fylle bakgrunnslaget med nøytral grå (# 808080). Velg Filter > Noise > Legg Noise ... Lagre bildet som "noise.jpg '. Hvis du ikke har Photoshop, kan du få min "noise.jpg 'fra Kilde zip-filen Importer støy .jpg Du kan også generere denne støyen effekt ved hjelp av Actionscript, men det er utenfor omfanget av denne opplæringen Opprett en ny MovieClip på scenen kalt "shine". Inne det trekke et stort ovalt som strekker seg halvveis over toppen av filmen. Velg den øverste delen av den ovale og slette den. Endre fyllet til en lineær gradient og sette den slik at den passer fra hvit 20% alfa øverst til hvit 5% alfa nederst. Ta tak i toppen av formen og trekk den litt opp for å gi den en svak kurve Hvis du tester filmen nå vil du ikke se noen av de nye grafikken vi nettopp har lagt fordi RGB-lag blir lagt på toppen av alt. For å fikse dette gå inn i Hovedanmeldelser klasse og endre denne linjen: Til dette: Som legger den RGBShift objekt på det laveste nivået på listen display, under alle de andre grafikk. Denne opplæringen er ment å være et utgangspunkt, ikke en endelig løsning. Nå som du har RGB-kanalene separert og animere individuelt det er mange forskjellige ting du kan gjøre med denne teknikken. Effekten ville se veldig fint om det ble kombinert med den statiske forvrengning teknikk fra min tidligere opplæringen. Som alltid legge inn en kommentar og la meg vite hva du synes. Lykke til!
MovieClip til scenen og gi den forekomsten navnet 'titleScreen'
Trinn 3:. Opprett RGBShift
klasse
pakke {import flash.display.DisplayObject; import flash.display.Sprite; import flash.display.BitmapData; import flash.display.Bitmap; import flash.display.BitmapDataChannel; import flash.display.BlendMode; import flash.events.Event; import flash.geom.Point; public class RGBShift strekker Sprite {private Var _centerX: Number; private Var _centerY: Number; //CONSTRUCTOR offentlig funksjon RGBShift (dObj: Displayobject) {}}}
MovieClip fra scenen, men å ha klassen akseptere noe Displayobject holder det fleksibelt for senere bruk
Trinn 4:. Tilsett createBMD
Funksjon
Privat funksjon createBMD (dObj: Displayobject): BitmapData {//oppretter en ny BitmapData objekt på størrelse med vår Displayobject Var BMD: BitmapData = new BitmapData (dObj.width, dObj.height, sant, 0xFF000000); //Trekke skjermen objektet til bitmap data bmd.draw (dObj); returnere BMD;}
Trinn 5:. Tilsett createRGB
Funksjon
privat funksjon createRGB (dObj: Displayobject): Array {var BMD: BitmapData = createBMD (dObj); //Oppretter bitmapData fra displayet objekt //opprette en ny bitmap dataobjekt for hver fargekanal var r: BitmapData = new BitmapData (bmd.width, bmd.height, sant, 0xFF000000); Var g: BitmapData = new BitmapData (bmd.width, bmd.height, sant, 0xFF000000); Var b: BitmapData = new BitmapData (bmd.width, bmd.height, sant, 0xFF000000); //Kopiere dataene fra hver kanal i det tilsvarende bitmap data r.copyChannel (BMD, bmd.rect, ny Point (), BitmapDataChannel.RED, BitmapDataChannel.RED); g.copyChannel (BMD, bmd.rect, ny Point (), BitmapDataChannel.GREEN, BitmapDataChannel.GREEN); b.copyChannel (BMD, bmd.rect, ny Point (), BitmapDataChannel.BLUE, BitmapDataChannel.BLUE); //Returnerer en matrise med bitmap data for de 3 fargekanalene tilbake [r, g, b];}
funksjon vi skrev i forrige trinn, som konverterer den til BitmapData. Neste skaper vi tre nye gjennomsiktig BitmapData objekter; en for hver farge. Vi skaper dem på nøyaktig samme størrelse som vår kilde BitmapData (fra Displayobject).
metoden for å kopiere en enkelt fargekanal fra kilde BitmapData i hver av de tre nye BitmapData gjenstander
Trinn 6:.. Bruk createRGB
Funksjon i Constructor
klasser arbeide sammen, la oss ta dem i bruk. Legg dette som første linje med kode i konstruktør-funksjonen for RGBShift Klasse:
Var rgbBMD: Array = createRGB (dObj);
bruker createBMD ()
funksjonen til å konvertere den til BitmapData og deretter skiller det på tre separate BitmapData objekter (en for hver kanal). Endelig går den rekken av de tre objektene til vår lokale rgbBMD
array. Gir mening? God
Trinn 7:. Lag punktgrafikk fra RGB Channels
sløyfe til konstruktøren funksjon RGBShift like under den siste linjen vi har lagt:
(linje 23) Neste skaper vi en container Sprite og legge til den nye Bitmap til beholderen display listen. (linje 25 & 26)
Nå er vi endelig begynne å bruke _centerX og _centerY variabler. Vi setter hver til midten av Bitmap ved å dele bredden og høyden i to.
< h2> Trinn 8: Hvorfor Bruk Container Sprite
halvparten av bredde og høyde . Dette plasserer Bitmap slik at dens midtpunkt er på 0,0 i beholderen Sprite. Hvis vi utføre transformasjoner på beholderen Sprite det vil forvandle fra 0,0 av beholderen, som nå er i sentrum for vår Bitmap.
Trinn 9:. RGBShift Class
Trinn 10:. Opprette hoveddokumentet Class
pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {var rgb = new RGBShift (titleScreen); //Oppretter et nytt RGBShift fra titleScreen removeChild (titleScreen); //Fjerne den opprinnelige tittelen skjermen fra scenen //legge den til scenen addChild (rgb); }}}
MovieClip fra scenen. Vi trenger ikke lenger at MovieClip, så fjerner vi det fra scenen og legge den nye RGBShift eksempel i stedet.
Trinn 11:. Test
Trinn 12:. Endre Blend Mode
sløyfe i RGBShift klassen konstruktør funksjon.
Hvis (i > 0) {//sett SCREEN blanding modus for 2. og 3. bilder bmp.blendMode = BlendMode.SCREEN;}
Trinn 13:. Test Igjen
Trinn 14: Last ned den Tweener Library
import caurina.transitions.Tweener;
Trinn 15: Tilsett randRange
Fil
funksjon som en enkel måte å generere tilfeldige heltall innenfor et gitt område. Du kan bare legge denne funksjonen til RGBShift klassen, men jeg bruker denne funksjonen så ofte at jeg liker å holde det i en egen fil, så det er lettere å dele mellom ulike prosjekter.
pakken {//returnerer et tilfeldig tall mellom spesifiserte området (inkludert) offentlig funksjon randRange (min: int, max: int): int {var randomNum: int = Math.floor (Math.random () * (max - min + 1)) + min; returnere randomNum; }}
Trinn 16 : Tilsett forvrenge ()
Funksjon
privat funksjon forvrenge (IMG: Sprite): void {Tweener.addTween (img, {y: randRange (_centerY-3, _centerY + 3), //random y skifte tid: randRange (1,2) /10, //random tid alfa: randRange (8,10) /10, //random alpha overgang: "easeInOutSine", onComplete: forvrenge, //når du er ferdig starter forvrengning igjen onCompleteParams: [img] });}
funksjon på hver av våre fargekanaler separat for å skape forvrengning effekt.
funksjonen igjen. Bruke onCompleteParams vi sende den samme fargekanal Sprite. Dette fører til at forvrenge funksjon å sløyfe om og om igjen på hver av våre fargekanaler.
Magi!
sløyfe i RGBShift konstruktør funksjon:
forvrenge (container); //Starte bitmap forvrengning
Trinn 17:. Eksperimentere
funksjon. Sjekk Tweener Dokumentasjon for en fullstendig liste over tweenable eiendommer
funksjon som skapte effekten:
privat funksjon forvrenge (IMG: Sprite): void {Tweener.addTween (img, {y: randRange (_centerY-3, _centerY + 3), //ranomize y skift x: randRange (_centerX-10, _centerX + 10), tid: randRange (1,2) /10, //random tid scaleX: randRange (9,11) /10, //randimize x skala alfa: randRange ( 5,10) /10, //random alpha overgang: "easeInOutSine", onComplete: forvrenge, //når du er ferdig starter forvrengning igjen onCompleteParams: [img]});}
Trinn 18: Forbedre CRT Se
Trinn 19:. Legg skanne Lines
Trinn 20:. Tilsett Rolling Bar
Trinn 21:. Animer Rolling Bar
klippet innsiden. Lag en kort bevegelse mellom animasjon av baren flytte fra toppen av filmen til bunnen. Denne animasjonen vil sløyfe for å gi oss den rullende bar effekt.
Trinn 22:. Lag det statiske bildet
Sett filter til 100%, Gaussian, monokromatisk.
Trinn 23:. Animer Statisk
bilde til flash-fil. Opprett en ny MovieClip kalt "støy" og legge til bildet i det. Opprett en ny keyframe på ramme 2 (F6) og rotere bildet 180 grader. Lag en annen keyframe på ramme 3 og vippe bildet horisontalt (Endre > Transform > Vend vannrett). Lag en fjerde keyframe på ramme 4 og igjen rotere bildet 180 grader. Vi har nå en 4 frame animasjon av blafrende statisk
Trinn 24:.. Legg Reflection
Trinn 25:. Fix Element Lagning
addChild (rgb);
addChildAt (rgb, 0);
Konklusjon