Crear bootanimation desde un gif o jpg

vejamur

vejamur

Platino
12 Ago 2012
399
148
1.856
Villar del Arzobispo
Xiaomi Redmi Note 4
#1
Vamos a crear un bootanimation para nuestro lenovo A789 (aunque es extensible para otros terminales) desde un archivo gif o un conjunto de imágenes. Para ello y en primer lugar haremos un backup del que viene de fábrica y que se encuentra en system/media (hay que ser root).


CREAR BOOTANIMATION DESDE UN ARCHIVO GIF:

Vamos a necesitar:
- un archivo gif
- photoshop, u otro programa que nos permita gestionar la animación gif.
- el programa Boot Animation Factory, para visualizar y crear nuestro bootanimation


1. Archivo gif: Necesitamos un gif para nuestra animación. Hay que tener en cuenta la resolución de nuestra pantalla 480x800. Es preferible que sea igual, o incluso inferior. Lo digo porque en el caso de colocar imágenes un poco pesadas no se verá la animación, pues dará prioridad a la carga de android antes que a ella. No pasará nada, simplemente se verá pantalla en negro antes de salir la pantalla principal del SO.


2. Photoshop: Abriremos nuestro gif y pulsaremos en "Animación" de la pestaña "Ventana":
Crear bootanimation desde un gif o jpg 10870-da6cca61d44026129ddfa828167c4fa7.jpg

De esta manera veríamos en la parte inferior todas las imágenes que conforman el gif. También nos permitiría modificar o añadir elementos según gustos. Allá cada uno con su imaginación.

Ahora necesitaremos extraer todas las imágenes por separado a una carpeta. Pulsamos en "Archivo/Exportar/Interpretar vídeo":
Crear bootanimation desde un gif o jpg 10871-495f47f01bbc71f0e9b937921e1ad594.jpg

Aparecerá una nueva ventana en la que configuraremos como y donde se guardarán las imágenes:
Crear bootanimation desde un gif o jpg 10876-601c4207204f2d4512b4e4a81abacde4.jpg

- Ubicación:
+ Colocaremos la raíz del nombre que van a tener todas las imágenes. (ej: "anim", "b", "0" .... o cualquier otra)
+ Seleccionamos la carpeta donde se guardarán (es importante que esta carpeta se llame bootanimation, ya que la tendremos que utilizar después con ese nombre).
+ Dejaremos marcada la pestaña "Crear nueva subcarpeta" y le pondremos de nombre "part0". Esto se hace porque si la animación se compone de diferentes partes, tendremos que introducirlas en cada una de las diferentes subcarpetas. (luego lo entendemos mejor en el Boot Animation Factory).

- Opciones de archivo:
+ Marcaremos secuencia de imágenes "jpeg" (también podríamos marcar png). En Ajustes seleccionaremos la calidad del jpg. Como hemos dicho es conveniente no ponerla muy alta, porque podría no verse durante el arranque del móvil. Con un 5 sería suficiente, aunque si se ve muy pobre podéis subirla e ir probando.
+ Número de inicio: nomalmente se empieza desde el cero, salvo cuando hay más de una subcarpeta que pondremos el siguiente número desde el que se quedó en la subcarpeta anterior (ej: si en la subcarpeta "part0" la última imagen es anim45.jpg el número de inicio enla subcarpeta "part1" empezaría desde el 46).
+ En dígitos será el formato de los números que siguen a la raíz. Si hay menos de 100 con dos dígitos es suficientes, en caso contrario colocar 3.
+ Tamaño del documento. Marcaríamos como máximo la resolución de nuestra pantalla. En el ejemplo hemos dejado la original. Aquí podríamos variar la resolución de nuestras imágenes.

- Rango:
+ Dejamos marcado Todos los cuadros.

- Opciones de interpretación:
+ Aquí marcaremos los frames que se podrán ver por segundo. Lo normal es de 17 a 30. Esta opción la modificaremos en el Boot Animation Factory.


