() translation by (you can also view the original English article)
Hype 3 de Tumult, es una aplicación OS X para crear animaciones en HTML5. Si alguna vez uso las iconicas herramientas de línea de tiempo de Flash, entonces la interfaz de Hype 3 le parecerá familiar. En este tutorial, conseguiremos familiarizarnos rápidamente con la aplicación, después haremos una animación básica con algunos elementos de diseño usando las herramientas disponibles.
$$’s
Hype 3, al momento de escribir este artículo cuesta $49.99, la aplicación estándar, pero si necesita características más avanzadas, Hype 3 Professional está disponible por $99.99. Usted puede descargar una versión gratuita por 14 días para el siguiente propósito.
Y, lo siento, pero esto es sólo para Mac.
Interfaz
Como usuario Mac, estará perfectamente en el hora con el diseño de la aplicación. Estamos usando la versión estándar de Hype 3 (la versión pro tiene una interfaz sombría y está más completa), así que vamos a repasar las partes principales:
- Esta es la barra de herramientas de la parte superior, donde encontrará algunos controles básicos y menús breves.
- La barra lateral al lado izquierdo puede se puede cambiar (es decir, puede estar visible o no) y mostrar las escenas.
- Como habría de suponer, el área central está reservada para el escenario o el lienzo.
- El inspector al lado derecho también se puede intercambiar, tiene una interfaz marcada y está completamente empacada de herramientas y opciones.
- Finalmente, quizás lo más importante, la línea de tiempo y las herramientas de los fotogramas que se pueden encontrar al pie de la aplicación.
1. Documento Nuevo
Cuando abra la aplicación se le dará un documento en blanco por defecto. Comience averiguando cuán grande sería su lienzo.
Debajo de la pestaña Scene verá algunas opciones para configurar la escena actual. He optado por darle al lienzo unas dimensiones de 600x400px. Con eso listo, haga clic en el selector de color debajo de Backgorund y cambie ese color a #424242.
Nota: solamente trabajaremos con una escena y una línea de tiempo en este tutorial, pero es posible tener múltiples escenas, con numerosas líneas de tiempo y puede intercambiar entre todas ellas.
2. Algunos Objetos
Vamos a realizar una animación con uno de los Materiales de Diseño de Google; Botones Flotantes de Acciones, así que diríjase hacia el menú Elements y seleccione Ellipse:
Use su cursor del mouse para dibujar en el escenario manteniendo presionada la tecla Shift para limitar las proporciones a un círculo (esto es muy parecido a cualquier aplicación gráfica). De acuerdo con las normas de los Materiales de Diseño, el botón flotante de acción más grande debería ser de 56px de ancho con un icono de 24 px. Haga sus proporciones a estos números:
Consejo: vaya a View > Show Ruler, para hacer que aparezcan las reglas al lado del escenario. Arrastre algunas guías de las reglas dentro del escenario, para ayudarle a ubicar los objetos.
3. Color de Botón
Con la elipse seleccionada, debajo de la pestaña Element, usted puede cambiar su color de fondo (aquí he usado #00E676 de la paleta de color de los Materiales de Diseño) y quite su borde.
Además, debajo de la pestaña Element, verá que puede añadir una sombra para el círculo. Le he dado al nuestro un desenfoque de 5px y, también, lo he movido 5px sobre el eje Y. Tiene el color #2E2E2E, aunque creo que no será capaz de seleccionar ningún modo de mezcla. Ahora se está pareciendo mucho al “Material de Diseño”, y creo que usted estará de acuerdo:
4. +
Para añadir el símbolo "mas" al botón tenemos algunas opciones abiertas para nosotros. Podríamos usar las herramientas de dibujo para hacerlo por nuestra cuenta, aunque las herramientas están limitadas (especialmente si usted ha usado las herramientas de dibujo a mano alzada de Adobe Illustrator o Sketch). Pero, en lugar de eso, vamos a agarrar el icono SVG desde Google.
Seleccione "add" icono, elija la variante de color blanco, luego descarguelo.
Ahora puede jalar el archivo SVG directamente dentro de su documento, en este punto será añadido como una capa de imagen.
Con el icono SVG seleccionado, debajo de la pestaña Metrics, asegúrese que el tamaño es el correcto para su animación:
Limitaciones de los archivos SVG
Nuestro icono SVG no ha sido importado como un vector que se pueda editar. En lugar de eso, si usted examina la pestaña Element, verá que es un recurso separad y está siendo aplicado como una imagen de fondo. Esto significa que no podemos cambiar su color o cualquier otra cosa como eso (una lástima).
También, este método puede causar problemas en algunos navegadores, creo que Hype 3 le avisará de eso:
5. Agrupe
Como con muchas aplicaciones gráficas, ahora puede seleccionar las dos capas que hemos añadido a nuestra línea de tiempo, luego diríjase a Arrange > Group, para organizarlos un poco mejor. Haga doble-clic al nombre de la capa del grupo para cambiar el nombre:
6. ¡Comencemos hacer la animación!
Hype 3 ofrece un par de métodos para animar los objetos y sus propiedades. Comenzaremos con la más sencilla, así que continúe y presione el enorme botón rojo Record:
Ahora, arrastre el cabezal en toda la línea de tiempo, deteniéndose en el fotograma 24.
Nota: verá los segundos marcados junto a la línea de tiempo, cada uno está comprendido en 30 fotogramas.
Con el cabezal en el fotograma 24, seleccione el icono “add”, diríjase a la pestaña Metrics en la barra lateral derecha, luego encuentre la opción Rotation y altere el valor de Z a 45°. Esto rotará el icono, para que ahora luzca como un cruce (x).
Ahora puede volver hacer clic sobre el botón Record para terminar el proceso.
Fotogramas
Hype 3 automáticamente habrá añadido una propiedad de fotograma al inicio de la línea de tiempo (este es el comienzo del estado) y uno al final de la animación (el final del estado). En este caso, solamente hemos alterado la propiedad Rotation Angle (Z), así que ahí es donde aparecen los fotogramas.
Si usted presiona el botón reproducir, o arrastra el cabezal junto a la línea de tiempo, verá el icono animado suavemente entre las dos propiedades de los estados.
Escala de la Línea de Tiempo
Para hacer más fácil de visualizar lo que está pasando en la línea de tiempo, haga la escala de la línea de tiempo con un valor más alto usando el deslizador que está en la parte superior derecha:
Easing
Con nuestra propiedad de animación seleccionada (haga clic sobre ella) podemos alterar el tipo de easing usado en la animación. Por defecto será ease-in-out, lo que significa que la animación comenzará lentamente, acelerará y luego disminuirá de nuevo hasta el final.
7. Otro Objeto
¿Qué más deberíamos animar? Hagamos como si nuestro botón está haciendo algo, revelaremos una carta cuando el botón parezca haber sido presionado.
Use el menú Elements para añadir un Rectangle al escenario. Nombre la capa “Carta”. Dele un color de fondo (#757575) y coloque la capa debajo del botón del grupo. Posicione el botón lejos del escenario, hacia el fondo y reduzca su Opacity a 0 (esta vez, vamos a animar un par de propiedades).
Ahora, en lugar de presionar el botón Record, esta vez vamos a hacer las cosas de forma manual. Con el cabezal al comienzo de la animación, y la capa Carta seleccionada, haga clic en Add Keyframe para añadir un fotograma en la propiedad Opacity de la capa. Luego, mueva el cabezal hasta el final de la animación y añada otro fotograma.
Aunque en el fotograma final, en la pestaña Element, de al rectángulo una Opacity de 100%. Ahora tendrá una animación nítida entre los dos estados.
8. Otra Propiedad
Habiendo animado la opacidad del rectángulo, ahora animemos su posición (queremos deslizarlo hacia arriba). Esto se logra con la propiedad Origin (Arriba), así que repita el proceso que acabamos de hacer, añadiendo un fotograma al comienzo de la animación, uno al final, y luego alterar la posición del rectángulo en el fotograma final.
Debería de ver una trayectoria, indicando el movimiento tomado por el rectángulo.
9. Sincronización
En este momento, todo ocurre al mismo tiempo, tan pronto como la escena inicia, pero podemos cambiar eso. Vamos hacerlo para que haya un breve retraso, luego el icono rote rápidamente, y entonces la carta se deslice de manera gradual.
Arrastre las barras de animación en la parte de arriba de la línea de tiempo, para que al mismo tiempo aparezcan varios elementos de forma diferente:
Nota: no olvide que puede alterar la opción easing para dar diferentes efectos. Revise las normas de Google sobre la Animación Auténtica para más inspiración.
10. Exportar
Una vez que su animación está completa, diríjase hacia File > Export as HTML5 o File > Export as Movie. Las opciones disponibles son bastante evidentes, elija para la salida un directorio con HTML junto con recursos JavaScript y SVG, GIF animado, MP4, etc.
Tenga en cuenta que cuando exporta como una película, cualquier iteración que haya realizado (aunque en este caso no lo hicimos) podría arruinar la secuencia.
11. Su turno
¡Es hora de una asignación! Siguiendo este tutorial usted se ha armado con las habilidades para llevar está animación más largo. Descargue el recurso y encontrará los archivos iniciales que usted necesita para llevarlo a éste punto y luego:
- Añada un destello al botón, un círculo blanco que se desvanezca con rapidez al efecto clic.
- Cambie el color del botón a rojo cuando éste haya sido presionado.
- ¡Complete la animación tomando todo y regresandolo a su estado original!
Conclusión
Las líneas de tiempo son definitivamente útiles para visualizar la animación que usted elabore. Más allá de lo que hemos hecho aquí, Hype 3 también permite todo tipo de interacciones, evento y controles de línea de tiempo (pero eso es para otro tutorial completo). ¡Diviértase jugando con estas herramientas, consiga construir, y mostrarnos lo que se le ocurrirá en la sección de comentarios!
