Share
Modelar una aplicación prometedora puede ser una tarea muy difícil si no está familiarizado con el software y las técnicas profesionales de animación. Afortunadamente, Keynote ofrece un kit de herramientas de animación muy efectivo que no es demasiado difícil de usar. En este tutorial demostraré cómo usar Keynote para crear prototipos de animaciones de IU de iOS; Vamos a construir una demo de aplicación basada en mapas.
Nota: Keynote versión 6.6.2 se utilizó en la realización de este tutorial.
Primero, querrá encontrar una maqueta de iPhone para mostrar su demostración de la aplicación. La mayoría de las maquetas de iPhone de calidad son objetos de forma en formato PSD, por lo que son escalables a cualquier tamaño que se necesite. Los archivos PSD sin procesar no son compatibles con Keynote, sin embargo, se necesitarán algunas modificaciones al PSD del iPhone para que la demostración funcione correctamente..
Dependiendo de la PSD, posiblemente tendrá que rasterizar y eliminar las capas necesarias para que solo quede un "marco" de iPhone. Borra la imagen de fondo para que se vuelva transparente. Guarda el archivo como PNG.
La maqueta del iPhone debería tener este aspecto cuando esté lista para la demostración. Aparte del iPhone, los únicos otros recursos que necesitará para tener a mano son mapas, conjuntos de iconos y otras imágenes que usó en sus maquetas de aplicaciones. El resto de los elementos de la interfaz de usuario se volverán a crear en Keynote para garantizar que las animaciones funcionen correctamente..
Abre Keynote. En la parte superior de la Elige un tema ventana, haga clic en Amplio. Esto creará una presentación de diapositivas con una relación de aspecto de pantalla ancha, lo que nos dará un producto final que podremos cargar felizmente en Youtube en HD. Luego, seleccione la Blanco modelo.
Selecciona el Blanco tema. En el Formato panel en el lado derecho de la pantalla, haga clic en Cambiar maestro y seleccione Blanco.
Selecciona el Blanco diseño de la Cambiar maestro desplegable. Ahora, comienza a crear la diapositiva base. Inserte la imagen del iPhone arrastrando el archivo PNG a su Keynote o haciendo clic en Insertar> Elegir ... y encontrando el archivo en la ventana del Finder que aparece. Centra el iPhone en la diapositiva..
A continuación, inserte una imagen del mapa en la diapositiva. Botón derecho del ratón en la imagen y seleccione Mandado hacia atras. Esto creará la ilusión de una imagen dentro de la pantalla del iPhone..
Botón derecho del ratón en el mapa y seleccione Mandado hacia atras Para crear la ilusión de una imagen dentro de la pantalla.. También querrá agregar cualquier elemento de la interfaz de usuario que aparezca en blanco en la aplicación. Para mis propósitos, agregué la barra de búsqueda con una consulta de búsqueda y una rueda de carga, que creé usando las herramientas de forma y texto de Keynote..
La diapositiva base completa. Después de crear la diapositiva base, puede comenzar el marco de la animación en la presentación de diapositivas. Lo más importante que se debe tener en cuenta en esta etapa es abordar las animaciones principales antes de tratar con las menores, orientadas a los detalles..
Para crear la búsqueda y el efecto panorámico, duplique la diapositiva base por clic derecho en su miniatura en la barra lateral y seleccionando Duplicar.
Duplicar la base de deslizamiento. En la nueva diapositiva duplicada, elimine la rueda de carga seleccionándola y presionando Borrar llave. A continuación, cambie la foto del mapa para que el destino que está buscando aparezca en la mitad superior de la pantalla del iPhone..
Inserte la imagen del pin en Keynote y colóquela sobre el destino preferido. En el Formato menú, añadir un Contacto sombra. Ajusta la sombra a tu gusto. Entonces, Botón derecho del ratón en el pin y seleccione Mandado hacia atras. Haz lo mismo para la imagen del mapa..
Añade una sombra de contacto al pin.. Duplicar esta diapositiva, y muévala hasta la segunda posición de la diapositiva. Tome el pin y muévalo fuera de la pantalla, manteniéndolo directamente sobre su ubicación original. Esto se puede hacer más fácilmente presionando y sosteniendo la tecla Tecla de flecha arriba, o alterando el Posición Y en el Organizar panel de la Formato menú.
Mueva el pin fuera de la pantalla, manteniéndolo directamente sobre su posición deseada. Ahora que todo está en su lugar, puedes comenzar a animar. La herramienta más importante que se utilizará para hacer esto es la Movimiento mágico Animación, que crea transiciones suaves para un elemento que aparece en varias diapositivas. Magic Move creará los efectos de desplazamiento suave y de pin-drop que buscamos.
Vuelva a la diapositiva 1 y aplique Magic Move abriendo el Animar menú y clic Añadir efecto> Movimiento mágico. garrapata Desvanecer objetos inigualables. Seleccionar Emparejar por objeto. Conjunto Aceleración a Facilidad de entrada y salida. Conjunto Iniciar la transición a Automáticamente con un Retraso 0s. Duración es a su discreción-lo puse a 1.50s para la sartén.
Configurar animaciones de Magic Move. Repita esto en la diapositiva 2, pero establezca la duración más corta que la diapositiva anterior. Puse este en 0.60s.
Propina: Prueba las duraciones haciendo clic en el Avance Botón para ayudar a discernir la duración deseada de la animación..
Con Magic Move resuelto para esta parte del tutorial, vuelva a la Diapositiva 1 para crear las animaciones de búsqueda. Seleccione el texto en la diapositiva. En el Empotrar panel de la Animar menú, haga clic en Añadir un efecto. Seleccionar Máquina de escribir desde el menú desplegable, y establecer Duración y Dirección a 0.60s y Adelante.
Agrega un Empotrar animación al texto. La rueda de carga requiere un poco más de animación para representar con precisión una que se encuentra en una aplicación. Primero, agrega un Empotrar animación. Seleccionar Disolver desde el menú desplegable, y establecer su Duración a una velocidad rápida, algo en la línea de 0.20s.
Agrega un Empotrar Animación a la rueda de carga.. A continuación, abra la Acción panel y Añadir un efecto. Seleccionar Girar desde el menú desplegable. Seleccionar Facilidad de ambos desde el Aceleración Menú desplegable. lo puse Duración a 1.00s, y Ángulo y rotación a un Ángulo 359˚ y 0 rotaciones, Pero esto se puede alterar a preferencia personal..
Añadir una acción a la rueda de carga.. Finalmente, abre el Construir panel y Añadir un efecto. Seleccionar Disolver desde el menú desplegable, y establecer su Duración a una velocidad rápida, algo en la línea de 0.30s.
Agrega un Construir Animación a la rueda de carga.. Una vez que se agregan las animaciones, haga clic en Orden de construcción botón en la parte inferior de la Animar menú. Esto mostrará el orden en que se reproducirán todas las animaciones de la diapositiva actual y se puede utilizar para automatizar la diapositiva..
Haga clic en la primera animación, y seleccione Despues de la transicion desde el comienzo Menú desplegable. Ajuste el retardo a su criterio: esto hará que la animación se inicie automáticamente después de que haya transcurrido cierto tiempo..
Seleccionando Despues de la transicion iniciará las animaciones automáticamente al presentar la Keynote. Haga clic en la segunda animación, y seleccione Con Build 1 desde el comienzo Menú desplegable. Esto hará que la rueda de carga se incremente mientras se reproduce la animación de la máquina de escribir. Puede optar por agregar un ligero retraso ajustando el tiempo en el Retrasar campo.
Selecciona el Empotrar animación para comenzar Con Build 1. Para la tercera animación, seleccione Después de construir 2 desde el comienzo menú desplegable, y establecer Retraso a 0s. Repetir para la cuarta animación..
Seleccionar Después de construir X Desde el menú desplegable para las animaciones sucesivas.. Con eso, se completa la búsqueda y el efecto panorámico..
El efecto del panel de información es un poco más difícil de crear, pero pule bien la demostración. En la tercera diapositiva de Keynote, use la forma y texto Herramientas para construir un panel de información con el ancho de la pantalla del iPhone. No agregue fotos todavía, pero asegúrese de dejarles un espacio.. Control-clic a seleccionar todos los elementos, botón derecho del ratón y seleccione Grupo Combinar los elementos. Esto hace que el panel de información sea mucho más fácil de manipular en animación..
Grupo los elementos del panel de información. A continuación, inserte tres o cuatro fotos que desee mostrar en su demostración. Cambie su tamaño para que se ajuste a la altura en el espacio que dejó en el panel de información. No se preocupe si no todos encajan en el panel: aquí es donde la animación vendrá un poco..
Inserte las imágenes que desea mostrar. Control-clic a seleccionar El panel de información y las fotos y grupo ellos. Mueva el grupo para que los bordes del panel se alineen con la pantalla. En esta diapositiva, mantenga el panel de información justo debajo de la pantalla del iPhone para que no se vea. Entonces, botón derecho del ratón en el iPhone y seleccione Traer al frente. Esto dará la apariencia del panel de información que se muestra en la pantalla..
Alinee el panel con los bordes del teléfono.. Duplicar la diapositiva, y desplace el panel hacia arriba en la diapositiva para que solo aparezca la información básica sobre la ubicación.
Desplace el panel para que solo la información básica de ubicación se vea desde la parte inferior de la pantalla. Entonces, duplicar deslice, y mueva el panel aún más alto, para que todo el panel aparezca dentro de la pantalla del iPhone.
Crea un duplicado de esta diapositiva. Entonces, botón derecho del ratón en el panel y seleccione Desagrupar. Esto debería desagrupar las fotos mientras mantiene el resto del panel intacto. No mueva ninguno de los elementos de la diapositiva..
Desagrupar Las fotos del panel de información.. Otra vez, duplicar la diapositiva, luego cambie las fotos para que la última foto de la línea finalmente aparezca en la pantalla. Esta es la última parte del marco que debe hacerse antes de que pueda comenzar a animar.
Mueve las fotos a la izquierda para que aparezca la última en la pantalla.. Por suerte, crear la animación para este efecto es bastante simple, ya que se basa únicamente en Movimiento mágico.
Vuelva a la diapositiva 3 y seleccione Añadir un efecto> Movimiento mágico desde el Animar menú. Asegurarse Desvanecer objetos inigualables está marcado, Emparejar por objeto, Aceleración se establece en Facilidad de entrada y salida de salida, y la transición comienza Automáticamente con un Retraso de 0s. Como el resto de las animaciones., Duración es a su discreción-lo puse a 1.50s para el vistazo inicial del panel de información.
Añadir Movimiento mágico animaciones. Añadir Movimiento mágico animaciones a las diapositivas 4 y 6, manteniendo todo igual excepto para Duración, Que se puede modificar a tu gusto. Puse el mio en 2.00s y 1.00s respectivamente.
La diapositiva 5 no debe contener animación, pero asegúrese de asegurarse Iniciar la transición se establece en Automáticamente con un Retraso de 0s para que la demo funcione sin problemas La diapositiva 7 no requiere animación, ya que es la última diapositiva de Keynote.
Conjunto Iniciar la transición a Automáticamente con un Retraso de 0s. Y listo, está el efecto del panel de información, completado.
Una vez que todo el contenido está en su lugar y todo está animado como debería, es hora de limpiar.
La forma más sencilla de hacerlo es crear un fondo para el video. Para ello, crea cuatro rectángulos usando el Forma herramienta que enmarca el iPhone pero no se superpone con la pantalla del iPhone. Usa las herramientas en el Formato Panel para hacer que cada una de las cajas parezca idéntica una a la otra..
Crea un fondo enmarcando el iPhone. Propina: Un relleno de color que complemente los colores reflejados en su aplicación funciona mejor para el fondo. Los degradados y los rellenos de imagen tienden a parecer desordenados e inconsistentes. Evita usar sombras también.
Seleccione cada una de las casillas Control-clic. Botón derecho del ratón en una de las casillas seleccionadas y haga clic Grupo para crear una forma. Luego, haz clic en la imagen del iPhone para seleccionarla., botón derecho del ratón, y haga clic Traer al frente Para crear la imagen de un fondo detrás del iPhone.. Dupdo la forma del fondo y pegar en cada diapositiva Asegúrate de llevar el iPhone al frente en cada diapositiva para completar el efecto.
El fondo añade toques finales a la demo.. Todo lo que queda por hacer es exportar la presentación de diapositivas como un video. Para ello, haga clic en Archivo> Exportar a> QuickTime.
Para exportar el video, seleccione Archivo> Exportar a> Quicktime. Conjunto Reproducción a Grabación de diapositivas. Formato Determina la calidad del video, que se puede configurar a su preferencia. Una vez que haya configurado estas opciones a su gusto, haga clic en Siguiente para exportar tu video.
Configurar los ajustes de exportación.. Todo el trabajo en Keynote ahora está completo. La grabación se puede utilizar como está o editarse en otras aplicaciones, como Final Cut o iMovie, si desea agregar audio u otros elementos de video.
En este tutorial, le indiqué cómo hacer una demostración de las animaciones de mapas para una aplicación de iOS en Keynote. Con la animación Magic Move de Keynote, puede crear animaciones suaves que modelan los efectos del panel de información y búsqueda y paneo que se pueden encontrar en una aplicación iOS basada en mapas.
Si tiene más preguntas o inquietudes, o si desea ver qué otros tipos de animaciones se pueden modelar en Keynote, no dude en dejar un comentario abajo.!
Accentsconagua