Maak een Lytro-Esque dynamisch gefocuste foto in Flash

In deze zelfstudie laat ik je zien hoe je de foto's nabootst die door de Lytro-camera zijn gemaakt. Met het eindresultaat kun je je eigen dynamische en interessante foto's maken die je op internet kunt weergeven, zodat kijkers het brandpunt kunnen wijzigen! Geen speciale camera nodig - u kunt elke camera gebruiken die handmatige scherpstelling mogelijk maakt (waaronder de meeste camera's van uw telefoon).


Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:

Klik op een gitaar om erop te focussen.


Stap 1: instellen

Zorg voordat u begint dat u een camera hebt die handmatig een scherpstelpunt kan selecteren. In deze zelfstudie kunt u de focusvergrendelingsmethode niet gebruiken om de focuspunten te wijzigen. Een DSLR zou het beste zijn als je deze tutorial doet, maar een compactcamera met fatsoenlijke handmatige bediening is prima! Zorg er ook voor dat je een stevig statief hebt.

Plaats eerst uw camera op een statief. Zorg ervoor dat het veilig is en niet zal vallen of bewegen, omdat we niet willen dat de compositie tussen de opnames verandert.

Zorg ervoor dat je onderwerp statisch blijft tijdens het nemen van je foto's, anders zullen je afbeeldingen in het eindresultaat lijken te bewegen, en dat zou helemaal niet goed uitkomen!


Stap 2: opnamemodi

Om een ​​echt effectief beeld te krijgen, moet u uw camera instellen op een modus waarin u het diafragma kunt bedienen. Hiermee kunt u een groot diafragma instellen (klein f-getal) en de achtergrond (of voorgrond) onscherp blazen. Let op: hoe lager het f-getal, des te groter de onscherpte!

Diafragmaprioriteitsmodus (A / Av op Canon) is een geweldige modus waarmee u het diafragma kunt instellen en de camera zal alle andere instellingen voor u kiezen. Hoewel je moet worden gewaarschuwd, kan deze modus twee afbeeldingen produceren met licht verschillende belichtingen, en ze kunnen elk een iets andere kleur hebben, dus wees voorzichtig!

Handmatige modus (M) zou beter zijn omdat u de belichtingsinstellingen kunt inbellen en uw opnamen consistent kunt houden. Handmatige witbalansinstellingen zijn ook een goed idee om de kleuren in uw afbeeldingen consistent te houden.

Voor deze tutorial zou ik overal rond f1 - f5.6 aanbevelen, afhankelijk van de afstand tot het onderwerp en de camera.


Stap 2: fotograferen

Nu, met een groot diafragma geselecteerd op uw camera (klein f-getal), beweegt u uw AF-markering over uw voorgrondonderwerp met behulp van het richtingspad aan de achterkant van uw camera. Laat de camera scherpstellen en maak vervolgens de foto. Als u de camera helemaal niet beweegt, selecteert u een nieuw scherpstelpunt op de achtergrond, stelt u scherp en maakt u vervolgens de foto zoals in de bovenstaande afbeelding.

Een handige tip als je een DSLR hebt om in te gaan live view-modus. Hier kunt u elk punt op het scherm selecteren, waardoor u meer flexibiliteit hebt bij het kiezen van uw focuspunten. Als u een compacte camera hebt, gebruikt u uw besturingselement om uw scherpstelpunt te selecteren.

U zou nu twee afbeeldingen moeten hebben die precies hetzelfde zijn, afgezien van het brandpunt. Blijf fotograferen totdat je tevreden bent met je compositie en scherptediepte. Breng uw foto's vervolgens over naar uw computer en begin met Flash!


Stap 3: Nu op de computer

Stel eerst een geschikte projectmap in. Ik vind het altijd leuk om projecten in mappen met een duidelijke naam te houden, zodat ik ze kan vinden als ik terug moet kijken op wat ik later heb gedaan. Hier bewaart u uw originele afbeeldingen, afbeeldingen waarvan de grootte is gewijzigd en uw Flash- / ActionScript-bestanden.

Om de afbeeldingen webveilig te maken, moeten we ze verkleinen. Open uw favoriete afbeeldingseditor en verklein gewoon uw foto's tot een geschikte grootte die u geschikt acht. Hier heb ik de grootte van beide gewijzigd in 600x400 px, maar je kunt elke gewenste grootte gebruiken en zorgen dat het vakje 'Beperkingen behouden' is aangevinkt.

Bewaar de afbeeldingen vervolgens als een JPEG van hoge kwaliteit. Dit is belangrijk omdat Flash het hele bestand later comprimeert, waardoor het verliezen van de beeldkwaliteit in dit stadium zinloos is.


Stap 4: Flash instellen

Start Flash op en open een nieuw ActionScript 3.0-document. Klik op de knop Bewerken onder het tabblad Eigenschappen en wijzig het formaat van je werkgebied in de grootte van je afbeeldingen; Ik heb 600x400 px gekozen.


Stap 5: Documentlagen en kaders

Maak vervolgens twee lagen op je podium; noem de onderste laag? Foto's ?, en de bovenste laag? Knoppen ?. Voeg een ander keyframe toe aan de? Foto's? laag, maar zorg ervoor dat op de? Knoppen? laag, je voegt gewoon een ander frame toe. Zie de foto hierboven.

Importeer vervolgens beide foto's naar de bibliotheek, sleep ze dus vanuit uw projectmap naar het bibliotheekpaneel. Zorg er nu voor dat je beide foto's op een ander key-frame hebt staan.

De fotolaag is nu voltooid!


Stap 6: Knop Maskeren

Nu moeten we de knoppen maken waarop gebruikers klikken om het brandpunt te wijzigen. Om dit te doen, maskeren we de onscherpe delen van beide afbeeldingen, vullen ze en maken ze onzichtbaar.

Selecteer eerst het eerste frame op de? Knoppen? laag. Gebruik het pengereedschap en maskeer de vorm van de onscherpe gebieden en maak het pad af. U hoeft hier niet te nauwkeurig te zijn; zorg ervoor dat je de algemene vorm van het object krijgt.

Selecteer vervolgens het gereedschap Verfemmer en vul de paden in die u zojuist hebt gemaakt. Verwijder indien nodig de zwarte streek langs de randen.


Stap 7: Een symbool maken

Selecteer vervolgens de vormen en ga naar Wijzigen> Converteren naar symbool (F8). Zorg ervoor dat het type symbool een knop is en noem dit wat je wilt. Ik heb mijn vorm 'Guitar1' genoemd.


Stap 8: Het onzichtbaar maken

Dubbelklik op uw nieuwe knop en u gaat vervolgens naar de knopisolatiemodus. Hier kunt u de status van de knop bewerken.

In dit geval willen we het onzichtbaar maken, dus klik en sleep vanuit de status 'UP' en laat de status 'HIT' los.

Keer dan terug naar uw originele tijdlijn en uw vorm zou een doorzichtig masker moeten hebben. Proficiat! U hebt zojuist een onzichtbare knop gemaakt!


Stap 9: Uw knop een naam geven

De volgende stap is om deze knop een naam te geven. Terwijl het is geselecteerd, geeft u in het rechterdeelvenster op het tabblad Eigenschappen de naam 'btn_back' op..


Stap 10: meer knoppen maskeren!

Klik vervolgens op het volgende frame op uw? Buttons? laag over de tweede afbeelding, dus het andere deel van de afbeelding is onscherp. Dit maakt het alleen maar duidelijker om te zien waar te maskeren.

Doe nu precies hetzelfde als eerder:

  • Maskeer het niet-scherpgestelde gebied met het pengereedschap.
  • Vul het met de verfemmer en verwijder de zwarte lijn rond de knop.
  • Converteer het naar een symbool. (F8) (Vergeet niet om ervoor te zorgen dat het type symbool een knop is, en je noemt het een andere naam dan daarvoor.) Ik heb de mijne 'Guitar2' genoemd.
  • Dubbelklik op de nieuwe knop en sleep vanuit de status 'UP' naar de status 'HIT'.
  • Keer terug naar de tijdlijn.

Noem nu deze nieuwe knop, 'btn_fore'.

U zou nu twee transparante knoppen moeten hebben die over beide afbeeldingen lopen, zoals weergegeven. Ze kunnen elkaar enigszins overlappen, maar dat maakt niet zoveel uit. De knoppenlaag is nu voltooid!


Stap 11: Voorbereiden om uw bestand te coderen

Het laatste deel is om de code te maken waardoor de knoppen werken. Deze stap omvat het gebruik van documentklassen dus gebruik deze zelfstudie om u te helpen ze te begrijpen als u ze nog niet kent, of als u alleen een opfrissing wilt.

Zoek eerst het vak 'Klasse' in uw FLA-bestand onder het eigenschappenvenster. Typ hier Hoofd. Dit is nu de naam van uw documentklasse en is de naam van uw ActionScript-bestand dat u vervolgens gaat maken.

Ga vervolgens naar Bestand> ActionScript-instellingen. U moet het selectievakje 'Automatisch stadiuminstanties declareren' ongedaan maken. Dit betekent dat je nu handmatig de twee knoppen in code moet declareren, wat we willen. (De locatie van dit dialoogvenster kan in eerdere versies van Flash anders zijn, dus als u het niet kunt vinden, gebruikt u een zoekmachine.)


Stap 12: De code bouwen

Vervolgens is het tijd om het ActionScript-bestand te maken waarin al onze code staat. Klik op Bestand> Nieuw> ActionScript-bestand.

Bewaar dit nu als Main.as, en zorg ervoor dat het in dezelfde bestandsmap wordt bewaard als het FLA-bestand. Nu zijn het FLA- en ActionScript-bestand gekoppeld!

Gebruik eerst dit stuk code als uw basis:

 pakket import flash.display.MovieClip; public class Main breidt MovieClip uit public function Main (): void  // Function // Class // Package

Ik heb een importverklaring toegevoegd voor Filmclip om mee te beginnen, maar we zullen meer uitspraken toevoegen als we doorgaan.


Stap 13: De knoppen bouwen

Om te beginnen, moet u uw 2 knoppen als variabelen declareren. Deze gaan er tussen in public class Main breidt MovieClip uit en voordien openbare functie Hoofd ():

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

Om Flash te laten begrijpen wat SimpleButton is, moet u dit toevoegen met de andere importverklaring bovenaan:

 import flash.display.SimpleButton;

Nadat je dat hebt gedaan, zou je code er als volgt uit moeten zien:

 pakket import flash.display.MovieClip; import flash.display.SimpleButton; public class Main breidt MovieClip uit public var btn_back: SimpleButton; public var btn_fore: SimpleButton; public function Main (): void  // Function // Class // Package

Stap 14: stoppen op het eerste frame

De volgende stap is om ervoor te zorgen dat de clip stopt bij de eerste foto. Om dit te doen, voegt u gewoon een hou op() commando binnen de openbare functie Hoofd ()

 public function Main (): void stop (); //Functie

Stap 15: Event-luisteraars toevoegen

De volgende stap is het toevoegen van gebeurtenislisteners. Deze gaan naar binnen openbare functie Hoofd (), en onder de hou op(); commando dat je zojuist hebt toegevoegd. Je moet een gebeurtenislistener hebben voor beide knoppen; btn_back en btn_fore, dus maak er eerst een voor de terugknop:

 btn_back.addEventListener (MouseEvent.CLICK, onClickBackground);

Maak nu een andere gebeurtenislistener voor de volgende knop. U moet gewoon de naam van zowel de knop als de naam van de functie wijzigen:

 btn_fore.addEventListener (MouseEvent.CLICK, onForeBackground);

Eerst verwijs ik naar de naam van de knop btn_back. Vervolgens voeg ik de gebeurtenislistener toe via .addEventListener. Tussen haakjes, MouseEvent.CLICK vertelt het gewoon om te luisteren naar een klik op de knop. Eindelijk vertellen we het dat, wanneer op de knop wordt geklikt, deze moet bellen onClickBackground () -- we zullen deze functie vervolgens maken.

Omdat we muisgebeurtenissen hebben gebruikt, moeten we nu een importinstructie bovenaan plaatsen samen met de andere instructies om Flash inzicht te geven in wat een is. Voeg deze regel toe onder de andere invoer:

 import flash.events.MouseEvent;

Uw code zou er nu als volgt uit moeten zien:

 pakket import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var btn_back: SimpleButton; public var btn_fore: SimpleButton; public function Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground);  // Functie // Klasse // Pakket

