«

»

dic 19 2013

Crear GIFs animados de nuestra aplicación

Cada vez más, el diseño en Android se toma más y más en serio. Es una alegría ver cómo ha evolucionado el ecosistema en los últimos años. El buen gusto y el diseño cuidado ya no son una cosa exclusiva de la competencia, tanto usuarios como desarrolladores Android se van dando cuenta de que cuando las cosas se hacen bien, se nota. Y no sólo hablo de diseño gráfico, también de interacción. En general, experiencia de usuario.

Y con este incremento de dedicación, también se incrementan las ganas de enseñar el fruto de nuestro trabajo que tanto nos ha costado conseguir. A veces las capturas de pantalla se quedan cortas, una imagen estática no es capaz de expresarlo todo. Es por eso que últimamente vemos más tendencia por usar GIFs animados para mostrar la cara más dinámica de la aplicación. ¿Por qué? Porque son más fáciles de visualizar y compartir que un vídeo. Si los gatitos los usan para dominar el mundo, será por algo. Pero la pregunta que muchos nos hacemos es, ¿cómo los creamos? Hoy vamos a ver cómo. Y al final del tutorial os dejo un script para hacer todo el proceso con un único comando.

androcode_gifs

La idea de esta entrada viene a raíz de una publicación en Google+ de Javi Pacheco, en la que lanzaba la pregunta de cómo generar este tipo de imágenes y discutíamos algunas posibilidades. Aquí voy a explicar de forma más detallada el procedimiento al que acabé llegando para hacerlo. La idea base es sencilla: 1) Hacer un vídeo; 2) Extraer frames del mismo; y 3) Componer una imagen GIF a partir de ellos.

Grabar un vídeo

screenrecordHay varias formas de grabar un vídeo de la pantalla de nuestro móvil. El más directo y el que voy a contar es el añadido en Android 4.4 KitKat con el comando screenrecord. Si no disfrutáis aún de la última versión de Android, hay multitud de aplicaciones que permiten hacerlo según el dispositivo que tengas, pero aquí no entraremos en eso.

Con KitKat podemos grabar un vídeo de nuestra pantalla en un archivo mp4 mediante el comando adb shell screenrecord, y luego sacarlo al ordenador con adb pull. Para parar la grabación cancelamos el comando con Ctrl+C. Por ejemplo:

adb shell screenrecord /sdcard/video.mp4

adb pull /sdcard/video.mp4

O si sois más de interfaz gráfica que de consola, las versiones recientes de Android Studio incluyen un asistente muy sencillo de usar. Hacedlo como más os guste.

Extraer imágenes del vídeo

Para construir una animación, necesitamos sacar imágenes a partir del vídeo para componer el GIF. Tras indagar un poco, el método más sencillo que he podido observar es usar ffmpeg. Es un software, de código abierto, con el que se pueden hacer multitud de procesados de vídeos, y compatible con Windows, OSX, y Linux. Podéis ver cómo descargarlo e instalarlo para las diferentes plataformas aquí.

Una de las funciones que tiene es justo la que queremos, y se usa mediante el siguiente comando:

ffmpeg -i <archivo_entrada.mp4> -r <frames_por_segundo> -s <tamaño_imágenes> -f image2 img%3d.png

Por ejemplo:

ffmpeg -i videoapp.mp4 -r 7 -s 270x480 -f image2 frames/img%3d.png

Esto leerá el archivo de vídeo videoapp.mp4, sacará 7 imágenes por segundo a tamaño 270×480, y las guarda en un directorio llamado frames de la carpeta actual como img001.png, img002.png, etc… Cuanto menos imágenes por segundo y tamaño pongamos, menos pesará la animación final, pero peor calidad tendrá, busca tu equilibrio. Además, cuidado con dónde ejecutamos el comando y la ruta de salida que ponemos, porque por corto que sea el vídeo generará un mogollón de imágenes. Hacedlo en una carpeta recogidita, no en medio el escritorio. ;)

Construir el GIF animado

El último paso es hacer el propio GIF a partir de los frames extraídos. En mi caso personal, tras probar varios métodos, he decidido hacerlo con ImageMagick por tres motivos:

1) Es tremendamente fácil de usar.

2) El resultado es bastante bueno.