Tras pulsar "Interpretar" nos introducirá dentro de la subcarpeta creada en la carpeta bootanimation todas las imágenes de la animación.

Es importante comprobar que las imágenes no sean muy pesadas. Como orientación la animación de lenovo tiene imágenes de hasta casi 90 kb.


3. Boot Animation Factory

Tras instalarlo y abrirlo, pulsaremos en "Preview a new animation" , después en "Folder" y "OK".
Crear bootanimation desde un gif o jpg 10872-e217698088429b489c742f7946eb72ab.jpg

Se nos abrirá una nueva ventana donde pulsaremos "Choose folder" para indicarle donde está la carpeta bootanimation donde guardamos las imágenes. Veremos que se coloca una marca en verde que nos indica que la ha encontrado de forma correcta. (por ello en el paso anterior dijimos de ponerle el citado nombre).

Vemos en el cuadro de la derecha que nos marca la resolución y los frames por segundo de la animación. En el ejemplo tenemos que bajar los fps pues, si no, parece que a la chinita le ha entrado el baile San Bito. Aquí no es conveniente cambiar la resolución, no sé bien por qué, pero a veces me ha dado fallos en la animación. Mejor desde el photoshop.

Pulsamos sobre la resolución para marcarla en azul y después en "Edit" ( en el ejemplo lo colocamos a 10) y pulsamos "Set":
Crear bootanimation desde un gif o jpg 10873-a19c81fb0fc7a45c83b5e7a0eb667db9.jpg

Ahora vamos a incluir la subcarpeta o subcarpetas en la animación. Pulsamos en "Add a loop"
Crear bootanimation desde un gif o jpg 10866-d1586046f879f44a4a051f547275a470.jpg

En el listado elegiremos la subcarpeta; en este caso "part0".
"Set number of loop" pondremos las veces que se repetirá la animación de esta subcarpeta. Si queremos que se reproduzca de forma contínua pondremos cero "0".
El "delay" es el retraso entre subcarpetas medido en milisegundos. En principio lo dejamos como está.
Tras esto pulsamos "Add".

Podemos añadir más subcarpetas, ej: "part1". Ej: "...quiero una barra de carga (imágenes en part0) y tras tres repeticiones que quede fija una imagen (part1) hasta que finalice la carga del sistema..."
No tiene sentido añadir muchas pues no se verían ya que cargaría antes el SO, no dando tiempo a ver animaciones excesivamente largas.

Si pulsamos en "preview boot animation" podremos ver como se verá la animación en nuestro móvil. Si no nos gusta la velocidad, podemos editar de nuevo los fps y cambiarlos hasta conseguir lo que buscamos.

Si pulsamos "Save boot animation" nos dirá donde queremos guardar el archivo zip con la animation y configuración escogidas.


4. Instalación del bootanimation:

Siendo root, este archivo hay que colocarlo en la ruta: system/media dándole los permisos correspondientes:
Crear bootanimation desde un gif o jpg 10867-fb0fb9129aaec0299b1f906dda96803d.jpg

Reiniciad y ya podremos ver nuestro nuevo bootanimation!!

Nota:
En caso de no poder verlo (pantalla en negro) observaremos el tamaño de nuestras imágenes, podrían ser excesivamente pesadas.
Si vemos que sólo se ve una parte de las imágenes, puede ser que hayamos introducido una resolución superior a la de nuestro dispositivo, sólo se verá la parte de la imagen hasta los 480x800 px.
Se puede introducir sonidos, aunque yo personalmente no lo he probado.



CREAR BOOTANIMATION DESDE ARCHIVOS JPG:


Si disponemos de un grupo de imágenes que queremos que formen nuestra animación, las nombraremos ej. Raíz+número (ej: "anim001","anim002",...) siguiendo el orden de aparición que escojamos.

A tener en cuenta como siempre la resolución, que podremos cambiar con un editor de imágenes, y su tamaño (inferior a 90 kb, preferiblemente)

