Share
Hype 3, de Tumult, es una aplicación de OS X para crear animaciones HTML5. Si alguna vez usó las icónicas herramientas de la línea de tiempo de Flash, la interfaz de Hype 3 le parecerá muy familiar. En este tutorial nos familiarizaremos rápidamente con la aplicación, luego haremos una animación básica de Diseño de materiales utilizando las herramientas disponibles.
Hype 3, al momento de escribir, cuesta $ 49.99 por la aplicación estándar o, si necesita funciones más avanzadas, Hype 3 Professional está disponible por $ 99.99. Puede descargar una versión de prueba de 14 días para los siguientes fines.
Y, lo siento, esto es solo Mac.
Como usuario de Mac, estará perfectamente en casa con el diseño de la aplicación. Estamos usando la edición estándar de Hype 3 (la versión pro tiene una UI más oscura y completa), así que repasemos las partes principales:
Interfaz de Hype 3Cuando abra la aplicación, se le dará un documento en blanco de manera predeterminada. Comience por averiguar qué tan grande le gustaría a su lienzo.
La pestaña "Escena"Bajo la Escena pestaña verás algunas opciones para establecer la escena actual. He optado por dar las dimensiones del lienzo de 600x400px. Una vez hecho esto, haga clic en el selector de color debajo de Fondo y cambiar eso a # 424242.
Nota: solo trabajaremos con una escena y una línea de tiempo en este tutorial, pero es posible tener varias escenas, con numerosas líneas de tiempo, y cambiar entre ellas.
Vamos a animar uno de los botones de acción flotante de Google Material Design, así que dirígete a la Elementos icono de menú y seleccione la Elipse:
Usa el cursor del ratón para dibujar en el escenario. cambio restringirá las proporciones a un círculo (como cualquier aplicación de gráficos). De acuerdo con las directrices de Material Design, el gran botón de acción flotante debe tener un ancho de 56px, con un icono de 24px. Haz tuyo proporcional a estos números:
Propina: ir Ver> Mostrar regla Para hacer que los gobernantes aparezcan junto a tu escenario. Arrastre algunas guías, desde las reglas hasta el escenario, para ayudarlo a colocar objetos.
Con la elipse seleccionada, bajo la Elemento pestaña, puede cambiar su color de fondo (he usado # 00E676 de la paleta de colores de Material Design) y quitar su borde.
También bajo el Elemento pestaña, verás que puedes agregar una sombra al círculo. Le he dado a la nuestra un desenfoque de 5px, y lo moví 5px en el eje Y. Tiene un color de # 2E2E2E, aunque no podrá seleccionar ningún modo de mezcla. Ahora se ve muy "Diseño Material", creo que estarás de acuerdo:
Para agregar un símbolo "más" al botón, tenemos algunas opciones abiertas para nosotros. Podríamos usar las herramientas de dibujo para hacerlo nosotros mismos, pero las herramientas son limitadas (especialmente si está acostumbrado a la libertad de Adobe Illustrator o Sketch). En su lugar, vamos a agarrar el icono SVG de Google.
Seleccione el icono "agregar", elija la variante blanca y luego descárguela.
Ahora puede arrastrar el archivo SVG directamente a su documento, momento en el que se agregará como una capa de imagen.
Con el icono SVG seleccionado, debajo de Métrica pestaña, asegúrate de que sea del tamaño correcto para tu animación:
Nuestro icono SVG no se ha importado como un vector editable. En cambio, si nos fijamos en el Elementos pestaña, verás que es un recurso independiente y se está aplicando como imagen de fondo. Esto significa que no podemos cambiar su color, o algo así (vergüenza).
Además, este enfoque puede causar problemas en algunos navegadores, aunque Hype 3 le avisará de eso:
Al igual que con muchas aplicaciones de gráficos, ahora puede seleccionar las dos capas que hemos agregado a nuestra línea de tiempo y luego ir a Organizar> Grupo Para organizarlos un poco mejor. Haga doble clic en el nombre de la capa de grupo para cambiar su nombre:
Hype 3 proporciona un par de métodos para animar objetos y sus propiedades. Comenzaremos con lo más directo, así que adelante, golpea el rojo grande. Grabar botón:
Ahora, arrastre el cabeza de juego a través de la línea de tiempo, deteniéndose en el fotograma 24.
Nota: verá los segundos marcados a lo largo de la línea de tiempo, cada uno con 30 cuadros.
Con la cabeza lectora ahora en el fotograma 24, seleccione el icono "agregar", vaya a Métrica pestaña en la barra lateral derecha, luego encuentra la Rotación sección y alterar la Z valor a 45 °. Esto girará el icono, de modo que ahora se vea como una cruz (×).
Ahora puede hacer clic en el Grabar Botón de nuevo, para finalizar el proceso..
Hype 3 agregará automáticamente un fotograma clave de propiedad al comienzo de la línea de tiempo (este es el estado inicial) y uno al final de la animación (el estado final). En este caso, solo hemos alterado la Ángulo de rotación (Z) propiedad, así que ahí es donde aparecen los fotogramas clave.
Si presiona reproducir o arrastra el cursor de reproducción a lo largo de la línea de tiempo, verá el ícono animado suavemente entre los dos estados de propiedad.
Para facilitar la visualización de lo que está sucediendo en la línea de tiempo, aumente el valor de escala de la línea de tiempo con el control deslizante en la parte superior derecha:
Con nuestra propiedad de animación seleccionada (haga clic en ella) podemos alterar el tipo de suavizado utilizado en la animación. Por defecto será facilidad de entrada, lo que significa que la animación comenzará lentamente, acelerará y luego reducirá la velocidad hacia el final.
¿Qué más debemos animar? Hagamos que parezca que nuestro botón está haciendo algo: revelaremos una tarjeta cuando el botón parezca que se ha hecho clic..
Utilizar el Elementos menú para agregar un Rectángulo al escenario. Nombra la capa "Tarjeta". Asígnele un color de fondo (# 757575) y coloque la capa debajo del grupo de botones. Colóquelo fuera del escenario, al final, y reduzca su opacidad a 0 (esta vez vamos a animar un par de propiedades).
Ahora, en lugar de golpear Grabar, Esta vez vamos a hacer las cosas manualmente. Con la cabeza lectora al principio de la animación, y la capa de Tarjeta seleccionada, haga clic en Añadir fotograma clave sobre el Opacidad capa de propiedad. A continuación, mueva la cabeza lectora hasta el final de la animación y añada otro fotograma clave.
Mientras que en el fotograma clave final, en el Elemento pestaña, dale al rectángulo una opacidad del 100%. Ahora tendrás una animación ordenada entre los dos estados.
Habiendo animado la opacidad del rectángulo, ahora anime su posición (queremos que se deslice hacia arriba). Esto se logra con la propiedad Origen (Top), así que repita el proceso que acabamos de hacer, agregando un fotograma clave al comienzo de la animación, uno al final, y luego modificando la posición del rectángulo en el fotograma clave final..
Debería ver un trazado trazado, que indica el movimiento tomado por el rectángulo:
En este momento, todo sucede al mismo tiempo, tan pronto como comienza la escena, pero podemos cambiar eso. Hagámoslo para que haya una breve demora, luego el icono gira rápidamente, luego la tarjeta se desliza gradualmente.
Arrastre las barras de animación en la línea de tiempo superior, para que cronometren los distintos elementos de manera diferente:
Nota: no olvides que puedes alterar la relajación para dar diferentes efectos. Eche un vistazo a las pautas de Google sobre Authentic Motion para obtener más inspiración..
Una vez que tu animación esté completa, dirígete a Archivo> Exportar como HTML5 o Archivo> Exportar como película. Las opciones disponibles son bastante autoexplicativas; elija generar un directorio con HTML junto con los recursos de JavaScript y SVG, GIF animado, MP4, etc..
Tenga en cuenta que al exportar como una película, cualquier interacción que haya agregado (no lo hicimos en este caso) podría arruinar la secuencia..
Tiempo para una tarea! Al seguir este tutorial, has estado armado con las habilidades para llevar esta animación mucho más lejos. Descargue la fuente y encontrará los archivos de inicio que necesita para llevarlo a este punto, luego:
Las líneas de tiempo son muy útiles para visualizar la animación a medida que construyes. Más allá de lo que hemos hecho aquí, Hype 3 también permite todo tipo de interacción, eventos y control de la línea de tiempo (pero ese es otro tutorial completo). Diviértase jugando con estas herramientas, construya y muestre lo que ha encontrado en los comentarios.!
Accentsconagua