Creați o fotografie Lytro-Esque focalizată dinamic în Flash

În acest tutorial, vă voi arăta cum să imitați fotografiile create de camera Lytro. Rezultatul final vă va permite să creați propriile imagini dinamice și interesante pentru a fi afișate pe web, permițând spectatorilor să modifice punctul focal! Nu este necesară nicio cameră specială - puteți utiliza orice cameră care permite focalizarea manuală (care include majoritatea camerelor telefonice).


Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:

Faceți clic pe o chitară pentru a vă concentra asupra acesteia.


Pasul 1: Configurarea

Înainte de a începe, asigurați-vă că aveți o cameră care poate selecta manual un punct de focalizare. În acest tutorial nu puteți utiliza metoda de blocare a focalizării pentru a schimba punctele de focalizare. Un DSLR ar fi cel mai bun atunci când faci acest tutorial, dar o cameră compactă cu controale manuale decente va fi bine! De asemenea, asigurați-vă că aveți un trepied robust.

Mai întâi, puneți camera pe un trepied. Asigurați-vă că este sigur și nu va cădea sau nu se mișcă în nici un fel, deoarece nu vrem ca compoziția să se schimbe deloc între fotografii.

Asigurați-vă că subiectul dvs. rămâne static în timpul fotografierii, altfel în rezultatul final, imaginile vor părea să se miște și că nu ar arăta deloc deloc!


Pasul 2: Modurile de fotografiere

Pentru a obține o imagine cu adevărat eficientă, nevoia dvs. de a vă seta aparatul foto într-un mod, puteți controla diafragma. Acest lucru vă va permite să setați o diafragmă largă (număr mic f) și să suflați fundalul (sau planul din față) afară. Rețineți, cu cât numărul f este mai mic, cu atât este mai mare neclare!

Modul Aperture Priority (A / Av pe Canon) este un mod excelent care vă va permite să setați diafragma și camera va alege toate celelalte setări pentru dvs. Deși este avertizat, acest mod poate produce două imagini cu expuneri ușor diferite și fiecare poate avea o culoare ușor diferită, deci atentă!

Modul manual (M) ar fi mai bun pentru că puteți să formați setările de expunere și să păstrați fotografiile consecvente. Setările manual de echilibrare a albului reprezintă, de asemenea, o idee bună pentru a menține culorile în imaginile dvs. coerente.

Pentru acest tutorial, aș recomanda oriunde în jurul valorii de f1 - f5.6, în funcție de distanța față de subiect și camera.


Pasul 2: Fotografierea

Acum, cu o diafragmă largă selectată pe camera dvs. foto (număr mic f), mutați markerul AF pe subiectul din prim-plan utilizând panoul direcțional din spatele camerei. Lăsați aparatul foto să se focalizeze și apoi fotografiați. Fără a mișca deloc camera foto, selectați un nou punct de focalizare în fundal, focalizați și apoi fotografiați după cum se arată în imaginea de mai sus.

Un sfat la îndemână dacă aveți un DSLR este de a intra în modul vizualizare live. Aici puteți selecta orice punct de pe ecran, permițând o mai mare flexibilitate în alegerea punctelor dvs. de focalizare. Dacă aveți o cameră compactă, utilizați tamponul de control pentru a selecta punctul de focalizare.

Ar trebui să aveți acum două imagini care sunt exact la fel, în afară de punctul focal. Continuați să fotografiați până când sunteți mulțumiți de compoziția și profunzimea câmpului. Apoi transferați fotografiile pe computer și începeți să utilizați Flash!


Pasul 3: Acum, pe computer

Mai întâi configurați un dosar de proiect numit corespunzător. Îmi place mereu să păstrez proiectele în dosare cu nume clar astfel încât să le găsesc dacă trebuie să mă uit înapoi la ceea ce am făcut mai târziu. Aici veți păstra imaginile originale, imaginile redimensionate și fișierele Flash / ActionScript.

Pentru a face ca imaginile să fie protejate pe web, trebuie să le redimensionăm. Deschideți editorul de imagini preferat și redimensionați-vă fotografiile la o dimensiune potrivită pe care o considerați potrivită. Aici le-am redimensionat pe amândouă până la 600x400px, dar puteți utiliza orice dimensiune doriți și asigurați-vă că este bifată caseta "proporții de restricționare".

Apoi, salvați imaginile ca JPEG de înaltă calitate. Acest lucru este important deoarece Flash va comprima întregul fișier mai târziu, astfel că pierderea calității imaginii în această etapă este inutilă.


Pasul 4: Setarea Flash

Porniți Flash și deschideți un nou document ActionScript 3.0. Dați clic pe butonul de editare din fila proprietăți și redimensionați-vă stadiul la dimensiunea imaginilor; Am ales 600x400px.


Pasul 5: Straturile și ramele de documente

