Mientras que muchos pueden discutir sobre la relevancia de los medios enriquecidos en los libros electrónicos, es indudable que las animaciones de cualquier tipo son más atractivas para los lectores que las imágenes estáticas. La idea de crear animaciones puede ser intimidante para los autores. No se trata de los resultados, se trata de lo que se requiere para que suceda. Puede ponerse feo. O peor: caro.
En nuestro viaje de desarrollo de libros electrónicos interactivos para otros, nos hemos dado cuenta del poder de las animaciones y lo hemos aprovechado en varios libros electrónicos. Una adición tan pequeña a una imagen realmente puede dar un gran impacto a su libro electrónico y hacer que se destaque del resto sin lugar a dudas.
El verdadero desafío es encontrar una manera eficiente y fácil de producir animaciones. En este artículo, tendremos algunos antecedentes sobre las tecnologías de animación en libros electrónicos, y luego veremos una serie de técnicas de animación relativamente fáciles de producir con ejemplos claros.
Tipos de animación
Para dar una introducción rápida, las animaciones se pueden crear de diferentes maneras. Pueden ser tan complejas (y llevar mucho tiempo) como las animaciones fotograma a fotograma. Es decir, dibujar una imagen separada por cada fracción de segundo. Estamos más interesados en interpolar (abreviatura de intercomunicación). Al interpolar, se especifican los estados de inicio y final de la animación, y el resto se genera automáticamente en el equipo. También puede especificar una función de relajación para usar, con el fin de aplicar algunos efectos de velocidad, como aceleración, elasticidad, rebote, etc. Aquí hay una lista completa de funciones de facilitación.
Entonces, ¿cómo se incrustan las animaciones dentro de un libro electrónico? Dado que la tecnología subyacente de un EPUB es HTML, estas son sus opciones:
- Imagen GIF animada
- Animaciones SVG
- Película Flash
- Animación CSS
- Widget de página
Esta lista no es para asustarlo, sino para explorar las posibilidades técnicas disponibles para usted. Pero simplifiquemos esta lista. Las imágenes GIF animadas requieren un software especial (por ejemplo, Photoshop) y los tamaños de archivo de animación generalmente son muy grandes. Las animaciones SVG solo admiten gráficos vectoriales y requieren un fondo de desarrollo para crear. Flash está desactualizado y no será compatible con lectores como Apple iBooks, y mucho menos con dispositivos móviles. Esto nos deja a las animaciones CSS y los widgets de página. Ambos son básicamente hermano y hermana. En lugar de aplicar animaciones CSS directamente en la página, los widgets de página aplican CSS a través de un iframe (ventana). Preferimos usar widgets de página, ya que está mejor organizado para tener toda la animación en un solo archivo.
Software de animación
En lo que respecta al software, Google Web Designer es un software sencillo y gratuito para crear animaciones. Google Web Designer se centra en la creación de banners y anuncios animados HTML5 para web y móvil. Hemos descubierto que no necesita nada más avanzado para crear animaciones rápidas.
El flujo de trabajo básico en Google Web Designer es el siguiente:
- Importe cada una de sus imágenes, que se dividen en capas separadas
- Para cada capa, especifique sus fotogramas clave y elija sus funciones de facilitación
- Exportar como un paquete zip
El archivo exportado es un widget de página listo para agregarse a su página Para obtener más información sobre cómo agregar widgets de página a su libro electrónico, consulte nuestro artículo sobre widgets de libro.
Técnicas de animación
El know-how no es suficiente para crear animaciones efectivas. Lo que cuenta es cómo lo vas a usar. Al igual que aprender a usar una estufa, no significa necesariamente que cocinará cualquier Blanquette de Veau pronto. Necesitas aprender algunas recetas primero. Así que veamos diferentes (y fáciles) recetas para aplicar animaciones.
Imagen flotante
Esta es la forma más simple de animación. Una imagen que se mueve en diferentes direcciones (también puede girar). Y aunque pensarías que no traería nada nuevo a la mesa, te equivocas. Dependiendo de lo naturales que sean los movimientos, se sorprenderá de cuánta vida puede aportar a su libro electrónico y atraer a sus lectores. Lo mejor de este tipo de animación es que se puede aplicar a cualquiera de tus imágenes actuales, sin recursos adicionales. Recomendamos que la imagen tenga un fondo blanco,para hacer que la animación se combine con el fondo (suponiendo que el fondo sea blanco). Aquí hay un ejemplo de un libro electrónico interactivo que creamos sobre aves.
Aquí hay otros ejemplos con solo un poco de rotación básica. Aplicar el tiempo correcto puede dar un efecto muy creíble.
Encontrarás este tipo de animaciones en toda la web. Por ejemplo, en este enlace encontrarás otro ejemplo de una imagen flotante que nos gustó (ve a la sección EVOCANDO RECUERDOS para ver los sapos astronautas flotantes). Para agregar un poco de complejidad, puede tener otra imagen que esté sentada en la parte posterior, fija en su posición. Así:
Transformar imagen
Similar a esta última, pero en lugar de mover una imagen, la estás transformando. Las transformaciones admitidas en CSS3 son escala, sesgo y rotación 3D. Tendrá que ser muy selectivo en cuanto a las imágenes a las que aplica transformaciones. Una transformación incorrecta puede hacer que las cosas se vean bastante raras. Aquí hay una combinación de transformaciones de rotación en 3D y sesgo aplicadas a un pájaro en nuestro ebook interactivo.
Componentes de transición
Demos un paso más. Con este tipo de animación, la imagen se divide en sub-imágenes. Desde una pantalla en blanco, cada subimagen hace su propia entrada desde diferentes direcciones, terminando finalmente completando la imagen original. Hagas lo que hagas, esto nunca se verá mal. Definitivamente se verá bien, pero puede verse mejor. Su elección de subimágenes y sus transiciones controlan lo atractiva que será la animación para los lectores. Puede hacer un bucle de esta animación haciendo la transición de las subimágenes fuera de la pantalla.
Gráficos y tablas
Si está creando libros electrónicos con informes o estadísticas, tal vez esto le resulte útil. Probablemente estés pensando que estás a punto de ver algo extremadamente complejo. Es todo lo contrario. Con un mínimo esfuerzo y un simple conocimiento, puede animar sus gráficos con un toque de magia y hacer que sus lectores piensen que fue una tonelada de trabajo. Muchas animaciones en realidad existen de esa manera: tus ojos engañan a tu mente para que comprenda algo, donde en realidad es mucho más simple.
Así que la idea de animar gráficos y tablas es la siguiente. Importará el gráfico / gráfico como una imagen en Google Web Designer. En una capa de arriba, creará una caja blanca. Esto se utilizará para dar un efecto de enmascaramiento. Inicialmente, la caja blanca aparecerá en la parte superior del gráfico / gráfico, excepto el eje vertical horizontal &. Hará la transición de la caja blanca verticalmente hacia arriba para revelar lo que está oculto debajo. Los ojos del lector lo engañarán para que crea que las barras son lo que crece hacia arriba desde abajo, donde en realidad solo se revelan. Si desea hacer un bucle de la animación, puede hacer una transición del cuadro blanco hacia abajo para ocultar el gráfico una vez más. Con el tiempo correcto, esto solo seducirá a sus lectores. Pasemos a algunos ejemplos, ¿de acuerdo? Aquí hay un ejemplo más complejo en el que se animaron imágenes adicionales junto con la caja blanca, como la tapa de las barras.
Conclusión
En este artículo hemos tomado una idea general de cómo funcionan las animaciones en los libros electrónicos y las tecnologías detrás de ellas. Hemos visto cuatro técnicas/trucos simples que se pueden aplicar rápidamente a las imágenes de sus libros electrónicos, sin tomar demasiado tiempo de su flujo de trabajo. Todo se reduce a un poco de tiempo de configuración para invertir en tener los conceptos básicos del Diseñador Web de Google. En otro post, echaremos un vistazo más de cerca al Diseñador Web de Google y a los pequeños pasos a seguir allí, para crear tu primera animación.
mientras tanto, empezar a animar!
También puede disfrutar de:
5 Trucos para Crear un Libro Electrónico Más Atractivo
Truco genial: Crear Nombres de Personajes Dinámicos en Libros electrónicos
Cómo crear un libro electrónico interactivo: Una guía paso a paso
Cómo Optimizar Videos y Agregarlos a Su Libro electrónico
Imágenes