Creating Ripples i Medici Fountain
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Du må innrømme, når du bruker et produkt som heter Flash er det en tendens til å få prangende og overdrive det. Saken er den sanne kunsten av Flash designer ligger ikke i å produsere overveldende in-your-face presentasjoner eller effekter. Den sanne kunsten ligger i å ringe prang Meter vei tilbake og innser det er kunsten subtilitet som er viktig. Ikke Flash.
Hvilket bringer oss til emnet i denne Nybegynner-nivå tutorial ... gjør vann.
Før vi kommer skal la oss være helt klart med hverandre. Det er flere dusin måter å gjøre det jeg skal snakke om i denne opplæringen. Faktisk, jeg forventer fullt å se kommentarfeltet på slutten av dette stykket blitt befolket med en rekke stillinger fortelle meg, i hovedsak, det er ikke slik jeg ville gjøre det. Det er mest sannsynlig ikke, og jeg har ingen problem med det, og forventer det. Faktisk denne opplæringen er basert på et eksempel Lee Brimelow, en Flash Platform Evangelist for Adobe først viste meg et par år siden.
Lee og jeg begge deler en bemerkelsesverdig lik utsikter når det gjelder å jobbe med Actionscript. I stedet for å stirre på en tom Handlinger panelet, vi begge mener det er viktig at du, som en nybegynner, ta et kodeeksempel (mye som vi tilbyr her) og begynne å spille med den. På denne måten lærer du hva en masse ting å gjøre. Akademikere kaller denne prosessen, "stillas", som er et fancy begrep for å lære grunnleggende ferdighet og bygge din kunnskap fra det.
Som jeg sa, selv om dette er et nybegynnernivå tutorial laget for å demonstrere noen veldig interessant Action som bruker Displacement kart, filtre og Perlin Noise å skape vann krusninger. Hele poenget med denne øvelsen, faktisk, er å presentere noen ellers kompleks kode og viser deg hvor du kan ha det moro med det. Når koden begynner å bli gøy, er du godt på vei til full OOP herlighet. Faktisk, min medarbeider her på Activetuts +, Cadin Batrack gjør nettopp det med mange av de teknikkene som presenteres her i sin tutorial Opprett en statisk Distortion Effect Bruke Displacement Map Filter.
Nå som vi forstår hverandre, la oss få subtile og gjøre noen krusninger
Trinn 1:. Utvikle en Plan of Attack
Bildet vi skal bruke er et skudd Jeg tok av Medici-fontenen i Jardin du Luxembourg i Paris, Frankrike. Planen er å sette det basseng med vann i bevegelse ved hjelp av Flash.
Hvorfor trenger vi en plan for angrep? Flash gjør ikke vann krusninger. I denne tilnærmingen, du bare ikke kan velge vannet området ved hjelp av et utvalg verktøy i Flash, og ved hjelp Actionscript, sier Jiggle dette valget rundt.
For Flash jiggle et utvalg rundt deg trenger å feste bilde i en BitMapData objekt, skifte pikslene i objektet rundt med DisplacementMapFilter og deretter bruke noen Perlin Noise til filter for å skape krusninger. Før du gjør det du trenger for å ta en tur til Photoshop eller Fireworks
Trinn 2:. Mask ut vannet
Dette kan gjøres enten i Fireworks eller Photoshop. Nøkkelen er å kopiere bildet og enten maskere ut eller fjerne vannet i maskeringslaget. Lagre filen som enten en .png eller .psd bilde og sluttet. Som du kanskje har antatt bunnen, er avgjørende for å lykkes med dette prosjektet avslørt, lag
Trinn 3:. Nytt dokument
Opprett en ny Flash Actionscript 3 Dokument. Legg til to nye lag som heter "Mask" og "tiltak". Rename Layer 1 til "Image" og låse "handlinger" lag. På dette punktet skal jeg gjøre litt av en gren fordi import Photoshop og Fyrverkeri bilder til Flash er to separate teknikker
Trinn 4:. Import Photoshop Bilde
Når dialogboksen Importer åpnes velger Fountain lag og velg Opprett filmklipp for dette laget. Ikke bry deg med forekomstnavnet vi vil gjøre at når lagene entrer scena. Når filen importen vil du se Mask laget er et bitmap og fontenen laget er nå en MovieClip
Trinn 5:. Import fyrverkeri CS4 Bilde
Når dialogboksen Importer åpnes sørg at Importer som flatet Bitmap er ikke valgt.
Fyrverkeri importerer en .png som er noe mer enn en plassholder. Hvis du åpner Pyro Objects mappen du vil se dokumentet er i sin egen Mapper som regel "Page One" - fordi Fyrverkeri kan du ha flere sider i ett dokument. Hvis du åpner denne mappen vil du se de to punktgrafikk og en MovieClip. Åpne MovieClip og sette opp lagene ved å følge instruksjonene fra trinn 3. Konverter Fountain lag til en MovieClip
Trinn 6:. Fountain
Velg Fountain MovieClip på tidslinjen og gi den eksempel navnet "bilder". Låse alle tre lag, og lagre filen
Trinn 7:. Kabling det opp
Koden du er i ferd med å skrive er ganske enkel. Som jeg sa tidligere at du ikke kan fortelle Flash for å ta et valg og gjøre det vibrere. I tilfellet med denne koden skal vi jiggle de pikslene i fontenen MovieClip. Dette krever at du:..
Lag en virtuell bitmap som holder pikslene skal jiggled
Sett jiggle parametere ved hjelp av en DisplacementMapFilter
Lag noen variabler som gi jiggle.
Bruk den perlinNoise metoden til fontenen bilde jiggle pikslene bruker DisplacementMapFilter hver gang hodet looper gjennom rammen.
Hvis du er subtile, jiggling ser ut som rennende vann i stedet for en tsunami eller en tar pit ..
La oss komme i gang:
Trinn 8: Code
Tast inn følgende kode:
Var BMD : BitmapData = nye BitmapData (800 535); Var dmf: DisplacementMapFilter = new DisplacementMapFilter (BMD, nytt punkt (0,0), 0,2,10,60);
Vi starter med å lage en BitmapData objekt som samsvarer med størrelsen av bildet som skal manipuleres. Husk at Flash er ikke akkurat den skarpeste lyset på treet. Den trenger å bli fortalt hva de skal gjøre. I dette tilfellet er det du forteller det til å lage en samling av piksler som samsvarer med dimensjonene på bildet og henge dem i et objekt som heter "BMD".
Nå som det har denne "BMD ting" det er behov for å bli fortalt hva de skal gjøre med pikslene i objektet. Den neste linjen gjør nettopp det.
DisplacementMapFilter bruker gråtoner verdier av et RGB-kanal, inkludert alfa, og bruker dem til å forvrenge et bilde (i dette tilfellet en haug med Bitmapdata piksler) basert på de verdier kastet ut av filterets paramters. Parametrene er som følger:
mapBitmap: I dette tilfellet BMD menn piksler vil bli brukt
MapPoint: Dette er justeringen punkt-0,0 - for plassering av. . BMD objekt
componentX: Hvor langt vil kanalens piksler forskyves langs X-aksen. I dette tilfellet, er de ikke. Du kan også angi en kanal som rødt i stedet for en numerisk verdi
componentY. Kanalen vil bli flyttet ned 2 piksler på Y-aksen. Det virkelig fine ting om disse X og Y-verdiene er de faktisk kan brukes til ulike kanaler i BMD objektet. For eksempel kan du ha den røde kanalen kontroll X-aksen fortrengning og den blå kanalen kontroll Y-aksen forskyvning
scaleX. Vi kommer til å skalere bildepunkter langs X-aksen med 10%. Bare husk at jo større tall, jo større blir forskyvning som liksom forklarer Tsunami og Tar Pit refererer tidligere
Scaley:.. Pikslene blir skalert med 60% på Y-aksen
Det er tre andre parametere du kan legge til, men er ikke nødvendig her. De er:
modus: Dette er strenger som bestemmer hvordan bildepunkter som går ut av kanten håndteres. Wrap trekker i piksler fra den motsatte side av bildet, gjentar Clamp piksler på kanten. Ignorer enkelt bruker kilden pixel farge og Color bruker farge og alpha verdier spesifisert
Farge. Bruk denne når du trenger å angi en modus. Dette spesifiserer en farge, uttrykt som et antall, som skal brukes for bildepunkter som går utenfor kanten
alfa:. Brukes når man bruker en modus og antall - mellom 0,0 og 1,0 - blir brukt til å bestemme åpenhet av pikslene som går utenfor kanten
Trinn 9:. Variabler
Opprett variablene som skal brukes for å skape ringvirkninger:
Var pt1: Point = new punkt (0,0); Var pt2: Point = new Point (0,0); Var perlinOffset: Array = [pt1, pt2];
Steg 10: Opprett hendelses
addEventListener (Event.ENTER_FRAME, loopIt);
Vi trenger dette for å gjøre vannet jiggle. Dette skjer takket være Displacment filter endre verdiene i sin Point () parameter i samme takt som filmen. I mitt tilfelle bildefrekvensen er satt til 30 fps betyr verdiene vil endre seg 30 ganger per sekund
Trinn 11:. LoopIt
Skriv loopIt funksjon:
funksjon loopIt (evt: hendelse): void {perlinOffset [0] .x + = 0,5; perlinOffset [1] .Y + = 0,1; bmd.perlinNoise (400,5,3,2, falsk, falsk, 2, sant, perlinOffset); photo.filters = [dmf];};
De to første linjene sett verdiene som brukes av Point () Den tredje linjen gjelder perlinNoise metoden til bitmap objekt opprettet i linje 1 av koden. La oss gå gjennom parametrene: De to første tallene er baseX Hotell og Basey Den tredje nummer, 3, er numOctave De to boolske verdier er er sting Hotell og fractalNoise Den neste verdi, 2, er channelOptions boolsk verdi, falsk, er gråskala Den siste parameteren, perlinOffse Den siste linjen - photo.filters = [dmf]; - Gjelder forskyvning filter, med Perlin Noise, til bildet i foto eksempel Lagre filmen og teste den I dette nybegynner-nivå tutorial jeg gikk du gjennom bruk av Action å skape rislende vann i en fontene i Paris. Som du kan se det var ikke så mye kode involvert og mye av det var ganske ukomplisert. Hva er egentlig viktig for deg, så du begynner å utforske Actionscript og Flash er å forstå at de fleste kodeverdier er enten tall eller boolske verdier. Det du trenger å gjøre er å være redd for å spille "hva hvis ..." spill. Dette er de spillene hvor du lurer på, "Hva om jeg endret dette nummeret, hva ville skje?" Faktisk, gjerne leke seg med alle tallene i DisplacemantmapFilter og perlinNoise (). Du kan få noen ganske fascinerende påvirker alt fra oooze av en Tar Pit til vannet ser ut som det er et jordskjelv i gang. Ha det gøy! Anmeldelser
parameter i DisplacementMapFilter, som spillehodet looper x- og y-verdiene tilvekst. Verdiene jeg valgte var et resultat av mye testing før jeg oppnådd den effekten jeg ønsket.
verdier - 400, 5 - som bestemmer frekvensen av støy på x og y-aksen. Jo lavere tall, jo mer detaljert støy vil bli. Som en tommelfingerregel at baseX nummeret kan settes til å matche bredden på bildet. Jeg fant 800 til bli litt mye, så jeg ringte ned til 400. Forskjellen i detalj var ubetydelig.
parameter. Jo høyere tall, jo mer detaljert blir tilfeldig støy. Ulempen er en hit på prosessorkraft og en potensiell fart nedgang i effekten. Dette var ikke ment for web så tre ser ut til å fungere helt fint. Ved hjelp av en verdi av en virkelig rørte seg ikke pikslene så mye. Neste nummer, to, er randomSeed
parameter.
parametere. En sann verdi for sting jevner kantene av noen fliser som kan oppstå - ikke nødvendig her. Den fractalNoise verdi avgjør om støy vil være fraktal støy (true) eller turbulens (false). Den falske verdi - turbulens - er egnet for vanneffekter som krusninger eller brann
parameter.. Denne verdien bestemmer i hvilken av de fire fargekanaler støyen vil bli anvendt.
parameter. Hadde jeg brukt falske fargekanal spesifisert i channelOptions parameter skulle brukes til å generere støy. Bruke sant forteller Flash som jeg vil bruke gråskala.
t, er rekken av punkter som skal brukes til å kompensere for støy i hver oktav av effekten.
Trinn 12: Fullfør opp
Konklusjon.. :