Create et Lytro-esque Dynamisk Fokusert Photo i Flash
Del
Del
to
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil jeg vise deg hvordan du etterligne bildene skapt av Lytro kameraet. Sluttresultatet vil tillate deg å lage din egen dynamiske og interessante bilder som skal vises på nettet, slik at seerne til å endre fokuspunkt! Ingen spesielt kamera som kreves - du kan bruke en hvilken som helst kamera som tillater manuell fokusering (som inkluderer de fleste telefonkameraer)
Endelig resultat Forhåndsvisning
La oss ta en. ser på det endelige resultatet vi skal jobbe mot:
Klikk på en gitar til å fokusere på det
Trinn 1:. Klar
Før du starter, må at du har et kamera som kan velge et fokuspunkt manuelt. I denne opplæringen kan du ikke bruke fokuslåsen metode for å endre punkter av fokus. En DSLR ville være best når du gjør denne opplæringen, men et kompakt kamera med anstendig manuelle kontroller vil bli bra! Kontroller også at du har et solid stativ.
Først setter kameraet opp på et stativ. Sørg for at det er trygt og ikke kommer til å falle eller flytte på noen måte fordi vi ikke vil at sammensetningen å endre i det hele tatt mellom skuddene.
Sørg motivet forblir statisk gjennom å ta bildene dine, ellers i finalen resultat, vil bildene dine ser ut til å bevege seg, og som ikke ville se bra ut i det hele tatt
Trinn 2: Shooting Modes
For å få en virkelig effektiv image, ditt behov for å sette kameraet til en modus hvor du kan styre blenderåpningen. Dette vil tillate deg å sette en stor blenderåpning (Small f-nummer), og blåse bakgrunnen (eller forgrunnen) ute av fokus. Husk, jo lavere f tall, jo større er blur!
Aperture Priority modus (A /Av på Canon) er en fin modus som gjør at du kan stille inn blenderåpning, og kameraet vil velge alle de andre innstillinger for deg. Men bli advart, denne modusen kan produsere to bilder med litt forskjellige eksponeringer, og hver av dem kan ha litt forskjellig farge så vær forsiktig!
Manuell modus (M) ville være bedre fordi du kan ringe inn eksponeringsinnstillingene, og holde skudd konsekvent. Manuelle innstillinger for hvitbalanse er også en god idé å holde fargene i bildene dine konsekvente.
For denne opplæringen, vil jeg anbefale hvor som helst rundt f1 - f5.6, avhengig av avstanden fra motivet og kameraet.
Trinn 2: Skyting
Nå med en stor blenderåpning valgt på kameraet (Small f-nummer), flytte AF markøren over forgrunnen lagt ved hjelp av navigasjonsknappen på baksiden av kameraet. La kameraet fokus, og deretter skyte. Uten å flytte kameraet i det hele tatt, velg et nytt fokuspunkt i bakgrunnen, fokus, og deretter skyte som vist på bildet over.
En hendig tips hvis du har en DSLR er å gå inn Live View-modus Du skal nå ha to bilder som er akkurat det samme, bortsett fra navet. Hold skyting til du er fornøyd med sammensetningen og dybdeskarphet. Deretter overføre bildene til datamaskinen og komme i gang i Flash! Først sette opp en passende heter prosjektmappen. Jeg liker alltid å holde prosjekter i klart navngitte mapper slik at jeg kan finne dem hvis jeg trenger å se tilbake på hva jeg har gjort på et senere tidspunkt. Her vil du holde dine originalbilder, endret størrelse bilder og dine Flash /Actionscript-filer. For å gjøre bildene web-safe, trenger vi å endre størrelsen på dem. Åpne opp din favoritt bilderedigeringsprogram og bare endre størrelsen på bildene dine til en passende størrelse du føler er riktig. Her har jeg endret for dem begge til 600x400px, men du kan bruke en hvilken som helst størrelse du ønsker, og sørg for at den "Behold proporsjoner 'er merket av. Deretter lagrer bildene som et høykvalitets JPEG. Dette er viktig fordi Flash vil komprimere hele filen senere, så å miste bildekvalitet på dette stadiet er meningsløs Boot opp Flash, og åpne en ny Actionscript 3.0 dokument. Klikk på redigeringsknappen under fanen egenskaper, og endre størrelsen på scenen til størrelsen på bildene dine; Jeg plukket 600x400px. Deretter oppretter to lag på scenen; nevne bunnlaget "Bilder", og det øverste laget "Knapper". Legg til en annen nøkkel-rammen på "Bilder" lag, men sørg på «Knapper» lag, du bare legge til en annen ramme. Se bildet over. Deretter importerer begge bildene dine til biblioteket, så dra og slippe dem både fra prosjektmappe inn i biblioteket panel. Nå må du ha begge bildene dine på en annen nøkkel-ramme. Bildet laget er nå ferdig Nå må vi få knappene som brukerne vil klikke på for å endre fokus punkt. For å gjøre dette, vil vi maskere ut av fokusområder både bilder, fylle dem, og deretter gjøre dem usynlige. Først velger den første rammen på «Knapper» lag. Bruk pennen og maskere formen på ut av fokusområder, og fullføre banen. Du trenger ikke å være for nøyaktig her; bare sørg for at du får den generelle formen på objektet. Deretter velger maling bøtte verktøyet og fyll inn banene du nettopp opprettet. Slett svart strek rundt kantene hvis det er nødvendig Deretter velger figurene og gå-til Endre > Konverter til Symbol (F8). Sørg for type symbol er en knapp, og kaller dette hva du liker. Jeg har kalt min form 'Guitar1'. Dobbeltklikk på den nye knappen, og du vil da gå inn på knappen isolasjon modus. Her kan du redigere statene knappen. I dette tilfellet ønsker vi å gjøre det usynlige, så klikk og dra fra 'UP' tilstand, og slipp over 'hit' tilstand. Anmeldelser Så tilbake til den opprinnelige tidslinjen og din form bør ha en gjennomsiktig maske. Congrats! Du har nettopp laget en usynlig knapp Det neste trinnet er å navngi denne knappen. Selv om det er valgt, på høyre panel, under fanen egenskaper, navngi knappen 'btn_back' Deretter klikker du på den neste! ramme på din "Buttons" lag over det andre bildet, så den andre delen av bildet er ute av fokus. Dette gjør bare det lettere å se hvor du skal maskere Nå gjør akkurat det samme som før. Nå, navn denne nye knappen 'btn_fore'. Du . skal nå ha to gjennomsiktige knapper som spenner over begge bildene som vises kan de overlapper hverandre litt, men dette gjør ikke noe for mye Knappene laget er nå ferdig Den siste delen er å lage koden som vil gjøre knappene fungerer. involverer Dette trinnet bruk av dokument klasser så bruk denne opplæringen for å hjelpe deg å forstå dem hvis du er ny på dem, eller bare ønsker en oppdatere. Først, finn 'Klasse' boksen i din FLA fil under egenskapsvinduet. Her inne. Dette er type Hoved nå navnet på dokumentet klasse, og vil være navnet på Actionscript-fil . som du vil lage neste Neste, gå til Fil > Action innstillinger. Du må un-sjekk boksen som sier "automatisk erklære scene tilfeller". Dette betyr at du må nå erklære manuelt de to knappene i koden, som er det vi ønsker. (Plasseringen av denne dialogen kan være annerledes i tidligere versjoner av Flash, så hvis du ikke finner den, bruker en søkemotor.) Neste det er på tide å lage Actionscript-fil som inneholder alle våre kode i Klikk Fil >.; New > Actionscript-fil. Nå lagre dette som Main.as, og sørge for at det holdes innenfor samme fil katalog som FLA-filen. Nå FLA og Actionscript-fil er knyttet Først bruker denne del av koden som base! Jeg har tatt med en import statement for MovieClip til å begynne med, men vi kommer til å legge flere uttalelser som vi gå sammen Hvis du vil starte, må du deklarere dine 2 knapper som variabler. Disse går mellom public class Hoved strekker MovieClip og før offentlig funksjon main (): For å gjøre Flash forstå hva Simple er, må du legge til dette med den andre import uttalelse på toppen: Når du har gjort det, koden skal se slik ut: Det neste trinnet er å sørge for at de klippet stopper på det første bildet. For å gjøre dette, bare legge til et stopp () kommandoen inne i offentlig funksjon main () Det neste trinnet er å legge hendelsen lyttere. Disse går i offentlig funksjon main (), og under stopp (); kommandoen du nettopp har lagt. Du må ha et arrangement lytteren for begge knappene; btn_back og btn_fore, så først opprette en for tilbakeknappen: Nå opprette en ny hendelse lytteren for neste knapp. Du må bare endre navnet på både på knappen, og navnet på funksjonen: Først, jeg refererer knappen navn btn_back. Så jeg legger hendelsen lytteren via .addEventListener. I parentes er MouseEvent.CLICK bare å fortelle det til å lytte etter et klikk på knappen. Til slutt vi forteller det at når knappen klikkes, bør det ringe onClickBackground () - vi vil skape denne funksjonen neste. Nå, fordi vi har brukt mus hendelser, må vi sette en import uttalelse på toppen sammen med de andre utsagnene til å gjøre Flash forstå hva man er. Legg denne linjen under de andre import: Din kode skal nå se slik ut: Til slutt, to offentlige funksjoner må opprettes for å fortelle knappene vi har gjort hva de skal gjøre. Legg disse inne i public class Hoved strekker MovieClip, men under offentlig funksjon main (). Void Navnene på de funksjonene må samsvare navnene i hendelsen lyttere. Så i dette tilfellet onClickBackground, og onClickForeground: Inside funksjonen, må vi fortelle Flash som ramme for å gå til når knappen klikkes. Den enkleste metoden er å bruke gotoAndStop (). Tallet i parentes angir rammenummeret som Flash vil gå til. Bare legg til nummer to for onClickBackground funksjon, og nummer 1 for onClickForeground funksjon En komplett eksempel på koden er nedenfor for å hjelpe deg å forstå den fullstendige Actionscript-kode. Det eneste som gjenstår å gjøre nå er å teste filmen, så gå til Control > Test Movie > Test (eller trykke Ctrl + Enter). Det bør fungere perfekt! Nå er alt som gjenstår å gjøre er å publisere det, og dele det på nettet! Du har nå gjort en Lytro stil bilde animasjon! Dette er bare et eksempel på hvordan du bruker denne teknikken til å etterligne Lytro kamerabildene. Bruk denne teknikken til å lage komposisjoner og virkninger av din egen for din portefølje, hjemmeside eller blogg! For å ta det et skritt videre, kan du lage dine egne effekter og overganger mellom rammer for å gi prosjektet et personlig preg. Takk for lesing, og jeg håper du likte denne opplæringen. La meg vite hva du synes! La oss nå se noen av dine egne. Pop en link i kommentarfeltet nedenfor! Anmeldelser
. Her kan du velge hvilket som helst punkt på skjermen, noe som åpner for en større fleksibilitet i å velge dine interessante fokus. Hvis du har et kompaktkamera, bruke kontroll pad for å velge fokuspunkt.
Trinn 3: Nå på datamaskinen
Trinn 4:. Flash Setup
Trinn 5: Dokument Layers og Rammer
Trinn 6: Button Maske
Trinn 7:. Opprette et symbol
Trinn 8: gjør det usynlig
Trinn 9: Navngi Button
Trinn 10:. Mer Button Maske
Konverter det til et symbol. (F8) (Husk å sørge for at den type symbol er en knapp, og du kaller det et annet navn enn før. Jeg har kalt meg 'Guitar2'.
Gå tilbake til tidslinjen.
Trinn 11:.! Forbereder koden Fil
Trinn 12: Bygge Kode
Pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main (): void {} //Funksjon} //Klasse} //Package
Trinn 13:. Bygge Knapper
offentlig Var btn_back: Simple; offentlig Var btn_fore: Simple;
import flash.display.SimpleButton;
pakke {import flash.display.MovieClip; import flash.display.SimpleButton; public class Hoved strekker MovieClip {public Var btn_back: Simple; offentlig Var btn_fore: Simple; offentlig funksjon main (): void {} //Funksjon} //Klasse} //Package
Trinn 14: Stoppe på den første rammen
offentlig funksjon main (): void {stop ();} //Funksjon
Trinn 15: Legge tilstelninger Lyttere
btn_back.addEventListener (MouseEvent.CLICK, onClickBackground);
btn_fore.addEventListener (MouseEvent.CLICK, onForeBackground);
import flash.events.MouseEvent;
pakke {import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Hoved strekker MovieClip {public Var btn_back: Simple; offentlig Var btn_fore: Simple; offentlig funksjon main (): void {stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); } //Funksjon} //Klasse} //Package
Trinn 16: Legge til funksjoner
offentlig funksjon onClickBackground (evt: MouseEvent): void {gotoAndStop (2);} offentlig funksjon onClickForeground (evt: MouseEvent): void {gotoAndStop (1);}
Pakke {import flash. display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Hoved strekker MovieClip {public Var btn_back: Simple; offentlig Var btn_fore: Simple; offentlig funksjon main (): void {stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); } //Funksjon offentlig funksjon onClickBackground (evt: MouseEvent): void {gotoAndStop (2); } Offentlig funksjon onClickForeground (evt: MouseEvent): void {gotoAndStop (1); }} //Klasse} //Package
Konklusjon