3) Con añadir un argumento al comando aplica distintas optimizaciones para reducir el tamaño final del gif automáticamente.

En su página web tenéis más información y las instrucciones de cómo instalarlo para diferentes sistemas operativos. Si tenéis problemas con el proceso podéis preguntar en los comentarios.

El comando para construir la animación se llama convert y se usa de la siguiente manera:

convert -layers Optimize -delay 1x7 frames/img*.png animacion.gif

Donde Optimize le indica que aplique optimización de transparencia y de Frame, delay establece el tiempo entre frames (como antes muestreamos a 7 frames por segundo, ahora le decimos que tarde 1 segundo cada 7 frames, para que vaya a la misma velocidad que el vídeo), el formato de la ruta de los archivos de entrada, y el nombre del archivo final.

Demostración GIF de SeviBus

¡Listo! Si lo hemos hecho bien ya tenemos nuestra animación GIF similar a la de arriba para enseñar. Podéis subirla a un servicio como Imgur.com, publicarla en Google+, o pasarla por Hangouts. Sed cuidadosos con el tamaño del archivo, especialmente si tenéis animaciones pesadas, no gasteis a lo loco la tarifa de datos de la pobre gente.

Automatizar el proceso

Como veis el proceso es bastante sencillo, teniendo las herramientas instaladas son sólo 2 comandos (si contar la captura de vídeo). Pero somos desarrolladores, ¡nacimos para facilitar las tareas manuales! No sería nada complicado meter ejecutar estos comandos mediante un script, y de manera los parámetros sean más fácilmente configurables.

Como dije al principio de la entrada, la idea de este artículo surgió a raíz de un post en Google+. Y el resultado original no fue esta entrada, sino un script para hacer lo que acabo de explicar. Lo escribí en Python, y lo publiqué en Gists para uso y disfrute de todo el mundo. No entraré en detalles, es bastante autoexplicativo y entendible por cualquiera que sepa escribir código (¡así es Python! :D). Lo tenéis aquí:

https://gist.github.com/Sloy/7813189

Ejecutad en la línea de comandos python video2gif.py y hará todo el proceso de conversión. Lo que sí incluye el script que no está explicado en este artículo es el proceso opcional (USE_DEVICE_FRAME = False) de insertar las capturas en una imagen de fondo, para que la animación se genere con el marco del móvil, porque dependerá del móvil que queráis usar, del tamaño de las capturas, etc. Como podéis ver se hace con el comando composite de ImageMagick y no es difícil de utilizar.

 

Espero que el tutorial y/o el script os sirvan para generar animaciones que muestren la parte más dinámica de vuestras aplicaciones. ¡Compartid con nosotros vuestros resultados en los comentarios! O si tenéis dudas o sugerencias sobre el proceso o el mismo script.

¡Bon appétit!

 

Acerca del autor

Rafa Vázquez

Estudio Ingeniería Informática del Software en Sevilla. Me considero geek sin dinero, amante y desarrollador novato de Android. He creado algunas aplicaciones como SeviBus, TicTacDroide, Kill Bieber y Traductor Hoygan, si es que se puede llamar aplicaciones a estas dos últimas ;) Ganas de aprender más y más no me faltan, e intentaré compartir mis experiencias con vosotros en la medida de lo posible.

  • jorge

    hola que tl e insertado un scroll en mi aplicacion android con android studio , pero quisiera que esas im

  • jorge

    hola que tl e insertado un scroll de imagenes en mi aplicacion android con android studio , pero quisiera que esas imagenes sean gif con movimiento .espero me puedas ayudar con este te,a, y gracias

  • http://twitter.com/ferdy182 Fernando F. Gallego (@ferdy182)

    Yo recomendaría usar webm, yo he reducido un vídeo de mi pantalla de 34 MB a solo 7MB pasándolo a webm sin pérdida de frames o calidad, he seguido los pasos indicados aquí https://thethemefoundry.com/blog/convert-mp4-to-webm/

  • http://www.victorgraciaweb.com victorgraciaweb

    ¿Que os parece mejor para desarrollar app en android, android studio vs sclipse?.
    Soy desarrollador de aplicaiones android y resido en Zaragoza, podéis visitar mi portfolio y dar vuestros consejos y opniones

    Saludos

    http://www.victorgraciaweb.com