Crearemos una carpeta llamada "animation" y una subcarpeta en su interior llamada "part0". En ésta última introduciremos las imágenes.

Se podría crear otra subcarpeta "part1" con otro grupo de imágenes o una sola que realice otro patrón de repetición.

Cuando tengamos la imágenes seguiremos con el Boot Animation Factory del apartado anterior y su posterior instalación (paso 3 y 4).



Añado un pequeño videotuto:


PD: AQUÍ podéis descargaros el bootanimation del ejemplo.

Un saludo, au!

Crear bootanimation desde un gif o jpg bootanimation5-jpg.14611


Crear bootanimation desde un gif o jpg permisosk-jpg.14612


Crear bootanimation desde un gif o jpg bootanimationa-jpg.14619


Crear bootanimation desde un gif o jpg bootanimation1-jpg.14620


Crear bootanimation desde un gif o jpg bootanimation3-jpg.14621


Crear bootanimation desde un gif o jpg bootanimation4-jpg.14622


Crear bootanimation desde un gif o jpg bootanimation2-jpg.14625
 
Última edición por un moderador:
jimymoto

jimymoto

Diamante
7 Nov 2012
7.931
31
3.542
43
navarra
X310E,Cubot GT99
#2
Vamos a crear un bootanimation para nuestro lenovo A789 (aunque es extensible para otros terminales) desde un archivo gif o un conjunto de imágenes. Para ello y en primer lugar haremos un backup del que viene de fábrica y que se encuentra en system/media (hay que ser root).


CREAR BOOTANIMATION DESDE UN ARCHIVO GIF:

Vamos a necesitar:
- un archivo gif
- photoshop, u otro programa que nos permita gestionar la animación gif.
- el programa Boot Animation Factory, para visualizar y crear nuestro bootanimation


1. Archivo gif: Necesitamos un gif para nuestra animación. Hay que tener en cuenta la resolución de nuestra pantalla 480x800. Es preferible que sea igual, o incluso inferior. Lo digo porque en el caso de colocar imágenes un poco pesadas no se verá la animación, pues dará prioridad a la carga de android antes que a ella. No pasará nada, simplemente se verá pantalla en negro antes de salir la pantalla principal del SO.


2. Photoshop: Abriremos nuestro gif y pulsaremos en "Animación" de la pestaña "Ventana":
Ver el adjunto 14619

De esta manera veríamos en la parte inferior todas las imágenes que conforman el gif. También nos permitiría modificar o añadir elementos según gustos. Allá cada uno con su imaginación.

Ahora necesitaremos extraer todas las imágenes por separado a una carpeta. Pulsamos en "Archivo/Exportar/Interpretar vídeo":
Ver el adjunto 14620

Aparecerá una nueva ventana en la que configuraremos como y donde se guardarán las imágenes:
Ver el adjunto 14625

- Ubicación:
+ Colocaremos la raíz del nombre que van a tener todas las imágenes. (ej: "anim", "b", "0" .... o cualquier otra)
+ Seleccionamos la carpeta donde se guardarán (es importante que esta carpeta se llame bootanimation, ya que la tendremos que utilizar después con ese nombre).
+ Dejaremos marcada la pestaña "Crear nueva subcarpeta" y le pondremos de nombre "part0". Esto se hace porque si la animación se compone de diferentes partes, tendremos que introducirlas en cada una de las diferentes subcarpetas. (luego lo entendemos mejor en el Boot Animation Factory).