Apoi, creați două straturi pe scenă; denumiți stratul de jos "Fotografii" și stratul superior "Butoane". Adăugați un alt cadru-cheie pe "Fotografii"? layer, dar asigurați-vă că pe butoanele? strat, doar adăugați un alt cadru. Vedeți fotografia de mai sus.

Apoi, importați ambele fotografii în bibliotecă, astfel încât să le trageți și să le aruncați din folderul proiectului în panoul de bibliotecă. Asigurați-vă că aveți ambele fotografii pe un alt cadru cheie.

Stratul de fotografie este acum complet!


Pasul 6: Mascarea cu butoane

Acum, trebuie să facem butoanele pe care utilizatorii le vor face clic pentru a schimba punctul focal. Pentru a face acest lucru, vom masca zonele de focalizare din ambele imagini, le vom umple și apoi le vom face invizibile.

Mai întâi, selectați primul cadru pe butoanele? strat. Utilizați instrumentul stilou și mascați forma zonei de focalizare și completați calea. Nu trebuie să fii prea precis aici; asigurați-vă că obțineți forma generală a obiectului.

Apoi, selectați instrumentul pentru vopsea și completați căile pe care tocmai le-ați creat. Ștergeți cursa neagră în jurul marginilor, dacă este necesar.


Pasul 7: Crearea unui simbol

Apoi, selectați formele și mergeți la Modify> Convert to Symbol (F8). Asigurați-vă că tipul de simbol este un buton și apelați la ceea ce vă place. Mi-am numit forma "Guitar1".


Pasul 8: Efectuarea lui invizibilă

Faceți dublu clic pe noul dvs. buton și apoi veți intra în modul de izolare a butoanelor. Aici puteți edita stările butonului.

În acest caz, dorim să îl facem invizibil, deci faceți clic și trageți din starea 'UP' și eliberați-l pe starea 'HIT'.

Apoi, reveniți la cronologia originală, iar forma dvs. ar trebui să aibă o mască vizibilă. Felicitări! Tocmai ai făcut un buton invizibil!


Pasul 9: denumirea butonului

Următorul pas este să numiți acest buton. În timp ce este selectat, în panoul din partea dreaptă, în fila proprietăți, denumiți butonul "btn_back".


Pasul 10: Mascarea mai multor butoane!

Apoi, faceți clic pe următorul cadru pe butoanele dvs.? strat peste a doua imagine, astfel încât cealaltă parte a imaginii să nu fie focalizată. Acest lucru doar face mai clar pentru a vedea unde să mascheze.

Faceți exact același lucru ca înainte:

  • Împingeți zona de focalizare cu instrumentul stiloului.
  • Umpleți-l cu instrumentul de vopsea și ștergeți cursa neagră în jurul butonului.
  • Convertiți-l la un simbol. (F8) (Amintiți-vă să vă asigurați că tipul de simbol este un buton și îl numiți alt nume decât înainte. Mi-am denumit "Guitar2".
  • Faceți dublu clic pe noul buton și trageți din starea 'UP' până la starea 'HIT'.
  • Reveniți la cronologie.

Acum, denumiți acest nou buton, "btn_fore".

Ar trebui să aveți acum două butoane transparente, care se întind deasupra ambelor imagini așa cum este arătat. Ele se pot suprapune ușor, dar acest lucru nu contează prea mult. Stratul cu butoane este acum complet!


Pasul 11: Pregătirea pentru a codifica fișierul

Partea finală este de a crea codul care va face ca butoanele să funcționeze. Acest pas implică utilizarea clasei de documente, astfel încât să folosiți acest tutorial pentru a vă ajuta să le înțelegeți dacă sunteți nou pentru ele sau doriți doar o reîmprospătare.

Mai întâi, găsiți caseta "Clasă" din fișierul FLA aflat sub panoul proprietăților. Aici, tastați Principal. Acesta este acum numele clasei dvs. de documente și va fi numele fișierului ActionScript pe care îl veți crea în continuare.

Apoi, accesați setările File> ActionScript. Trebuie să debifați caseta care spune "Declare automat instanțe de etapă". Aceasta înseamnă că acum trebuie să declarați manual cele două butoane în cod, ceea ce vrem. (Locația acestui dialog poate fi diferită în versiunile anterioare ale Flash, deci dacă nu o puteți găsi, utilizați un motor de căutare.)


Pasul 12: Construirea codului

Apoi este timpul să creați fișierul ActionScript care conține toate codurile noastre. Faceți clic pe File> New> File ActionScript.

Acum salvați asta ca Main.as, și asigurați-vă că este ținută în același director de fișiere ca fișierul FLA. Acum, fișierul FLA și ActionScript sunt legate!

Mai întâi, folosiți această bucată de cod ca bază:

 pachet import flash.display.MovieClip; public class Main extinde MovieClip funcția publică Main (): void  // Function // Class // Pachet

Am inclus o declarație de import pentru MovieClip pentru a începe, dar vom adăuga mai multe declarații pe măsură ce mergem împreună.


Pasul 13: Construirea butoanelor

Pentru a începe, trebuie să declarați cele două butoane drept variabile. Acestea merg între ele clasa publică principală extinde MovieClip si inainte funcție publică ():

 public var btn_back: SimpleButton; public var btn_fore: SimpleButton;

Pentru a face Flash să înțeleagă ce SimpleButton este, trebuie să adăugați acest lucru împreună cu cealaltă declarație de import din partea de sus:

 import flash.display.SimpleButton;

După ce ați făcut acest lucru, codul dvs. ar trebui să arate astfel:

 pachet import flash.display.MovieClip; import flash.display.SimpleButton; clasa publică principală extinde MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; funcția publică Main (): void  // Funcție // Clasă // Pachet

Pasul 14: Oprirea primului cadru

Următorul pas este să vă asigurați că clipul se oprește la prima fotografie. Pentru a face acest lucru, adăugați pur și simplu a Stop() comandă în interiorul funcție publică ()

 funcția publică Main (): void stop (); //Funcţie

Pasul 15: Adăugarea ascultătorilor de evenimente

Următorul pas este să adăugați ascultători de evenimente. Acestea intră înăuntru funcție publică (), și sub Stop(); comandă pe care tocmai ați adăugat Trebuie să aveți un ascultător de evenimente pentru ambele butoane; btn_back și btn_fore, astfel că mai întâi creați unul pentru butonul din spate:

 btn_back.addEventListener (MouseEvent.CLICK, onClickBackground);

Acum creați un alt ascultător de evenimente pentru butonul următor. Trebuie doar să schimbați numele butonului și numele funcției:

 btn_fore.addEventListener (MouseEvent.CLICK, onFireBackground);

Mai întâi, mă refer la numele butonului btn_back. Apoi am adăugat ascultătorul evenimentului prin .addEventListener. În paranteze, MouseEvent.CLICK este pur și simplu spunându-l să asculte pentru un clic pe buton. În cele din urmă, spunem că, atunci când se face clic pe buton, ar trebui să sune onClickBackground () -- vom crea această funcție în continuare.

Acum, pentru că am folosit evenimentele mouse-ului, trebuie să punem o declarație de import în partea de sus împreună cu celelalte instrucțiuni pentru a face Flash să înțeleagă ce este. Adăugați această linie sub celelalte importuri:

 importul flash.events.MouseEvent;

Codul dvs. ar trebui să arate astfel:

 pachet import flash.display.MovieClip; import flash.display.SimpleButton; importul flash.events.MouseEvent; clasa publică principală extinde MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; funcția publică Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground);  // Funcția // Class // Pachetul

