Share
En este tutorial, te mostraré cómo imitar las fotos creadas por la cámara Lytro. El resultado final te permitirá crear tus propias imágenes dinámicas e interesantes para mostrar en la web, ¡permitiendo a los espectadores modificar el punto focal! No se requiere una cámara especial: puede usar cualquier cámara que permita el enfoque manual (que incluye la mayoría de las cámaras del teléfono).
Echemos un vistazo al resultado final en el que trabajaremos:
Haz clic en una guitarra para enfocarla..
Antes de comenzar, asegúrese de tener una cámara que pueda seleccionar un punto de enfoque manualmente. En este tutorial no puede utilizar el método de bloqueo de enfoque para cambiar los puntos de enfoque. ¡Una cámara réflex digital sería mejor al realizar este tutorial, pero una cámara compacta con controles manuales decentes estará bien! También asegúrese de tener un trípode resistente.
Primero, coloca tu cámara en un trípode. Asegúrese de que sea seguro y que no se caiga ni se mueva de ninguna manera porque no queremos que la composición cambie en absoluto entre los disparos.
Asegúrese de que su sujeto permanezca estático mientras toma sus imágenes; de lo contrario, en el resultado final, sus imágenes parecerán moverse y no se verán bien en absoluto.!
Para obtener una imagen realmente efectiva, debe ajustar la cámara en un modo en el que pueda controlar la apertura. Esto le permitirá establecer una apertura amplia (número f pequeño), y desenfocar el fondo (o primer plano). Recuerde, cuanto más bajo sea el número f, mayor será el desenfoque!
El modo de prioridad de apertura (A / Av en Canon) es un gran modo que le permitirá establecer la apertura, y la cámara elegirá todos los demás ajustes para usted. Aunque tenga cuidado, este modo puede producir dos imágenes con exposiciones ligeramente diferentes, y cada una puede tener un color ligeramente diferente, así que tenga cuidado!
El modo manual (M) sería mejor porque puede marcar los ajustes de exposición y mantener las tomas consistentes. La configuración manual del balance de blancos también es una buena idea para mantener los colores de sus imágenes consistentes.
Para este tutorial, recomendaría cualquier lugar alrededor de f1 - f5.6, dependiendo de la distancia del sujeto y la cámara..
Ahora, con una apertura amplia seleccionada en su cámara (número f pequeño), mueva su marcador AF sobre el sujeto en primer plano utilizando el teclado direccional en la parte posterior de su cámara. Deja que la cámara enfoque, y luego dispara. Sin mover la cámara, seleccione un nuevo punto de enfoque en el fondo, enfoque y luego dispare como se muestra en la imagen de arriba.
Un consejo útil si tiene una cámara réflex digital es ir a modo de visualización en vivo. Aquí puede seleccionar cualquier punto de la pantalla, lo que permite una mayor flexibilidad en la elección de sus puntos de enfoque. Si tiene una cámara compacta, use su teclado de control para seleccionar su punto de enfoque.
Ahora debería tener dos imágenes que sean exactamente iguales, aparte del punto focal. Sigue disparando hasta que estés satisfecho con tu composición y profundidad de campo. Luego transfiera sus fotos a su computadora y comience a usar Flash!
Primero configure una carpeta de proyecto adecuadamente nombrada. Siempre me gusta mantener los proyectos en carpetas con nombres claros para poder encontrarlos si necesito mirar hacia atrás en lo que he hecho en una fecha posterior. Aquí mantendrás tus imágenes originales, imágenes redimensionadas y tus archivos Flash / ActionScript..
Para que las imágenes sean seguras para la web, necesitamos cambiar su tamaño. Abra su editor de imágenes favorito y simplemente cambie el tamaño de sus fotos a un tamaño adecuado que considere adecuado. Aquí, he cambiado el tamaño de ambos a 600x400px, pero puedes usar el tamaño que desees y asegurarte de que la casilla "Restringir proporciones" esté marcada.
A continuación, guarde las imágenes como un JPEG de alta calidad. Esto es importante porque Flash comprimirá todo el archivo más adelante, por lo que perder calidad de imagen en esta etapa no tiene sentido.
Inicie Flash y abra un nuevo documento ActionScript 3.0. Haga clic en el botón de edición debajo de la pestaña de propiedades, y cambie el tamaño de su escenario al tamaño de sus imágenes; Escogí 600x400px.
A continuación, crea dos capas en tu escenario; ¿nombre la capa inferior? ¿Fotos? ¿y la capa superior? ¿Botones? Añadir otro fotograma clave en la? Fotos? capa, pero asegúrese de que en los botones? capa, solo tienes que añadir otro marco. Ver la imagen de arriba.
Luego, importe ambas fotos a la biblioteca, así que arrástrelas y suéltelos desde la carpeta de su proyecto al panel de la biblioteca. Ahora asegúrate de tener tus dos fotos en un fotograma clave diferente.
La capa de fotos ya está completa!
Ahora, necesitamos hacer los botones en los que los usuarios harán clic para cambiar el punto focal. Para hacer esto, enmascararemos las áreas fuera de foco de ambas imágenes, las rellenaremos y luego las haremos invisibles.
Primero, seleccione el primer cuadro en los botones? capa. Use la herramienta Pluma y enmascare la forma de las áreas fuera de foco y complete la ruta. No necesitas ser demasiado preciso aquí; Solo asegúrate de obtener la forma general del objeto..
A continuación, seleccione la herramienta Bote de pintura y complete las rutas que acaba de crear. Eliminar el trazo negro alrededor de los bordes si es necesario.
A continuación, seleccione las formas y vaya a Modificar> Convertir a símbolo (F8). Asegúrese de que el tipo de símbolo sea un botón y llámelo como quiera. He nombrado mi forma 'Guitar1'.
Haga doble clic en su nuevo botón, y luego entrará en el modo de aislamiento del botón. Aquí puedes editar los estados del botón..
En este caso, queremos hacerlo invisible, así que haga clic y arrastre desde el estado 'UP', y suelte sobre el estado 'HIT'.
Luego regrese a su línea de tiempo original y su forma debe tener una máscara transparente. Felicidades Acabas de hacer un botón invisible.!
El siguiente paso es nombrar este botón. Mientras está seleccionado, en el panel derecho, debajo de la pestaña de propiedades, nombre su botón 'btn_back'.
A continuación, haga clic en el siguiente cuadro en sus botones? capa sobre la segunda imagen, por lo que la otra parte de la imagen está fuera de foco. Esto solo hace que sea más claro ver dónde enmascarar.
Ahora haz exactamente lo mismo que antes:
Ahora, nombra este nuevo botón, 'btn_fore'.
Ahora debería tener dos botones transparentes que se extienden sobre ambas imágenes como se muestra. Pueden superponerse ligeramente, pero esto no importa demasiado. La capa de botones ahora está completa!
La parte final es crear el código que hará que los botones funcionen. Este paso involucra el uso de clases de documentos, así que use este tutorial para ayudarlo a entenderlas si es nuevo para ellos, o simplemente desea una actualización..
Primero, ubique el cuadro 'Clase' en su archivo FLA debajo del panel de propiedades. Aquí, escriba Principal. Este es ahora el nombre de su clase de documento, y será el nombre de su archivo ActionScript que creará a continuación..
A continuación, vaya a Archivo> Configuración de ActionScript. Debe desmarcar la casilla que dice "Declarar automáticamente instancias de la etapa". Esto significa que ahora tiene que declarar manualmente los dos botones en el código, que es lo que queremos. (La ubicación de este cuadro de diálogo puede ser diferente en versiones anteriores de Flash, por lo que si no puede encontrarlo, use un motor de búsqueda).
Ahora es el momento de crear el archivo ActionScript que contiene todo nuestro código. Haga clic en Archivo> Nuevo> Archivo ActionScript..
Ahora guarda esto como Main.as, y asegúrese de que se mantenga dentro del mismo directorio de archivos que el archivo FLA. Ahora, el archivo FLA y ActionScript están vinculados!
Primero, usa este pedazo de código como tu base:
paquete import flash.display.MovieClip; public class Main extiende MovieClip public function Main (): void // Function // Class // Package
He incluido una declaración de importación para Clip de película para empezar, pero iremos agregando más declaraciones a medida que avancemos.
Para empezar, necesitas declarar tus 2 botones como variables. Estos van entre Clase pública Principal extiende MovieClip y antes Función pública principal ():
public var btn_back: SimpleButton; public var btn_fore: SimpleButton;
Para que Flash entienda que SimpleButton Es decir, debe agregar esto con la otra declaración de importación en la parte superior:
importar flash.display.SimpleButton;
Después de que hayas hecho eso, tu código debería verse así:
paquete import flash.display.MovieClip; importar flash.display.SimpleButton; La clase pública Main extiende MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; función pública Main (): void // Function // Class // Package
El siguiente paso es asegurarse de que el clip se detenga en la primera foto. Para hacer esto, simplemente agregue un detener() comando dentro del Función pública principal ()
función pública Main (): void stop (); //Función
El siguiente paso es agregar oyentes de eventos. Estos van adentro Función pública principal (), y debajo de la detener(); comando que acaba de agregar. Debe tener un detector de eventos para ambos botones; btn_back y btn_fore, así que primero crea uno para el botón Atrás:
btn_back.addEventListener (MouseEvent.CLICK, onClickBackground);
Ahora crea otro detector de eventos para el siguiente botón. Necesita simplemente cambiar el nombre del botón y el nombre de la función:
btn_fore.addEventListener (MouseEvent.CLICK, onForeBackground);
Primero, estoy haciendo referencia al nombre del botón btn_back. Entonces estoy agregando el oyente del evento a través de .addEventListener. Entre paréntesis, MouseEvent.CLICK es simplemente decirle que escuche un clic en el botón. Finalmente le decimos que, cuando se hace clic en el botón, debe llamar onClickBackground () -- Vamos a crear esta función a continuación.
Ahora, debido a que hemos utilizado eventos de mouse, debemos colocar una declaración de importación en la parte superior junto con las otras declaraciones para que Flash entienda lo que es. Agregue esta línea debajo de las otras importaciones:
import flash.events.MouseEvent;
Tu código ahora debería verse así:
paquete import flash.display.MovieClip; importar flash.display.SimpleButton; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; función pública Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); // Función // Clase // Paquete
Finalmente, se deben crear dos funciones públicas para indicar a los botones que hicimos qué hacer. Añadir estos dentro de la Clase pública Principal extiende MovieClip, pero debajo de la función pública principal (): vacío.
Los nombres de las funciones deben coincidir con los nombres en los detectores de eventos. Así que en este caso onClickBackground, y onClickForeground:
función pública onClickBackground (evt: MouseEvent): void gotoAndStop (2); public function onClickForeground (evt: MouseEvent): void gotoAndStop (1);
Dentro de la función, debemos indicar a Flash a qué fotograma ir cuando se hace clic en el botón. El método más simple es usar gotoAndStop (). El número dentro de los corchetes indica el número de cuadro al que Flash irá. Simplemente añada el número 2 Para el onClickBackground función, y el número 1 Para el onClickForeground función.
A continuación se muestra un ejemplo completo del código para ayudarlo a comprender el código completo de ActionScript:
paquete import flash.display.MovieClip; importar flash.display.SimpleButton; import flash.events.MouseEvent; La clase pública Main extiende MovieClip public var btn_back: SimpleButton; public var btn_fore: SimpleButton; función pública Main (): void stop (); btn_back.addEventListener (MouseEvent.CLICK, onClickBackground); btn_fore.addEventListener (MouseEvent.CLICK, onClickForeground); // Función public function onClickBackground (evt: MouseEvent): void gotoAndStop (2); public function onClickForeground (evt: MouseEvent): void gotoAndStop (1); // Clase // Paquete
Lo único que queda por hacer ahora es probar la película, así que vaya a Control> Probar película> Probar (o presione Ctrl + Enter). ¡Debería estar funcionando perfectamente! Ahora todo lo que queda por hacer es publicarlo y compartirlo en la web.!
¡Ahora has hecho una animación de fotos estilo Lytro! Este es solo un ejemplo de cómo usar esta técnica para imitar las imágenes de la cámara Lytro. Utilice esta técnica para crear composiciones y efectos propios para su cartera, sitio web o blog!
Para ir un paso más allá, puede crear sus propios efectos y transiciones entre marcos para darle un toque personal a su proyecto..
Gracias por leer, y espero que hayan disfrutado este tutorial. ¡Déjame saber lo que piensas! Ahora veamos algunos de los tuyos. Pop un enlace en los comentarios a continuación!
Accentsconagua