- Opciones de archivo:
+ Marcaremos secuencia de imágenes "jpeg" (también podríamos marcar png). En Ajustes seleccionaremos la calidad del jpg. Como hemos dicho es conveniente no ponerla muy alta, porque podría no verse durante el arranque del móvil. Con un 5 sería suficiente, aunque si se ve muy pobre podéis subirla e ir probando.
+ Número de inicio: nomalmente se empieza desde el cero, salvo cuando hay más de una subcarpeta que pondremos el siguiente número desde el que se quedó en la subcarpeta anterior (ej: si en la subcarpeta "part0" la última imagen es anim45.jpg el número de inicio enla subcarpeta "part1" empezaría desde el 46).
+ En dígitos será el formato de los números que siguen a la raíz. Si hay menos de 100 con dos dígitos es suficientes, en caso contrario colocar 3.
+ Tamaño del documento. Marcaríamos como máximo la resolución de nuestra pantalla. En el ejemplo hemos dejado la original. Aquí podríamos variar la resolución de nuestras imágenes.

- Rango:
+ Dejamos marcado Todos los cuadros.

- Opciones de interpretación:
+ Aquí marcaremos los frames que se podrán ver por segundo. Lo normal es de 17 a 30. Esta opción la modificaremos en el Boot Animation Factory.


Tras pulsar "Interpretar" nos introducirá dentro de la subcarpeta creada en la carpeta bootanimation todas las imágenes de la animación.

Es importante comprobar que las imágenes no sean muy pesadas. Como orientación la animación de lenovo tiene imágenes de hasta casi 90 kb.


3. Boot Animation Factory

Tras instalarlo y abrirlo, pulsaremos en "Preview a new animation" , después en "Folder" y "OK".
Ver el adjunto 14621

Se nos abrirá una nueva ventana donde pulsaremos "Choose folder" para indicarle donde está la carpeta bootanimation donde guardamos las imágenes. Veremos que se coloca una marca en verde que nos indica que la ha encontrado de forma correcta. (por ello en el paso anterior dijimos de ponerle el citado nombre).

Vemos en el cuadro de la derecha que nos marca la resolución y los frames por segundo de la animación. En el ejemplo tenemos que bajar los fps pues, si no, parece que a la chinita le ha entrado el baile San Bito. Aquí no es conveniente cambiar la resolución, no sé bien por qué, pero a veces me ha dado fallos en la animación. Mejor desde el photoshop.

Pulsamos sobre la resolución para marcarla en azul y después en "Edit" ( en el ejemplo lo colocamos a 10) y pulsamos "Set":
Ver el adjunto 14622

Ahora vamos a incluir la subcarpeta o subcarpetas en la animación. Pulsamos en "Add a loop"
Ver el adjunto 14611

En el listado elegiremos la subcarpeta; en este caso "part0".
"Set number of loop" pondremos las veces que se repetirá la animación de esta subcarpeta. Si queremos que se reproduzca de forma contínua pondremos cero "0".
El "delay" es el retraso entre subcarpetas medido en milisegundos. En principio lo dejamos como está.
Tras esto pulsamos "Add".

Podemos añadir más subcarpetas, ej: "part1". Ej: "...quiero una barra de carga (imágenes en part0) y tras tres repeticiones que quede fija una imagen (part1) hasta que finalice la carga del sistema..."
No tiene sentido añadir muchas pues no se verían ya que cargaría antes el SO, no dando tiempo a ver animaciones excesivamente largas.

Si pulsamos en "preview boot animation" podremos ver como se verá la animación en nuestro móvil. Si no nos gusta la velocidad, podemos editar de nuevo los fps y cambiarlos hasta conseguir lo que buscamos.

Si pulsamos "Save boot animation" nos dirá donde queremos guardar el archivo zip con la animation y configuración escogidas.


4. Instalación del bootanimation:

Siendo root, este archivo hay que colocarlo en la ruta: system/media dándole los permisos correspondientes:
Ver el adjunto 14612

Reiniciad y ya podremos ver nuestro nuevo bootanimation!!

Nota:
En caso de no poder verlo (pantalla en negro) observaremos el tamaño de nuestras imágenes, podrían ser excesivamente pesadas.
Si vemos que sólo se ve una parte de las imágenes, puede ser que hayamos introducido una resolución superior a la de nuestro dispositivo, sólo se verá la parte de la imagen hasta los 480x800 px.
Se puede introducir sonidos, aunque yo personalmente no lo he probado.