Pasul 16: Adăugarea funcțiilor

În cele din urmă, trebuie create două funcții publice pentru a le spune butoanele pe care le-am făcut ce trebuie să facă. Adăugați-le înăuntru clasa publică principală extinde MovieClip, dar sub funcția publică Main (): void.

Numele funcțiilor trebuie să se potrivească cu numele ascultătorilor evenimentului. Deci, în acest caz onClickBackground, și onClickForeground:

 funcția publică onClickBackground (evt: MouseEvent): void gotoAndStop (2);  funcția publică onClickForeground (evt: MouseEvent): void gotoAndStop (1); 

În interiorul funcției, trebuie să-i spunem la Flash care cadru să meargă la momentul apăsării butonului. Cea mai simplă metodă este de a utiliza gotoAndStop (). Numărul din interiorul parantezelor indică numărul de cadre la care va trece Flash. Pur și simplu adăugați numărul 2 pentru onClickBackground funcția și numărul 1 pentru onClickForeground funcţie.

Un exemplu complet al codului este de mai jos pentru a vă ajuta să înțelegeți codul ActionScript complet:

 pachet import flash.display.MovieClip; import flash.display.SimpleButton; importul flash.events.MouseEvent; clasa publică principală extinde MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; funcția publică Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground);  // Function funcția publică onClickBackground (evt: MouseEvent): void gotoAndStop (2);  funcția publică onClickForeground (evt: MouseEvent): void gotoAndStop (1);  // Class // Pachetul

Singurul lucru de făcut acum este să testați filmul, deci mergeți la Control> Test Movie> Test (sau apăsați Ctrl + Enter). Ar trebui să funcționeze perfect! Acum trebuie doar să o publicați și să o distribuiți pe web!

Concluzie

Ați făcut acum o animație de stil Lytro! Acesta este doar un exemplu de utilizare a acestei tehnici pentru a imita imaginile camerei Lytro. Utilizați această tehnică pentru a crea compoziții și efecte personale pentru portofoliul, site-ul sau blogul dvs.!

Pentru a face un pas mai departe, puteți să creați propriile efecte și tranziții între cadre, pentru a oferi proiectului dvs. o notă personală.

Vă mulțumim pentru lectură și sper că v-ați bucurat de acest tutorial. Dați-mi voie să știți ce credeți! Acum, să văd câteva dintre dvs. Afișați un link în comentariile de mai jos!

Cod