Stap 16: Functies toevoegen

Ten slotte moeten er twee openbare functies worden gemaakt om aan de knoppen te vertellen die we hebben gemaakt wat we moeten doen. Voeg deze toe in de public class Main breidt MovieClip uit, maar onder de openbare functie Hoofd (): ongeldig.

De namen van de functies moeten overeenkomen met de namen in de gebeurtenislisteners. Dus in dit geval onClickBackground, en onClickForeground:

 public function onClickBackground (evt: MouseEvent): void gotoAndStop (2);  public function onClickForeground (evt: MouseEvent): void gotoAndStop (1); 

Binnen de functie moeten we Flash vertellen naar welk frame moet worden gegaan wanneer op de knop wordt geklikt. De eenvoudigste methode is om te gebruiken gotoAndStop (). Het cijfer tussen de haakjes geeft het framenummer aan waarnaar Flash zal gaan. Voeg eenvoudig het nummer toe 2 voor de onClickBackground functie en het nummer 1 voor de onClickForeground functie.

Een volledig voorbeeld van de code is hieronder om u te helpen de volledige ActionScript-code te begrijpen:

 pakket import flash.display.MovieClip; import flash.display.SimpleButton; import flash.events.MouseEvent; public class Main breidt MovieClip uit public var btn_back: SimpleButton; public var btn_fore: SimpleButton; public function Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground);  // Functie openbare functie onClickBackground (evt: MouseEvent): void gotoAndStop (2);  public function onClickForeground (evt: MouseEvent): void gotoAndStop (1);  // Klasse // Pakket

Het enige dat u nu hoeft te doen, is de film testen. Ga naar Besturing> Film testen> Testen (of druk op Ctrl + Enter). Het zou perfect moeten werken! Nu hoeft u alleen nog maar te publiceren en te delen op internet!

Conclusie

U hebt nu een Lytro-stijlfotoanimatie gemaakt! Dit is slechts een voorbeeld van hoe deze techniek te gebruiken om de Lytro-camerabeelden na te bootsen. Gebruik deze techniek om eigen composities en effecten voor je portfolio, website of blog te maken!

Om nog een stap verder te gaan, kunt u uw eigen effecten en overgangen tussen frames maken om uw project een persoonlijk tintje te geven.

Bedankt voor het lezen en ik hoop dat je deze zelfstudie leuk vond. Laat me weten wat je denkt! Laten we nu een aantal van uzelf bekijken. Zet een link in de reacties hieronder!