CREAR BOOTANIMATION DESDE ARCHIVOS JPG:


Si disponemos de un grupo de imágenes que queremos que formen nuestra animación, las nombraremos ej. Raíz+número (ej: "anim001","anim002",...) siguiendo el orden de aparición que escojamos.

A tener en cuenta como siempre la resolución, que podremos cambiar con un editor de imágenes, y su tamaño (inferior a 90 kb, preferiblemente)

Crearemos una carpeta llamada "animation" y una subcarpeta en su interior llamada "part0". En ésta última introduciremos las imágenes.

Se podría crear otra subcarpeta "part1" con otro grupo de imágenes o una sola que realice otro patrón de repetición.

Cuando tengamos la imágenes seguiremos con el Boot Animation Factory del apartado anterior y su posterior instalación (paso 3 y 4).



Un saludo, au!

Muy buen tuto!!! pero cuidado que no se si le gustara a @pauete que vayas por ahi con su chinita :XD:
 
Última edición por un moderador:
pauete

pauete

Diamante
12 May 2010
9.186
1.280
4.967
#3
Última edición por un moderador:
vejamur

vejamur

Platino
12 Ago 2012
399
148
1.856
Villar del Arzobispo
Xiaomi Redmi Note 4
#4
Que tendrá la chinita de @pauete,:grin:

Ya le dije que a más de uno le gustaría tenerla en el bolsillo.

Un saludo, au!
 
Última edición por un moderador:
pauete

pauete

Diamante
12 May 2010
9.186
1.280
4.967
#5
Yo utilizé un programita llamado "GifSplitter" para descompilar el gif en las distintas imágenes de las q está compuesto.
Convertí todas de .bmp a .jpg y las renombre numéricamente con el mismo literal que había visto en otro bootanimation.
Crear bootanimation desde un gif o jpg 10904-50b455db6610c71b288e48c7c6fa4768.jpg

Todas esas imágenes van en la carpeta "part0" y lo que permite el Boot Animation Factory es crear el txt que las mueve.
Es cierto q según cómo, si modificas el tamaño de las imágenes en el txt (p.e. a 480x800) el bootanimation no se reproduce y la pantalla se muestra en negro.

Crear bootanimation desde un gif o jpg 2013-04-09_1647-jpg.14658
 
pauete

pauete

Diamante
12 May 2010
9.186
1.280
4.967
#7
Que currado, gracias @vejamur :wink:

Enviado desde mi GT-I9100 usando Tapatalk 2
 
Última edición por un moderador:
pauete

pauete

Diamante
12 May 2010
9.186
1.280
4.967
#8
Última edición por un moderador:
pauete

pauete

Diamante
12 May 2010
9.186
1.280
4.967
#10
@chaskaman, este hilo debería tener chincheta en Taller Android
Qué te parece?
 
Última edición por un moderador:

¿Qué tecnología no debe faltar en tu próximo móvil?

  • NFC

    Votos: 181 46,3%
  • Carga inalámbrica

    Votos: 141 36,1%
  • Carga ultra rápida

    Votos: 225 57,5%
  • 5G

    Votos: 171 43,7%
  • Al menos 3 cámaras principales

    Votos: 112 28,6%
  • Sensor TOF

    Votos: 70 17,9%
  • Lector de huellas

    Votos: 204 52,2%
  • USB tipo C

    Votos: 209 53,5%
  • Bluetooth

    Votos: 188 48,1%
  • Pantalla flexible

    Votos: 34 8,7%

Miembros conectados

  • phgodts
  • cjsegninir
  • kirkil
  • Karburo
  • joselinde
  • Filipo
  • ktulu69
  • 666 Rojo
  • Chitdodro
  • leocampos77
  • pripri
  • dyubero
  • arditurri
  • tomasheras
  • conair
  • anzoni34
  • blanchboy
  • Raúl soto
  • Jsoft
  • enrique.monfort
... y 31 más.